feat(gis): restore premium OSM style and fix international routing bounds for Jordan & Syria
This commit is contained in:
Hamza-Ayed
@@ -7,55 +7,36 @@ export class MapsService {
|
||||
private readonly graphHopperUrl: string;
|
||||
|
||||
constructor(private configService: ConfigService) {
|
||||
this.graphHopperUrl = this.configService.get('GRAPH_HOPPER_URL', 'http://map-routing:8080');
|
||||
this.graphHopperUrl = this.configService.get('GRAPH_HOPPER_URL', 'http://routing:8080');
|
||||
}
|
||||
|
||||
async getRoute(from: [number, number], to: [number, number]) {
|
||||
// Proxy routing request to GraphHopper
|
||||
// تحويل طلب حساب المسارم إلى GraphHopper
|
||||
try {
|
||||
const response = await axios.get(`${this.graphHopperUrl}/route`, {
|
||||
params: {
|
||||
point: [`${from[0]},${from[1]}`, `${to[0]},${to[1]}`],
|
||||
profile: 'car',
|
||||
locale: 'en',
|
||||
calc_points: true,
|
||||
points_encoded: false,
|
||||
elevation: false,
|
||||
type: 'json',
|
||||
},
|
||||
paramsSerializer: (params) => {
|
||||
const searchParams = new URLSearchParams();
|
||||
Object.entries(params).forEach(([key, value]) => {
|
||||
if (Array.isArray(value)) {
|
||||
value.forEach(v => searchParams.append(key, v));
|
||||
} else {
|
||||
searchParams.append(key, value as any);
|
||||
}
|
||||
});
|
||||
return searchParams.toString();
|
||||
},
|
||||
});
|
||||
|
||||
console.log('Routing Successful:', response.request.path);
|
||||
const payload: any = {
|
||||
points: [[from[1], from[0]], [to[1], to[0]]],
|
||||
profile: 'car',
|
||||
locale: 'en',
|
||||
calc_points: true,
|
||||
points_encoded: true,
|
||||
};
|
||||
|
||||
console.log(`Routing Request: ${from} -> ${to} via ${this.graphHopperUrl}`);
|
||||
const response = await axios.post(`${this.graphHopperUrl}/route`, payload, { timeout: 5000 });
|
||||
|
||||
console.log('Routing SUCCESS');
|
||||
const route = response.data.paths[0];
|
||||
if (!route) {
|
||||
throw new HttpException('No route found', HttpStatus.NOT_FOUND);
|
||||
}
|
||||
if (!route) throw new HttpException('No route found', HttpStatus.NOT_FOUND);
|
||||
|
||||
return {
|
||||
distance: route.distance, // In meters
|
||||
duration: route.time / 1000, // In seconds
|
||||
points: route.points.coordinates, // Array of [lng, lat]
|
||||
distance: route.distance,
|
||||
duration: route.time / 1000,
|
||||
points: route.points,
|
||||
bbox: route.bbox,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Routing Error:', error.message);
|
||||
if (error.response) {
|
||||
console.error('GraphHopper Response:', error.response.data);
|
||||
}
|
||||
throw new HttpException('Error calculating route', HttpStatus.BAD_GATEWAY);
|
||||
const msg = error.response ? `GH Error: ${JSON.stringify(error.response.data)}` : `DNS/Connection Error: ${error.message}`;
|
||||
console.error('CRITICAL ROUTING FAILURE:', msg);
|
||||
throw new HttpException(`Routing Failure: ${msg}`, HttpStatus.BAD_GATEWAY);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,163 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user