If you do not see the map you are looking for you can still use it with ZingChart! For example we do not have any maps with cities or counties. Our maps only support countries and states. You can hook up custom map files for cities with Geo JSON. To do this you will need to:

  1. load maps-geojson module
  2. use the .loadGeoJSON method to render the chart
zingchart.loadModules('maps, maps-geojson', function (e) { //Required. Load the maps-geojson module.
zingchart.maps.loadGeoJSON({ //Required. Add the loadGeoJSON() method.
id: 'customMapName', //Required. Provide the id name, which will correspond to the name below.
url: 'https://storage.googleapis.com/zingchart-com.appspot.com/maps/sd-boundaries.json', //Required. Provide the GeoJSON file source.
//Source: https://github.com/blackmad/neighborhoods/blob/master/gn-san-diego.geojson?short_path=c5454cc
mappings: { //Recommended. Allows you to property names from the GeoJSON file to ZingChart.
id: 'name',
name: 'name'
},
style: { //Optional.
},
callback: function () { //Recommended. Use the function to render the map.
zingchart.render({
id: 'myChart',
data: {
shapes: [{
type: 'zingchart.maps',
options: {
name: 'customMapName', //This corresponds with the id above.
style: {
controls: {
visible: false
},
label: {
visible: false
},
items: {
PACIFIC_BEACH: {
backgroundColor: 'red',
label: {
visible: true
}
}
}
},
zoom: false,
zooming: false,
panning: false,
}
}]
},
height: '100%',
width: '100%'
});
}
});
});

Note: You can typically find any Geo JSON map configurations on github or searching the web.

Related Documentation

Did this answer your question?