I want to check if there is a marker on the map with a "markerIconActive" icon.
I think the best would be to loop through all markers and check if there is one with a "markerIconActive" icon and if there's one to change it to "markerIconVisited". But how?
I use a marker clusterer so i can't just edit the DOM Elements Class to change the appearence of the marker.
Marker Icons:
var markerIconActive = L.divIcon({
className: 'marker--state--active',
html: "15",
iconAnchor: [20, 20]
});
var markerIconVisited = L.divIcon({
className: 'marker--state--visited',
html: "15",
iconAnchor: [20, 20]
});
I want to do it in vanilla Javascript.
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
In my current code, I am able to search and display a marker on the search location but when I remove text from the search bar or close search bar marker is still visible on map .until I refresh the page I can visualize the search result marker on the map. how can I hide or remove the search result marker from the map once I close the search bar or remove text from the search bar?
//add Search Control so load the Geojson of point of interest
var featuresLayer = new L.GeoJSON(data);
var Icon = L.icon({
iconUrl: 'icon-red.png',
iconSize: [25, 41], // size of the icon
iconAnchor: [13, 38], // point of the icon which will correspond to marker's location
popupAnchor: [1, -34], // point from which the popup should open relative to the iconAnchor
shadowSize: [41, 41] // shadow casting of icon
});
var searchControl = new L.Control.Search({
layer: featuresLayer,
propertyName: 'name',
autoCollapse: false,
collapsed:false,
autoType: false,
position:'topright',
moveToLocation: function(latlng, title, map) {
map.setView(latlng, 17); // access the zoom
console.log(latlng);
L.marker(latlng, {icon: Icon}).addTo(map).bindPopup('<h4>'+ latlng.layer.feature.properties.name +'</h4>').openPopup();
},
});
//inizialize search control
map.addControl(searchControl);
Save your marker to a variable and remove it after the event 'search:collapsed' is fired:
var searchMarker = null;
var searchControl = new L.Control.Search({
layer: featuresLayer,
propertyName: 'name',
autoCollapse: false,
collapsed:false,
autoType: false,
position:'topright',
moveToLocation: function(latlng, title, map) {
map.setView(latlng, 17); // access the zoom
console.log(latlng);
searchMarker = L.marker(latlng, {icon: Icon}).addTo(map).bindPopup('<h4>'+ latlng.layer.feature.properties.name +'</h4>').openPopup();
},
});
searchControl.on('search:cancel',()=>{
if(searchMarker && map.hasLayer(searchMarker)){
searchMarker.removeFrom(map);
searchMarker = null;
}
});
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 am trying to change marker icon for separate marker on my OpenStreetMap.
mapIconsReinit(L) {
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.imagePath = ''
L.Icon.Default.mergeOptions({
iconRetinaUrl: require('#/assets/img/map_markers/default/marker-icon-2x.png'),
iconUrl: require('#/assets/img/map_markers/default/marker-icon.png'),
shadowUrl: require('#/assets/img/map_markers/default/marker-shadow.png'),
});
},
getMarkerIcon(L, color) {
return L.divIcon({
iconRetinaUrl: require('#/assets/img/map_markers/marker-icon-2x-' + color + '.png'),
iconUrl: require('#/assets/img/map_markers/marker-icon-' + color + '.png'),
shadowUrl: require('#/assets/img/map_markers/marker-shadow.png'),
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
})
}
First function works fine with paths like '#/...', but the 2nd one - no.
Default marker works fine:
L.marker([marker.lat, marker.lng]).addTo(_context.map)
but if I try to use custom marker:
L.marker([marker.lat, marker.lng], {icon: this.getMarkerIcon(L, "red")}).addTo(_context.map)
I see a white square
You instantiate a Leaflet DivIcon whereas you pass options applicable for a Leaflet Icon.
Use L.icon instead of L.divIcon in that case.
The Icon expects the iconUrl (and other *Url) option to place the corresponding image on the map.
The DivIcon does not place an image but a bare HTML div element, so that you can fill it with arbitrary HTML content. By default it is styled as a white square with black border.
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/