javascript - MarkerClustererPlus and nested clusters -
what mean following: suppose have in area number of transmitting-receiving stations (pylons) (5, example), , 2 hundred customers connected wirelessly them (40 each on average).
i want first icon appear on area showing number 5 (number of stations), on click event on icon want 5 pylons icons appear, , subsequently on click event on of icons customers icons (only customers connected clicked pylon) appear.
all many areas in country. question is: basic steps should implement task accomplished? have done @ moment define cluster of 5 stations so, clicking on icon, stations shown.
should define new clusters, 1 each station, each 1 containing customers connected it? or should take bottom-up approach, mean, define single big cluster of customers, , move on? in such case how should proceed?
i newbie html , javascript ( , 66!!! ), nonetheless trying accomplish task using languages , markerclustereplus library. need suggestions, please. all.
thanks answering. have done few modifications on example code provided library, both html , js.
html
<script type="text/javascript" src="onet.js"></script> <script type="text/javascript"> google.maps.event.adddomlistener(window, 'load', onet.init); </script> <div> markers: <select id="nummarkers"> <option value="6" selected="selected">6</option> </select> </div> <strong>tralicci bari</strong> <div id="markerlist"> </div> </div> <div id="map-container"> <div id="map"></div> </div>
js
function $(element) { return document.getelementbyid(element); } var onet = {}; onet.tralicci = null; onet.map = null; onet.markerclusterer = null; onet.markers = []; onet.infowindow = null; onet.init = function() { var latlng = new google.maps.latlng(41, 16.38); var options = { 'zoom': 6, 'center': latlng, 'maptypeid': google.maps.maptypeid.roadmap }; onet.map = new google.maps.map($('map'), options); onet.tralicci = data.tralicci; var nummarkers = document.getelementbyid('nummarkers'); google.maps.event.adddomlistener(nummarkers, 'change', onet.change); onet.infowindow = new google.maps.infowindow(); onet.showmarkers(); };
please note here appears "onet" "speedtest" in distributed example code, , "tralicci" equivalent "stations".
data_ba.json
var data = { "tralicci": [ {"trl_id": "ba_01", "trl_nome": "1o traliccio", "longitude": 16.58, "latitude": 41.09, "title": "traliccio n. 1\npotenza 15 kw\naltezza 37.5 m\nclienti connessi: 40", "stato": "on", "altezza": 375} , {"trl_id": "ba_02", "trl_nome": "2o traliccio", "longitude": 16.578, "latitude": 41.112, "title": "traliccio n. 2\npotenza 18 kw\naltezza 42.5 m\nclienti connessi: 42", "stato": "on", "altezza": 350} , {"trl_id": "ba_03", "trl_nome": "3o traliccio", "longitude": 16.544, "latitude": 41.09, "title": "traliccio n. 3\npotenza 12 kw\naltezza 22 m\nclienti connessi: 34", "stato": "off", "altezza": 474} , {"trl_id": "ba_04", "trl_nome": "4o traliccio", "longitude": 16.556, "latitude": 41.08, "title": "traliccio n. 4\npotenza 16 kw\naltezza 35 m\nclienti connessi: 47", "stato": "on", "altezza": 375} , {"trl_id": "ba_05", "trl_nome": "5o traliccio", "longitude": 16.580, "latitude": 41.085, "title": "traliccio n. 5\npotenza 20 kw\naltezza 39 m\nclienti connessi: 42", "stato": "on", "altezza": 375} , {"trl_id": "ba_06", "trl_nome": "6o traliccio", "longitude": 16.790, "latitude": 41.12, "title": "traliccio n. 6\npotenza 15 kw\naltezza 32 m\nclienti connessi: 54", "stato": "on-off", "altezza": 333}
i've done little, can see. use own image station image, different distributed m2.png.
Comments
Post a Comment