Point-map
An elegant global view map.
Usage
1. Install
You can use this library through NPM, Javascript <Script> tag from CDN.
1.1 NPM
Use NPM install package
npm install point-mapimport it in your .js file
import PointMap from 'point-map'1.2 Script
<script src="https://unpkg.com/point-map/dist/mymap.min.js" crossorigin></script>Hello World
<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>Interfaces
PointMap(elementID)
Create an point map instances by given a DOM's id.
Example:
new PointMap('map');PointMap.addEvent(EventObject)
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]
})PointMap.addEvents([EventPoints])
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]
}
])PointMap.on(EventName, CallbackFunction)
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')
}
});
PointMap.remove(EventName, EventFunction)
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);