Back

Location nodes at manually defined coordinates

JavaScript map chart with location markers. The nodes are displayed as an additional 'layer' on top of the map background, and the node coordinates (in DD notation) are referenced from 'data'.

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

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

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 
chart= new GeoChart({
    "layers": [
        {
            "name": "Points",
            "type": "items",
            "style": {
                "nodeStyleFunction": function (node) {
                        node.label = node.data.id;
                    },
                "node": {
                    "fillColor": "#2fc32f",
                    "lineColor": "#b0dc0b",
                    "lineWidth": 2,
                    "display": "droplet"
                },
                "nodeLabel": {
                    "backgroundStyle": {
                        "fillColor": "#eab404"
                    },
                    "textStyle": {
                        "fillColor": "#de672c"
                    }
                }
            }
        }
    ],
    "navigation": {
        "initialLat": 35.04409,
        "initialLng": -90.246213,
        "initialZoom": 4,
        "minZoom": 4
    },
    "advanced": {
        "pointer": {
            "noClickOnDoubleClick": false
        }
    },
    "background": {
        "enabled": true,
        "type": "tile",
        "url": "https://maps.zoomcharts.com/{z}/{x}/{y}.png",
        "params": {
            "attribution": "\u00a9 <a target=\"_blank\" href=\"https://www.openstreetmap.org/copyright\"\\>OpenStreetMap</a> contributors"
        }
    },
    "container": "demo",
    "data": [
        {
            "url": "/dvsl/data/extra/just-points-on-map.json",
            "perBoundsData": false
        }
    ],
    "interaction": {
        "resizing": {
            "enabled": false
        }
    }
})

Data

Data 
{
    "nodes": [
        {
            "id": "Squaw Valley",
            "coordinates": [
                -119.181449,
                36.707146
            ]
        },
        {
            "id": "Atlanta",
            "coordinates": [
                -84.388846,
                33.752504
            ]
        },
        {
            "id": "New York",
            "coordinates": [
                -73.996705,
                40.74838
            ]
        },
        {
            "id": "Lake Placid",
            "coordinates": [
                -81.364918,
                27.294474
            ]
        }
    ],
    "links": []
}
Download Data