Hamza/maps-saas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(gis): restore premium OSM style and fix international routing bounds for Jordan & Syria

Browse Source
This commit is contained in:
Hamza-Ayed
2026-03-28 03:55:42 +03:00
parent 2d674f5c06
commit d6f3b41b53
4 changed files with 251 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/api/src/maps/maps.service.ts
+15 -34
View File
@@ -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]}`],
const payload: any = {
points: [[from[1], from[0]], [to[1], to[0]]],
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();
},
});
points_encoded: true,
};
console.log('Routing Successful:', response.request.path);
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);
}
}
apps/web/public/map-demo.html
+163
View File
@@ -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>
docker-compose.yml
+9 -7
View File
@@ -25,9 +25,9 @@ services:
redis:
image: redis:7-alpine
container_name: map-redis
platform: linux/arm64
platform: linux/amd64
ports:
- "6380:6379"
- "6381:6379"
volumes:
- redis_data:/data
healthcheck:
@@ -46,7 +46,7 @@ services:
volumes:
- ./infrastructure/osm-data:/data
- ./infrastructure/docker/graphhopper/config.yml:/graphhopper/config.yml
command: ["-i", "/data/jordan-latest.osm.pbf", "-c", "config.yml"]
command: ["-i", "/data/region.osm.pbf", "-c", "config.yml"]
healthcheck:
test: ["CMD-SHELL", "curl -f http://localhost:8080/health || exit 1"]
interval: 30s
@@ -80,7 +80,7 @@ services:
context: .
dockerfile: ./infrastructure/docker/api/Dockerfile
container_name: map-api
platform: linux/arm64
platform: linux/amd64
ports:
- "3200:3200"
environment:
@@ -102,7 +102,7 @@ services:
container_name: map-martin
platform: linux/amd64
ports:
- "3001:3000"
- "3202:3000"
environment:
- WATCH_DB=true
command: postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@db:5432/${POSTGRES_DB}
@@ -121,7 +121,7 @@ services:
environment:
- DATABASE_URL=postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@db:5432/${POSTGRES_DB}
- PGPASSWORD=${POSTGRES_PASSWORD}
command: ["osm2pgsql", "--create", "--slim", "--cache", "1000", "--database", "${POSTGRES_DB}", "--host", "db", "--user", "${POSTGRES_USER}", "/data/jordan-latest.osm.pbf"]
command: ["osm2pgsql", "--create", "--slim", "--cache", "1000", "--database", "${POSTGRES_DB}", "--host", "db", "--user", "${POSTGRES_USER}", "/data/region.osm.pbf"]
depends_on:
db:
condition: service_healthy
@@ -134,9 +134,11 @@ services:
context: .
dockerfile: ./infrastructure/docker/web/Dockerfile
container_name: map-web
platform: linux/arm64
platform: linux/amd64
ports:
- "3201:5173"
volumes:
- ./apps/web/public:/app/public
depends_on:
- api
- martin
infrastructure/scripts/update-data.sh
+60
View File
@@ -0,0 +1,60 @@
#!/bin/bash
# --------------------------------------------------------------------------
# Intaleq Map Platform - 10-Day Update Script
# سكربت تحديث خرائط انطلاقة - التحديث الدوري (كل 10 أيام)
# --------------------------------------------------------------------------
set -e # Exit on error
echo "🚀 Starting 10-day map update..."
# 1. Configuration (From .env or defaults)
PBF_FILE="/data/jordan-latest.osm.pbf"
SOURCE_URL="https://download.geofabrik.de/asia/jordan-latest.osm.pbf"
APP_DIR="/home/hamzadoctor/app"
cd "$APP_DIR"
# 2. Download latest OSM data (Running on Host)
# تحميل أحدث البيانات للأردن وسوريا
echo "🌍 Downloading latest OpenStreetMap data for Jordan & Syria..."
wget -O "infrastructure/osm-data/jordan-latest.osm.pbf.new" "https://download.geofabrik.de/asia/jordan-latest.osm.pbf"
wget -O "infrastructure/osm-data/syria-latest.osm.pbf.new" "https://download.geofabrik.de/asia/syria-latest.osm.pbf"
mv "infrastructure/osm-data/jordan-latest.osm.pbf.new" "infrastructure/osm-data/jordan-latest.osm.pbf"
mv "infrastructure/osm-data/syria-latest.osm.pbf.new" "infrastructure/osm-data/syria-latest.osm.pbf"
# 3. Import new data to PostGIS
# استيراد البيانات إلى قاعدة البيانات
echo "💾 Importing Jordan (Create)..."
docker compose --profile import run --rm osm-import osm2pgsql --create --slim --cache 1000 --database mapdb --host db --user mapuser /data/jordan-latest.osm.pbf
echo "💾 Importing Syria (Append)..."
docker compose --profile import run --rm osm-import osm2pgsql --append --slim --cache 1000 --database mapdb --host db --user mapuser /data/syria-latest.osm.pbf
# 4. Merge Data (Jordan + Syria)
OSM_FILE="infrastructure/osm-data/region.osm.pbf"
echo "🗺️ Merging Jordan and Syria data into $OSM_FILE..."
osmium merge infrastructure/osm-data/jordan-latest.osm.pbf infrastructure/osm-data/syria-latest.osm.pbf -o $OSM_FILE --overwrite
# 5. Spatial Integrity check for Geocoding (Landmarks)
# Purge any legacy landmarks outside the expanded region
echo "📍 Syncing user-submitted landmarks and purging invalid coordinates..."
DELETED_COUNT=$(docker compose exec -T db psql -U mapuser -d mapdb -t -c "DELETE FROM places_syria WHERE longitude < 34 OR longitude > 43 OR latitude < 29 OR latitude > 38;")
echo " ✅ Purged ${DELETED_COUNT//[[:space:]]/} invalid landmarks outside the expanded region."
# Force Spatial Geometry Update
docker compose exec -T db psql -U mapuser -d mapdb -c "UPDATE places_syria SET location = ST_SetSRID(ST_MakePoint(longitude, latitude), 4326) WHERE location IS NULL OR latitude IS NOT NULL;"
# 6. Rebuild Routing Index (GraphHopper)
echo "🚗 Rebuilding GraphHopper routing index (This may take ~5-8 minutes)..."
docker compose stop routing
# Delete old cache - VERY IMPORTANT to force full re-index
rm -rf infrastructure/osm-data/graph-cache infrastructure/osm-data/default-gh
docker compose up -d routing
# 7. Final Cleanup & Cache Flush
echo "🧹 Clearing Redis traffic cache..."
docker compose exec -T redis redis-cli flushall
echo "Done! Map platform is now fully synchronized with Jordan & Syria roads (including Damascus)."