An elegant global view map.
You can use this library through NPM, Javascript <Script> tag from CDN.
Use NPM install package
npm install point-mapimport it in your .js file
import PointMap from 'point-map'<script src="https://unpkg.com/point-map/dist/mymap.min.js" crossorigin></script><html>
<head>
<title>Point-map demo</title>
<script src="https://unpkg.com/point-map/dist/pointmap.min.js" crossorigin></script>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// Create an instance
let map = new PointMap('map');
// Add event points
map.addEvents([{
name: '上海',
coordinate: [121.47, 31.233]
}, {
name: '北京',
coordinate: [116.41, 39.90]
}]);
// regiest events
map.on('mousemove', function(e, data) {
console.log(data);
})
</script>
</body>
</html>Create an point map instances by given a DOM's id.
Example:
new PointMap('map');Add a event point on the map.
EventObject.name [String] The name of the point, Could be anything.
EventObject.coordinate [Array] The Latitude and longitude of the point [Latitude, Longitude]
EventObject[others] [Any] Other Customer propertis of the point;
Example:
map.addEvents({
name: 'Shanghia',
coordinate: [121.47, 31.233]
})Add many event points on the map, This is a short cut of the PointMap.addEvent.
Example:
map.addEvents([
{
name: 'Shanghia',
coordinate: [121.47, 31.233]
},
{
name: 'Beijing',
coordinate: [116.41, 39.90]
}
])Add an event on the map.
EventName [String] the event name could be mousemove,click
CallbackFunction(event, Pointinfo) When the event trigger, the 1st param is the DOM event, The 2nd param is object of the customer Point info.
Examples:
let map = new PointMap('map');
// Add event points
map.addEvents({
name: '上海',
coordinate: [121.47, 31.233]
});
map.on('mousemove', function(e, data) {
if (data) {
console.log('you are move into a customer Event', data)
} else {
console.log('you are not on a custome')
}
});
Remove an event on the map.
EventName [String] the event name
EventFunction The function Which we add to the map
Examples:
let map = new PointMap('map');
// Add event points
map.addEvents({
name: '上海',
coordinate: [121.47, 31.233]
});
const fn = (e,data)=>{console.log('you are moving')};
map.on('mousemove', fn);
map.remove('mousemove', fn);
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent