leaflet-panel-layers
leaflet-panel-layers copied to clipboard
stefanocudini
how to add layer and group dynamically?
Dear Stefano, thank you for your plugin.
Trying to figure out how to add a layer and assign it to a group:
This work as expected: var myItem = { active: true, name: "Isolines", layer: { type: "tileLayer.wms", args: ["https://siat.regione.umbria.it/arcgis/services/public/DBT_05_Orografia/MapServer/WMSServer", { layers: '13', format: 'image/png', transparent: true, //minZoom: 13 } ] } }; panel.addOverlay(myItem);
this does not: var myLayerGroup = [{ group: "WMS Layers", layers: [ { active: true, name: "Isolines", layer: { type: "tileLayer.wms", args: ["https://siat.regione.umbria.it/arcgis/services/public/DBT_05_Orografia/MapServer/WMSServer", { layers: '13', format: 'image/png', transparent: true, //minZoom: 13 } ] } }] }]; panel.addOverlay(myLayerGroup);
error: layer not defined in item
I there something i am missing, or an unsupported feature?
figured by looking in the source code: panel.addOverlay(myItem, 'myName', 'mygroup');
Trying to figure out how to have the group collapsed.
If anyone else is looking for this here is an example. You can set up the panel with no layers, then add all of your layers dynamically. To set the group to be collapsed on start up you set it when creating the group.
//Overlay Controls
var overLayers = {
title: 'Data Layers',
layers: [
{
group: "Group 1",
collapsed: true,
layers: []
},
{
group: "Group 2",
collapsed: true,
layers: []
}
]};
var over1 = L.control.panelLayers(overLayers.layers, null, {
title: overLayers.title,
position: 'topleft',
compact: true,//panle will take up only space needed instead of page height
collapsibleGroups:true,//alows group to be colapsed by user
collapsed: true //panel will colaps on mouse off
});
Then later in your code after you have created your layers you can add them like this:
over1.addOverlay({layer: fmu}, 'FMU', 'Group 1');
over1.addOverlay({layer: did_appl}, 'DID APPL', 'Group 1');
over1.addOverlay({layer: cadWeather}, 'weather','Group 2');
If you are using Icons for your layers you add your icon definition inside the {} brackets. In this example I have only overlay layers but it works the same for base layers.
var gHybrid = L.gridLayer.googleMutant({type: 'hybrid'});
base1.addBaseLayer({layer: gHybrid, icon:'<div class="icon"><span class="glyphicon glyphicon-picture"></span></div>'}, "Google Hybrid","Google");
In this example I'm using a glyphicon as the item icon which requires bootstrap. You will also need a css as per the collapsible panel example: https://labs.easyblog.it/maps/leaflet-panel-layers/examples/collapsible-panel.html
Hope this helps someone down the road.
Hi Stefano, thank you for your plugin.
I am Dinesh, new with Leaflet. We are using angular 6 in our project. Am getting the error "ERROR TypeError: leaflet__WEBPACK_IMPORTED_MODULE_2__.control.panelLayers is not a function" When I am adding panelLayers to control.
L.control.panelLayers(panelJsonConfig.baselayers, panelJsonConfig.overlayers).addTo(this.map);
Leaflet Version I am using "leaflet": "0.7.7", "leaflet-panel-layers": "^1.2.6"
Code: map.component.ts
import { AfterViewInit, Component } from '@angular/core'; import * as L from 'leaflet'; import "leaflet-panel-layers";
@Component({ selector: 'app-map', templateUrl: './map.component.html', styleUrls: ['./map.component.less'] }) export class MapComponent implements AfterViewInit { private map;
constructor() { }
ngAfterViewInit(): void { this.initMap(); }
private initMap(): void { this.map = L.map('map', { center: [ 3.16039, 101.7501 ], zoom: 12 });
this.map.setView(new L.LatLng(3.16039, 101.7501), 13);
const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
tiles.addTo(this.map);
var panelJsonConfig = {
"baselayers": [
{
"active": true,
"name": "Open Cycle Map",
"layer": {
"type": "tileLayer",
"args": [
"http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png"
]
}
},
{
"name": "Landscape",
"layer": {
"type": "tileLayer",
"args": [
"http://{s}.tile3.opencyclemap.org/landscape/{z}/{x}/{y}.png"
]
}
},
{
"name": "Transports",
"layer": {
"type": "tileLayer",
"args": [
"http://{s}.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png"
]
}
}
],
"overlayers": [
{
"name": "Terrain",
"layer": {
"type": "tileLayer",
"args": [
"http://toolserver.org/~cmarqu/hill/{z}/{x}/{y}.png", {
"opacity": 0.5
}
]
}
}
]
};
L.control.panelLayers(panelJsonConfig.baselayers, panelJsonConfig.overlayers).addTo(this.map);
}
}
I would reconsider developing on such an old version of Leaflet. I think you are missing the layers object in your definition. Try this:
var panelJsonConfig = {
"baselayers": [
{
layers:[
{
"active": true,
"name": "Open Cycle Map",
"layer": {
"type": "tileLayer",
"args": [
"http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png"
]
}
},
{
"name": "Landscape",
"layer": {
"type": "tileLayer",
"args": [
"http://{s}.tile3.opencyclemap.org/landscape/{z}/{x}/{y}.png"
]
}
},
{
"name": "Transports",
"layer": {
"type": "tileLayer",
"args": [
"http://{s}.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png"
]
}
}
]}//end of layer object for baselayers
], //end of baselayers
"overlayers": [
{
layers:[
{
"name": "Terrain",
"layer": {
"type": "tileLayer",
"args": [
"http://toolserver.org/~cmarqu/hill/{z}/{x}/{y}.png", {
"opacity": 0.5
}
]
}
}
]}//end of layer object for overlayers
] //end of overlayers
};
We forked the repo (see code lineage if interested) but we are successful with something like this:
var overLayers1 = {
title: 'Layer Tree',
layers: [
{
group: "Base Maps",
collapsed: true,
layers: [
{
name: "Open Street Map",
//tooltip:"Open Street Map base layer",
active: true,
icon:'<div class="icon"><span class="glyphicon glyphicon-picture"></span></div>',
//icon:iconByName('basemap'),
layer: OpenStreetMap_Mapnik
},
{
..... your next base layer.....
}
]
}
]};
var over1 = L.control.panelLayers(overLayers1.layers, null, {
title: overLayers1.title,
position: 'topleft'
....
}).addTo(map);
Hi Vera,
Thanks for your reply.
In your above code for add layers dynamically,
"over1.addOverlay({layer: fmu}, 'FMU', 'Group 1');" , How to set the layer active?
I am tried like this, but cannot.
var gname = index; var mapLayer = new GeoMapLayer(); mapLayer.name = gname; mapLayer.active = true; var filteredData = _.filter(this.recordGridPairView, ['groupByLayer', gname]) if (filteredData && Object.keys(filteredData).length > 0) {
var coords = []
filteredData.forEach(fl => {
coords.push([fl.latitude, fl.longitude]);
});
mapLayer.layer = new L.polyline(coords, { weight: 5, color: 'yellow' });
over1.addOverlay(mapLayer, gname, tempMap.mapLayerName);
}
For Reference: class GeoMapLayer { name: string; active: boolean; icon: string; layer: any; }
