845 lines
24 KiB
TypeScript
845 lines
24 KiB
TypeScript
|
import { demoFunc } from './dees-geo-map.demo.js';
|
||
|
|
import {
|
||
|
|
customElement,
|
||
|
|
html,
|
||
|
|
DeesElement,
|
||
|
|
property,
|
||
|
|
state,
|
||
|
|
type TemplateResult,
|
||
|
|
cssManager,
|
||
|
|
css,
|
||
|
|
} from '@design.estate/dees-element';
|
||
|
|
import { DeesContextmenu } from '@design.estate/dees-catalog';
|
||
|
|
import { geoComponentStyles, mapContainerStyles, toolbarStyles, searchStyles, navigationStyles } from '../../00componentstyles.js';
|
||
|
|
|
||
|
|
// MapLibre imports
|
||
|
|
import maplibregl from 'maplibre-gl';
|
||
|
|
|
||
|
|
// Terra Draw imports
|
||
|
|
import {
|
||
|
|
TerraDraw,
|
||
|
|
TerraDrawPolygonMode,
|
||
|
|
TerraDrawRectangleMode,
|
||
|
|
TerraDrawPointMode,
|
||
|
|
TerraDrawLineStringMode,
|
||
|
|
TerraDrawCircleMode,
|
||
|
|
TerraDrawFreehandMode,
|
||
|
|
TerraDrawSelectMode,
|
||
|
|
TerraDrawRenderMode,
|
||
|
|
} from 'terra-draw';
|
||
|
|
import { TerraDrawMapLibreGLAdapter } from 'terra-draw-maplibre-gl-adapter';
|
||
|
|
|
||
|
|
// Modular imports
|
||
|
|
import { renderIcon } from './geo-map.icons.js';
|
||
|
|
import { SearchController, type INominatimResult, type IAddressSelectedEvent } from './geo-map.search.js';
|
||
|
|
import { NavigationController, type TNavigationMode, type INavigationState, type IRouteCalculatedEvent } from './geo-map.navigation.js';
|
||
|
|
|
||
|
|
// Re-export types for external consumers
|
||
|
|
export type { INominatimResult, IAddressSelectedEvent } from './geo-map.search.js';
|
||
|
|
export type {
|
||
|
|
TNavigationMode,
|
||
|
|
INavigationState,
|
||
|
|
IOSRMRoute,
|
||
|
|
IOSRMLeg,
|
||
|
|
IOSRMStep,
|
||
|
|
IRouteCalculatedEvent,
|
||
|
|
} from './geo-map.navigation.js';
|
||
|
|
|
||
|
|
export type TDrawTool = 'polygon' | 'rectangle' | 'point' | 'linestring' | 'circle' | 'freehand' | 'select' | 'static';
|
||
|
|
|
||
|
|
export interface IDrawChangeEvent {
|
||
|
|
ids: string[];
|
||
|
|
type: string;
|
||
|
|
features: GeoJSON.Feature[];
|
||
|
|
}
|
||
|
|
|
||
|
|
export interface IDrawFinishEvent {
|
||
|
|
id: string;
|
||
|
|
context: { action: string; mode: string };
|
||
|
|
features: GeoJSON.Feature[];
|
||
|
|
}
|
||
|
|
|
||
|
|
export interface IDrawSelectEvent {
|
||
|
|
id: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
declare global {
|
||
|
|
interface HTMLElementTagNameMap {
|
||
|
|
'dees-geo-map': DeesGeoMap;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@customElement('dees-geo-map')
|
||
|
|
export class DeesGeoMap extends DeesElement {
|
||
|
|
public static demo = demoFunc;
|
||
|
|
|
||
|
|
// ─── Properties ─────────────────────────────────────────────────────────────
|
||
|
|
|
||
|
|
@property({ type: Array })
|
||
|
|
accessor center: [number, number] = [0, 0]; // [lng, lat]
|
||
|
|
|
||
|
|
@property({ type: Number })
|
||
|
|
accessor zoom: number = 2;
|
||
|
|
|
||
|
|
@property({ type: String })
|
||
|
|
accessor mapStyle: string = 'osm';
|
||
|
|
|
||
|
|
@property({ type: String })
|
||
|
|
accessor activeTool: TDrawTool = 'static';
|
||
|
|
|
||
|
|
@property({ type: Object })
|
||
|
|
accessor geoJson: GeoJSON.FeatureCollection = {
|
||
|
|
type: 'FeatureCollection',
|
||
|
|
features: [],
|
||
|
|
};
|
||
|
|
|
||
|
|
@property({ type: Boolean })
|
||
|
|
accessor showToolbar: boolean = true;
|
||
|
|
|
||
|
|
@property({ type: Boolean })
|
||
|
|
accessor dragToDraw: boolean = true; // Default to drag behavior for circle/rectangle
|
||
|
|
|
||
|
|
@property({ type: String })
|
||
|
|
accessor projection: 'mercator' | 'globe' = 'globe';
|
||
|
|
|
||
|
|
@property({ type: Boolean })
|
||
|
|
accessor showSearch: boolean = false;
|
||
|
|
|
||
|
|
@property({ type: String })
|
||
|
|
accessor searchPlaceholder: string = 'Search address...';
|
||
|
|
|
||
|
|
@property({ type: Boolean })
|
||
|
|
accessor showNavigation: boolean = false;
|
||
|
|
|
||
|
|
@property({ type: String })
|
||
|
|
accessor navigationMode: TNavigationMode = 'driving';
|
||
|
|
|
||
|
|
// ─── State ──────────────────────────────────────────────────────────────────
|
||
|
|
|
||
|
|
@state()
|
||
|
|
private accessor map: maplibregl.Map | null = null;
|
||
|
|
|
||
|
|
@state()
|
||
|
|
private accessor draw: TerraDraw | null = null;
|
||
|
|
|
||
|
|
@state()
|
||
|
|
private accessor isMapReady: boolean = false;
|
||
|
|
|
||
|
|
// Controllers
|
||
|
|
private searchController: SearchController | null = null;
|
||
|
|
private navigationController: NavigationController | null = null;
|
||
|
|
|
||
|
|
// ─── Styles ─────────────────────────────────────────────────────────────────
|
||
|
|
|
||
|
|
public static styles = [
|
||
|
|
cssManager.defaultStyles,
|
||
|
|
geoComponentStyles,
|
||
|
|
mapContainerStyles,
|
||
|
|
toolbarStyles,
|
||
|
|
searchStyles,
|
||
|
|
navigationStyles,
|
||
|
|
css`
|
||
|
|
:host {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
height: 400px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.maplibregl-map {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
font-family: inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
.maplibregl-ctrl-attrib {
|
||
|
|
font-size: 11px;
|
||
|
|
background: rgba(0, 0, 0, 0.5);
|
||
|
|
color: rgba(255, 255, 255, 0.8);
|
||
|
|
padding: 2px 6px;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.maplibregl-ctrl-attrib a {
|
||
|
|
color: rgba(255, 255, 255, 0.8);
|
||
|
|
}
|
||
|
|
|
||
|
|
.toolbar {
|
||
|
|
user-select: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.toolbar-title {
|
||
|
|
font-size: 10px;
|
||
|
|
font-weight: 600;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.5px;
|
||
|
|
color: rgba(255, 255, 255, 0.5);
|
||
|
|
padding: 0 4px 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tool-button {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tool-button::after {
|
||
|
|
content: attr(title);
|
||
|
|
position: absolute;
|
||
|
|
left: calc(100% + 8px);
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
padding: 4px 8px;
|
||
|
|
background: rgba(0, 0, 0, 0.8);
|
||
|
|
color: #fff;
|
||
|
|
font-size: 12px;
|
||
|
|
white-space: nowrap;
|
||
|
|
border-radius: 4px;
|
||
|
|
opacity: 0;
|
||
|
|
visibility: hidden;
|
||
|
|
pointer-events: none;
|
||
|
|
transition: opacity 0.15s ease, visibility 0.15s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tool-button:hover::after {
|
||
|
|
opacity: 1;
|
||
|
|
visibility: visible;
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-count {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 12px;
|
||
|
|
left: 12px;
|
||
|
|
z-index: 10;
|
||
|
|
padding: 6px 12px;
|
||
|
|
background: rgba(30, 30, 30, 0.9);
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
|
|
border-radius: 6px;
|
||
|
|
backdrop-filter: blur(8px);
|
||
|
|
-webkit-backdrop-filter: blur(8px);
|
||
|
|
font-size: 12px;
|
||
|
|
color: rgba(255, 255, 255, 0.7);
|
||
|
|
}
|
||
|
|
|
||
|
|
.zoom-controls {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 12px;
|
||
|
|
right: 12px;
|
||
|
|
z-index: 10;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 4px;
|
||
|
|
padding: 4px;
|
||
|
|
background: rgba(30, 30, 30, 0.9);
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
|
|
border-radius: 8px;
|
||
|
|
backdrop-filter: blur(8px);
|
||
|
|
-webkit-backdrop-filter: blur(8px);
|
||
|
|
}
|
||
|
|
`,
|
||
|
|
];
|
||
|
|
|
||
|
|
// ─── Lifecycle ──────────────────────────────────────────────────────────────
|
||
|
|
|
||
|
|
public async firstUpdated() {
|
||
|
|
this.initializeControllers();
|
||
|
|
await this.initializeMap();
|
||
|
|
}
|
||
|
|
|
||
|
|
public async disconnectedCallback() {
|
||
|
|
await super.disconnectedCallback();
|
||
|
|
this.cleanup();
|
||
|
|
}
|
||
|
|
|
||
|
|
public updated(changedProperties: Map<string, unknown>) {
|
||
|
|
super.updated(changedProperties);
|
||
|
|
if (changedProperties.has('dragToDraw') && this.draw && this.map) {
|
||
|
|
// Reinitialize terra-draw with new settings
|
||
|
|
const currentFeatures = this.draw.getSnapshot();
|
||
|
|
this.draw.stop();
|
||
|
|
this.draw = null;
|
||
|
|
this.initializeTerraDraw();
|
||
|
|
// Restore features
|
||
|
|
if (currentFeatures.length > 0) {
|
||
|
|
for (const feature of currentFeatures) {
|
||
|
|
this.draw?.addFeatures([feature as GeoJSON.Feature<GeoJSON.Geometry, { mode: string }>]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (changedProperties.has('projection') && this.map && this.isMapReady) {
|
||
|
|
this.map.setProjection({ type: this.projection });
|
||
|
|
}
|
||
|
|
if (changedProperties.has('navigationMode') && this.navigationController) {
|
||
|
|
this.navigationController.navigationMode = this.navigationMode;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// ─── Controller Initialization ──────────────────────────────────────────────
|
||
|
|
|
||
|
|
private initializeControllers(): void {
|
||
|
|
// Initialize search controller
|
||
|
|
this.searchController = new SearchController(
|
||
|
|
{ placeholder: this.searchPlaceholder },
|
||
|
|
{
|
||
|
|
onResultSelected: (result, coordinates, zoom) => {
|
||
|
|
this.flyTo(coordinates, zoom);
|
||
|
|
this.dispatchEvent(new CustomEvent<IAddressSelectedEvent>('address-selected', {
|
||
|
|
detail: {
|
||
|
|
address: result.display_name,
|
||
|
|
coordinates,
|
||
|
|
boundingBox: [
|
||
|
|
parseFloat(result.boundingbox[0]),
|
||
|
|
parseFloat(result.boundingbox[1]),
|
||
|
|
parseFloat(result.boundingbox[2]),
|
||
|
|
parseFloat(result.boundingbox[3]),
|
||
|
|
],
|
||
|
|
placeId: String(result.place_id),
|
||
|
|
type: result.type,
|
||
|
|
},
|
||
|
|
bubbles: true,
|
||
|
|
composed: true,
|
||
|
|
}));
|
||
|
|
},
|
||
|
|
onRequestUpdate: () => this.requestUpdate(),
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
// Initialize navigation controller
|
||
|
|
this.navigationController = new NavigationController({
|
||
|
|
onRouteCalculated: (event) => {
|
||
|
|
this.dispatchEvent(new CustomEvent<IRouteCalculatedEvent>('route-calculated', {
|
||
|
|
detail: event,
|
||
|
|
bubbles: true,
|
||
|
|
composed: true,
|
||
|
|
}));
|
||
|
|
},
|
||
|
|
onRequestUpdate: () => this.requestUpdate(),
|
||
|
|
getMap: () => this.map,
|
||
|
|
});
|
||
|
|
this.navigationController.navigationMode = this.navigationMode;
|
||
|
|
}
|
||
|
|
|
||
|
|
// ─── Map Initialization ─────────────────────────────────────────────────────
|
||
|
|
|
||
|
|
private async initializeMap() {
|
||
|
|
const container = this.shadowRoot?.querySelector('.map-wrapper') as HTMLElement;
|
||
|
|
if (!container) return;
|
||
|
|
|
||
|
|
// Ensure MapLibre CSS is loaded in the document
|
||
|
|
this.ensureMaplibreCssLoaded();
|
||
|
|
|
||
|
|
const style = this.getMapStyle();
|
||
|
|
|
||
|
|
this.map = new maplibregl.Map({
|
||
|
|
container,
|
||
|
|
style,
|
||
|
|
center: this.center,
|
||
|
|
zoom: this.zoom,
|
||
|
|
attributionControl: {},
|
||
|
|
});
|
||
|
|
|
||
|
|
this.map.on('load', () => {
|
||
|
|
this.isMapReady = true;
|
||
|
|
|
||
|
|
// Set projection (globe or mercator)
|
||
|
|
this.map!.setProjection({ type: this.projection });
|
||
|
|
|
||
|
|
this.initializeTerraDraw();
|
||
|
|
this.dispatchEvent(new CustomEvent('map-ready', { detail: { map: this.map } }));
|
||
|
|
});
|
||
|
|
|
||
|
|
// Forward map events
|
||
|
|
this.map.on('moveend', () => {
|
||
|
|
this.dispatchEvent(new CustomEvent('map-move', {
|
||
|
|
detail: {
|
||
|
|
center: this.map?.getCenter().toArray(),
|
||
|
|
zoom: this.map?.getZoom(),
|
||
|
|
},
|
||
|
|
}));
|
||
|
|
});
|
||
|
|
|
||
|
|
// Handle clicks for navigation point selection
|
||
|
|
this.map.on('click', (e: maplibregl.MapMouseEvent) => {
|
||
|
|
if (this.showNavigation && this.navigationController?.navClickMode) {
|
||
|
|
this.navigationController.handleMapClickForNavigation(e);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
private getMapStyle(): maplibregl.StyleSpecification | string {
|
||
|
|
if (this.mapStyle === 'osm') {
|
||
|
|
return {
|
||
|
|
version: 8,
|
||
|
|
sources: {
|
||
|
|
'osm-tiles': {
|
||
|
|
type: 'raster',
|
||
|
|
tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
|
||
|
|
tileSize: 256,
|
||
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
layers: [
|
||
|
|
{
|
||
|
|
id: 'osm-tiles',
|
||
|
|
type: 'raster',
|
||
|
|
source: 'osm-tiles',
|
||
|
|
minzoom: 0,
|
||
|
|
maxzoom: 19,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
}
|
||
|
|
return this.mapStyle;
|
||
|
|
}
|
||
|
|
|
||
|
|
// ─── Terra Draw Initialization ──────────────────────────────────────────────
|
||
|
|
|
||
|
|
private initializeTerraDraw() {
|
||
|
|
if (!this.map || this.draw) return;
|
||
|
|
|
||
|
|
const adapter = new TerraDrawMapLibreGLAdapter({
|
||
|
|
map: this.map,
|
||
|
|
});
|
||
|
|
|
||
|
|
this.draw = new TerraDraw({
|
||
|
|
adapter,
|
||
|
|
modes: [
|
||
|
|
new TerraDrawPointMode(),
|
||
|
|
new TerraDrawLineStringMode(),
|
||
|
|
new TerraDrawPolygonMode(),
|
||
|
|
new TerraDrawRectangleMode({
|
||
|
|
drawInteraction: this.dragToDraw ? 'click-drag' : 'click-move',
|
||
|
|
}),
|
||
|
|
new TerraDrawCircleMode({
|
||
|
|
drawInteraction: this.dragToDraw ? 'click-drag' : 'click-move',
|
||
|
|
}),
|
||
|
|
new TerraDrawFreehandMode(),
|
||
|
|
new TerraDrawSelectMode({
|
||
|
|
flags: {
|
||
|
|
polygon: {
|
||
|
|
feature: {
|
||
|
|
draggable: true,
|
||
|
|
coordinates: {
|
||
|
|
midpoints: true,
|
||
|
|
draggable: true,
|
||
|
|
deletable: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
rectangle: {
|
||
|
|
feature: {
|
||
|
|
draggable: true,
|
||
|
|
coordinates: {
|
||
|
|
draggable: true,
|
||
|
|
deletable: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
point: {
|
||
|
|
feature: {
|
||
|
|
draggable: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
linestring: {
|
||
|
|
feature: {
|
||
|
|
draggable: true,
|
||
|
|
coordinates: {
|
||
|
|
midpoints: true,
|
||
|
|
draggable: true,
|
||
|
|
deletable: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
circle: {
|
||
|
|
feature: {
|
||
|
|
draggable: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
freehand: {
|
||
|
|
feature: {
|
||
|
|
draggable: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}),
|
||
|
|
// Static mode for pan/zoom only (no drawing)
|
||
|
|
new TerraDrawRenderMode({
|
||
|
|
modeName: 'static',
|
||
|
|
}),
|
||
|
|
],
|
||
|
|
});
|
||
|
|
|
||
|
|
this.draw.start();
|
||
|
|
|
||
|
|
// Register event handlers
|
||
|
|
this.draw.on('change', (ids: (string | number)[], type: string) => {
|
||
|
|
const features = this.draw?.getSnapshot() || [];
|
||
|
|
this.dispatchEvent(new CustomEvent('draw-change', {
|
||
|
|
detail: { ids, type, features } as IDrawChangeEvent,
|
||
|
|
}));
|
||
|
|
this.requestUpdate();
|
||
|
|
});
|
||
|
|
|
||
|
|
this.draw.on('finish', (id: string | number, context: { action: string; mode: string }) => {
|
||
|
|
const features = this.draw?.getSnapshot() || [];
|
||
|
|
this.dispatchEvent(new CustomEvent('draw-finish', {
|
||
|
|
detail: { id: String(id), context, features } as IDrawFinishEvent,
|
||
|
|
}));
|
||
|
|
});
|
||
|
|
|
||
|
|
// Load initial geoJson if provided
|
||
|
|
if (this.geoJson.features.length > 0) {
|
||
|
|
this.loadGeoJson(this.geoJson);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Set initial mode (always set a mode, including 'static')
|
||
|
|
this.draw.setMode(this.activeTool);
|
||
|
|
|
||
|
|
// Set initial drag state based on active tool
|
||
|
|
// Drawing modes need drag disabled; static/select need it enabled
|
||
|
|
const isDrawingMode = !['static', 'select'].includes(this.activeTool);
|
||
|
|
if (isDrawingMode) {
|
||
|
|
this.map.dragPan.disable();
|
||
|
|
this.map.dragRotate.disable();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// ─── Public Methods ─────────────────────────────────────────────────────────
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Get the current snapshot of all drawn features
|
||
|
|
*/
|
||
|
|
public getFeatures(): GeoJSON.Feature[] {
|
||
|
|
return this.draw?.getSnapshot() || [];
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Get features as a GeoJSON FeatureCollection
|
||
|
|
*/
|
||
|
|
public getGeoJson(): GeoJSON.FeatureCollection {
|
||
|
|
return {
|
||
|
|
type: 'FeatureCollection',
|
||
|
|
features: this.getFeatures(),
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Load GeoJSON features into the map
|
||
|
|
*/
|
||
|
|
public loadGeoJson(geojson: GeoJSON.FeatureCollection) {
|
||
|
|
if (!this.draw) return;
|
||
|
|
|
||
|
|
// Clear existing features first
|
||
|
|
this.clearAllFeatures();
|
||
|
|
|
||
|
|
// Add features from the GeoJSON
|
||
|
|
for (const feature of geojson.features) {
|
||
|
|
if (feature.geometry && feature.properties) {
|
||
|
|
this.draw.addFeatures([feature as GeoJSON.Feature<GeoJSON.Geometry, { mode: string }>]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Clear all drawn features
|
||
|
|
*/
|
||
|
|
public clearAllFeatures() {
|
||
|
|
if (!this.draw) return;
|
||
|
|
const features = this.draw.getSnapshot();
|
||
|
|
const ids = features.map((f) => f.id).filter((id): id is string | number => id !== undefined);
|
||
|
|
if (ids.length > 0) {
|
||
|
|
this.draw.removeFeatures(ids);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Set the active drawing tool
|
||
|
|
*/
|
||
|
|
public setTool(tool: TDrawTool) {
|
||
|
|
this.activeTool = tool;
|
||
|
|
if (this.draw && this.map) {
|
||
|
|
this.draw.setMode(tool);
|
||
|
|
|
||
|
|
// Manually control map dragging based on mode
|
||
|
|
// Drawing modes need drag disabled; static/select need it enabled
|
||
|
|
const isDrawingMode = !['static', 'select'].includes(tool);
|
||
|
|
if (isDrawingMode) {
|
||
|
|
this.map.dragPan.disable();
|
||
|
|
this.map.dragRotate.disable();
|
||
|
|
} else {
|
||
|
|
this.map.dragPan.enable();
|
||
|
|
this.map.dragRotate.enable();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Get the underlying MapLibre map instance
|
||
|
|
*/
|
||
|
|
public getMap(): maplibregl.Map | null {
|
||
|
|
return this.map;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Get the Terra Draw instance
|
||
|
|
*/
|
||
|
|
public getTerraDraw(): TerraDraw | null {
|
||
|
|
return this.draw;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Fly to a specific location
|
||
|
|
*/
|
||
|
|
public flyTo(center: [number, number], zoom?: number) {
|
||
|
|
this.map?.flyTo({
|
||
|
|
center,
|
||
|
|
zoom: zoom ?? this.map.getZoom(),
|
||
|
|
duration: 1500,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Set the map projection
|
||
|
|
*/
|
||
|
|
public setProjection(projection: 'mercator' | 'globe') {
|
||
|
|
this.projection = projection;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Fit the map to show all drawn features
|
||
|
|
*/
|
||
|
|
public fitToFeatures(padding = 50) {
|
||
|
|
const features = this.getFeatures();
|
||
|
|
if (features.length === 0 || !this.map) return;
|
||
|
|
|
||
|
|
const bounds = new maplibregl.LngLatBounds();
|
||
|
|
|
||
|
|
for (const feature of features) {
|
||
|
|
const geometry = feature.geometry;
|
||
|
|
if (!geometry) continue;
|
||
|
|
|
||
|
|
if (geometry.type === 'Point') {
|
||
|
|
bounds.extend(geometry.coordinates as [number, number]);
|
||
|
|
} else if (geometry.type === 'LineString' || geometry.type === 'MultiPoint') {
|
||
|
|
for (const coord of geometry.coordinates) {
|
||
|
|
bounds.extend(coord as [number, number]);
|
||
|
|
}
|
||
|
|
} else if (geometry.type === 'Polygon' || geometry.type === 'MultiLineString') {
|
||
|
|
for (const ring of geometry.coordinates) {
|
||
|
|
for (const coord of ring) {
|
||
|
|
bounds.extend(coord as [number, number]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!bounds.isEmpty()) {
|
||
|
|
this.map.fitBounds(bounds, { padding });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// ─── Navigation Public Methods (delegated to controller) ────────────────────
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Calculate and display route
|
||
|
|
*/
|
||
|
|
public async calculateRoute(): Promise<void> {
|
||
|
|
await this.navigationController?.calculateRoute();
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Set navigation start point
|
||
|
|
*/
|
||
|
|
public setNavigationStart(coords: [number, number], address?: string): void {
|
||
|
|
this.navigationController?.setNavigationStart(coords, address);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Set navigation end point
|
||
|
|
*/
|
||
|
|
public setNavigationEnd(coords: [number, number], address?: string): void {
|
||
|
|
this.navigationController?.setNavigationEnd(coords, address);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Clear all navigation state
|
||
|
|
*/
|
||
|
|
public clearNavigation(): void {
|
||
|
|
this.navigationController?.clearNavigation();
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Get current navigation state
|
||
|
|
*/
|
||
|
|
public getNavigationState(): INavigationState | null {
|
||
|
|
return this.navigationController?.navigationState ?? null;
|
||
|
|
}
|
||
|
|
|
||
|
|
// ─── Private Methods ────────────────────────────────────────────────────────
|
||
|
|
|
||
|
|
private ensureMaplibreCssLoaded() {
|
||
|
|
const cssId = 'maplibre-gl-css';
|
||
|
|
if (!document.getElementById(cssId)) {
|
||
|
|
const link = document.createElement('link');
|
||
|
|
link.id = cssId;
|
||
|
|
link.rel = 'stylesheet';
|
||
|
|
link.href = 'https://unpkg.com/maplibre-gl@5.1.1/dist/maplibre-gl.css';
|
||
|
|
document.head.appendChild(link);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
private cleanup() {
|
||
|
|
if (this.draw) {
|
||
|
|
this.draw.stop();
|
||
|
|
this.draw = null;
|
||
|
|
}
|
||
|
|
// Clean up navigation controller
|
||
|
|
this.navigationController?.cleanup();
|
||
|
|
|
||
|
|
if (this.map) {
|
||
|
|
this.map.remove();
|
||
|
|
this.map = null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
private handleToolClick(tool: TDrawTool) {
|
||
|
|
// If clicking the same tool again, deselect it (switch to static/pan mode)
|
||
|
|
if (this.activeTool === tool) {
|
||
|
|
this.setTool('static');
|
||
|
|
} else {
|
||
|
|
this.setTool(tool);
|
||
|
|
}
|
||
|
|
this.requestUpdate();
|
||
|
|
}
|
||
|
|
|
||
|
|
private handleClearClick() {
|
||
|
|
this.clearAllFeatures();
|
||
|
|
}
|
||
|
|
|
||
|
|
private handleZoomIn() {
|
||
|
|
this.map?.zoomIn();
|
||
|
|
}
|
||
|
|
|
||
|
|
private handleZoomOut() {
|
||
|
|
this.map?.zoomOut();
|
||
|
|
}
|
||
|
|
|
||
|
|
private handleMapContextMenu(e: MouseEvent) {
|
||
|
|
e.preventDefault();
|
||
|
|
DeesContextmenu.openContextMenuWithOptions(e, [
|
||
|
|
{
|
||
|
|
name: this.dragToDraw ? '✓ Drag to Draw' : 'Drag to Draw',
|
||
|
|
iconName: 'lucide:move',
|
||
|
|
action: async () => {
|
||
|
|
this.dragToDraw = !this.dragToDraw;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: this.projection === 'globe' ? '✓ Globe View' : 'Globe View',
|
||
|
|
iconName: 'lucide:globe',
|
||
|
|
action: async () => {
|
||
|
|
this.projection = this.projection === 'globe' ? 'mercator' : 'globe';
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{ divider: true },
|
||
|
|
{
|
||
|
|
name: 'Clear All Features',
|
||
|
|
iconName: 'lucide:trash2',
|
||
|
|
action: async () => this.clearAllFeatures(),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'Fit to Features',
|
||
|
|
iconName: 'lucide:maximize',
|
||
|
|
action: async () => this.fitToFeatures(),
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
}
|
||
|
|
|
||
|
|
// ─── Render ─────────────────────────────────────────────────────────────────
|
||
|
|
|
||
|
|
public render(): TemplateResult {
|
||
|
|
const featureCount = this.draw?.getSnapshot().length || 0;
|
||
|
|
|
||
|
|
return html`
|
||
|
|
<div class="map-container" @contextmenu=${(e: MouseEvent) => this.handleMapContextMenu(e)}>
|
||
|
|
<div class="map-wrapper"></div>
|
||
|
|
|
||
|
|
${this.showToolbar ? this.renderToolbar() : ''}
|
||
|
|
${this.showSearch && this.searchController ? this.searchController.render() : ''}
|
||
|
|
${this.showNavigation && this.navigationController ? this.navigationController.render() : ''}
|
||
|
|
|
||
|
|
${featureCount > 0 ? html`
|
||
|
|
<div class="feature-count">
|
||
|
|
${featureCount} feature${featureCount !== 1 ? 's' : ''}
|
||
|
|
</div>
|
||
|
|
` : ''}
|
||
|
|
|
||
|
|
<div class="zoom-controls">
|
||
|
|
<button
|
||
|
|
class="tool-button"
|
||
|
|
title="Zoom in"
|
||
|
|
@click=${this.handleZoomIn}
|
||
|
|
>
|
||
|
|
${renderIcon('plus')}
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
class="tool-button"
|
||
|
|
title="Zoom out"
|
||
|
|
@click=${this.handleZoomOut}
|
||
|
|
>
|
||
|
|
${renderIcon('minus')}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
private renderToolbar(): TemplateResult {
|
||
|
|
const tools: { id: TDrawTool; icon: string; label: string }[] = [
|
||
|
|
{ id: 'point', icon: 'point', label: 'Point' },
|
||
|
|
{ id: 'linestring', icon: 'line', label: 'Line' },
|
||
|
|
{ id: 'polygon', icon: 'polygon', label: 'Polygon' },
|
||
|
|
{ id: 'rectangle', icon: 'rectangle', label: 'Rectangle' },
|
||
|
|
{ id: 'circle', icon: 'circle', label: 'Circle' },
|
||
|
|
{ id: 'freehand', icon: 'freehand', label: 'Freehand' },
|
||
|
|
];
|
||
|
|
|
||
|
|
return html`
|
||
|
|
<div class="toolbar">
|
||
|
|
<div class="toolbar-title">Draw</div>
|
||
|
|
<div class="toolbar-group">
|
||
|
|
${tools.map(tool => html`
|
||
|
|
<button
|
||
|
|
class="tool-button ${this.activeTool === tool.id ? 'active' : ''}"
|
||
|
|
title="${tool.label}"
|
||
|
|
@click=${() => this.handleToolClick(tool.id)}
|
||
|
|
?disabled=${!this.isMapReady}
|
||
|
|
>
|
||
|
|
${renderIcon(tool.icon)}
|
||
|
|
</button>
|
||
|
|
`)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="toolbar-divider"></div>
|
||
|
|
<div class="toolbar-title">Edit</div>
|
||
|
|
|
||
|
|
<div class="toolbar-group">
|
||
|
|
<button
|
||
|
|
class="tool-button ${this.activeTool === 'select' ? 'active' : ''}"
|
||
|
|
title="Select & Edit"
|
||
|
|
@click=${() => this.handleToolClick('select')}
|
||
|
|
?disabled=${!this.isMapReady}
|
||
|
|
>
|
||
|
|
${renderIcon('select')}
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
class="tool-button"
|
||
|
|
title="Clear All"
|
||
|
|
@click=${this.handleClearClick}
|
||
|
|
?disabled=${!this.isMapReady}
|
||
|
|
>
|
||
|
|
${renderIcon('trash')}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|