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 &copy; <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

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -