164 lines
7.0 KiB
HTML
164 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ar" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Intaleq Premium Map - خرائط انطلاقة الذكية</title>
|
|
|
|
<link href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css" rel="stylesheet" />
|
|
<script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
|
|
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: #f8f9fa; overflow: hidden; }
|
|
#map { width: 100%; height: 100vh; position: absolute; top: 0; left: 0; }
|
|
.controls {
|
|
position: absolute; top: 20px; right: 20px; z-index: 100;
|
|
background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px);
|
|
border-radius: 16px; padding: 20px; width: 340px;
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.05);
|
|
}
|
|
.branding {
|
|
position: absolute; bottom: 24px; left: 24px; z-index: 100;
|
|
background: rgba(255, 255, 255, 0.9); padding: 8px 16px; border-radius: 8px;
|
|
display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
|
pointer-events: none; border: 1px solid rgba(0,0,0,0.05);
|
|
}
|
|
.btn {
|
|
padding: 14px 20px; border: none; border-radius: 10px;
|
|
font-size: 15px; font-weight: 700; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
width: 100%; margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 10px;
|
|
}
|
|
.btn-primary { background: #2563eb; color: white; }
|
|
.btn-primary:hover { background: #1d4ed8; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); }
|
|
.info-box {
|
|
background: #f8fafc; border-radius: 10px; padding: 14px; font-size: 14px; color: #334155; margin-top: 16px;
|
|
border-right: 4px solid #2563eb; line-height: 1.6; display: none;
|
|
}
|
|
#loading { display: none; position: fixed; inset: 0; background: rgba(255,255,255,0.7); z-index: 2000; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="map"></div>
|
|
<div id="loading"><strong>جاري معالجة المسار...</strong></div>
|
|
|
|
<div class="branding">
|
|
<img src="/intaleq-logo.png" alt="Logo" style="height: 20px;" onerror="this.style.display='none'">
|
|
<span style="font-size: 12px; font-weight: 800; color: #0f172a; letter-spacing: 0.5px;">POWERED BY INTALEQ</span>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<h2 style="font-size: 20px; color: #0f172a; margin-bottom: 6px;">🗺️ خرائط انطلاقة الذكية</h2>
|
|
<p style="font-size: 13px; color: #64748b; margin-bottom: 16px;">المسار المعتمد: عمان ➔ دمشق</p>
|
|
|
|
<button class="btn btn-primary" onclick="handleRoute()">
|
|
<span>🚀</span>
|
|
<span>حساب المسار الذكي</span>
|
|
</button>
|
|
|
|
<div id="status" class="info-box"></div>
|
|
</div>
|
|
|
|
<script>
|
|
const TILES_URL = 'https://tiles.intaleqapp.com';
|
|
const API_KEY = 'intaleq_secret_2026';
|
|
const AMMAN = [35.9106, 31.9539];
|
|
const DAMASCUS = [36.2765, 33.5138];
|
|
|
|
maplibregl.setRTLTextPlugin('https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.js', null, true);
|
|
|
|
const map = new maplibregl.Map({
|
|
container: 'map',
|
|
center: AMMAN,
|
|
zoom: 12,
|
|
attributionControl: false,
|
|
style: './style-mobile.json?v=' + Date.now()
|
|
});
|
|
|
|
map.on('load', () => {
|
|
// إضافة مصدر المعالم الخاصة بدمشق (Places Syria)
|
|
map.addSource('user-landmarks', {
|
|
type: 'vector',
|
|
tiles: [`${TILES_URL}/places_syria/{z}/{x}/{y}`],
|
|
maxzoom: 14
|
|
});
|
|
|
|
// إضافة طبقة الأسماء بدقة عالية تندمج مع الستايل الأصلي
|
|
map.addLayer({
|
|
id: 'user-landmarks-labels',
|
|
type: 'symbol',
|
|
source: 'user-landmarks',
|
|
'source-layer': 'places_syria',
|
|
minzoom: 15, // تظهر فقط عند التقريب الشديد للحفاظ على النظافة
|
|
layout: {
|
|
'text-field': '{name_ar}',
|
|
'text-font': ['Noto Sans Regular'],
|
|
'text-size': 13,
|
|
'text-anchor': 'top',
|
|
'text-offset': [0, 1.2],
|
|
'text-letter-spacing': 0.05
|
|
},
|
|
paint: {
|
|
'text-color': '#3c4043', // تطابق لون أسماء الشوارع والمعالم الأصلية
|
|
'text-halo-color': 'rgba(255, 255, 255, 0.9)',
|
|
'text-halo-width': 2
|
|
}
|
|
});
|
|
|
|
// تحميل أيقونة الأسهم
|
|
map.loadImage('/icons/arrow.svg', (error, image) => {
|
|
if (error) console.error('Error loading arrow icon:', error);
|
|
else if (!map.hasImage('arrow')) map.addImage('arrow', image, { sdf: true });
|
|
});
|
|
});
|
|
|
|
function decodePoly(str) {
|
|
let index = 0, lat = 0, lng = 0, coordinates = [];
|
|
while (index < str.length) {
|
|
let byte, shift = 0, result = 0;
|
|
do { byte = str.charCodeAt(index++) - 63; result |= (byte & 0x1f) << shift; shift += 5; } while (byte >= 0x20);
|
|
lat += ((result & 1) ? ~(result >> 1) : (result >> 1));
|
|
shift = 0; result = 0;
|
|
do { byte = str.charCodeAt(index++) - 63; result |= (byte & 0x1f) << shift; shift += 5; } while (byte >= 0x20);
|
|
lng += ((result & 1) ? ~(result >> 1) : (result >> 1));
|
|
coordinates.push([lng / 1e5, lat / 1e5]);
|
|
}
|
|
return coordinates;
|
|
}
|
|
|
|
async function handleRoute() {
|
|
const l = document.getElementById('loading');
|
|
const s = document.getElementById('status');
|
|
l.style.display = 'flex';
|
|
try {
|
|
const url = `https://map-saas.intaleqapp.com/api/maps/route?fromLat=${AMMAN[1]}&fromLng=${AMMAN[0]}&toLat=${DAMASCUS[1]}&toLng=${DAMASCUS[0]}`;
|
|
const res = await fetch(url, { headers: { 'x-api-key': API_KEY } });
|
|
const data = await res.json();
|
|
|
|
if (data.statusCode >= 400) throw new Error(data.message || 'Routing API Error');
|
|
|
|
let coords = typeof data.points === 'string' ? decodePoly(data.points) : data.points;
|
|
if (!coords || coords.length === 0) throw new Error('No valid route points found');
|
|
|
|
if (map.getSource('route')) {
|
|
map.getSource('route').setData({ type: 'Feature', geometry: { type: 'LineString', coordinates: coords } });
|
|
} else {
|
|
map.addSource('route', { type: 'geojson', data: { type: 'Feature', geometry: { type: 'LineString', coordinates: coords } } });
|
|
map.addLayer({ id: 'route-line', type: 'line', source: 'route', paint: { 'line-color': '#2563eb', 'line-width': 8, 'line-opacity': 0.85 } });
|
|
}
|
|
|
|
const bounds = coords.reduce((b, c) => b.extend(c), new maplibregl.LngLatBounds(coords[0], coords[0]));
|
|
map.fitBounds(bounds, { padding: 80 });
|
|
|
|
s.style.display = 'block';
|
|
s.innerHTML = `🏁 المسافة: ${(data.distance/1000).toFixed(1)} كم | ⏱ الوقت: ${(data.duration/60).toFixed(0)} دقيقة`;
|
|
} catch (e) {
|
|
alert('خطأ في حساب المسارات: ' + e.message);
|
|
console.error(e);
|
|
} finally { l.style.display = 'none'; }
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|