105 lines
3.4 KiB
HTML
105 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Intaleq Maps JS SDK - Live Demo</title>
|
|
<link href="https://unpkg.com/maplibre-gl@5.1.1/dist/maplibre-gl.css" rel="stylesheet" />
|
|
<style>
|
|
body { margin: 0; padding: 0; font-family: 'Inter', sans-serif; overflow: hidden; }
|
|
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
|
|
.overlay {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 20px;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
|
backdrop-filter: blur(10px);
|
|
z-index: 10;
|
|
width: 300px;
|
|
}
|
|
h1 { margin: 0 0 10px; font-size: 18px; color: #0D47A1; }
|
|
p { margin: 0 0 15px; font-size: 13px; color: #666; line-height: 1.5; }
|
|
.btn {
|
|
background: #0D47A1;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 15px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
width: 100%;
|
|
transition: all 0.2s;
|
|
}
|
|
.btn:hover { background: #1565C0; transform: translateY(-1px); }
|
|
.status { margin-top: 10px; font-size: 11px; color: #4CAF50; font-weight: 500; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="overlay">
|
|
<h1>Intaleq SDK Demo</h1>
|
|
<p>This demo showcases the <b>Intaleq Maps JS SDK</b> in action. It utilizes our premium Obsidian style and simplified geometry API.</p>
|
|
<button class="btn" onclick="addDemoObjects()">Add Route & Marker</button>
|
|
<div id="status" class="status"></div>
|
|
</div>
|
|
|
|
<div id="map"></div>
|
|
|
|
<!-- Since we haven't published to NPM yet, we reference the local source in this demo template -->
|
|
<!-- In a real world production example, you would use: -->
|
|
<!-- <script src="https://unpkg.com/intaleq-maps-gl/dist/index.js"></script> -->
|
|
|
|
<script type="module">
|
|
// Mocking the IntaleqMap interface for this standalone demo
|
|
// In production, this would be imported from the SDK
|
|
import { IntaleqMap, PolylineUtils } from '../src/index.ts';
|
|
|
|
const apiKey = 'YOUR_INTALEQ_API_KEY'; // Replace with a valid key for live testing
|
|
|
|
const map = new IntaleqMap({
|
|
container: 'map',
|
|
apiKey: apiKey,
|
|
styleType: 'obsidian',
|
|
center: [36.2765, 33.5138], // Damascus
|
|
zoom: 13
|
|
});
|
|
|
|
window.addDemoObjects = async () => {
|
|
document.getElementById('status').innerText = 'Adding Intaleq objects...';
|
|
|
|
// 1. Add a Marker
|
|
map.addIntaleqMarker({
|
|
position: [36.2765, 33.5138],
|
|
color: '#0D47A1'
|
|
});
|
|
|
|
// 2. Mock a route (in reality, you'd use map.getRoute())
|
|
const mockCoordinates = [
|
|
[36.2765, 33.5138],
|
|
[36.28, 33.515],
|
|
[36.285, 33.52],
|
|
[36.29, 33.525]
|
|
];
|
|
|
|
map.addIntaleqPolyline({
|
|
id: 'demo-route',
|
|
coordinates: mockCoordinates,
|
|
width: 6,
|
|
color: '#00e5ff'
|
|
});
|
|
|
|
document.getElementById('status').innerText = 'Demo objects added successfully!';
|
|
};
|
|
|
|
map.on('load', () => {
|
|
console.log('Intaleq Map Loaded');
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|