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

.map_box {
   background-color: #fff;
   font-size: 0.85rem;
   width: 70px;
   border: 1px solid #666;
   padding: 5px;
   border-radius: 5px;
   box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
  }
  .map_box .img_bar {
   overflow: hidden;
   height: 70px;
  }
  .map_box .img_bar img {
   width: 100%;
  }
  .map_box strong {
   width: 100%;
   font-size: 0.8rem;
   font-weight: normal;
   text-align: center;
   display: block;
   border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   line-height: 1.2rem;
  }
  .map_box span {
   width: 100%;
   display: block;
   text-align: center;
   margin-top: 0.5rem;
  }

JavaScript

var map = $('#map');

 // Create tinyMap
 map.tinyMap({
   'center': ['25.04151536540612', '121.56354904174805'],
   '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 = 'http://gt.chan15.info/assets/imgs/mc1.png';
             break;
           case 14:
             opt.url = 'http://gt.chan15.info/assets/imgs/mc2.png';
             break;
           default:
             opt.url = 'http://gt.chan15.info/assets/imgs/mc3.png';
             break;
         }

         // 設置叢集 style
         self.setStyles([opt]);
       },
     }
   },
   'markerWithLabel': true,
   'marker': [{
     'addr': ['25.04151536540612', '121.56354904174805'],
     'labelClass': 'map_box',
     'labelContent': ' <div class="img_bar"><img src="http://lorempixel.com/50/50/sports/1"></div><strong>塔位名稱</strong><span>30筆</span>',
     'icon': {
       'path': 'M 0 0'
     }
   }, {
     'addr': ['25.041282077030896', '121.56741142272949'],
     'labelClass': 'map_box',
     'labelContent': ' <div class="img_bar"><img src="http://lorempixel.com/50/200/sports/2"></div><strong>塔位名稱</strong><span>30筆</span>',
     'icon': {
       'path': 'M 0 0'
     }
   }]
 });