I want to show the text label to show the location name on the leaflet map(Not tool tip text, or popup text).
.component.ts
map[i] = L.map(v).setView([this.sensors[i].latitude,this.sensors[i].longitude], 11);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: ' '+this.sensors[i].name+' '
}).addTo(map[i]);
var latlng = L.latLng(this.sensors[i].latitude, this.sensors[i].longitude)
marker = L.marker(latlng, { icon: sensoricon }).addTo(map[i]);
No I want to add the location name for each map dynamically from the backend (i.e this.sensors[i].name)
Related
Hello everyone I have some problems its about the current positionmarker in my leaflet its supposed to update every 3 second and it does but it everytime it puts a new "position" marker on the map and the old one stays how can i fix this?
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: '© Leaflet 2021',
tileSize: 512,
zoomOffset: -1,
id: 'mapbox/streets-v11',
accessToken: '######'
}).addTo(map);
var greenIcon = L.icon({
iconUrl: 'person.png',
iconSize: [35, 35], // size of the icon // the same for the shadow
popupAnchor: [0, -20] // point from which the popup should open relative to the iconAnchor
});
// placeholders for the L.marker and L.circle representing user's current position and accuracy
var current_position, current_accuracy;
function onLocationFound(e) {
var radius = e.accuracy / 2;
var marker;
L.marker(e.latlng, {icon: greenIcon}).addTo(map)
}
// wrap map.locate in a function
function locate() {
map.locate({setView: true, maxZoom: 15});
}
map.on('locationfound', onLocationFound);
// call locate every 3 seconds... forever
setInterval(locate, 3000);
An efficient way to fix this is to keep a reference to the marker you create, so that you can update its position rather than creating a new marker each time you get a location update. The reference needs to be held in a variable that is outside your callback function, but in scope when the callback is created.
For instance, your callback can check whether the marker already exists, and either create it and attach it to the map object for easy re-use, or just update its coordinates if it is already there:
function onLocationFound(e) {
var radius = e.accuracy / 2;
if (map._here_marker) {
// Update the marker if it already exists.
map._here_marker.setLatLng(e.latlng);
} else {
// Create a new marker and add it to the map
map._here_marker = L.marker(e.latlng, {icon: greenIcon}).addTo(map);
}
}
Having this reference will also let you edit the marker from other functions, e.g. to change the icon or popup, hide it from view, etc.
You can do it, for example, in the following way.
Add an ID (customId) to the marker:
const marker = L.marker([lng, lat], {
id: customId
});
And when you add a new marker remove the existing one with the code below:
map.eachLayer(function(layer) {
if (layer.options && layer.options.pane === "markerPane") {
if (layer.options.id !== customId) {
map.removeLayer(layer);
}
}
});
I'm new to mapbox GL JS and am following this example:
Add custom markers in Mapbox GL JS
https://www.mapbox.com/help/custom-markers-gl-js/
Let's say I modify the example above to include 100 different animal markers. How do I change the draggable property of a specific marker after it has been added to the map?
Example: Change the draggable property of the dog marker.
It would be nice to do something like this:
map.getMarker('dog').setDraggable(true);
I don't see a way to query any of the markers added to my map or modify a specific marker's properties like setLatLng, setDraggable after they have been added to a map. There is no method to get the collection of markers added to a map. Thanks for any help!
For change marker property like draggable check its api. IE https://www.mapbox.com/mapbox-gl-js/api/#marker#setdraggable
Mapbox custom marker is build by html element. If you want to change visual display of custom marker element, you should update Its inside html. For example, here are 2 functions I use to create a div with image background then return it as a image marker
/**
* #function CustomMarkerWithIcon(): constructor for CustomMarker with image icon specify
* #param lnglat: (LngLat) position of the marker
* map: (Map) map used on
* icon: (image) object for custom image
*/
function CustomMarkerWithIcon(lnglat, map, icon) {
var el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = 'url("' + icon.url + '")';
el.style.backgroundSize = 'cover';
el.style.width = icon.size.width;
el.style.height = icon.size.height;
el.style.zIndex = icon.zIndex;
return new mapboxgl.Marker(el)
.setLngLat(lnglat)
.addTo(map);
}
/**
* #function ChangeMarkerIcon(): change marker icon
* #param marker: (marker) marker
* icon: (image) object for custom image
*/
function ChangeMarkerIcon(marker, icon) {
var el = marker.getElement();
el.style.backgroundImage = 'url("' + icon.url + '")';
}
You're right: Mapbox GL JS doesn't store references to markers. However, you can store your own references to the markers in an array at the time that you generate them.
In this example below, I am looping over a set of GeoJSON point features and creating a custom HTML marker for each:
let markersArray = [];
geojson.features.forEach(feature => {
// create a HTML element for each feature
let el = document.createElement("div");
el.className = "marker";
el.innerHTML = `
<img src="custom-marker.png" height="20px" width="20px" />
<span class="marker-label">${feature.properties.name}</span>
`;
// make a marker for each feature and add to the map
let marker = new mapboxgl.Marker({
element: el,
anchor: "top"
})
.setLngLat(feature.geometry.coordinates)
.addTo(map);
// add to my own array in an object with a custom 'id' string from my geojson
markersArray.push({
id: feature.properties.id,
marker
});
});
This id string can be whatever you want. You can even store other parameters if you want to be able to query other things, like latitude/longitude:
markersArray.push({
id: feature.properties.id,
coordinates: feature.geometry.coordinates,
marker
});
Then, if I want to access the marker's instance members (like setDraggable), I can use Array.find() to return the first instance that matches my search parameters in markersArray:
let someIdQuery = "some-id";
let queriedMarkerObj = markersArray.find(
marker => marker.id === someIdQuery
);
queriedMarkerObj.marker.setDraggable(true);
(Note that Array.find() just returns the first instance in the array that matches your condition. Use something like Array.filter() if you want to be able to query for more than one marker.)
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...!
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);
I have a listener that will detect changes of the location of objects on databases. It will pass all the information of the object that is being changed.
I want to get all markers from the current map and find the marker that is affected. Once found, update the location.
But, I am still looking for the best ways to get all markers from the map and then I can update the location.
var map = L.map('map').setView([37.78541,-122.40787], 13);
var markers = new L.FeatureGroup();
var mapLink =
'OpenStreetMap';
L.tileLayer(
'https://{s}.tiles.mapbox.com/v4/examples.map-i87786ca/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZ2Vja29iIiwiYSI6IndzVjRGN0kifQ.lToORsjE0lkt-VQ2SXOb-Q', {
attribution: '© ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
var marker = createCircleMarker([44.977368, -93.232659]);
marker._id = "69"; // Id of the marker
map.addLayer(marker);
var socket = io();
socket.on('update location', function(obj) {
// Get all markers and find markers with attribute obj.name to
// update the location to [obj.lat,obj.lon]
});
Use eachLayer method on L.map. Like
map.eachLayer(function (layer) {
if (layer.options.name === 'XXXXX') {
layer.setLatLng([newLat,newLon])
}
});
Documentation at http://leafletjs.com/reference-1.2.0.html#map-eachlayer
To add an option without using map.eachLayer; all layers within the map are internally stored in map._layers.
Use
map._layers.forEach(function (layer) {
...
});
to iterate over ALL Layer elements. Not just the ones currently visible.