TinyMap cluster

by Chan Wu

HTML

<script src="http://app.essoduke.org/js/tinyMap/jquery.tinyMap-3.2.19.min.js"></script>
<div id="map"></div>

CSS

#map{width:100vw;height:100vh}
.label{background:rgba(0,0,0,0.5);color:white;padding:3px}

JavaScript

(function () {

    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 = 'http://app.essoduke.org/images/mc1.png';
                            break;
                        case 14:
                            opt.url = 'http://app.essoduke.org/images/mc2.png';
                            break;
                        default:
                            opt.url = 'http://app.essoduke.org/images/mc3.png';
                            break;
                    }

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

                    // 顯示所有的 Label
                    map.tinyMap('get', 'label', function (la) {
                        console.dir('reset labels');
                        la.forEach(function (label) {
                            label.setMap(self.map);
                        });
                    });
                    
                },
                // 叢集結束事件
                'clusteringend': function () {

                    // 取得目前地圖的縮放等級
                    var zoom = this.map.getZoom();

                    // 取得全部...