javascript - Leaflet custom markers for external GeoJSON layer -
i'm new leaflet , i'm trying style external geojson feed customised marker.
i'm having trouble adding uosensorslayer in code below. official documentation not clear when comes implementation. can display markers using default leaflet blue marker.
<html> <head> <title>leaflet map geojson click feature</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-m2wvclh6dsrazyezrim1jnyyh22purtm+fdb5csyxtqjyekq83arpe5wgbnmcfxgqish2xr8dt/fjisva1r/zq==" crossorigin=""/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-linm/apfsqyy1o6s89k4iqukg6ppxegsvxt35hbzuupevrh2eu9wdl4thj7dzo0s1uvplcygmt3498tthq+log==" crossorigin=""></script> <style> #map { width: 100%; height: 100%; } </style> </head> <body> <div id='map'></div> <script> var uosensors = $.ajax({ url:"http://uoweb1.ncl.ac.uk/api/v1/sensors.geojson?api_key=j5wze84qf82y23luzkboejai2tqcdiqtpmu5swbq46r6s1cqtc86zhkctkbxf6chx8lqrxficjqt00kvwioukj81av", datatype: "json", success: console.log("urban observatory sensor data loaded."), error: function (xhr) { alert(xhr.statustext) } }) // specify code should run once data request complete $.when(uosensors).done(function() { var map = l.map('map'); cartodbattribution = 'map data © <a href="http://openstreetmap.org">openstreetmap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">cc-by-sa</a>, imagery © <a href="http://mapbox.com">mapbox</a>'; l.tilelayer('https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyj1ijoiyw5kexbyb2n0b3iilcjhijoiy2o2amzqodvymtdomzjxcwjlbnpzahjqmij9.tflpar14ezxbezpdx03c5q', { attribution: cartodbattribution }).addto(map); var myicon = l.icon({ iconurl: 'rain-marker.png', iconsize: [32, 37], iconanchor: [16, 37], popupanchor: [0, -28] }); function weatherfilter(feature, layer) { if(feature.properties.type === "weather") return true; } var uosensorslayer = l.geojson(uosensors.responsejson, {filter: weatherfilter}) .eachlayer(function (layer) { layer.bindpopup(layer.feature.properties.name); }).addto(map); map.setview({ lat: 54.96, lng: -1.61 }, 12); }); </script> </body> </html>
what i've done in case , work me :
var uosensorslayer = l.geojson(uosensors.responsejson), { filter : [...], pointtolayer: function (feature, latlng) { // each point return marker settings want return l.marker(latlng, {icon: myicon}).bindtooltip(tooltip).bindpopup(popup); } }).addto(map);
Comments
Post a Comment