324 lines
10 KiB
TypeScript
324 lines
10 KiB
TypeScript
import { html, css, cssManager } from '@design.estate/dees-element';
|
|
import '@design.estate/dees-wcctools/demotools';
|
|
import type { DeesGeoMap } from './dees-geo-map.js';
|
|
|
|
export const demoFunc = () => html`
|
|
<style>
|
|
${css`
|
|
.demo-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
padding: 24px;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.demo-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.demo-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('#333', '#fff')};
|
|
margin: 0;
|
|
}
|
|
|
|
.demo-description {
|
|
font-size: 14px;
|
|
color: ${cssManager.bdTheme('#666', '#999')};
|
|
margin: 0;
|
|
}
|
|
|
|
.map-wrapper {
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
dees-geo-map {
|
|
height: 500px;
|
|
}
|
|
|
|
.event-log {
|
|
background: ${cssManager.bdTheme('#f5f5f5', '#1a1a1a')};
|
|
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.event-entry {
|
|
padding: 4px 0;
|
|
border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
|
|
color: ${cssManager.bdTheme('#555', '#aaa')};
|
|
}
|
|
|
|
.event-entry:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.event-type {
|
|
color: ${cssManager.bdTheme('#0066cc', '#66b3ff')};
|
|
font-weight: 600;
|
|
}
|
|
|
|
.controls-row {
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.control-button {
|
|
padding: 8px 16px;
|
|
border: 1px solid ${cssManager.bdTheme('#ccc', '#444')};
|
|
border-radius: 6px;
|
|
background: ${cssManager.bdTheme('#fff', '#2a2a2a')};
|
|
color: ${cssManager.bdTheme('#333', '#fff')};
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.control-button:hover {
|
|
background: ${cssManager.bdTheme('#f0f0f0', '#333')};
|
|
border-color: ${cssManager.bdTheme('#999', '#666')};
|
|
}
|
|
|
|
.feature-display {
|
|
background: ${cssManager.bdTheme('#f9f9f9', '#1e1e1e')};
|
|
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.feature-json {
|
|
font-family: monospace;
|
|
font-size: 11px;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
color: ${cssManager.bdTheme('#333', '#ccc')};
|
|
}
|
|
|
|
.locations-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.location-button {
|
|
padding: 10px 12px;
|
|
border: 1px solid ${cssManager.bdTheme('#ddd', '#444')};
|
|
border-radius: 6px;
|
|
background: ${cssManager.bdTheme('#fff', '#2a2a2a')};
|
|
color: ${cssManager.bdTheme('#333', '#fff')};
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.location-button:hover {
|
|
background: ${cssManager.bdTheme('#0066cc', '#0084ff')};
|
|
color: #fff;
|
|
border-color: transparent;
|
|
}
|
|
`}
|
|
</style>
|
|
|
|
<div class="demo-container">
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
|
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 = `<span class="event-type">${type}</span>: ${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<string, [number, number]> = {
|
|
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();
|
|
});
|
|
}
|
|
}}>
|
|
<div class="demo-section">
|
|
<h2 class="demo-title">Interactive Map with Drawing Tools</h2>
|
|
<p class="demo-description">
|
|
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.
|
|
</p>
|
|
|
|
<div class="map-wrapper">
|
|
<dees-geo-map
|
|
.center=${[8.6821, 50.1109] as [number, number]}
|
|
.zoom=${12}
|
|
.showSearch=${true}
|
|
.showNavigation=${true}
|
|
></dees-geo-map>
|
|
</div>
|
|
|
|
<p class="demo-description" style="margin-top: 12px; font-size: 12px; opacity: 0.7;">
|
|
<strong>Traffic:</strong> To enable live traffic, set the <code>trafficApiKey</code> property with your HERE API key
|
|
(free tier: 250k requests/month at <a href="https://developer.here.com" target="_blank" style="color: inherit;">developer.here.com</a>).
|
|
</p>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h2 class="demo-title">Quick Navigation</h2>
|
|
<div class="locations-grid">
|
|
<button class="location-button" id="nav-paris">Paris</button>
|
|
<button class="location-button" id="nav-london">London</button>
|
|
<button class="location-button" id="nav-newyork">New York</button>
|
|
<button class="location-button" id="nav-tokyo">Tokyo</button>
|
|
<button class="location-button" id="nav-sydney">Sydney</button>
|
|
<button class="location-button" id="nav-rio">Rio</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h2 class="demo-title">Controls</h2>
|
|
<div class="controls-row">
|
|
<button class="control-button" id="btn-clear">Clear All Features</button>
|
|
<button class="control-button" id="btn-fit">Fit to Features</button>
|
|
<button class="control-button" id="btn-download">Download GeoJSON</button>
|
|
<button class="control-button" id="btn-load">Load Sample Data</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h2 class="demo-title">Event Log</h2>
|
|
<div class="event-log">
|
|
<div id="event-log">
|
|
<div class="event-entry"><span class="event-type">init</span>: Waiting for map...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-section">
|
|
<h2 class="demo-title">Current Features (GeoJSON)</h2>
|
|
<div class="feature-display">
|
|
<pre class="feature-json" id="feature-json">{ "type": "FeatureCollection", "features": [] }</pre>
|
|
</div>
|
|
</div>
|
|
</dees-demowrapper>
|
|
</div>
|
|
`;
|