Marqueurs personnalisés pour la couche externe GeoJSON

Je suis nouveau sur Leaflet et j'essaye de styler un flux geoJSON externe avec un marqueur personnalisé.Marqueurs personnalisés pour la couche externe GeoJSON

Je n'arrive pas à ajouter cela à UOSensorsLayer dans le code ci-dessous. La documentation officielle n'est pas trop claire quand il s'agit de ma mise en œuvre. Je peux seulement afficher les marqueurs en utilisant le marqueur bleu par défaut.

<html> 
<head> 
<title>Leaflet Map GeoJSON with 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/[email protected]/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/[email protected]/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 successfully loaded."), 
    error: function (xhr) { 
     alert(xhr.statusText) 
    } 
}) 
// Specify that this code should run once the data request is 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>

Source

2017-09-10 Andy Proctor

« Je vais avoir du mal à ajouter ceci à UOSensorsLayer dans le code ci-dessous. » Quel est précisément le problème? Avez-vous une erreur? – Carcigenicate

Je ne peux afficher les marqueurs qu'à l'aide du marqueur bleu par défaut. –

Ce que je l'ai fait dans mon cas et parfaitement travailler pour moi est la suivante:

var UOSensorsLayer = L.geoJSON(UOSensors.responseJSON), { 
    filter : [...], 
    pointToLayer: function (feature, latlng) { 
     // For each point we return a marker with settings we want 
     return L.marker(latlng, {icon: myIcon}).bindTooltip(tooltip).bindPopup(popup); 
    } 
}).addTo(map);

Source

2017-09-11 07:36:11 Baptiste

Avec ce qui précède, j'obtiens une ligne de fonction de jeton inattendue SyntaxError: Unxpected 52 après pointToLayer: function (feature, latlng) { –

Un jeton est manquant dans votre code. Vous pouvez essayer http://www.jslint.com/ pour vous aider à trouver le jeton manquant ou vous pouvez poster votre code ici et me dire si ma fonction fonctionne correctement après – Baptiste

Marqueurs personnalisés pour la couche externe GeoJSON

Répondre

Questions connexes