Working on enhancing an existing leaflet map by adding overlays has presented some challenges. Initially, adding different map types resulted in the leaflet selector appearing at the top right corner. However, when attempting to add LayerGroups as overlays from a different class that had access to the map object, I encountered a new issue.
Each time a new overlay item was added, a new selector control appeared on the map. This led to multiple selectors, one for each overlay item. The goal was to have all the new overlays appear on a single map selector, but something seemed amiss. Any insights or suggestions would be greatly appreciated.
ngOnInit()
{
var streetMaps = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
id: '12', attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
this.map = L.map('map',
// Add the map layers.
{
center: [37.70718665682654, -98.701171875], // center in USA
zoom: 5,
layers: [streetMaps]
});
L.control.layers(this.GetGoogleBasemaps()).addTo(this.map);
}
When attempting to create and display a new LayerGroup later on, additional issues arose. Despite adding it to the map, two Selector widgets now appeared - one for the maps layers and another for the new overlay. Below are images demonstrating these two different selectors, highlighting the need for a consolidated selector with both the maps and new overlay included.
DisplayAllWellLocations(result: any) {
if(this.wellsLayer == null) {
this.wellsLayer = new L.LayerGroup<L.Circle>();
}
else {
this.wellsLayer.clearLayers();
}
let wells: string[] = result;
var wellsRenderer = L.canvas({ padding: 0.5 });
for (let well of wells) {
let wellJsonString: string = well;
let jsonObj = JSON.parse(wellJsonString);
let lgt: number = jsonObj.X;
let lat: number = jsonObj.Y;
let wellName: string = jsonObj.Name;
let wellId: string = jsonObj.Identifier;
L.circle([lat, lgt],
{
radius: 5,
renderer: wellsRenderer,
color: '#000000',
fillColor: '#006400',
fillOpacity: 1,
weight: 1
}).addTo(this.wellsLayer).bindPopup(wellName + " (" + wellId + ")");
}
var overlays = {
"All Wells": this.wellsLayer
};
var baseLayers = {};
L.control.layers(baseLayers, overlays).addTo(this.map);
}