altizure-plugin-markercluster

v0.0.2

Published

2 years ago

altizure sdk MarkerCluster Plugin

Downloads

0High
0Medium
0Low

jingbo

npm (tag) npm bundle size

npm dev dependency version

npm peer dependency version

MarkerCluster

This npm module is for public distribution of the plugin.

usage

This plugin needs altizure defined.

import & create

in js

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
    })

in html

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>

parameter

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.

function

add

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

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

Start clustering

MarkerCluster.start()

pause

If you want to remove or add tags that participate in clustering, please pause the cluster

MarkerCluster.pause()

show

Control the model is shown or hidden

MarkerCluster.show()

hide

Control the model is shown or hidden

MarkerCluster.hide()

Compatibility

| Browser | Chrome | IE 11 | Firefox| Edge | Safari | Opera | QQ | UC | Sogou | 360 Extreme | 2345 | | ------ | :------: | :------: | :------: | :------: | :------: |:------: | :------: | :------: |:------: | :------: |:------: | :------: | | Icon | Chrome | | Firefox | Edge | Safari | Opera | | | Sogou | 360 | 2345 | | Compatibility | support | not support | support | support | support | support | support | support | support | support | support |