80 lines
2 KiB
TypeScript
80 lines
2 KiB
TypeScript
|
|
||
|
|
function init(): void {
|
||
|
|
let overlays: OverlayState = OverlayState.load() ?? new OverlayState();
|
||
|
|
const map = L.map('map').setView([35.6653, -105.9507], 13);
|
||
|
|
|
||
|
|
const streetLayer = TileLayerWrapper.constructLayer(
|
||
|
|
"streetLayer",
|
||
|
|
L.tileLayer(
|
||
|
|
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||
|
|
{
|
||
|
|
maxZoom: 19,
|
||
|
|
attribution: '© OpenStreetMap'
|
||
|
|
}));
|
||
|
|
|
||
|
|
const satelliteLayer = TileLayerWrapper.constructLayer(
|
||
|
|
"satelliteLayer",
|
||
|
|
L.tileLayer(
|
||
|
|
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
|
||
|
|
{
|
||
|
|
maxZoom: 19,
|
||
|
|
attribution: "© Esri"
|
||
|
|
}));
|
||
|
|
|
||
|
|
TileLayerWrapper.enableOnly(streetLayer, map);
|
||
|
|
|
||
|
|
overlays.markers.forEach(m=>m.add(map));
|
||
|
|
overlays.circles.forEach(m=>m.add(map));
|
||
|
|
overlays.polygons.forEach(m=>m.add(map));
|
||
|
|
|
||
|
|
const modal = new Modal();
|
||
|
|
|
||
|
|
const addMarkerHandler = (e: any) => {
|
||
|
|
modal.setVisible(true);
|
||
|
|
modal.setState(OverlayType.POINT, {
|
||
|
|
latlng: e.latlng,
|
||
|
|
map: map,
|
||
|
|
overlays: overlays,
|
||
|
|
});
|
||
|
|
map.off("click", addMarkerHandler);
|
||
|
|
}
|
||
|
|
|
||
|
|
const addMarkerBtn = document.getElementById("addPoint-btn");
|
||
|
|
if (addMarkerBtn) {
|
||
|
|
addMarkerBtn.onclick = (e: any)=>{
|
||
|
|
try{
|
||
|
|
map.off("click", addMarkerHandler);
|
||
|
|
} finally {
|
||
|
|
map.on("click", addMarkerHandler);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
const saveBtn = document.getElementById("save-btn");
|
||
|
|
if (saveBtn) {
|
||
|
|
saveBtn.onclick = (e: any) => {
|
||
|
|
OverlayState.save(overlays);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
const clearBtn = document.getElementById("clear-btn");
|
||
|
|
if (clearBtn) {
|
||
|
|
clearBtn.onclick = (e: any) => {
|
||
|
|
overlays = OverlayState.clear(overlays, map);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const tilesBtn = document.getElementById("tiles-btn");
|
||
|
|
if (tilesBtn) {
|
||
|
|
tilesBtn.onclick = (e: any) => {
|
||
|
|
if (TileLayerWrapper.getActiveLayer() == satelliteLayer) {
|
||
|
|
TileLayerWrapper.enableOnly(streetLayer, map);
|
||
|
|
} else {
|
||
|
|
TileLayerWrapper.enableOnly(satelliteLayer, map);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
init();
|