I want to be able to add properties to markers in leaflet 0.7.7.
I tried:
var marker = L.marker([51.5, -0.09]);
marker.properties = {};
marker.properties.someprop = "Test"
var addedMarker = marker.addTo(mymap);
// console.log the addedMarker here does not show any properties
when I console.log the addedMarker, I do not see the properties.
It works perfectly for me, see http://playground-leaflet.rhcloud.com/nata/edit?html,console .
Related
I added a basic icon instance to my map, but cannot figure out how to give it a custom image. (I closely followed this example . After some digging, I have found examples on Mapbox's own page with code showing how to add custom images but it looks like they are adding markers as layers (with GeoJSON sources). It seems like so much code just to have a custom image. My code just looks like this :
var marker = new mapboxgl.Marker()
.setLngLat([-99, 30])
.addTo(map);
Is there a way to add my own image (PNG) for example? I have searched though the options for marker instances at the Mapbox documentation at this link but I can't find any information there.
Just try this...
var el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = 'url(https://path_to_your_icon/icon.png)';
el.style.width = '50px';
el.style.height = '50px';
new mapboxgl.Marker(el)
.setLngLat([-99, 30])
.addTo(map);
I have a marker in my leaflet map like
marker = new L.Marker([lat,lon],{icon:flagIcon,title: "Drage me to change your location"}).addTo(map);
marker.dragging.enable();
marker.on('dragend', function(e){
var coords = e.target.getLatLng();
var lat = coords.lat;
var lon = coords.lng;
console.log("Lat : "+lat+" Lng: "+lon);
document.getElementById("lat").value=lat;
document.getElementById("long").value=lon;
document.getElementById("placeName").value="location on map";
updateAnchor();
map.panTo({lon:lon,lat:lat})
if(flag!=0){
map.removeLayer(cir);
cir = L.circle([lat,lon],circleOptions).addTo(map);
refreshMarkers(flag);
}
});
If the marker is already exist i want to remove it and and a new one.For that i added a code like
if (marker) {
map.removeLayer(marker); // remove
}
But i couldn't remove the older marker.How to solve this issue
The marker you're adding isn't the same object as the marker that's already on the map. If you want to be able to reference (eg to remove) a marker later, save a copy of the marker object in a global.
var oldmarker;
marker = <your code here>
oldmarker = marker;
Then
if (map.hasLayer(oldmarker)) {
map.removeLayer(oldmarker);
}
Try:
if (map.hasLayer(marker)) {
map.removeLayer(marker); // remove
}
If this is not helping pls add more code to your question, when do you want to remove the marker and how you add the new one
I declare a leaflet map with
<div id="map" class="map-div"></div>
end initialize it with
var map = L.map('map').setView([51.178882, -1.826215],16);
$scope.map = map;
// OSM Mapnik
var osmUrl = "<a href='http://www.openstreetmap.org'>Open StreetMap</a>";
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© ' + osmUrl,
maxZoom: 18,
}).addTo(map);
I grab some data from my server, and and markers to the map, in a loop, by calling this function (it's AngularJS, but I doubt that that plays a role):
$scope.AddMarkerToMap = function(companyData, index, array)
{
var companyName = companyData.company_name;
var latitude = companyData.latitude;
var longitude = companyData.longitude;
var cssClassname = 'comapny_has_no_present_workers';
if (companyData['currentWorkers'] > 0)
cssClassname = 'comapny_has_present_workers';
var pubLatLng = L.latLng(latitude,longitude);
// see https://leafletjs.com/reference-1.4.0.html#marker
var marker = L.marker(pubLatLng,
{
// this is the tooltip hover stuff
title: companyData['currentWorkers'] + ' current matches ' + companyData['previousWorkers'] + ' previous matches',
// see https://leafletjs.com/reference-1.4.0.html#icon
// this is a permanent label.
icon: new L.DivIcon({
className: cssClassname,
////html: '<img class="my-div-image" src="http://png-3.vector.me/files/images/4/0/402272/aiga_air_transportation_bg_thumb"/>'+
//// '<span class="my-div-span">RAF Banff Airfield</span>'
html: '<span>' + companyName + '</span>'
})
}).addTo($scope.map);
// see https://leafletjs.com/reference-1.4.0.html#popup
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
}; // AddMarkerToMap()
And the entire map is suddenly grey - with no problems reported in the developer console.
If I comment out the line
marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
then everything displays as expected.
The code seems correct, as per the Leaflet documentation.
[Updtae] I just checked and if I only marker.bindPopup("<b>Hello world!</b><br>I am a popup."), the the map displays and I can click on the marker to display the popup. But when I try to programmatically open it with .openPopup(); the map is all grey.
[Update++] the map and its markers display just fine, with any one of
marker.bindPopup("<b>Hello world!</b><br>I am a popup.");
$scope.map.fitBounds(bounds, {padding: [50, 50]});
but with both, the map is grey :-(
What am I doing wrongly?
I think the issue comes from trying to change the map view (possibly through openPopup with autoPan, which is on by default) too often, typically in a loop without giving any delay for the map to actually set the view between each call.
IIRC, this is already identified as a limitation in Leaflet, but I could not find the exact thread in the issue tracker unfortunately.
Normally, a very simple fix is simply to remove the map view changes within your loop, and keep only the very last one.
In your case, if you have the default behaviour of only 1 Popup being opened at a time, then that would definitely be a valid solution: just open the popup of your last Marker.
If you did configure your map to keep several Popups open simultaneously, and you do want to open all of them through your loop, then make sure to disable autoPan (at least during your loop).
I'm still learning and I'm a bit stuck. I may be trying to do to much at once. I have a MapBox map working great with a clickable layer menu taken from examples on the MapBox site. I also have a MarkerClusterGroup which also works and is always visible on the map. Is there a way I could somehow have the MarkerClusterGroup clickable on/off just like layers identified in var overlays = { ...
Below is the code that I think needs the help:
var layers = {
Streets: L.mapbox.tileLayer('mapbox.streets').addTo(map),
Satellite: L.mapbox.tileLayer('mapbox.satellite'),
Light: L.mapbox.tileLayer('mapbox.light'),
};
var overlays = {
DataA: L.mapbox.featureLayer().loadURL('/data/ctsnew.geojson'),
DataB: L.mapbox.featureLayer().loadURL('/data/selectZipcodes.geojson'),
};
// Since featureLayer is an asynchronous method, we use the `.on('ready'`
// call to only use its marker data once we know it is actually loaded.
Markers: L.mapbox.featureLayer('examples.map-h61e8o8e').on('ready', function(e) {
// The clusterGroup gets each marker in the group added to it
// once loaded, and then is added to the map
var clusterGroup = new L.MarkerClusterGroup();
e.target.eachLayer(function(layer) {
clusterGroup.addLayer(layer);
});
map.addLayer(clusterGroup);
});
Could be something as simple as misuse of brackets. Thanks in advance.
You have to include your Marker Cluster Group in your overlays object. For example you could instantiate it just before defining overlays, even if your Cluster Group is empty for now.
Then you fill it once it has downloaded its data.
var layers = {
Streets: L.mapbox.tileLayer('mapbox.streets').addTo(map),
Satellite: L.mapbox.tileLayer('mapbox.satellite'),
Light: L.mapbox.tileLayer('mapbox.light'),
};
var clusterGroup = L.markerClusterGroup();
var overlays = {
DataA: L.mapbox.featureLayer().loadURL('/data/ctsnew.geojson'),
DataB: L.mapbox.featureLayer().loadURL('/data/selectZipcodes.geojson'),
Markers: clusterGroup
};
// Since featureLayer is an asynchronous method, we use the `.on('ready'`
// call to only use its marker data once we know it is actually loaded.
L.mapbox.featureLayer('examples.map-h61e8o8e').on('ready', function(e) {
// The clusterGroup gets each marker in the group added to it
// once loaded, and then is added to the map
e.target.eachLayer(function(layer) {
clusterGroup.addLayer(layer);
});
map.addLayer(clusterGroup); // use that line if you want to automatically add the cluster group to the map once it has downloaded its data.
});
I am use leaflet-directive to create map using leaflet.
Is it possible to remove leaflet link and OSM copyright from the map.
I wish to put in leaflet image instead.
When creating the map object, try this:
var map = L.map('map', { attributionControl:false });
It worked for me
A reference to the attribution control instance is being stored in the attributionControl property of your L.Map instance:
var map = new L.Map('map').setView([0, 0], 0);
attribution = map.attributionControl;
When you've got that you can use the setPrefix method to set a new prefix:
attribution.setPrefix('<img src="image.png">');
http://leafletjs.com/reference.html#control-attribution-setprefix
It's probably not legal to remove copy-right information, but if you're familiar with javascript search in the leaflet code for
'leaflet-control-attribution'
Greetings