I'm trying to scrape together some code to show multiple layers of data on a leaflet map using GeoJSON. This is mostly working, however some of the data is for the exact same lat long position and when it displays in Leaflet it just shows a single marker. All of the others are buried beneath it and are inaccessible.
I then added in the MarkerCluster plugin, which spiderfied the markers, but they were all identical. Thinking this was a limitation with the basic MarkerCluster plugin, I went for the Spiderfier Clusterer and that does exactly the same thing.
The code I'm using did work with the Spiderfier Clusterer when I was just using L.marker to create the points. Now that I've switched to L.GeoJSON it seems to have stopped.
Can someone tell me what I'm doing wrong and why all of the markers in the Cluster are the same?
var oms = new OverlappingMarkerSpiderfier(timemap);
oms.addListener('click', function(marker) {
popup.setContent(marker.desc);
popup.setLatLng(geojsonFeature.geometry.coordinates);
timemap.openPopup(popup);
});
function getMapInfo(thisLayer, startyear, endyear)
{
layerGroups["layerGroup" + thisLayer] = L.layerGroup();
var clusters = L.markerClusterGroup({
spiderfyOnMaxZoom: true,
showCoverageOnHover: false,
zoomToBoundsOnClick: false,
maxClusterRadius: 0
});
$.getJSON("geojson.php?layer="+thisLayer+"&startyear="+startyear+"&endyear="+endyear, function (geoJSONFeature)
{
iconGroup["icon"+thisLayer]= new L.Icon({
iconUrl: "css/images/"+geoJSONFeature.features[0].properties.icon,
shadowUrl: "css/images/shadow.png",
iconSize: [32, 37],
shadowSize: [51, 37],
shadowAnchor: [10, 37],
iconAnchor: [10, 40],
popupAnchor: [5, -20]
});
var location = new L.geoJSON(geoJSONFeature, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: iconGroup["icon"+thisLayer]});
},
onEachFeature: function (feature, layer) {
layer.bindPopup('<h1>'+geoJSONFeature.features[0].properties.item+'</h1><p>'+geoJSONFeature.features[0].properties.shortdesc+'</p>');
layer.bindTooltip(geoJSONFeature.features[0].properties.item);
oms.addMarker(layer);
}
}).addTo(layerGroups["layerGroup" + thisLayer]);
timemap.addLayer(layerGroups["layerGroup" + thisLayer]);
});
}
Related
Hello how can i get shown popups on my marks using Realtime showing the "name" from results.geojson? So that when i click one it says e.g VW and on another one e.g BMW.
var map = L.map('map'),
realtime = L.realtime('results.geojson', {
interval: 3 * 1000,
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
'icon': L.icon({
iconUrl: 'car.png',
iconSize: [50, 50], // size of the icon
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
})
});
}
}).addTo(map);
I've searched everywhere, or almost, on the web to find a solution to add color to markers to a leaflet map when using geoJson, but in vein. So here I am today asking you how to achieve this little miracle ?
[Here]1 is my map. As you can see, all the markers have the default color, blue. I would like 3 more colors.
I've managed to make the leaflet markercluster plugin work. I was wondering how to make color-markers work.
Thank you all !
You have to set the icon for each marker:
You have to know a way how to differ the markers, so that you know which marker needs which icon. I used for this the value in the feature.properties.icon, this is a custom value
L.geoJSON(someGeojsonFeature, {
pointToLayer: function(feature, latlng) {
var _icon = L.icon({
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
});
if (feature.properties.icon == "black") {
_icon.options.iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-black.png'
} else if (feature.properties.icon == "gold") {
_icon.options.iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-gold.png'
} else if (feature.properties.icon == "green") {
_icon.options.iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png'
}
return L.marker(latlng, {
icon: _icon
});
}
}).addTo(map);
I am trying to visualize a Leaflet Marker based on a json file stored in gist. So far, I do not manage, since my web map (http://geo.uzh.ch/~gboo/netap/netap.html) shows the base map only and not the marker.
When I inspect the webpage in Firefox, it gives me this error:
TypeError: undefined is not a function (near '...}).addTo(map);...')
Here the code snipet:
$(document).ready(function() {
var map = L.map('map', {
center: [46.798333, 8.231944],
zoom: 8,
minZoom: 9,
maxZoom: 16,
zoomControl:true
});
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'OpenStreetMap'
}).addTo(map)
$.getJSON("https://gist.githubusercontent.com/netapschweiz/13d37c1ee99e2c052246/raw/f64297e6bc783c1af5844921012116703fd37e0d/map.geojson", {
pointToLayer: function(feature, latlng) {
var smallIcon = L.icon({
iconSize: [27, 27],
iconAnchor: [13, 27],
popupAnchor: [1, -24],
iconUrl: 'www.geo.uzh.ch/~gboo/netap/img/catMarker.png'
});
return L.marker(latlng, smallIcon);
}
}).addTo(map);
});
Could someone help me? Many thanks!
It looks like the core of your confusion is thinking that $.getJSON has some relationship to L.geoJson. It doesn't: $.getJSON is a jQuery function that fetches data, L.geoJson is a Leaflet function that puts data on the map. To fix this code, you'll need to read the jQuery docs for $.getJSON (that explain that you need to supply a callback as the second argument) and the Leaflet docs for L.geoJson (that explain that you need to supply data as the first argument).
That's the way to go:
var geojsonMarkerOptions = L.icon({
iconUrl: 'http://',
iconSize: [30, 30],
iconAnchor: [15, 15],
popupAnchor: [0, -15]
});
$.getJSON('http://', function(data) {
L.geoJson(data, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: geojsonMarkerOptions})
}})
}).addTo(map);
I´m just starting with leaflet. My question is how can I cluster custom markers which where added to the map like this
var LeafIcon = L.Icon.extend({
options: {
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
popupAnchor: [-3, -10]
}
});
var greenIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/docs/images/leaf-green.png'}),
redIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/docs/images/leaf-red.png'}),
orangeIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/docs/images/leaf-orange.png'});
L.marker([51.5, -0.071], {icon: greenIcon}).bindPopup("<p>ok</p><p>tada</p>.").addTo(map);
L.marker([51.5, -0.073], {icon: redIcon}).bindPopup("I am a red leaf.").addTo(map);
L.marker([51.5, -0.076], {icon: orangeIcon}).bindPopup("I am an orange leaf.").addTo(map);
I´m struggling adding this to a MarkerClusterGroup.
Please find a working fiddle here: http://jsfiddle.net/6uovronb/
thanks!
I updated your fiddle and added your markers to a marker group.
Here's some sample code:
var markers = new L.MarkerClusterGroup();
markers.addLayer(L.marker([51.5, -0.071], {
icon: greenIcon
}).bindPopup("<p>ok</p><p>tada</p>."));
On a slightly unrelated note, I've never used marker cluster but that's a pretty slick leaflet plugin.
I have geojson layer like this:
var icon_mfc = L.icon({
iconUrl: 'icons/mfc_h32.png',
iconAnchor: [11, 32]
});
var mfc_layer = L.geoJson(mfc,{
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: icon_mfc}).bindPopup(feature.properties.name);
}
});
i want find marker and i want fitbound and open popup on this marker, i know(for example) attribute marker "feature.properties.name".
Use the .eachLayer method to iterate through layers, and write your JavaScript logic inside of it.