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);
Related
I am creating a Leaflet Map Widget using Preact and webpack.
I have 3 buttons with a single map. Below images shows what I implemented.
when click one single button, the map will show some locations. Like wise other buttons also have each locations. First I clicked "Cemeteries" button, Its fine. locations are displaying on the map. But after that I click "Funeral Homes" button, still have the "cemeteries" locations also. When I click "crematoria" button, same problem, "cemeteries", "Funeral Homes" and "crematoria" locations are displaying together.
What I want is, when I click a one single button, map will show only the each button's locations and when I click another button, previous clicked button locations need to remove.
In my componentDidMount() I created the map.
this.state.map = createMap('mapid').setView([51.505, -0.09], 13);
let urlll = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?';
this.state.map.addLayer(tileLayer(
urlll,
{attribution: 'Map data © OpenStreetMap contributors, Imagery © Mapbox',
maxZoom: 18,
id: 'MY_MAPBOX_ID',
tileSize: 512,
zoomOffset: -1,
accessToken: 'MY_ACCESS_TOKEN'
})
)
After that I create 3 methods for button click events. This is a one method
handleMapCemeteries (e) {
e.preventDefault();
var locationsdemo = [
["LOCATION_1", 11.8166, 13.0942],
["LOCATION_2", 87.9804, 76.9189],
["LOCATION_3", 10.7202, 45.5621],
["LOCATION_4", 11.3889, 11.6277],
["LOCATION_5", 10.5929, 43.6325]
];
let marketIcon = icon({
iconUrl: markerIcon,
iconRetinaUrl: markerIcon,
iconAnchor: [5, 25],
popupAnchor: [10, -44],
iconSize: [25, 35],
});
for (var i = 0; i < locationsdemo.length; i++) {
markeDemo = marker([locationsdemo[i][1], locationsdemo[i][2]], {
icon: marketIcon,
draggable: true,
title: 'Hover Text',
}).bindPopup(locationsdemo[i][0]).addTo(this.state.map);
}
}
Is anyone know how to remove markers when button click?
Instead of adding the markers to the map (.addTo(this.state.map);) add them to a LayerGroup / FeatureGroup (make sure the group is a global variable and only initialized once):
var fg = L.featureGroup().addTo(this.state.map);
...
marker. ... .addTo(fg);
and then you can remove all markers:
fg.clearLayers();
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 know I'm missing something, but can't find what.
The following code successfully sets the map and places the pins, but I can't get the popups to pop.
Any ideas on what I'm missing?
Thank you
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Test Map',
minZoom: 4,
maxZoom: 4
})
.addTo(map);
$.each(JSON.parse(data), function(idx, obj) {
console.log([obj['lat'], obj['lng']]);
var marker = L.marker([obj['lat'], obj['lng']])
.addTo(map)
.bindPopup('test');
});
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.