TinyMap Cluster Layout

by Chan Wu

HTML

<script src="https://code.essoduke.org/js/tinyMap/jquery.tinyMap-3.3.13.min.js"></script>
<div id="map"></div>

CSS

#map {
  width: 700px;
  height: 500px;
}

JavaScript

var map = $('#map');

 // Create tinyMap
 map.tinyMap({
   'center': '台北101',
   'zoom': 12,
   'markerCluster': {
     'event': {
       // 叢集起始事件
       'clusteringbegin': function(s) {

         var self = this;
         var zoom = self.map.getZoom();

         // 預設 ClusterIconStyle 選項
         var opt = {
           'fontFamily': 'Tahoma,sans-serif', // Font family (CSS)
           'textSize': '2rem', // Font size (CSS)
           'anchorText': [-10, 0], // Text position offset
           'url': '', // Icon Url
           'height': 128, // Icon height
           'width': 128 // Icon Width
         };

         // 縮放等級條件
         switch (zoom) {
           case 13:
             opt.url = 'https://code.essoduke.org/images/mc1.png';
             break;
           case 14:
             opt.url = 'https://code.essoduke.org/images/mc2.png';
             break;
           default:
             opt.url = 'https://code.essoduke.org/images/mc3.png';
             break;
         }

         // 設置叢集 style
         self.setStyles([opt]);

       },

     }
   },
   'marker': [{
     'addr': ['25.04151536540612', '121.56354904174805'],
     'icon': createMarkerIcon('xx 塔位 20筆')
   }, {
     'addr': ['25.041282077030896', '121.56741142272949'],
     'icon': createMarkerIcon('xx 塔位 30筆')
   }, {
     'addr': ['25.0383270525352', '121.57045841217041'],
     'icon': createMarkerIcon('xx 塔位 11筆')
   }, {
     'addr': ['25.037627167884715', '121.56732559204102'],
     'icon': createMarkerIcon('xx 塔位 33筆')
   }, {
     'addr': ['25.039726809855434', '121.55633926391602'],
     'icon': createMarkerIcon('xx 塔位 6筆')
   }, {
     'addr': ['25.037160575899154', '121.55350685119629'],
     'icon': createMarkerIcon('xx 塔位 7筆')
   }, {
     'addr': ['25.035877438787317', '121.55715465545654'],
     'icon': createMarkerIcon('xx 塔位 131筆')
   }, {
     'addr': ['25.033972149830436', '121.56063079833984'],
     'icon': createMarkerIcon('xx 塔位 52筆')
   }, {
     'addr':...