Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/metamediatechnology/markercluster-longdo-map
MarkerCluster for Longdo Map
https://github.com/metamediatechnology/markercluster-longdo-map
Last synced: about 1 month ago
JSON representation
MarkerCluster for Longdo Map
- Host: GitHub
- URL: https://github.com/metamediatechnology/markercluster-longdo-map
- Owner: MetamediaTechnology
- License: apache-2.0
- Created: 2019-09-24T09:21:39.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-09-06T08:15:50.000Z (over 1 year ago)
- Last Synced: 2023-09-06T09:29:48.831Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 6.06 MB
- Stars: 0
- Watchers: 6
- Forks: 5
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# markercluster-longdo-map
## Description
markercluster plugin for Longdo Map
## Demo
* [Demo1(sample)](https://metamediatechnology.github.io/longdo-map-markercluster/demo.html)
* [Demo2(Restaurants(data provided from Longdo))](https://metamediatechnology.github.io/longdo-map-markercluster/demo2.html)
* [Demo3(style-changable)](https://metamediatechnology.github.io/longdo-map-markercluster/demo3.html)
* [Demo65000(randomy generated 65000 locations)](https://metamediatechnology.github.io/longdo-map-markercluster/demo65000.html)
## Reference
This plugin originates from [Markerclusterer for Google Map V3](https://github.com/googlemaps/v3-utility-library/tree/master/markerclusterer) & [Leaflet.Markercluster](https://github.com/Leaflet/Leaflet.markercluster).
## License
[Apache License Version 2.0](http://www.apache.org/licenses/LICENSE-2.0)
## For Developers
### How to use
#### 1. Load longdo API and then load the plugin js & css
```html
```
**You can skip loading css file if you are going to use your own cluster icons.**
#### 2. Instantiate Longdo Map and Markercluster
```js
map = new longdo.Map({
placeholder: document.getElementById('map'),
language: 'en',
});
markercluster = new lmc.MarkerCluster(map,
{
minClusterSize:2,
});
```
#### 2-A. If you'd like to use your own cluster icons...
```js
var styles = [{
url: "./m2.png",
width: 55,
height: 55,
minThreshold:10
},{
url: "./m3.png",
width: 65,
height: 65,
minThreshold:30
},{
url: "./m1.png",
width: 52,
height: 52,
minThreshold:0
}];
markercluster = new lmc.MarkerCluster(map,
{
minClusterSize:2,
styles: styles
});
```
#### 3. create longdo.Marker and add to the Markercluster instance
```js
markercluster.addMarkers(new longdo.Marker({lat: 0,lon:0},{}));
```
**Remember to run this code after loading icon image if you'd like to use your own marker icons**
#### 3-A. If you'd like to change marker icon...
```js
var img = new Image();
img.onload = function(){
markercluster.addMarkers(new longdo.Marker({lat: lat,lon:lon},{
icon:{
url: 'https://map.longdo.com/mmmap/images/pin_mark.png',
offset: { x: 12, y: 45 },
size: {width: 24, height: 45}
}
}));
}
img.src = 'https://map.longdo.com/mmmap/images/pin_mark.png';
```
#### 4. Run render() method.
```js
markercluster.render();
```
**If you add many markers, it takes some time to render.**
### API documentation
#### class Markercluster
##### Constructor
|constructor|description|
|--|--|
|Markercluster(map:longdo.Map,option:Object)||
##### Methods
|Methods|Return value|Description|
|--|--|--|
|addMarkers(markers:longdo.Marker or Array\)|void|add marker(s) to the plugin's management|
|render()|void|start rendering if it is ready.|
|resetViewport()|void|remove all markers & clusters from the map|
|clearMarkers()|void|remove all markers from the plugin's management|
|removeMarker(marker:longdo.Marker)|boolean|remove the marker from cluster & render, returning success|
|removeMarkers(markers:Array\)|boolean|remove markers from clusters & render, returning success|
##### Options
|Name|Type|Default value|Description|
|--|--|--|--|
|gridSize|number|120|the pixel size of cluster grid|
|maxZoom|number|null|maximum zoom level in which clustering is enabled|
|averageCenter|boolean|false|Whether the center of each cluster should be the accurate average of markers|
|minClusterSize|number|2|the minimum number of markers in each cluster|
|styles|Array\|null|design of cluster icons|
|swarmModeEnabled|boolean|false|Whether swarm mode is enabled(under development)|
|swarmAlg|number|null|null|swarming algorithm 1 or 2|
|swarmGridLength|number|null|length of grid in swam mode 1|
|swarmMarkersMaxLimit|number|null|Maxmimum number of showing markers in each cluster in swarm mode|
|swarmMarkersAmountAdjust|boolean|false|if true, dynamic MaxLimit below is enabled in swarm mode 2|
|swarmMarkersMaxAmountPerTile|number|null|Maximum number of markers to show in swarm mode|
|swarmMarkersConstPerGrid|number|null|number per markers in grid to show in swarm mode 1|
#### cluster styles
|Name|Type|Description|
|--|--|--|
|url|string|URL of icon image|
|width|number|width of the image|
|height|number|height of the image|
|minThreshold|number|the minimum number of markers in each cluster to which apply the design|
## Build the plugin
If you'd like to build the plugin, you are required to install Node.js & webpack & more packages. When the install's done, run npm build script.