javascript - How to use different colors of Circles using JSON -
i have script adds circles on map, data have been taken json. want add 2 types of circles:
- first circles getting property 'jstores' , red color
- second circles getting property 'jcarrera' , blue color.
only last type in json has 'jcarrera' property.
could tell me please how in correct way.
the code below:
<!doctype html> <html> <head> <title>jewellery distribution, presence</title> <style> html, body, #map-canvas { margin: 0; padding: 0; height: 100%; } </style> <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="legend"> jewellery distribution, boutiques </div> <style> #legend { font-family: arial, sans-serif; background: #fff; padding: 10px; margin: 10px; border: 2px solid #000; } </style> <script> var map; var infowindow = new google.maps.infowindow({}); function initialize() { var mapoptions = { zoom: 2, center: {lat: 7.275, lng: 12.549}, maptypeid: google.maps.maptypeid.terrain }; map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); // create <script> tag , set usgs url source. var script = document.createelement('script'); script.src = 'http://pastebin.com/raw.php?i=tprxqqmm'; document.getelementsbytagname('head')[0].appendchild(script); map.data.setstyle(function(feature) { var jstores = feature.getproperty('jstores'); var jcarrera = feature.getproperty('jcarrera'); var ititle = feature.getproperty('ititle'); return { icon: getcircle(jstores), title: (ititle) }; }); map.controls[google.maps.controlposition.right_bottom].push(legend); } function getcircle(jstores) { var circle = { path: google.maps.symbolpath.circle, fillcolor: 'red', fillopacity: .7, scale: math.sqrt(jstores) * 4, strokecolor: 'white', strokeweight: .5 }; return circle; } function getcircle(jcarrera) { var circlec = { path: google.maps.symbolpath.circle, fillcolor: 'blue', fillopacity: .7, scale: math.sqrt(jcarrera) * 4, strokecolor: 'white', strokeweight: .5 }; return circlec; } function jewellery_stores(results) { map.data.addgeojson(results); map.data.addlistener('click', function(e) { infowindow.setposition(e.latlng); infowindow.setcontent(e.feature.getproperty("text")); infowindow.open(map); }); } google.maps.event.adddomlistener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html> link json:
http://pastebin.com/raw.php?i=tprxqqmm
sample json:
jewellery_stores({ "type": "featurecollection","features": [ {"type": "feature","geometry": {"type": "point", "coordinates": [55.278842, 25.197623]},"properties": {"jstores": 8,"ititle": "dubai, united arab emirates","text": "<p><b>dubai mall</b></p>van cleef: 1<br>harry winston: 1<br>graff: 1<br>cartier: 1<br>pomellato: 1<br>chaumet: 1<br>bvlgari: 1<br>damiani: 1<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [54.389373, 24.501259]},"properties": {"jstores": 6,"ititle": "abu dhabi, united arab emirates","text": "<p><b>the galleria @ sowwah square</b></p>graff: 1<br>van cleef: 1<br>pomellato: 1<br>cartier: 1<br>bvlgari: 1<br>chaumet: 1<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [47.966734, 29.363636]},"properties": {"jstores": 5,"ititle": "kuwait, kuwait","text": "<p><b>salhiya complex</b></p>cartier: 2<br>bvlgari: 1<br>van cleef: 1<br>de grisogono: 1<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [55.200603, 25.118088]},"properties": {"jstores": 5,"ititle": "dubai, united arab emirates","text": "<p><b>mall of emirates</b></p>roberto coin: 1<br>bvlgari: 1<br>van cleef: 1<br>cartier: 1<br>pomellato: 1<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [47.935659, 29.302827]},"properties": {"jstores": 4,"ititle": "kuwait, kuwait","text": "<p><b>al ostoura</b></p>roberto coin: 1<br>pomellato: 1<br>damiani: 1<br>harry winston: 1<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [54.321782, 24.458713]},"properties": {"jstores": 4,"ititle": "abu dhabi, united arab emirates","text": "<p><b>etihad towers</b></p>van cleef: 1<br>de grisogono: 1<br>bvlgari: 1<br>cartier: 1<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [35.50555, 33.898988]},"properties": {"jstores": 3,"ititle": "beirut, lebanon","text": "<p><b>beirut souks</b></p>bvlgari: 1<br>pomellato: 1<br>cartier: 1<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [51.443095, 25.260314]},"properties": {"jstores": 3,"ititle": "doha, qatar","text": "<p><b>villagio mall</b></p>bvlgari: 1<br>van cleef: 1<br>cartier: 1<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [55.282242, 25.217181]},"properties": {"jstores": 3,"ititle": "dubai, united arab emirates","text": "<p><b>emirates towers</b></p>bvlgari: 1<br>harry winston: 1<br>cartier: 1<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [46.683791, 24.697514]},"properties": {"jstores": 3,"ititle": "riyadh, saudi arabia","text": "<p><b>centira mall</b></p>cartier: 1<br>van cleef: 1<br>chaumet: 1<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [50.581376, 26.239843]},"properties": {"jstores": 3,"ititle": "al-manamah, bahrain","text": "<p><b>moda mall</b></p>bvlgari: 1<br>van cleef: 1<br>cartier: 1<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [55.31919, 25.229147]},"properties": {"jstores": 2,"ititle": "dubai, united arab emirates","text": "<p><b>wafi center</b></p>roberto coin: 1<br>mikimoto: 1<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [51.606182, 25.26973]},"properties": {"jstores": 2,"ititle": "doha, qatar","text": "<p><b>qatar duty free</b></p>bvlgari: 2<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [39.15077, 21.548994]},"properties": {"jstores": 2,"ititle": "jeddah, saudi arabia","text": "<p><b>el khayyat center</b></p>chaumet: 1<br>cartier: 1<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [39.127888, 21.573002]},"properties": {"jstores": 1,"ititle": "jeddah, saudi arabia","text": "<p><b>am jad al dar</b></p>pomellato: 1<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [55.185453, 25.14133]},"properties": {"jstores": 1,"ititle": "dubai, united arab emirates","text": "<p><b>burj al arab</b></p>graff: 1<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [51.501661, 25.281497]},"properties": {"jstores": 1,"ititle": "doha, qatar","text": "<p><b>royal plaza mall</b></p>cartier: 1<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [47.990275, 29.377323]},"properties": {"jstores": 1,"ititle": "kuwait, kuwait","text": "<p><b>arraya complex</b></p>chaumet: 1<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [35.874513, 31.967586]},"properties": {"jstores": 1,"ititle": "amman, jordan","text": "<p><b>um-uthaina vista building</b></p>bvlgari: 1<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [50.222673, 26.305242]},"properties": {"jstores": 1,"ititle": "al khobar, saudi arabia","text": "<p><b>al jumah city center</b></p>bvlgari: 1<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [39.153526, 21.549449]},"properties": {"jstores": 1,"ititle": "jeddah, saudi arabia","text": "<p><b>jameel square</b></p>van cleef: 1<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [46.674271, 24.711465]},"properties": {"jstores": 1,"ititle": "riyadh, saudi arabia","text": "<p><b>saks fifth avenue</b></p>cartier: 1<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [55.302142, 25.253076]},"properties": {"jstores": 1,"ititle": "dubai, united arab emirates","text": "<p><b>burjuman center</b></p>cartier: 1<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [51.524687, 25.375654]},"properties": {"jstores": 1,"ititle": "doha, qatar","text": "<p><b>lagoona mall</b></p>pasquale bruni: 1<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [50.180663, 26.291106]},"properties": {"jstores": 1,"ititle": "al khobar, saudi arabia","text": "<p><b>al rashid mall</b></p>cartier: 1<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [39.153759, 21.550658]},"properties": {"jstores": 1,"ititle": "jeddah, saudi arabia","text": "<p><b>basateen mall</b></p>bvlgari: 1<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [46.679091, 24.707793]},"properties": {"jstores": 1,"ititle": "riyadh, saudi arabia","text": "<p><b>al akaira plaza</b></p>bvlgari: 1<br>" }}, {"type": "feature","geometry": {"type": "point", "coordinates": [55.116936, 25.130337]},"properties": {"jcarrera": 1,"ititle": "dubai, united arab emirates","text": "<p><b>atlantis palm</b></p>cyc: 1<br>"}} ]}); thank in advance.
andrey
you have 2 functions same name, change name of 1 of them, , use appropriate.
map.data.setstyle(function (feature) { var jstores = feature.getproperty('jstores'); var jcarrera = feature.getproperty('jcarrera'); var ititle = feature.getproperty('ititle'); var retobj = {}; if (!jcarrera) { retobj.icon = getcircle(jstores); } else { retobj.icon = getbluecircle(jcarrera); } retobj.title = ititle; retobj.fillcolor = 'red'; return retobj; }); map.controls[google.maps.controlposition.right_bottom].push(legend); } function getcircle(jstores) { var circle = { path: google.maps.symbolpath.circle, fillcolor: 'red', fillopacity: 0.7, scale: math.sqrt(jstores) * 4, strokecolor: 'white', strokeweight: 0.5 }; return circle; } function getbluecircle(jcarrera) { var circlec = { path: google.maps.symbolpath.circle, fillcolor: 'blue', fillopacity: 0.7, scale: math.sqrt(jcarrera) * 4, strokecolor: 'white', strokeweight: 0.5 }; return circlec; } code snippet:
var map; var infowindow = new google.maps.infowindow({}); function initialize() { var mapoptions = { zoom: 8, center: { lat: 25.130337, lng: 55.116936 }, maptypeid: google.maps.maptypeid.terrain }; map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); // create <script> tag , set usgs url source. var script = document.createelement('script'); // script.src = 'http://pastebin.com/raw.php?i=tprxqqmm'; // document.getelementsbytagname('head')[0].appendchild(script); jewellery_stores(jsondata); map.data.setstyle(function(feature) { var jstores = feature.getproperty('jstores'); var jcarrera = feature.getproperty('jcarrera'); var ititle = feature.getproperty('ititle'); var retobj = {}; if (!jcarrera) { retobj.icon = getcircle(jstores); } else { retobj.icon = getbluecircle(jcarrera); } retobj.title = ititle; retobj.fillcolor = 'red'; return retobj; }); map.controls[google.maps.controlposition.right_bottom].push(legend); } function getcircle(jstores) { var circle = { path: google.maps.symbolpath.circle, fillcolor: 'red', fillopacity: 0.7, scale: math.sqrt(jstores) * 4, strokecolor: 'white', strokeweight: 0.5 }; return circle; } function getbluecircle(jcarrera) { var circlec = { path: google.maps.symbolpath.circle, fillcolor: 'blue', fillopacity: 0.7, scale: math.sqrt(jcarrera) * 4, strokecolor: 'white', strokeweight: 0.5 }; return circlec; } function jewellery_stores(results) { map.data.addgeojson(results); map.data.addlistener('click', function(e) { infowindow.setposition(e.latlng); infowindow.setcontent(e.feature.getproperty("text")); infowindow.open(map); }); } google.maps.event.adddomlistener(window, 'load', initialize); var jsondata = { "type": "featurecollection", "features": [{ "type": "feature", "geometry": { "type": "point", "coordinates": [55.278842, 25.197623] }, "properties": { "jstores": 8, "ititle": "dubai, united arab emirates", "text": "<p><b>dubai mall</b></p>van cleef: 1<br>harry winston: 1<br>graff: 1<br>cartier: 1<br>pomellato: 1<br>chaumet: 1<br>bvlgari: 1<br>damiani: 1<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [54.389373, 24.501259] }, "properties": { "jstores": 6, "ititle": "abu dhabi, united arab emirates", "text": "<p><b>the galleria @ sowwah square</b></p>graff: 1<br>van cleef: 1<br>pomellato: 1<br>cartier: 1<br>bvlgari: 1<br>chaumet: 1<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [47.966734, 29.363636] }, "properties": { "jstores": 5, "ititle": "kuwait, kuwait", "text": "<p><b>salhiya complex</b></p>cartier: 2<br>bvlgari: 1<br>van cleef: 1<br>de grisogono: 1<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [55.200603, 25.118088] }, "properties": { "jstores": 5, "ititle": "dubai, united arab emirates", "text": "<p><b>mall of emirates</b></p>roberto coin: 1<br>bvlgari: 1<br>van cleef: 1<br>cartier: 1<br>pomellato: 1<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [47.935659, 29.302827] }, "properties": { "jstores": 4, "ititle": "kuwait, kuwait", "text": "<p><b>al ostoura</b></p>roberto coin: 1<br>pomellato: 1<br>damiani: 1<br>harry winston: 1<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [54.321782, 24.458713] }, "properties": { "jstores": 4, "ititle": "abu dhabi, united arab emirates", "text": "<p><b>etihad towers</b></p>van cleef: 1<br>de grisogono: 1<br>bvlgari: 1<br>cartier: 1<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [35.50555, 33.898988] }, "properties": { "jstores": 3, "ititle": "beirut, lebanon", "text": "<p><b>beirut souks</b></p>bvlgari: 1<br>pomellato: 1<br>cartier: 1<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [51.443095, 25.260314] }, "properties": { "jstores": 3, "ititle": "doha, qatar", "text": "<p><b>villagio mall</b></p>bvlgari: 1<br>van cleef: 1<br>cartier: 1<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [55.282242, 25.217181] }, "properties": { "jstores": 3, "ititle": "dubai, united arab emirates", "text": "<p><b>emirates towers</b></p>bvlgari: 1<br>harry winston: 1<br>cartier: 1<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [46.683791, 24.697514] }, "properties": { "jstores": 3, "ititle": "riyadh, saudi arabia", "text": "<p><b>centira mall</b></p>cartier: 1<br>van cleef: 1<br>chaumet: 1<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [50.581376, 26.239843] }, "properties": { "jstores": 3, "ititle": "al-manamah, bahrain", "text": "<p><b>moda mall</b></p>bvlgari: 1<br>van cleef: 1<br>cartier: 1<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [55.31919, 25.229147] }, "properties": { "jstores": 2, "ititle": "dubai, united arab emirates", "text": "<p><b>wafi center</b></p>roberto coin: 1<br>mikimoto: 1<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [51.606182, 25.26973] }, "properties": { "jstores": 2, "ititle": "doha, qatar", "text": "<p><b>qatar duty free</b></p>bvlgari: 2<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [39.15077, 21.548994] }, "properties": { "jstores": 2, "ititle": "jeddah, saudi arabia", "text": "<p><b>el khayyat center</b></p>chaumet: 1<br>cartier: 1<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [39.127888, 21.573002] }, "properties": { "jstores": 1, "ititle": "jeddah, saudi arabia", "text": "<p><b>am jad al dar</b></p>pomellato: 1<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [55.185453, 25.14133] }, "properties": { "jstores": 1, "ititle": "dubai, united arab emirates", "text": "<p><b>burj al arab</b></p>graff: 1<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [51.501661, 25.281497] }, "properties": { "jstores": 1, "ititle": "doha, qatar", "text": "<p><b>royal plaza mall</b></p>cartier: 1<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [47.990275, 29.377323] }, "properties": { "jstores": 1, "ititle": "kuwait, kuwait", "text": "<p><b>arraya complex</b></p>chaumet: 1<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [35.874513, 31.967586] }, "properties": { "jstores": 1, "ititle": "amman, jordan", "text": "<p><b>um-uthaina vista building</b></p>bvlgari: 1<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [50.222673, 26.305242] }, "properties": { "jstores": 1, "ititle": "al khobar, saudi arabia", "text": "<p><b>al jumah city center</b></p>bvlgari: 1<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [39.153526, 21.549449] }, "properties": { "jstores": 1, "ititle": "jeddah, saudi arabia", "text": "<p><b>jameel square</b></p>van cleef: 1<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [46.674271, 24.711465] }, "properties": { "jstores": 1, "ititle": "riyadh, saudi arabia", "text": "<p><b>saks fifth avenue</b></p>cartier: 1<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [55.302142, 25.253076] }, "properties": { "jstores": 1, "ititle": "dubai, united arab emirates", "text": "<p><b>burjuman center</b></p>cartier: 1<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [51.524687, 25.375654] }, "properties": { "jstores": 1, "ititle": "doha, qatar", "text": "<p><b>lagoona mall</b></p>pasquale bruni: 1<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [50.180663, 26.291106] }, "properties": { "jstores": 1, "ititle": "al khobar, saudi arabia", "text": "<p><b>al rashid mall</b></p>cartier: 1<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [39.153759, 21.550658] }, "properties": { "jstores": 1, "ititle": "jeddah, saudi arabia", "text": "<p><b>basateen mall</b></p>bvlgari: 1<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [46.679091, 24.707793] }, "properties": { "jstores": 1, "ititle": "riyadh, saudi arabia", "text": "<p><b>al akaira plaza</b></p>bvlgari: 1<br>" } }, { "type": "feature", "geometry": { "type": "point", "coordinates": [55.116936, 25.130337] }, "properties": { "jcarrera": 1, "ititle": "dubai, united arab emirates", "text": "<p><b>atlantis palm</b></p>cyc: 1<br>" } } ] };html, body, #map-canvas { margin: 0; padding: 0; height: 100%; } #legend { font-family: arial, sans-serif; background: #fff; padding: 10px; margin: 10px; border: 2px solid #000; }<script src="https://maps.googleapis.com/maps/api/js"></script> <div id="legend">jewellery distribution, boutiques</div> <div id="map-canvas"></div>
Comments
Post a Comment