javascript - Variable Polyline Weight with GEOJSON in Leaflet -
here entire html document:
<!doctype html> <html> <head> <title>top 5 importers of tungsten</title> <!--imports stylesheet leaflet --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" /> <!-- import jquery, common javascript library providing hundreds of functions --> <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script> <style> @font-face { font-family: planewalker; src: url('https://dl.dropboxusercontent.com/s/3hn6zi8ez2vf4d7/planewalker.ttf'); } a:link{text-decoration: none;color:#0000ff;} a:visited{text-decoration:none;color:#0000ff;} a:hover{color:#990000;text-decoration:none;} #map { width: 1200px; height: 600px; border: black solid 2px; display: block; margin-left: auto; margin-right: auto; } #map2 { width: 1000px; height: 550px; border: black solid 2px; display: block; margin-left: auto; margin-right: auto; } #map3 { width: 1000px; height: 550px; border: black solid 2px; display: block; margin-right: auto; margin-left: auto; } .info { padding: 6px 8px; font: 14px/16px arial, helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: #777; } .legend { text-align: left; line-height: 18px; color: #555; } .legend { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.7; } #header{ width:450px; border-radius:15px; background-image: url(https://dl.dropboxusercontent.com/s/j1ii4yz5qftrks7/greyscale-natural-grunge-textures-6.jpg); margin: auto; margin-bottom: 5px; text-align: center; border: black solid 2px; font-size: 40px; padding-top: 7px; padding-bottom: 7px; padding-left: 12px; padding-right: 12px; } body{ font-family: "planewalker", "lucida sans unicode","arial",sans-serif; background-image: url(https://dl.dropboxusercontent.com/s/2m8803ulxv2mcfc/footer_lodyas.png); font-size: 20px; } #footer{ text-align: right; font-size: 15px; color: #ffffff; } </style> </head> <body> <div id="header"><span style="color:#fbf400;">t</span><span style="color:#faf612;">o</span><span style="color:#f9f824;">p</span><span style="color:#f8fa36;"> </span><span style="color:#f8fb48;">5</span><span style="color:#f7fd5a;"> </span><span style="color:#f6ff6c;">t</span><span style="color:#f8ff85;">u</span><span style="color:#f9ff9d;">n</span><span style="color:#fbffb6;">g</span><span style="color:#fcffce;">s</span><span style="color:#feffe7;">t</span><span style="color:#ffffff;">e</span><span style="color:#fdffe2;">n</span><span style="color:#fbffc4;"> </span><span style="color:#faffa7;">i</span><span style="color:#f8ff89;">m</span><span style="color:#f6ff6c;">p</span><span style="color:#f7fd5a;">o</span><span style="color:#f8fb48;">r</span><span style="color:#f9f936;">t</span><span style="color:#f9f824;">e</span><span style="color:#faf612;">r</span><span style="color:#fbf400;">s</span></div> <!--div import line map ("map")--> <div id="map" style="position: relative; width: 1200px; height: 600px;"></div> <br> <!--div canada mines map--> <div id="map2" style="position: relative; width: 1000px; height: 550px;"><img src="https://dl.dropboxusercontent.com/s/a95n5ecg1a7j62i/canada_mine_map2.png" height="550" width="1000"></div> <br> <!--div china mines map--> <div id="map3" style="position: relative; width: 1000px; height: 550px;"><img src="https://dl.dropboxusercontent.com/s/p2vf6q01ck0xt8r/china_province_output_map3.png" height="550" width="1000"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script> <!-- imports colorbrewer library, containing many pre-designed color schemes --> <script src="colorbrewer.js"></script> <!--geojsons import line map--> <script src="chn_crossf.geojson"></script> <script src="deu_crossf.geojson"></script> <script src="fra_crossf.geojson"></script> <script src="jpn_crossf.geojson"></script> <script src="us_crossf.geojson"></script> <!--import line map--> <script> var southwest = new l.latlng(80, -900), northeast = new l.latlng(-80, 900), bounds = new l.latlngbounds(southwest, northeast); //can add "maxbounds: bounds" stop map @ certian point; add l.map in {} var map = l.map('map',{ worldcopyjump:true, continuousworld:false, nowrap:false, minzoom:3, inertia:false, maxbounds:bounds }).setview([35.460669951495305, -21.796875], 3); //starting map location //sets basemap l.tilelayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', { maxzoom: 18, attribution: '© <a href="http://www.openstreetmap.org/copyright">openstreetmap</a> contributors, © <a href="http://cartodb.com/attributions">cartodb</a>', id: 'examples.map-20v6611k' }).addto(map); //weight & color china function getstyle1(feature){ var weight; if (feature.properties.value > 30000000) {weight = 20;} else if (feature.properties.value > 10000000) {weight = 18;} else if (feature.properties.value > 5000000) {weight = 16;} else if (feature.properties.value > 1000000) {weight = 14;} else if (feature.properties.value > 500000) {weight = 12;} else if (feature.properties.value > 100000) {weight = 10;} else if (feature.properties.value > 1000) {weight = 8;} else if (feature.properties.value > 1) {weight = 6;}; return { color: 'red', weight: weight } }; var chnimports = l.geojson(chn, { style: getstyle1, oneachfeature: function (feature, layer) { layer.bindpopup("<b>"+"import partner: "+feature.properties.partner+"</b>"+ "<br />dollar value of imports china: " + feature.properties.value); }, pointtolayer: function (feature, latlng) { return l.polyline(latlng); } }).addto(map); //weight , color germany function getstyle2(feature){ var weight; if (feature.properties.value > 30000000) {weight = 20;} else if (feature.properties.value > 10000000) {weight = 18;} else if (feature.properties.value > 5000000) {weight = 16;} else if (feature.properties.value > 1000000) {weight = 14;} else if (feature.properties.value > 500000) {weight = 12;} else if (feature.properties.value > 100000) {weight = 10;} else if (feature.properties.value > 1000) {weight = 8;} else if (feature.properties.value > 1) {weight = 6;}; return { color: '#00ff00', weight: weight } }; var deuimports = l.geojson(deu, { style: getstyle2, oneachfeature: function (feature, layer) { layer.bindpopup("<b>"+"import partner: "+feature.properties.partner+"</b>"+ "<br />dollar value of imports germany: " + feature.properties.value); }, pointtolayer: function (feature, latlng) { return l.polyline(latlng); } }).addto(map); //weight , color france function getstyle3(feature){ var weight; if (feature.properties.value > 30000000) {weight = 20;} else if (feature.properties.value > 10000000) {weight = 18;} else if (feature.properties.value > 5000000) {weight = 16;} else if (feature.properties.value > 1000000) {weight = 14;} else if (feature.properties.value > 500000) {weight = 12;} else if (feature.properties.value > 100000) {weight = 10;} else if (feature.properties.value > 1000) {weight = 8;} else if (feature.properties.value > 1) {weight = 6;}; return { color: 'white', weight: weight } }; var fraimports = l.geojson(fra, { style: getstyle3, oneachfeature: function (feature, layer) { layer.bindpopup("<b>"+"import partner: "+feature.properties.partner+"</b>"+ "<br />dollar value of imports france: " + feature.properties.value); }, pointtolayer: function (feature, latlng) { return l.polyline(latlng); } }).addto(map); //weight , color japan function getstyle4(feature){ var weight; if (feature.properties.value > 30000000) {weight = 20;} else if (feature.properties.value > 10000000) {weight = 18;} else if (feature.properties.value > 5000000) {weight = 16;} else if (feature.properties.value > 1000000) {weight = 14;} else if (feature.properties.value > 500000) {weight = 12;} else if (feature.properties.value > 100000) {weight = 10;} else if (feature.properties.value > 1000) {weight = 8;} else if (feature.properties.value > 1) {weight = 6;}; return { color: 'yellow', weight: weight } }; var jpnimports = l.geojson(jpn, { style: getstyle4, oneachfeature: function (feature, layer) { layer.bindpopup("<b>"+"import partner: "+feature.properties.partner+"</b>"+ "<br />dollar value of imports japan: " + feature.properties.value); }, pointtolayer: function (feature, latlng) { return l.polyline(latlng); } }).addto(map); //weight , color function getstyle5(feature){ var weight; if (feature.properties.value > 30000000) {weight = 20;} else if (feature.properties.value > 10000000) {weight = 18;} else if (feature.properties.value > 5000000) {weight = 16;} else if (feature.properties.value > 1000000) {weight = 14;} else if (feature.properties.value > 500000) {weight = 12;} else if (feature.properties.value > 100000) {weight = 10;} else if (feature.properties.value > 1000) {weight = 8;} else if (feature.properties.value > 1) {weight = 6;}; return { color: '#0000ff', weight: weight } }; var usimports = l.geojson(us, { style: getstyle5, oneachfeature: function (feature, layer) { layer.bindpopup("<b>"+"import partner: "+feature.properties.partner+"</b>"+ "<br />dollar value of imports us: " + feature.properties.value); }, pointtolayer: function (feature, latlng) { return l.polyline(latlng); } }).addto(map); //icons countries~~~~~~~~~~~~~~~~: //north america points var canicon = l.icon({ iconurl: 'http://www.veryicon.com/icon/png/flag/north%20america%20-%20mac/canada.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([56.130366,-106.346771],{icon:canicon}).addto(map) .bindpopup("<b>canada</b>"); l.marker([56.130366,253.653229],{icon:canicon}).addto(map) .bindpopup("<b>canada</b>"); var usicon = l.icon({ iconurl: 'http://static.wix.com/media/93cbc2_eaca32a202866ed8dd83758cc48a0385.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([37.09024,-95.712891],{icon:usicon}).addto(map) .bindpopup("<b>united states</b>"); l.marker([37.09024,264.287109],{icon:usicon}).addto(map) .bindpopup("<b>united states</b>"); var mexicon = l.icon({ iconurl: 'http://www.veryicon.com/icon/png/flag/north%20america%20-%20mac/mexico.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([23.634501,-102.552784],{icon:mexicon}).addto(map) .bindpopup("<b>mexico</b>"); l.marker([23.634501,257.447216],{icon:mexicon}).addto(map) .bindpopup("<b>mexico</b>"); //south america points var bolicon = l.icon({ iconurl: 'http://www.argenpapa.com.ar/images/paises/2.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([-16.290154,-63.588653],{icon:bolicon}).addto(map) .bindpopup("<b>bolivia</b>"); l.marker([-16.290154,296.411347],{icon:bolicon}).addto(map) .bindpopup("<b>bolivia</b>"); var braicon = l.icon({ iconurl: 'http://files.softicons.com/download/web-icons/flags-icons-by-wolfgang-bartelme/png/216/br.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([-14.235004,-51.92528],{icon:braicon}).addto(map) .bindpopup("<b>brazil</b>"); l.marker([-14.235004,308.07472],{icon:braicon}).addto(map) .bindpopup("<b>brazil</b>"); var colicon = l.icon({ iconurl: 'http://icons.iconseeker.com/png/fullsize/rounded-world-flags/colombia-flag-1.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([4.570868,-74.297333],{icon:colicon}).addto(map) .bindpopup("<b>colombia</b>"); l.marker([4.570868,285.702667],{icon:colicon}).addto(map) .bindpopup("<b>colombia</b>"); var pericon = l.icon({ iconurl: 'http://files.softicons.com/download/web-icons/south-america-flags-icons-by-studiotwentyeight/png/256/peru.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([-9.189967,-75.015152],{icon:pericon}).addto(map) .bindpopup("<b>peru</b>"); l.marker([-9.189967,284.984848],{icon:pericon}).addto(map) .bindpopup("<b>peru</b>"); var chlicon = l.icon({ iconurl: 'http://files.softicons.com/download/web-icons/south-america-flags-icons-by-studiotwentyeight/png/256/chile.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([-35.675147,-71.542969],{icon:chlicon}).addto(map) .bindpopup("<b>chile</b>"); l.marker([-35.675147,288.457031],{icon:chlicon}).addto(map) .bindpopup("<b>chile</b>"); //europe points var poricon = l.icon({ iconurl: 'http://files.softicons.com/download/web-icons/europe-flags-icons-by-studiotwentyeight/png/256/portugal.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([39.399872,-8.224454],{icon:poricon}).addto(map) .bindpopup("<b>portugal</b>"); var espicon = l.icon({ iconurl: 'http://www.veryicon.com/icon/png/flag/europe/spain.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([40.463667,-3.74922],{icon:espicon}).addto(map) .bindpopup("<b>spain</b>"); var fraicon = l.icon({ iconurl: 'http://png-4.findicons.com/files/icons/656/rounded_world_flags/256/france.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([46.227638,2.213749],{icon:fraicon}).addto(map) .bindpopup("<b>france</b>"); var deuicon = l.icon({ iconurl: 'http://files.softicons.com/download/web-icons/flags-icons-by-wolfgang-bartelme/png/216/de.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([51.165691,10.451526],{icon:deuicon}).addto(map) .bindpopup("<b>germany</b>"); var gbricon = l.icon({ iconurl: 'https://www.railpol.eu/railpol/fs3_site.nsf/fck_images/069634987717d7a8c1257a83004c7c92/$file/united%20kingdom%20flag.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([55.378051,-3.435973],{icon:gbricon}).addto(map) .bindpopup("<b>united kingdom</b>"); var belicon = l.icon({ iconurl: 'http://png-2.findicons.com/files/icons/656/rounded_world_flags/256/belgium.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([50.503887,4.469936],{icon:belicon}).addto(map) .bindpopup("<b>belgium</b>"); var turicon = l.icon({ iconurl: 'http://files.softicons.com/download/internet-cons/world-flags-orbs-icons-by-vathanx/png/256/flag%20of%20turkey.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([38.963745,35.243322],{icon:turicon}).addto(map) .bindpopup("<b>turkey</b>"); var cheicon = l.icon({ iconurl: 'http://files.softicons.com/download/web-icons/europe-flags-icons-by-studiotwentyeight/png/256/switzerland.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([46.818188,8.227512],{icon:cheicon}).addto(map) .bindpopup("<b>switzerland</b>"); var esticon = l.icon({ iconurl: 'http://files.softicons.com/download/internet-cons/world-flags-orbs-icons-by-vathanx/png/256/flag%20of%20estonia.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([58.595272,25.013607],{icon:esticon}).addto(map) .bindpopup("<b>estonia</b>"); //middle east icons var isricon = l.icon({ iconurl: 'http://files.softicons.com/download/web-icons/asia-flags-icons-by-studiotwentyeight/png/256/israel.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([31.046051,34.851612],{icon:isricon}).addto(map) .bindpopup("<b>israel</b>"); //africa icons var rwaicon = l.icon({ iconurl: 'http://www.veryicon.com/icon/png/flag/africa/rwanda.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([-1.940278,29.873888],{icon:rwaicon}).addto(map) .bindpopup("<b>rwanda</b>"); var ngaicon = l.icon({ iconurl: 'http://files.softicons.com/download/web-icons/africa-flags-icons-by-studiotwentyeight/png/256/nigeria.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([9.081999,8.675277],{icon:ngaicon}).addto(map) .bindpopup("<b>nigeria</b>"); var briicon = l.icon({ iconurl: 'http://files.softicons.com/download/internet-cons/world-flags-orbs-icons-by-vathanx/png/256/flag%20of%20burundi.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([-3.373056,29.918886],{icon:briicon}).addto(map) .bindpopup("<b>burundi</b>"); var dzaicon = l.icon({ iconurl: 'http://files.softicons.com/download/internet-cons/world-flags-orbs-icons-by-vathanx/png/256/flag%20of%20algeria.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([28.033886,1.659626],{icon:dzaicon}).addto(map) .bindpopup("<b>algeria</b>"); //asia icons var rusicon = l.icon({ iconurl: 'http://files.softicons.com/download/web-icons/flags-icons-by-wolfgang-bartelme/png/216/ru.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([61.52401,105.318756],{icon:rusicon}).addto(map) .bindpopup("<b>russia</b>"); l.marker([61.52401,-254.681244],{icon:rusicon}).addto(map) .bindpopup("<b>russia</b>"); var chnicon = l.icon({ iconurl: 'http://www.veryicon.com/icon/png/flag/asia/china.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([35.86166,104.195397],{icon:chnicon}).addto(map) .bindpopup("<b>china</b>"); l.marker([35.86166,-255.804603],{icon:chnicon}).addto(map) .bindpopup("<b>china</b>"); var monicon = l.icon({ iconurl: 'http://www.veryicon.com/icon/png/flag/asia/mongolia.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([46.862496,103.846656],{icon:monicon}).addto(map) .bindpopup("<b>mongolia</b>"); l.marker([46.862496,-256.153344],{icon:monicon}).addto(map) .bindpopup("<b>mongolia</b>"); var phlicon = l.icon({ iconurl: 'http://www.veryicon.com/icon/png/flag/asia/philippines.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([12.879721,121.774017],{icon:phlicon}).addto(map) .bindpopup("<b>philippines</b>"); l.marker([12.879721,-238.225983],{icon:phlicon}).addto(map) .bindpopup("<b>philippines</b>"); var mmricon = l.icon({ iconurl: 'https://cdn2.iconfinder.com/data/icons/world-flag-icons/256/flag_of_burma_myanmar.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([21.913965,95.956223],{icon:mmricon}).addto(map) .bindpopup("<b>myanmar</b>"); l.marker([21.913965,-264.043777],{icon:mmricon}).addto(map) .bindpopup("<b>myanmar</b>"); var vnmicon = l.icon({ iconurl: 'http://www.veryicon.com/icon/png/flag/asia/vietnam.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([14.058324,108.277199],{icon:vnmicon}).addto(map) .bindpopup("<b>vietnam</b>"); l.marker([14.058324,-251.722801],{icon:vnmicon}).addto(map) .bindpopup("<b>vietnam</b>"); var thaicon = l.icon({ iconurl: 'http://www.veryicon.com/icon/png/flag/asia/thailand.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([15.870032,100.992541],{icon:thaicon}).addto(map) .bindpopup("<b>thailand</b>"); l.marker([15.870032,-259.007459],{icon:thaicon}).addto(map) .bindpopup("<b>thailand</b>"); var prkicon = l.icon({ iconurl: 'http://files.softicons.com/download/web-icons/flags-icons-by-wolfgang-bartelme/png/216/kp.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([40.339852,127.510093],{icon:prkicon}).addto(map) .bindpopup("<b>democratic people's republic of korea</b>") l.marker([40.339852,-232.489907],{icon:prkicon}).addto(map) .bindpopup("<b>democratic people's republic of korea</b>") var koricon = l.icon({ iconurl: 'http://files.softicons.com/download/web-icons/flags-icons-by-wolfgang-bartelme/png/216/kr.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([35.907757,127.766922],{icon:koricon}).addto(map) .bindpopup("<b>republic of korea</b>") l.marker([35.907757,-232.233078],{icon:koricon}).addto(map) .bindpopup("<b>republic of korea</b>") var jpnicon = l.icon({ iconurl: 'http://www.veryicon.com/icon/png/flag/asia/japan.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([36.204824,138.252924],{icon:jpnicon}).addto(map) .bindpopup("<b>japan</b>") l.marker([36.204824,-221.747076],{icon:jpnicon}).addto(map) .bindpopup("<b>japan</b>") //australia icons var ausicon = l.icon({ iconurl: 'http://icons.iconseeker.com/png/fullsize/rounded-world-flags/australia-flag-2.png', iconsize: [35,35], iconanchor: [17.5,17.5], }); l.marker([-25.274398,133.775136],{icon:ausicon}).addto(map) .bindpopup("<b>australia</b>") l.marker([-25.274398,-226.224864],{icon:ausicon}).addto(map) .bindpopup("<b>australia</b>") //sets layer control var overlay_layers = { "chinese imports of tungsten": chnimports, "german imports of tungsten": deuimports, "french imports of tungsten": fraimports, "japanese imports of tungsten": jpnimports, "united states imports of tungsten": usimports } l.control.layers(null, overlay_layers).addto(map); </script> <br> <br> <p id="footer"></p> </body> </html> here dropbox link geojsons if see them (hopefully works intended , people can download them): https://www.dropbox.com/sh/4bi70dx2t99qgln/aabjfyndjzgntqk4wu3vynvra?dl=0
i have been working on project create flowmap in leaflet using geojson polylines. have become acquainted javascript , leaflet. here example of make (my map uses rhumb lines , interactive):
here updated , working function changes polyline weight based on 'value' geojson file (credit hinrich & jonathan help!):
function getstyle1(feature){ var weight; if (feature.properties.value > 30000000) {weight = 20;} else if (feature.properties.value > 10000000) {weight = 18;} else if (feature.properties.value > 5000000) {weight = 16;} else if (feature.properties.value > 1000000) {weight = 14;} else if (feature.properties.value > 500000) {weight = 12;} else if (feature.properties.value > 100000) {weight = 10;} else if (feature.properties.value > 1000) {weight = 8;} else if (feature.properties.value > 1) {weight = 6;}; return { color: 'red', weight: weight } }; var chnimports = l.geojson(chn, { style: getstyle1, oneachfeature: function (feature, layer) { layer.bindpopup("<b>"+"import partner: "+feature.properties.partner+"</b>"+ "<br />dollar value of imports china: " + feature.properties.value); }, pointtolayer: function (feature, latlng) { return l.polyline(latlng); } }).addto(map); the lines vary value , able change color dependent on country popup information not appear when polyline clicked on.
in addition, here sample of geojson file chnimports:
var chn = {"type":"featurecollection","features":[{"type":"feature","properties":{"partner":"algeria","longx":1.659626,"laty":28.033886,"chnlong":104.195397,"chnlat":35.86166,"value":587},"geometry":{"type":"linestring","coordinates":[[1.659626,28.033886],[1.669754918002165,28.034691811007274],[1.679883911463014,28.035497621919983],[1.690012980385739,28.036303432738126],[1.700142124773322,28.037109243461707],[1.710271344628953,28.03791505409072],[1.720400639955684,28.038720864625162],[1.730530010756992,28.039526675065034],[1.74065945703536,28.040332485410335],[1.750788978794404,28.041138295661067],[1.760918576037107,28.041944105817212],[1.771048248766518,28.042749915878783],[1.781177996986042,28.04355572584578],[1.791307820698163,28.044361535718185],[1.801437719906642,28.045167345496015],[1.811567694614244,28.045973155179254],[1.821697744824234,28.04677896476791],[1.831827870539733,28.04758477426198],[1.841958071763792,28.04839058366145],[1.852088348499675,28.04919639296634],[1.862218700750077,28.050002202176625], ...continued on thank help!
i think function should return weight. more this:
var getstyle = function(feature){ var weight; if (feature.properties.value > 30000000) {weight = 8;} else if (feature.properties.value > 10000000) {weight = 7;} else if (feature.properties.value > 5000000) {weight = 6;} else if (feature.properties.value > 1000000) {weight = 5;} else if (feature.properties.value > 500000) {weight = 4;} else if (feature.properties.value > 100000) {weight = 3;} else if (feature.properties.value > 1000) {weight = 2;} else if (feature.properties.value > 1) {weight = 1;}; return { color: 'red', weight: weight } }; var getpopup = function(feature, layer) { var content = 'popup content goes here'; layer.bindpopup(content); }; try styling , popup part:
var chnimports = l.geojson(chn, { style: getstyle, oneachfeature: getpopup }).addto(map);
Comments
Post a Comment