{ const map = elementArg.querySelector('dees-geo-map') as DeesGeoMap; const eventLog = elementArg.querySelector('#event-log') as HTMLElement; const featureJson = elementArg.querySelector('#feature-json') as HTMLElement; const addLogEntry = (type: string, message: string) => { const entry = document.createElement('div'); entry.className = 'event-entry'; entry.innerHTML = `${type}: ${message}`; eventLog.insertBefore(entry, eventLog.firstChild); }; const updateFeatureDisplay = () => { if (map && featureJson) { featureJson.textContent = JSON.stringify(map.getGeoJson(), null, 2); } }; if (map) { map.addEventListener('map-ready', () => { addLogEntry('ready', 'Map initialized successfully'); }); map.addEventListener('draw-change', (e: CustomEvent) => { addLogEntry('change', `${e.detail.type} - ${e.detail.ids.length} feature(s) affected`); updateFeatureDisplay(); }); map.addEventListener('draw-finish', (e: CustomEvent) => { addLogEntry('finish', `${e.detail.context.mode} completed (id: ${e.detail.id})`); }); map.addEventListener('map-move', (e: CustomEvent) => { console.log('Map moved:', e.detail); }); map.addEventListener('address-selected', (e: CustomEvent) => { addLogEntry('address', `Selected: ${e.detail.address.substring(0, 50)}...`); console.log('Address selected:', e.detail); }); map.addEventListener('route-calculated', (e: CustomEvent) => { const { route, mode } = e.detail; const distKm = (route.distance / 1000).toFixed(1); const durationMin = Math.round(route.duration / 60); addLogEntry('route', `${mode}: ${distKm} km, ${durationMin} min`); console.log('Route calculated:', e.detail); }); } // Set up navigation buttons const locations: Record = { paris: [2.3522, 48.8566], london: [-0.1276, 51.5074], newyork: [-74.006, 40.7128], tokyo: [139.6917, 35.6895], sydney: [151.2093, -33.8688], rio: [-43.1729, -22.9068], }; Object.entries(locations).forEach(([name, coords]) => { const btn = elementArg.querySelector(`#nav-${name}`) as HTMLButtonElement; if (btn && map) { btn.addEventListener('click', () => map.flyTo(coords, 13)); } }); // Set up control buttons const clearBtn = elementArg.querySelector('#btn-clear') as HTMLButtonElement; const fitBtn = elementArg.querySelector('#btn-fit') as HTMLButtonElement; const downloadBtn = elementArg.querySelector('#btn-download') as HTMLButtonElement; const loadBtn = elementArg.querySelector('#btn-load') as HTMLButtonElement; if (clearBtn && map) { clearBtn.addEventListener('click', () => { map.clearAllFeatures(); updateFeatureDisplay(); }); } if (fitBtn && map) { fitBtn.addEventListener('click', () => map.fitToFeatures()); } if (downloadBtn && map) { downloadBtn.addEventListener('click', () => { const geojson = map.getGeoJson(); const blob = new Blob([JSON.stringify(geojson, null, 2)], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'features.geojson'; a.click(); URL.revokeObjectURL(url); }); } if (loadBtn && map) { loadBtn.addEventListener('click', () => { map.loadGeoJson({ type: 'FeatureCollection', features: [ { type: 'Feature', properties: { mode: 'polygon' }, geometry: { type: 'Polygon', coordinates: [[ [8.675, 50.115], [8.690, 50.115], [8.690, 50.105], [8.675, 50.105], [8.675, 50.115], ]], }, }, ], }); updateFeatureDisplay(); }); } }}>

Interactive Map with Drawing Tools

Click on the drawing tools in the toolbar to create shapes on the map. Use the Select tool to edit, move, or delete shapes. All features are rendered using terra-draw with MapLibre GL JS.

Traffic: To enable live traffic, set the trafficApiKey property with your HERE API key (free tier: 250k requests/month at developer.here.com).

Quick Navigation

Controls

Event Log

init: Waiting for map...

Current Features (GeoJSON)

{ "type": "FeatureCollection", "features": [] }