I am using leaflet plugin to show the marker. When I click on the current marker the icon should change the current marker only.
Again when I click on another marker change that marker to new icon and keep all other marker icon original.
Like I have 2 marker Icon
1- original Icon which I am setting when showing the marker on map
2- new marker - I want this marker icon should be set when click on marker.Only current Marker Icon should be changed and keep all other Icon Original Icon.
you can try this.
When you click the marker1, its icon will change to the one you set.
let marker1 = L.marker([e.latitude, e.longitude], { icon: greenIcon }).on('click', ()=>{
marker1.setIcon(redIcon)
}).addTo(map)
Do you have a marker layer? If yes you could first create a new icon
var customIcon = L.Icon.extend({
options: {
iconSize: [40.4, 44],
iconAnchor: [20, 43],
popupAnchor: [0, -51]
}
});
var myCustomIcon = new CustomIcon({ iconUrl: '../images/marker.png' });
After that you should get clicked marker's index inside the Layer and update the icon like this:
markersLayer[markersIndex].setIcon(myCustomIcon);
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();
My function is supposed to display a marker over an existing icon (US Cities) when clicked/selected. The marker is an image file. Then when the user clicks on another icon, the previous marker should disappear.
It seems to work fine at first. The first marker is created when the icon is clicked. When the second icon is clicked, the marker is created and the original marker disappears. When a third icon is clicked, the marker does not appear. The console says "marker is not defined".
Here is my code:
map.on('click', 'usa_cities', function(highlightMarker) {
var markerCoordinates = highlightMarker.features[0].geometry.coordinates.slice();
var markerElement = document.createElement('div');
markerElement.id = 'marker';
// create the marker
new mapboxgl.Marker(markerElement)
.setLngLat(markerCoordinates)
.addTo(map);
map.on('click', 'usa_cities', function() {
marker.remove()
});
}),
Thank you
You don't need to create a new marker each time the user clicks. You can simply call marker.setLngLat(markerCoordinates).
Original-markerIcon = leaflet/images/marker-icon-2x.png
current-markerIcon = leaflet/images/map-marker.png
I have many markers and I want to change marker icon of the current clicked marker.If I click again on another marker change all marker Icon to original marker and current marker with current Icon.
I also have label attached with each marker.
When I click on current Icon I want to change also the label of that marker or remove the label.
How can I achieve this ?
thank you.
Image with marker visible with original-markerIcon
EDIT-1
L.Icon.Change = L.Icon.Default.extend({
options: {
iconUrl: 'leaflet/images/map-marker.png',
iconSize: new L.Point(150, 75),
}
});
var changeIcon = new L.Icon.Change();
L.Icon.Original = L.Icon.Default.extend({
options: {
iconUrl: 'leaflet/images/marker-icon-2x.png',
iconSize: new L.Point(45, 81),
}
});
var originalIcon = new L.Icon.Original();
marker.on('click',function(e){
for(var i = 0 ; i < $scope.markers.length ; i++){
$scope.markers[i].setIcon(originalIcon);
}
})
// marker click event to show the center pano
$scope.markers[index].on('click',function(e){
$scope.markers[index].setIcon(changeIcon);
});
If i am not mistaking there is a function named as "eachLayer" in map. I think when you create a marker, leaflet gives an automatic ID for that. So you have to give that ID in "eachLayer" function. And when it finds appropriate marker, there should be a function "popupclose". To add it will be better if you show your code...!
Is it possible to add text to a custom icon marker? I want to avoid having to edit the icon in an image editor just to add the text.
I've created my custom icon marker like so:
var airfieldIcon = L.icon({
iconUrl: 'images/airfield.png',
iconSize: [48,48]
});
var airfield = L.geoJson (airfield, {
pointToLayer: function(feature,latlng){
return L.marker(latlng, {
icon: airfieldIcon
})
}
}).addTo(map);
How would I add the text "Banff Airfield" as a label to this icon? Is the easiest and most efficient way through using an image editor? if so, I will do that method, but wondering if there was a better way. Thanks!
You could use a L.DivIcon:
Represents a lightweight icon for markers that uses a simple div element instead of an image.
http://leafletjs.com/reference.html#divicon
Put your image and text in it's HTML, sprinkle some CSS to make it appear the way you want and you're good to go
new L.Marker([57.666667, -2.64], {
icon: new L.DivIcon({
className: 'my-div-icon',
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>'
})
});
Another option is to use the Leaflet.Label plugin:
Leaflet.label is plugin for adding labels to markers & shapes on leaflet powered maps.
Repository: https://github.com/Leaflet/Leaflet.label
Example: http://leaflet.github.io/Leaflet.label/
As of leaflet version 1.0.0, you can add a label without using a plugin (the plugin has been rolled into the core functionality).
Example:
var marker = L.marker(latlng)
.bindTooltip("Test Label",
{
permanent: true,
direction: 'right'
}
);
This yields a marker on the map with a label of "Test Label" which is always displayed to the right of the marker's icon.
To further explore Mark's answer, if you want to know an easy way to add text (number) over a marker like this:
You just have to proceed as follows:
1. Instantiate an icon (map.js)
var stepIcon = L.icon({
iconUrl: 'graphic/yellow-circle.png', // the background image you want
iconSize: [40, 40], // size of the icon
});
2.1 Setting the icon (map.js)
var marker = new L.marker([39.5, 77.3], { icon:stepIcon});
marker.bindTooltip("12" //specific number, {
permanent: true,
direction: 'center',
className: "my-labels"
});
marker.addTo(map);
2.2 Setting the icon (map.css)
.leaflet-tooltip.my-labels {
background-color: transparent;
border: transparent;
box-shadow: none;
font-weight: bold;
font-size: 30px;
}
Make sure you have imported your .css file into your .html page.
this is out of box solution it may not suitable for everyone but it works for me
simply you can add marker of icon then marker of text Like this :
var MarkerIcon = L.icon(feature.geometry.properties.icon);
var MarkerText = L.divIcon(
{className: TextPositionClass,
html:'<div>'+ displayText+'</div>',
iconSize: null
});
let marker = L.marker(latlng, {icon: MarkerIcon}).addTo(this.map); // add marker
let label = L.marker(latlng, {icon: MarkerText}).addTo(this.map); // add text on marker
How to add a custom icon in mapbox?
var map = L.mapbox.map('map', 'mapbox.streets').setView([0, 0], 1);
var geojson = { type: 'LineString', coordinates: value};
var start = value[0];
var end = value[value.length-1];
geojson.coordinates.push((start,end).slice());
// Add this generated geojson object to the map.
L.geoJson(geojson).addTo(map);
// Create a marker and add it to the map.
var marker = L.marker(end, {
icon: L.mapbox.marker.icon({
"iconUrl": "https://www.mapbox.com/mapbox.js/assets/images/astronaut2.png"
})
}).addTo(map);
});
I can't able to add a custom icon in above code. Please help me..
Thanks.
First you will have to create a var, for example 'myIcon', then simply replace the iconUrl with a path that specifies the custom marker you want to use.
You can use the iconSize option to specify the size of your marker
You can use the iconAnchor option to specify which part of your masker should be placed on the latlng.
myIcon=L.icon({
iconUrl:'img/custom-marker.png',
iconSize: [25,30]
});
Then create the marker, set the lat lng where you want your marker to be placed. And specify the icon you want to use.
var Marker = new L.Marker ( latlng, {icon:myIcon});
Finally add your market to the map:
map.addlayer(Marker);