I have a map with different layers. The user can choose between them with a L.control.layers. Is it possible to add a button that would center the map with all the active layers?
Thanks for any tips,
You can add all your layers to a FeatureGroup and then get the bounds. With that bounds you can center the map with map.fitBounds(bounds):
var fg = L.featureGroup().addTo(map);
layer1.addTo(fg);
layer2.addTo(fg);
....
function centerMap(){
map.fitBounds(fg.getBounds());
}
As button you can use a default html button:
<button onclick="centerMap()">Center Map</button>
Related
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 want to show a single world map and wrap it around so that each area is shown only once on the screen. Please refer the fiddle http://jsfiddle.net/8m13d6vs/
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
osm = L.tileLayer(osmUrl, {
noWrap: false,
attribution: "<a href='http://openstreetmap.org'>OpenStreetMap</a>"
});
var map = L.map('map').setView([0, 0], 1).addLayer(osm);
In the above fiddle, wrap is on, but the world map is duplicated. I want a single world map, and on left/right mouse drag, it should wrap around. It should be responsive to the area as well. Is there any way to achieve this? Hope my problem statement is understandable.
There's the Leaflet worldCopyJump option:
var map = L.map('map', {worldCopyJump: true}).setView([0, 0], 1).addLayer(osm);
It defaults to false, but setting this to true will copy the contents of the map over as the user pans beyond the map boundaries.
This sounds like a misunderstanding of the definition of "wrap":
In the context of Leaflet's Tile Layer / Grid Layer option noWrap, it says:
Whether the layer is wrapped around the antimeridian. If true, the GridLayer will only be displayed once at low zoom levels.
So it sounds like simply noWrap: true should achieve your objective.
Updated JSFiddle: http://jsfiddle.net/8m13d6vs/3/
BTW you should consider upgrading Leaflet version to 1+
I'm using leaflet for my project and I want to use filter marker in it. To do it, I will setOpacity to 0 for all markers and re setOpacity to 1 for my targets. I know leaflet allow to setOpacity for each market but can I set all markers at the same time?
Thanks for your help!
There are many ways to achieve that
In leaftlet
Create a layer group and add each marker to this group :
var myGroup = L.layerGroup([mark1, mark2, ...]);
You can add the entire group to the map.
Then, when you want to set marker opacity to 0 do :
myGroup.eachLayer(function(layer) {
layer.setOpacity(0);
});
A little jsfiddle example here :
https://jsfiddle.net/csblo/64phqLb7/4/
In pure javascript
Store all your markers in an array. First create an array :
var allMarkers = [];
And when you create a new marker push it in this array :
var marker = L.marker(...);
allMarkers.push(marker);
Then, when you have to set opacity to 0 :
allMarkers.forEach(function(marker) {
marker.setOpacity(0);
});
I am using Leaflet.js to create a map. The data displayed on the map depends on user selection so I instantiate two empty feature groups on map load, one for the values, and one for a color marker behind the value ( color depends on the value ).
if( dHMT.dataColorLayer===undefined ){
dHMT.dataColorLayer = new L.featureGroup({}).addTo(dHMT.map);
}
if( dHMT.dataValueLayer===undefined ){
dHMT.dataValueLayer = new L.featureGroup({}).addTo(dHMT.map);
}
I then add the empty layers to the layer switcher.
dHMT.overlayMapsLS = {
"Bassins ": dHMT.bassinLayer,
"Couleurs ": dHMT.dataColorLayer,
"Données ": dHMT.dataValueLayer
};
Once the user selects data, the featureGroups are filled with the relevant values/markers.
var iconColor = L.divIcon({className: 'dataSpans',html:"<div style='text-align: center;border-radius: 50%;height:40px;width:40px;padding-top:9px;background:"+dHMT.siteinfo[x].color+"'></div>"});
var iconColorDiv = L.marker([dHMT.ecartArray[x].lat, dHMT.ecartArray[x].lon], {icon: iconColor})
.bindPopup(
'Nom : '+dHMT.siteinfo[x].name+'<br>'+
'Numéro : '+dHMT.siteinfo[x].stnm+'<br>'+
'Stid : '+dHMT.siteinfo[x].stid+'<br>'+
'LatLon : '+dHMT.siteinfo[x].lat+','+dHMT.ecartArray[x].lon+'<br>'+
'Valeur : '+dHMT.ecartArray[x].ecart+'<br>'
).on('mouseover', function (e) {
this.openPopup();
}).on('mouseout', function (e) {
this.closePopup();
});
var iconValue = L.divIcon({className: 'dataSpans',html:"<div style='text-align: center;height:40px;width:40px;padding-top:9px;'>"+value+"</div>"});
var iconValueDiv = L.marker([dHMT.ecartArray[x].lat, dHMT.ecartArray[x].lon], {icon: iconValue});
dataColorFeatures.push(iconColorDiv);
dataValueFeatures.push(iconValueDiv);
L.featureGroup(dataColorFeatures).addTo(dHMT.dataColorLayer);
L.featureGroup(dataValueFeatures).addTo(dHMT.dataValueLayer);
Both layers are fine, I have a nice map with a marker layer with colored circles with another layer displaying values over the marker. The goal being to deactivate the colors or the values using the layer switcher.
The problem is that if, for example, I toggle the color layer off, and turn it on again, the colored circles reappear over the values. The desired behavior would be to have them reappear in the original order, behind the values.
You can listen to the overlayadd event on your L.Map instance:
Fired when an overlay is selected through the layer control.
http://leafletjs.com/reference.html#map-overlayadd
When fired you can use the bringToFront method of L.FeatureLayer:
Brings the layer group to the top of all other layers.
http://leafletjs.com/reference.html#featuregroup-bringtofront
map.on('overlayadd', function () {
dHMT.dataValueLayer.bringToFront();
});
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