In my web application, I'm using leaflet and I want to change layer of leaflet to satellite view and other map views using layer switch. How can I perform this.Please help!
You need to be a little more specific with your questioning...that said, something like this might help.
var osm = L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"),
mqi = L.tileLayer("http://{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png", {subdomains: ['otile1','otile2','otile3','otile4']});
var baseMaps = {
"OpenStreetMap": osm,
"MapQuestImagery": mqi
};
var overlays = {//add any overlays here
};
L.control.layers(baseMaps,overlays, {position: 'bottomleft'}).addTo(map);
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 want some of my Leaflet markers visible in more than one layer on my Openstreetmap map.
By example: London is harbor and is also a capital city.
So I want to see the London marker when I select only the layer 'harbors' or the layer 'capital cities'.
But the normal behaviour of Leaflet markers and layers seems to be that London only shows up when both layers 'harbors' and 'capital cities' are selected.
How to achieve to show up the London marker if just one of the two layers is selected?
Code:
var harbor = L.layerGroup().addTo(map);
var capital = L.layerGroup().addTo(map);
var marker1 = L.marker([51.5, 0]);
marker1.addTo(harbor);
marker1.addTo(capital);
var overlays = { "Capital": capital, "Harbor": harbor};
L.control.layers(null, overlays).addTo(map);
The link #Tordanik gave, was helpfull.
Adding this code does the job:
map.on("overlayremove", function(o) {
if (map.hasLayer(capital)) {
map.removeLayer(capital);
map.addLayer(capital);
}
if (map.hasLayer(harbor)) {
map.removeLayer(harbor);
map.addLayer(harbor);
}
});
Steps taken after an ovelayremove-click:
Test each layers if it is active
Remove this layer
Place this layer with his markers back
Result: all the markers in this layer are visible again.
I am exporting Google Directions routes as KML and displaying them on a Mapbox map by reading them with Omnivore and adding them to the map,
The Google KML stores each route as two Places (the start and end points) and one LineString (the route). In Mapbox I would like to show only the routes, that is to filter out the markers somehow. I'm displaying markers out of my own database and the Google markers clutter it up.
Here is my code. I change the styling of the LineStrings just to show that I can, but do not know what magic call(s) to make to not display the Points.
Thanks.
runLayer = omnivore.kml('data/xxxx.kml')
.on('ready', function() {
var llBnds = runLayer.getBounds();
map.fitBounds(llBnds);
this.eachLayer(function (layer) {
if (layer.feature.geometry.type == 'LineString') {
layer.setStyle({
color: '#4E3508',
weight: 4
});
}
if (layer.feature.geometry.type == 'Point') {
//
// Do something useful here to not display these items!!
//
}
});
})
.addTo(map);
Welcome to SO!
Many possible solutions:
Most straight forward from the code you provided, just use the removeLayer method on your runLayer Layer Group when you get a 'Point' feature.
Cleaner solution would be to filter out those features before they are even converted into Leaflet layers, through a custom GeoJSON Layer Group passed as 3rd argument of omnivore.kml, with a specified filter option:
var customLayer = L.geoJSON(null, {
filter: function(geoJsonFeature) {
// my custom filter function: do not display Point type features.
return geoJsonFeature.geometry.type !== 'Point';
}
}).addTo(map);
var runLayer = omnivore.kml('data/xxxx.kml', null, customLayer);
You can also use the style and/or onEachFeature options on customLayer to directly apply your desired style on your LineString.
I am trying to find a method of integrating the layer group control with the method of having 2 tile layers visible to enable the labels to sit above the polygons I generate.
http://leafletjs.com/examples/layers-control.html - layergroup guide
http://leafletjs.com/examples/map-panes.html - panes guide
My aim is to have the often used dark and light cartodb maps as options - but still making use of the panes functionality.
I have attempted to have something like the below however I don't believe leaflet is capable of handling it in this way.
Has anyone found a method yet to integrate this correctly?
var darkTile = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png', {
attribution: '©OpenStreetMap, ©CartoDB'
}).addTo(map);
var darkLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_only_labels/{z}/{x}/{y}.png', {
attribution: '©OpenStreetMap, ©CartoDB',
pane: 'labels'
}).addTo(map);
var lightTile = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
attribution: '©OpenStreetMap, ©CartoDB'
});//.addTo(map);
var lightLabels = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
attribution: '©OpenStreetMap, ©CartoDB',
pane: 'labels'
});//.addTo(map);
var light = {
lightTile,
lightLabels
};
var dark = {
darkTile,
darkLabels
};
var baseMaps = {
"Light" : light,
"Dark" : dark
};
L.control.layers(baseMaps).addTo(map);
Make sure you create your pane explicitly:
map.createPane("labels");
Create Layer Groups to gather your Tile Layers (basemap and labels) instead of plain JS objects. Leaflet will not use your plain objects.
var light = L.layerGroup([
lightTile,
lightLabels
]);
var dark = L.layerGroup([
darkTile,
darkLabels
]).addTo(map); // Add the group to map, rather than its individual layers.
Demo: http://jsfiddle.net/3v7hd2vx/45/
I am use leaflet-directive to create map using leaflet.
Is it possible to remove leaflet link and OSM copyright from the map.
I wish to put in leaflet image instead.
When creating the map object, try this:
var map = L.map('map', { attributionControl:false });
It worked for me
A reference to the attribution control instance is being stored in the attributionControl property of your L.Map instance:
var map = new L.Map('map').setView([0, 0], 0);
attribution = map.attributionControl;
When you've got that you can use the setPrefix method to set a new prefix:
attribution.setPrefix('<img src="image.png">');
http://leafletjs.com/reference.html#control-attribution-setprefix
It's probably not legal to remove copy-right information, but if you're familiar with javascript search in the leaflet code for
'leaflet-control-attribution'
Greetings