I use Leaflet to draw an OpenStreetMap and attach it with a custom icon marker
var mymap = L.map('mapid').setView([x, y], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
id: ID,
accessToken: accessToken
}).addTo(mymap);
var busIcon = new L.Icon({
iconUrl: 'images/marker/bus.png',
// shadowUrl: 'images/leaflet/marker-shadow.png',
iconSize: [12, 12],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
// shadowSize: [41, 41]
});
var marker = L.marker([x, y],{icon:busIcon}).addTo(mymap);
mymap.on('zoomed', function() {
var currentZoom = mymap.getZoom();
busIcon = new L.Icon({
iconUrl: 'images/marker/bus.png',
iconSize: [mymap.getZoom*2, mymap.getZoom*2],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
});
marker.setIcon(busIcon);
});
Now I want to resize my marker icon depending on zoom level. There's something wrong in my above code. What should I do? If marker is a CircleMaker, there is a setRadius function for me to handle this with ease. But in this case the marker is a custom icon, I tried as above and failed. How to fix it?
As YaFred said, there were some typos like zoomend, but also mymap.getZoom that should be mymap.getZoom()
I made a new answer to this old question to propose a more efficient solution. You can add a className to your icons (see leaflet documentation).
This means we can edit the height and width of the icon through css! In your zoomend function, instead of creating a new icon, simply call this JQuery:
var newzoom = '' + (2*(mymap.getZoom())) +'px';
$('#mapid .YourClassName').css({'width':newzoom,'height':newzoom});
For larger amounts of markers, this will significantly improve your performance as mentioned in this stackoverflow question:
Leaflet custom icon resize on zoom. Performance icon vs divicon
You have a typo: zoomed should be zoomend
map.on('zoomend', function() {
});
http://plnkr.co/edit/72ywrO8pgmmxLW6Y8mcL?p=preview
Apart from that, I would create and keep the icons out of the zoomend callback.
As it is, your code is creating an icon each time zoom is changing.
Related
I'm using Leaflet with VueJs. When adding marker at particular location I'm getting a double marker at said location :
The code for the same looks like this :
mounted() {
this.map = L.map("mapContainer").setView([51.1657, 10.4515], 6.4);
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
attribution:
'© OpenStreetMap contributors',
}).addTo(this.map);
//use a mix of renderers
var customPane = this.map.createPane("customPane");
var canvasRenderer = L.canvas({ pane: "customPane" });
customPane.style.zIndex = 399; // put just behind the standard overlay pane which is at 400
L.marker([51.715019, 8.751960]).addTo(this.map).bindPopup('Machine 102')
.openPopup();
L.marker([48.1351, 11.5820]).addTo(this.map).bindPopup('Machine 101')
.openPopup();
},
I hope to get single marker as the output
According to the leaflet documentation on markers, the markers use the urls of images set in the icon variable for the marker and its shadow.
It seems that somehow the url for the shadow image is the same as the one from your marker. The only way I managed to get the same image was by explicitly setting it:
// define the icon
var myIcon = L.icon({
iconUrl: 'http://cdn.leafletjs.com/leaflet-0.7.3/images/marker-icon.png', //url of your marker. I think this one is the one you have
shadowUrl: 'http://cdn.leafletjs.com/leaflet-0.7.3/images/marker-icon.png',
iconSize: [38, 30],
iconAnchor: [22, 94], // location of icon
popupAnchor: [-3, -76], //location of your pop-up
shadowSize: [50, 20],
shadowAnchor: [20, 90] // location of shadow
});
// create the marker using the 'MyIcon' defined above:
L.marker([51.715019, 8.751960],{icon: myIcon}).addTo(this.map).bindPopup('Machine 102').openPopup();
double shadow
If you remove the shadow properties, then it shouldn't appear:
var myIcon = L.icon({
iconUrl: 'http://cdn.leafletjs.com/leaflet-0.7.3/images/marker-icon.png',
iconSize: [38, 38],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
});
You can also try to set the shadowUrl to false, to make sure it overrides any inherited shadow location you might have:
shadowUrl:false
I'm trying to make my point marker have a picture icon, but for some reason, it's showing up on my map like this:
I've looked at the documentation on leaflet's website and what not but have had no luck. It's probably something pretty simple that I'm missing or brain farting on haha. Any help is much appreciated. Let me know what other code you might need to address the problem. TIA!
Here's my script
<script>
//create variable to hold the map element, give initial settings to map
var map = L.map("map", {
center: [38.1, -98.583333],
zoom: 4,
});
//add OSM tile layer to map element
L.tileLayer(
"https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png",
{
attribution:
'© OpenStreetMap contributors © CARTO',
subdomains: "abcd",
maxZoom: 19,
}
).addTo(map);
var logo = L.icon({
iconUrl: "imgs/patrickLogo.png",
iconSize: [20, 20],
});
L.marker([40.308746567390294, -105.08229135535235], { icon: logo })
.addTo(map)
.bindPopup("Berthoud, CO");
</script>
UPDATE: It's a 404 error. What does that mean and how can I fix it?
RESOLVED: changed my image path to an absolute path and it worked! Thanks, y'all.
var logo = L.icon({
iconUrl:
"https://d2q79iu7y748jz.cloudfront.net/s/_squarelogo/8ec294c2f144d43bf5d7ec5f4f96d0c9",
iconSize: [20, 20],
});
I'm using this plugin for a project. When i create popup they are activated when the loads. I want them to open when user clicks on the marker. Any help?
const mymap = L.map('mapid').setView([40.399245, 49.876386], 10);
const tile = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © Mapbox',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'TOKEN'
}).addTo(mymap);
const mapIcon = L.icon({
iconUrl: 'assets/image/icons/marker.png',
iconSize: [40, 40],
iconAnchor: [20, 20]
})
const marker = L.marker([40.399245, 49.876386], { icon: mapIcon }).addTo(mymap);
const marker = L.marker([40.399245, 49.876386], { icon: mapIcon }).addTo(mymap);
var popup = L.popup({}).setContent('content')
marker.bindPopup(popup).openPopup();
marker.setLatLng([40.399245, 49.876386]).addTo(mymap);
This little line of code is the culprit:
marker.bindPopup(popup).openPopup();
On this line you're binding the popup to a marker and then opening the popup right away. Leaving out the openPopup() method should fix your problem.
marker.bindPopup(popup);
As per the Leaflet documentation:
Usage example
If you want to just bind a popup to marker click and then open it, it's really easy:
marker.bindPopup(popupContent).openPopup();
I want the marker to be in the center of the map, but it is wrong.
I read the rest of the articles, but my problem was not solved.
var map = L.map('map').setView([lat, lng], 18);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk', {
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'pk',
attribution: 'nemajoo',
watch: true
}).addTo(map);
var LeafIcon = L.Icon.extend({
options: {
iconSize: [28, 60],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
}
});
var greenIcon = new LeafIcon({iconUrl: 'images/mrk.png'});
var center = map.getCenter();
var marker = L.marker([center.lat, center.lng],{icon: greenIcon}).addTo(map);
The problem here could be in any of the 3 configurations given we don't have the image:
mrk.png has some spacing inside the image, this can be fixed with any image editing tool.
the options object, on the anchor tag moves the image, making it look like it's not centered.
When you set the center, as far as I can see, you first get the center from the map, then use this center to position the icon, this is nicely done but markers with distant zooming don't represent it's center accurately.
In resume:
The problem is on the png or the anchor configuration, modify those values and try again.
If this does not work you can upload a sample minimal project so we can check (don't upload api keys or similar)
I'm trying to change the default marker for one of my KML layers. I'm using leaflet-omnivore for this.
This is the code I already have. The markers are not changing to the image and the layer control is only displaying the text, even though the img bit is in the code.
Marker Code:
var redIcon = L.icon({
iconUrl: 'icon.png',
iconSize: [20, 24],
iconAnchor: [12, 55],
popupAnchor: [-3, -76]
});
var nissanLayer = omnivore.kml('icons.kml')
.on('ready', function() {
map.fitBounds(customLayer.getBounds());
//change the icons for each point on the map
// After the 'ready' event fires, the GeoJSON contents are accessible
// and you can iterate through layers to bind custom popups.
customLayer.eachLayer(function(layer) {
// See the `.bindPopup` documentation for full details. This
// dataset has a property called `name`: your dataset might not,
// so inspect it and customize to taste.
layer.icon
layer.bindPopup('<img src="icon.png" height="24"><br><h3>'+layer.feature.properties.name+'</h3>');
});
})
.addTo(map);
var marker = new L.Marker(customLayer, {icon:redIcon});
map.addLayer(marker);
You seem to have overlooked the setIcon() method of L.Marker. I'd also check that a L.Layer is in fact a L.Marker before calling any L.Marker functionality, just for code sanity. e.g.:
var redIcon = L.icon({ /* ... */ });
var omnivoreLayer = omnivore.kml('icons.kml')
.on('ready', function() {
omnivoreLayer.eachLayer(function(layer) {
if (layer instanceof L.Marker) {
layer.setIcon(redIcon);
}
});
})
.addTo(map);
However, the Leaflet-Omnivore documentation says that the better way to apply custom styling to an Omnivore layer is to create a L.GeoJSON instance with the desired filters and styling, and then pass that to the Omnivore factory method. I suggest you read the Leaflet tutorial on GeoJSON to become familiar with this.
So instead of relying on a on('ready') event handler (which would change the markers after they are created), this would save a tiny bit of time by creating the markers directly with the desired style:
var omnivoreStyleHelper = L.geoJSON(null, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: redIcon});
}
});
var omnivoreLayer = omnivore.kml('icons.kml', null, omnivoreStyleHelper);
I haven't used leaflet that much but I did a small project where I set the icons to an image.
var redIcon = L.icon({
iconUrl: 'red-x.png',
iconSize: [25, 25], // size of the icon
iconAnchor: [12, 55], // point of the icon which will correspond to
marker's location
popupAnchor: [-3, -76] // point from which the popup should open
relative to the iconAnchor
});
var marker = new L.Marker(markerLocation, {icon:redIcon});
mymap.addLayer(marker);
Not sure how helpful this is really.
Links got a guide to follow which might be more use https://leafletjs.com/examples/custom-icons/