Icontem

JS Marker Clusterer Helper: Display markers on a map that may show as clusters

Recommend this page to a friend!
  Info   View files Example   View files View files (30)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2018-01-31 (1 year ago) RSS 2.0 feedNot yet rated by the usersTotal: 15 All time: 534 This week: 16Up
Version License JavaScript version Categories
markerclustererhelpe 1.0MIT/X Consortium ...5HTML, Geography
Description Author

This package can display markers on a map that may show as clusters.

It can display a map inside a given page element using the Google Maps API.

The map may show markers that may be clustered and show a single marker when markers that are grouped are very close to each other.

  Performance   Level  
Name: Andras Toth <contact>
Classes: 22 packages by
Country: Hungary Hungary
Innovation award
Innovation award
Nominee: 15x

Winner: 9x

Details

MarkerClustererHelper

N|Link

MarkerClusterer Helper help to you to create markerclusterer map in a five minutes.

- Simple initilazation - Simple configuration - You can manage multiple maps

N|Icon

Version

1.0.0 - 2017-12-19

Initilazation - html -Javascript

<div id="map" style="height: 480px;width:500px;position: relative;overflow: hidden;"></div>

<script type="text/javascript" src="js/markerClustererHelper.js"></script>
<script type="text/javascript"">
function init() {
    var options = {
        service: {
            url: 'locations.txt', // required JSON array from file or service
        }
    };
    MarkerClustererHelper.create(options);
}
</script>
<script type="text/javascript" src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script type="text/javascript" async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=init"></script>

Object structure

var location = {
	// number: unique identity
    id: 0,
    // number: assigned to images => options.imagePath 'p' + type + '.png' (marker groups: options.imagePath m1.png, m2.png ...)
    type: 0, 
    // latitude  
    lat: 0,
    // longitude
    lng: 0,
    /*
        your properties
    */
};

Default options

var def = {
    selector: '#map',
    imagePath: 'img/',
    service: {
        url: 'locations.txt',
        token: {
            name: '',
            value: ''
        }
    },
    defaultCountry: '',
    zoom: 7,
    maxZoom: 14,
    gridSize: 60,
    onLoaded: function(helper) {},
    onMarkerClicked: function(location) {},
    onMarkerHover: function(location) {
        return ['<h3 style="display: initial;">id: ', location.id, '</h3><div>type: ', location.type, '</div><div>lat: ', location.lat, '</div><div>lng: ', location.lng, '</div>'].join('');
    },
    onBoundsChnaged: function() {},
    onError: function(e) {
        console.error(e);
    }
}

Usage - methods

// create map
MarkerClustererHelper.create(options); 
// destroy map - identity: index or queryselector for map 
MarkerClustererHelper.destroy(identity);
// get helper for map - identity: index or queryselector for map 
MarkerClustererHelper.map(identity);
// set center on map arg: string Country name or City name etc. or index (location.id) or lat-lng object
MarkerClustererHelper.map(identity).setCenter(arg);
// set zoom number
MarkerClustererHelper.map(identity).setZoom(arg);
// select location, arg: location.id
MarkerClustererHelper.map(identity).setSelected(arg);
// clear selected state
MarkerClustererHelper.map(identity).clearSelected();
MarkerClustererHelper.map(identity).redraw();
// clear all locations from map
MarkerClustererHelper.map(identity).clear();
// reload 
MarkerClustererHelper.map(identity).reload();
// load more, based on service opject: service: {url: 'URL', (optional)token: { name: '', value: '' } } or location array
MarkerClustererHelper.map(identity).load(service);
// returns locations array
MarkerClustererHelper.map(identity).getLocations();
// returns visible locations array
MarkerClustererHelper.map(identity).getVisibleLocations();
// returns helper options
MarkerClustererHelper.map(identity).options;

License

MIT

Author: Tóth András

http://atandrastoth.co.uk/

  Files folder image Files  
File Role Description
Files folder imageimg (11 files)
Files folder imageimg2 (12 files)
Files folder imagejs (2 files)
Accessible without login Plain text file index.html Example Example page
Accessible without login Plain text file LICENSE Lic. License text
Accessible without login Plain text file locations.txt Doc. Documentation
Accessible without login Plain text file locations2.txt Doc. Documentation
Accessible without login Plain text file README.md Doc. Documentation

  Files folder image Files  /  img  
File Role Description
  Accessible without login Image file loading.gif Icon Icon image
  Accessible without login Image file m1.png Icon Icon image
  Accessible without login Image file m2.png Icon Icon image
  Accessible without login Image file m3.png Icon Icon image
  Accessible without login Image file m4.png Icon Icon image
  Accessible without login Image file m5.png Icon Icon image
  Accessible without login Image file p1.png Icon Icon image
  Accessible without login Image file p2.png Icon Icon image
  Accessible without login Image file p3.png Icon Icon image
  Accessible without login Image file p4.png Icon Icon image
  Accessible without login Image file p5.png Icon Icon image

  Files folder image Files  /  img2  
File Role Description
  Accessible without login Image file loading.gif Data Auxiliary data
  Accessible without login Image file m1.png Icon Icon image
  Accessible without login Image file m2.png Icon Icon image
  Accessible without login Image file m3.png Icon Icon image
  Accessible without login Image file m4.png Icon Icon image
  Accessible without login Image file m5.png Icon Icon image
  Accessible without login Image file p1.png Icon Icon image
  Accessible without login Image file p2.png Icon Icon image
  Accessible without login Image file p3.png Icon Icon image
  Accessible without login Image file p4.png Icon Icon image
  Accessible without login Image file p5.png Icon Icon image
  Accessible without login Image file p6.png Icon Icon image

  Files folder image Files  /  js  
File Role Description
  Accessible without login Plain text file index_html.js Aux. Auxiliary script
  Plain text file markerClustererHelper.js Class Class source

 Version Control Unique User Downloads Download Rankings  
 100%
Total:15
This week:0
All time:534
This week:16Up