Back

Droplet shapes and custom map

Use droplets shapes to enhance item position.

Use "background" to specify a custom map tile source with custom style.

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML 
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>

<p>Use "background" to specify a custom map tile source with custom style.</p>
<div id="demo"></div>

CSS

CSS 
.DVSL-leaflet {
            background-color: #1E3843 !important; /* Masking of a Leaflet+Chrome bug */
        }

JavaScript

JavaScript 

    var options = {
        area: { height: null },
        container: "demo",
        data: [
            {
                id: "defaults",
                url: "/dvsl/data/geo-chart/USA-largest-capitals.json",
                perBoundsData: false
            }
        ],
        background: {
            url: "https://maps.zoomcharts.com/{z}/{x}/{y}.png"
        },
        layers: [
            {
                id: "defaults",
                type: "items",
                data: {
                    id: "defaults"
                },
                style: {
                    node: {
                        fillColor: "#f6d94e",
                        lineColor: "#ecca08",
                        display: "droplet",
                        radius: 10
                    },
                    nodeStyleFunction: function (node) {
                        node.label = node.data.name;
                        node.labelStyle.backgroundStyle.fillColor = "#0099cc";
                        node.labelStyle.backgroundStyle.lineColor = "#1b2327";
                        node.labelStyle.padding = 1;
                        node.labelStyle.borderRadius = 10;
                    },
                    selection: {

                    }
                }
            }
        ],
        navigation: {
            initialLat: 40.04409,
            initialLng: -100.246213,
            initialZoom: 4,
            minZoom: 4
        }
    };

    var chart = new GeoChart(options);

Data

Data 
//No separate data for this example