Hi Everyone
I'm developing a web application where I use layers published on an ArcGIS server as the base layer. I'm encountering some issues with `esri-leaflet` when using TiledMapLayer and DynamicMapLayer.
Here are the problems I'm facing:
1. DynamicMapLayer: This version loads very slowly, which significantly degrades the user experience.
2. TiledMapLayer: With this version, I encounter an issue when changing the base layer for the second time. Specifically, the tiles from the previous layer are not completely erased, leading to a visual overlap.
If anyone has experience with these issues, I would greatly appreciate your input!
import L from "leaflet";
import { tiledMapLayer, dynamicMapLayer } from "esri-leaflet";
import "leaflet/dist/leaflet.css";
document.addEventListener("DOMContentLoaded", () => {
// VERSION 1
var topo = dynamicMapLayer({
url: "https://geodata.npolar.no/arcgis/rest/services/Basisdata/NP_Basiskart_Svalbard_WMTS_3857/MapServer",
});
var ortho = dynamicMapLayer({
url: "https://geodata.npolar.no/arcgis/rest/services/Basisdata/NP_Ortofoto_Svalbard_WMTS_3857/MapServer",
});
// VERSION 2
// var topo = tiledMapLayer({
// url: "https://geodata.npolar.no/arcgis/rest/services/Basisdata/NP_Basiskart_Svalbard_WMTS_3857/MapServer",
// });
// var ortho = tiledMapLayer({
// url: "https://geodata.npolar.no/arcgis/rest/services/Basisdata/NP_Ortofoto_Svalbard_WMTS_3857/MapServer",
// });
var baseMaps = {
Img: ortho,
Topo: topo,
};
var overlayMaps = {};
var map = L.map("map", {
center: [78.2, 15.6],
zoom: 10,
layers: [ortho],
});
var layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);
});
