I can bind a popup to esri leaflet's L.esri.DynamicMapLayer layer but how would I bind a tooltip to below DynamicMapLayer ?
var featureLayer = L.esri.dynamicMapLayer({
url: url,
useCors: true
});
Related
I'm using the Leaflet.markercluster plugin (https://github.com/Leaflet/Leaflet.markercluster) and
I'm struggling to update the markerClusterGroup Icon when the event spiderfied is fired.
Code:
// Initiate markers w/ a markerClusterGroup and the default icon
var markers = L.markerClusterGroup({
showCoverageOnHover: false,
});
// Set marker, bind it to Popup and add the markers as an layer to the map
markers.addLayer(L.marker(...))
.bindPopup(
L.popup({offset: L.point(0,0)}).setContent(
`...`
).openPopup()));
map.addLayer(markers);
// Try to update the default markerClusterGroup icon when a markerClusterGroup is spiderfied
markers.on('spiderfied', function (a) {
console.log('spiderfied');
markers.options = {
showCoverageOnHover: false,
iconCreateFunction: function() {
return L.divIcon({ html: '<b>' + 'Test' + '</b>' });
}
};
markers.refreshClusters();
});
What am I doing wrong here? Any advices?
Thanks in advance!
I've tried to get: https://github.com/Leaflet/Leaflet.markercluster#refreshing-the-clusters-icon implemented
I've done research on internet
I created markers from an array and added click event. I want to open tooltip when clicked a marker.
let marker: any = L.marker(new L.LatLng(lat, lng));
marker.on('click', (e) => {
let target = e.target;
if (!target._popup) {
let content = 'content';
target.bindPopup(content, {
closeOnClick: false,
closeButton: false,
autoClose: true,
closePopupOnClick: true
}).openPopup();
}
});
When clicked the marker infowindow is opening. Here the problem is close button href attribute is redirecting page to #close. How can I solve this problem?
The below code works ok, I get lots of interesting data in getFeatureId.
How do I get my hands on that in the popup ?
var map = L.map('map').setView([53.505, -7.09], 7);
L.tileLayer('https://{s}.etc.etc/{z}/{x}/{y}.png', {
attribution: 'osm..'
}).addTo(map);
var VectorTileOptions = {
rendererFactory: L.canvas.tile,
attribution: '',
interactive: true,
getFeatureId:function(feat){
return feat.properties.routes
}
};
var TilesPbfLayer = L.vectorGrid.protobuf(tileurl, VectorTileOptions).addTo(map);
var popup = L.popup();
map.on('popupopen', function(e) {
popup.setContent("how do i get the feature Id ? ")
});
TilesPbfLayer.bindPopup(popup)
I can get a click event on the tile layer, and its got a layer with my stuff in
TilesPbfLayer.on('click', function(e) {
if (e.layer)
popup.setContent(e.layer.properties.routes)
})
How to make camera center (starting position) directly move to user's location first, except press the "GeolocateControl" button in Mapbox GL JS?
Thanks!
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = '...'
var map = new mapboxgl.Map({
container: 'map', // container id
center: [23.7548053,62.5590779], // starting position
zoom: 2,
style: 'mapbox://styles/mapbox/streets-v9'
});
// Add geolocate control to the map.
map.addControl(new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
}));
</script>
Once the control is added to the map you can call trigger, see the documentation at https://www.mapbox.com/mapbox-gl-js/api/#geolocatecontrol#trigger
const geolocate = new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true
},
trackUserLocation: true
});
map.addControl(geolocate);
geolocate.trigger();
Map` like this:
L.Map = L.Map.extend({
openPopup: function(popup) {
this._popup = popup;
return this.addLayer(popup).fire('popupopen', {
popup: this._popup
});
}
});
But I am using leaflet. Is there anyway to extent like so that i can prevent closing my marker popup?
L.mapbox.accessToken = constant.accessToken;
var map = L.mapbox.map('map', 'mapbox.streets', {zoomControl: true});
Update Dec 2017
Leaflet popup options have been extended to include { autoClose: false } which has the required effect :
var my_marker = L.marker([my_lat, my_lng], {icon: my_icon})
.addTo(map)
.bindPopup('My Popup HTML', {closeOnClick: false, autoClose: false});
Let me quote the Leaflet documentation on L.Popup:
Used to open popups in certain places of the map. Use Map.openPopup to open popups while making sure that only one popup is open at one time (recommended for usability), or use Map.addLayer to open as many as you want.
In order to open several popups, instantiate them using L.popup(latlng, options), then .addTo(map) them.
Define an array:
let map=L.map('mymap');
...
var markers = L.markerClusterGroup();
...
var marker=[];
marker[0]= L.marker([latitud1,longitud1]).addTo(map).bindPopup('Hola 0',{autoClose: false, closeOnClick: false});
marker[1]= L.marker([latitud2,longitud2]).addTo(map).bindPopup('Hola 1',{autoClose: false, closeOnClick: false});
To put on the map:
marker.forEach(function(marker) {
markers.addLayer(marker);
map.addLayer(markers);
});
Show the popup for only one:
var curPos = marker[0].getLatLng();
map.setView(new L.LatLng(curPos.lat,curPos.lng), 13);
marker[0].openPopup();
Show all popups:
marker.forEach(function(marker) {
var popup = marker.getPopup();
marker.bindPopup(popup.getContent()).openPopup();
});
Close all popups:
map.eachLayer(function (layer) {
layer.closePopup();
});