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.
Related
I want to get a popup marker(by image) on my map every time I double click on the screen. Every time I try to copy other's code, it won't work. Can someone help plz?THE MARKER NEEDS TO BE AN IMAGE!
I try to copy other's code, but it won't work. I'm still new in this line of work, so I don't know really how to do it on my own.
var map = L.map('map', {
layers: [
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © OpenStreetMap contributors'
})
],
center: [0, 0],
zoom: 0
});
map.on('dblclick',(e)=>{
L.marker(e.latlng).addTo(map).bindPopup('Hello World').openPopup()
})
Demo: https://plnkr.co/edit/u7QL15wYzLprVwhP
Custom icons: https://leafletjs.com/examples/custom-icons/
var greenIcon = L.icon({
iconUrl: 'https://leafletjs.com/examples/custom-icons/leaf-green.png',
iconSize: [38, 95], // size of the icon
iconAnchor: [22, 94],
});
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);
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]);
});
}
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);
The standard method of using a custom icon as shown in the Leaflet docs isn't working for me when I have a geojson data source. the layer is added fine, but is using the default marker icon. There's no reference to my custom icon PNG when i examine the DOM. Here's my code:
var crossIcon = L.icon({
iconUrl: 'plus.png',
shadowUrl: 'marker-shadow.png',
iconSize: [11, 11],
shadowSize: [11, 11],
iconAnchor: [6, 6],
shadowAnchor: [5, 5],
popupAnchor: [5, 5]
});
var points = L.geoJson(labels, {
icon: crossIcon
});
map.addLayer(points);
layerControl.addOverlay(points, 'Site Locations');
I've tried several suggestions found on SO and elsewhere with no success. plus.png is located in /lib/images/ where the default icon is also found.
Looking at the API for GeoJson here, there is no such option when creating a L.GeoJson layer for icon. I believe you may be looking for the style option, for polylines and polygons, or the pointToLayer option for specifying icons.
The sample GeoJson page on Leaflet's website shows this scenario. Look at the icon with the baseball player.
The icon is defined in this way:
var baseballIcon = L.icon({
iconUrl: 'baseball-marker.png',
iconSize: [32, 37],
iconAnchor: [16, 37],
popupAnchor: [0, -28]
});
The icon is applied to the L.geoJson layer through the pointToLayer option, which specifies a function; like this:
var coorsLayer = L.geoJson(coorsField, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: baseballIcon});
}
})
This function will be called for each GeoJSON point. The function will return an L.Marker that uses your specified icon.
So, to answer your question: Your code block that creates your Layer should look like this:
var points = L.geoJson(labels, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: crossIcon });
}
});
Rather than adding it as geojson layer you can add it as a marker
var crossIcon = L.icon({
iconUrl: 'plus.png',
shadowUrl: 'marker-shadow.png',
iconSize: [11, 11],
shadowSize: [11, 11],
iconAnchor: [6, 6],
shadowAnchor: [5, 5],
popupAnchor: [5, 5]
});
L.marker(icon:crossIcon);