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.
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]);
});
}
Hello everyone I have some problems its about the current positionmarker in my leaflet its supposed to update every 3 second and it does but it everytime it puts a new "position" marker on the map and the old one stays how can i fix this?
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: '© Leaflet 2021',
tileSize: 512,
zoomOffset: -1,
id: 'mapbox/streets-v11',
accessToken: '######'
}).addTo(map);
var greenIcon = L.icon({
iconUrl: 'person.png',
iconSize: [35, 35], // size of the icon // the same for the shadow
popupAnchor: [0, -20] // point from which the popup should open relative to the iconAnchor
});
// placeholders for the L.marker and L.circle representing user's current position and accuracy
var current_position, current_accuracy;
function onLocationFound(e) {
var radius = e.accuracy / 2;
var marker;
L.marker(e.latlng, {icon: greenIcon}).addTo(map)
}
// wrap map.locate in a function
function locate() {
map.locate({setView: true, maxZoom: 15});
}
map.on('locationfound', onLocationFound);
// call locate every 3 seconds... forever
setInterval(locate, 3000);
An efficient way to fix this is to keep a reference to the marker you create, so that you can update its position rather than creating a new marker each time you get a location update. The reference needs to be held in a variable that is outside your callback function, but in scope when the callback is created.
For instance, your callback can check whether the marker already exists, and either create it and attach it to the map object for easy re-use, or just update its coordinates if it is already there:
function onLocationFound(e) {
var radius = e.accuracy / 2;
if (map._here_marker) {
// Update the marker if it already exists.
map._here_marker.setLatLng(e.latlng);
} else {
// Create a new marker and add it to the map
map._here_marker = L.marker(e.latlng, {icon: greenIcon}).addTo(map);
}
}
Having this reference will also let you edit the marker from other functions, e.g. to change the icon or popup, hide it from view, etc.
You can do it, for example, in the following way.
Add an ID (customId) to the marker:
const marker = L.marker([lng, lat], {
id: customId
});
And when you add a new marker remove the existing one with the code below:
map.eachLayer(function(layer) {
if (layer.options && layer.options.pane === "markerPane") {
if (layer.options.id !== customId) {
map.removeLayer(layer);
}
}
});
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 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);