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

update tile endpoints to the Martin host, refine map styling and snapping logic, and add geolocation-based map centering.

Browse Source
This commit is contained in:
Hamza-Ayed
2026-07-15 21:56:41 +03:00
parent 7a64be5833
commit 78fe6c48cc
9 changed files with 544 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/CompareView.tsx
+19 -3
View File
@@ -15,7 +15,10 @@ import 'maplibre-gl/dist/maplibre-gl.css';
* Purpose: visually confirm whether a street/place exists before adding or approving it.
*/
const TILES = (import.meta as any).env.VITE_TILES_URL || 'https://tiles.intaleqapp.com';
// Martin vector-tile host (serves planet_osm_*, approved_roads, …). This is a
// DIFFERENT host from where the app + its style.json are served, so it must be
// absolute — an empty default resolved to the app host, which serves no tiles.
const TILES = (import.meta as any).env.VITE_TILES_URL || 'http://188.68.36.205:3202';
type RefKey = 'google-sat' | 'esri-sat' | 'esri-streets' | 'osm';
const REFS: Record<RefKey, { label: string; tiles: string; attribution: string; maxzoom: number }> = {
@@ -48,14 +51,27 @@ const CompareView: React.FC = () => {
const start: [number, number] = [35.91, 31.95];
const startZoom = 15;
const lMap = new maplibregl.Map({ container: leftDiv.current, style: TILES + '/style.json', center: start, zoom: startZoom, attributionControl: false });
// Base style is served by the APP host as a static file (its internal sources
// already point at the absolute Martin host), so load it relatively — never
// prefixed with the tile host, which does not serve /style.json.
const lMap = new maplibregl.Map({ container: leftDiv.current, style: '/style.json', center: start, zoom: startZoom, attributionControl: false });
const rMap = new maplibregl.Map({ container: rightDiv.current, style: rasterStyle(REFS['esri-sat']), center: start, zoom: startZoom, attributionControl: false });
lMap.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-left');
rMap.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-right');
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition((pos) => {
const coords: [number, number] = [pos.coords.longitude, pos.coords.latitude];
lMap.flyTo({ center: coords, zoom: 14, essential: true });
rMap.flyTo({ center: coords, zoom: 14, essential: true });
setCenter({ lng: coords[0], lat: coords[1], zoom: 14 });
});
}
lMap.on('load', () => {
lMap.addSource('approved', { type: 'vector', tiles: [`${TILES}/approved_roads/{z}/{x}/{y}`], minzoom: 8, maxzoom: 18 });
lMap.addLayer({ id: 'approved', type: 'line', source: 'approved', 'source-layer': 'approved_roads', paint: { 'line-color': '#22c55e', 'line-width': ['interpolate', ['linear'], ['zoom'], 10, 1.5, 16, 8] } });
lMap.addLayer({ id: 'approved-casing', type: 'line', source: 'approved', 'source-layer': 'approved_roads', paint: { 'line-color': '#d4d4d4', 'line-width': ['interpolate', ['linear'], ['zoom'], 13, 1, 16, 8] } });
lMap.addLayer({ id: 'approved', type: 'line', source: 'approved', 'source-layer': 'approved_roads', paint: { 'line-color': '#ffffff', 'line-width': ['interpolate', ['linear'], ['zoom'], 13, 0.5, 16, 6] } });
});
// Keep the two views locked together. The guard stops the move→jumpTo→move loop.