This npm module is for public distribution of the plugin.
This plugin needs altizure
defined.
This plugin has to be used together with the altizure
module. Make sure altizure
is in your dependencies (or devDependencies) list in package.json
file.
import {Sandbox} from 'altizure'
import MarkerClusterPlus from 'altizure-plugin-markercluster'
let sandbox = new Sandbox('page-content')
let cluster = new MarkerClusterPlus({
sandbox: sandbox,
// visualizeProperty: 'visualizeWeight',
textStyle: {
fillStyle: 'rgb(255, 45, 45)',
font: 'normal 500 40px Arial',
margin: 5,
outlineWidth: 2,
outlineStyle: 'rgb(249, 249, 0)'
},
pinLength: 20,
scale: 2,
// clustersRange:30
})
Include altizure-sdk.min.js
before this plugin.
<head>
<script type="text/javascript" src="https://unpkg.com/altizure/release/altizure-sdk.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/altizure-plugin-markercluster"></script>
</head>
<body>
<script>
let sandbox = new altizure.Sandbox('page-content')
var cluster = new altizure.MarkerClusterPlus({
sandbox: sandbox,
// visualizeProperty: 'visualizeWeight',
textStyle: {
fillStyle: 'rgb(255, 45, 45)',
font: 'normal 500 40px Arial',
margin: 5,
outlineWidth: 2,
outlineStyle: 'rgb(249, 249, 0)'
},
pinLength: 20,
scale: 2,
// clustersRange:30
})
</script>
</body>
sandbox: Altizure sandbox
visualizeProperty: Display mode, we have two display mode now, the first one is 'normal', this is the default mode, the cluster will show the number of the tags;the second one is 'visualizeWeight', the cluster will show the sum of the 'visualizeWeight' attribute of the tags.
textStyle: style of the cluster tags
pinLength: pin length of the cluster tags
scale: scale of the cluster tags
clustersRange: clustering range, default is 30.
Add tags into MarkerCluster
MarkerCluster.add(tag)
When the clustering start, you need to pause the MarkerCluster first,then add or remove tags, finally, start again
Remove tags from MarkerCluster
MarkerCluster.remove(tag)
When the clustering start, you need to pause the MarkerCluster first,then add or remove tags, finally, start again
Start clustering
MarkerCluster.start()
If you want to remove or add tags that participate in clustering, please pause the cluster
MarkerCluster.pause()
Control the model is shown or hidden
MarkerCluster.show()
Control the model is shown or hidden
MarkerCluster.hide()
| Browser | Chrome | IE 11 | Firefox| Edge | Safari | Opera | QQ | UC | Sogou | 360 Extreme | 2345 | | ------ | :------: | :------: | :------: | :------: | :------: |:------: | :------: | :------: |:------: | :------: |:------: | :------: | | Icon | | | | | | | | | | | | | Compatibility | | | | | | | | | | | |