datamaps-custom-marker
A datamaps plugin for custom map markers
Stars
6
Ecosystems:
JavaScript
datamaps-custom-marker
A datamaps plugin for custom map markers.
Installation
Include this file:
<script src="/datamaps.markers.js"></script>
Usage
// Build map.
var map = new Datamap({
element: document.getElementById('map'),
scope: 'world',
geographyConfig: {
highlightOnHover: true,
popupOnHover: false
}
});
// Add the custom markers plugin.
map.addPlugin('markers', Datamap.customMarkers);
// Add markers with the `icon` config. Specify the `url, width and height` properties.
var options = {
fillOpacity: 1,
popupOnHover: true,
icon: {
url: '/path/to/icon.png',
width: 20,
height: 20
}
};
map.markers([
{name: 'foo', radius: 10, latitude: 50.17, longitude: 78.41},
{name: 'bar', radius: 10, latitude: 60.23, longitude: 63.13},
{name: 'baz', radius: 10, latitude: 70.11, longitude: 82.76}
], options);
Based on @markmarkoh's work here.