I have an animation, which starts like this:
Window.map = new L.Map('map', {
zoomControl: false
});
L.control.zoom({position:'topleft'
}).addTo(Window.map);
//add tile layers
var basemapLayer = new
L.TileLayer('https://{s}.tiles.mapbox.com/v4/github.map-xgq2svrz/{z}/{x}/{y}.png?ac$
token: '.....'
});
And then I am adding feature layers set zoom min and max, and it did not work either. I may hide it, change the position, but when I click on the '+' or the '-' nothing happens.
I am using the default css from leaflet.
Related
L.control.layers takes up to three parameters - baselayers, overlays and options. I'd like to be able to sort the overlays as they appear in the layer control but am not sure how to do that.
I used https://leafletjs.com/examples/layers-control/example.html as my starting point. So that example has this line:
var layerControl = L.control.layers(baseLayers, overlays).addTo(map);
I replaced that with this:
var options = {
autoZIndex: false,
sortLayers: true,
sortFunction: function(layerA, layerB, nameA, nameB) {
return -('' + nameA).localeCompare(nameB);
}
};
var layerControl = L.control.layers(baseLayers, overlays, options).addTo(map);
Problem is that that sorts both the overlays and the layers. I'd like to just sort the overlays.
Any ideas?
My JS fiddle:
https://jsfiddle.net/7e84rh06/1/
I know there is a way to show properties by mouse hove and click event on the map, but my question is how can I show the properties without mouse hover or click event.
I tried using label pane but it's not working in my case.
// show map
mymap = L.map('map_canvas');
// For Label
mymap.createPane('labels');
// This pane is above markers but below popups
mymap.getPane('labels').style.zIndex = 650;
// Layers in this pane are non-interactive and do not obscure mouse/touch events
mymap.getPane('labels').style.pointerEvents = 'none';
var positronLabels = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
attribution: '©OpenStreetMap, ©CartoDB',
pane: 'labels'
}).addTo(mymap);
layer.bindPopup(feature.properties.block_name + '</br>' + feature.properties.DIST_NAME,{
noHide: true,
direction: 'auto'
});
But still, it's not showing by default but it showing when I click on the map.
Please give me some suggestions on how to do it, I already wasted more than 10 days on this single work.
Happy coding.
I am using Mapbox GL JS v0.32.1 and I have a geolocation control on my map.
I would like to make it so that the maximum zoom when the user geolocates is 8, so that the map zooms to the user's approximate location, not street location.
According to the documentation there should be a geolocate event available, but this isn't working for me:
var geoLocate = map.addControl(new mapboxgl.GeolocateControl());
geoLocate.on('geolocate', function(e) {
console.log('geolocated');
map.setZoom(8);
})
Geolocating (in Chrome at least) still zooms to the maximum zoom level available, and I don't see a console log message when it happens.
Map#addControl returns Map. The geolocate event is fired on GeolocateControl. The following should work:
var geoLocate = new mapboxgl.GeolocateControl();
map.addControl(geoLocate);
geoLocate.on('geolocate', function(e) {
console.log('geolocated');
map.setZoom(8);
});
Try this way. smooth zoom to your location
var geoLocate = new mapboxgl.GeolocateControl();
map.addControl(geoLocate);
geoLocate.on('geolocate', function(e) {
map.flyTo({
center:[e.coords.longitude, e.coords.latitude],
zoom:16 //set zoom
});
});
I have a leaflet l.control info popup on the top right corner of my map.
When I move one of my custom marker to the top right behind the l.control and release the mouse button, I am no more able to select the marker (because the l.control div is in the foreground)
Is there a way to prevent the user from dragging a marker behind the l.control div ?
I can't move the map to make the marker visible again as I plan to fix the marker position based on the container position (so if you move the map the marker will stay at the same place)
Thanks
I think easiest way to disable marker draggable, when the mouse enter the div info.
If your final goal is to fix the marker position to the map's center, just don't make it draggable and use L.Map's move event to update the marker when the map gets moved?
var map = new L.Map('leaflet', {
'center': [52.378333, 4.9],
'zoom': 12,
'layers': [
L.tileLayer('//{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors, © CartoDB'
})
]
});
var marker = new L.Marker(map.getCenter()).addTo(map);
map.on('move', function () {
marker.setLatLng(this.getCenter());
});
Example on Plunker: http://plnkr.co/edit/PnnuMowCXvjRxyPqEj31?p=preview
It is easy to track a users position and show a position marker with Leaflet
_map.locate({
watch: true,
setView: true,
maxZoom: 13,
enableHighAccuracy: true
})
and some code in the locationfound callback.
However, the user might wish to zoom to a differed level, but when the position maker gets updated the map always zooms back to the value set in the locate maxZoom option.
Is there a way to change the maxZomm value dynamically depending on the zoom level the user has chosen?
Well, after digging a bit in the source it is just as easy as this:
Listen to the zoomend event
_map.on('zoomend', _changeLocateMaxZoom);
and then update the locateOptions maxZoom
function _changeLocateMaxZoom(e) {
if (_map._locateOptions) {
_map._locateOptions.maxZoom = _map.getZoom();
}
}
Leaflet is a well designed library.