103 lines
2.6 KiB
TypeScript
103 lines
2.6 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 resetMapClick = (): void => {
|
|
try {
|
|
map.off("click", addMarkerHandler);
|
|
} catch {}
|
|
try {
|
|
map.off("click", addCircleHandler);
|
|
} catch {}
|
|
}
|
|
|
|
const addMarkerHandler = (e: any): void => {
|
|
modal.setVisible(true);
|
|
modal.setState(OverlayType.POINT, {
|
|
latlng: e.latlng,
|
|
map: map,
|
|
overlays: overlays,
|
|
});
|
|
map.off("click", addMarkerHandler);
|
|
}
|
|
|
|
const addCircleHandler = (e: any): void => {
|
|
modal.setVisible(true);
|
|
modal.setState(OverlayType.CIRCLE, {
|
|
latlng: e.latlng,
|
|
map: map,
|
|
overlays: overlays,
|
|
});
|
|
map.off("click", addCircleHandler);
|
|
}
|
|
|
|
const addMarkerBtn = document.getElementById("addPoint-btn");
|
|
if (addMarkerBtn) {
|
|
addMarkerBtn.onclick = (e: any): void => {
|
|
resetMapClick()
|
|
map.on("click", addMarkerHandler);
|
|
};
|
|
}
|
|
|
|
const addCircleBtn = document.getElementById("addCircle-btn");
|
|
if (addCircleBtn) {
|
|
addCircleBtn.onclick = (e: any): void => {
|
|
resetMapClick();
|
|
map.on("click", addCircleHandler);
|
|
}
|
|
}
|
|
|
|
const saveBtn = document.getElementById("save-btn");
|
|
if (saveBtn) {
|
|
saveBtn.onclick = (e: any): void => {
|
|
OverlayState.save(overlays);
|
|
};
|
|
}
|
|
|
|
const clearBtn = document.getElementById("clear-btn");
|
|
if (clearBtn) {
|
|
clearBtn.onclick = (e: any): void => {
|
|
overlays = OverlayState.clear(overlays, map);
|
|
}
|
|
}
|
|
|
|
const tilesBtn = document.getElementById("tiles-btn");
|
|
if (tilesBtn) {
|
|
tilesBtn.onclick = (e: any): void => {
|
|
if (TileLayerWrapper.getActiveLayer() == satelliteLayer) {
|
|
TileLayerWrapper.enableOnly(streetLayer, map);
|
|
} else {
|
|
TileLayerWrapper.enableOnly(satelliteLayer, map);
|
|
}
|
|
};
|
|
}
|
|
}
|
|
|
|
init();
|