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

apps/web/src/components/MapComponent.tsx

@@ -54,7 +54,7 @@ const MapComponent: React.FC<MapComponentProps> = ({
     const tilesUrl = (import.meta as any).env.VITE_TILES_URL || 'https://tiles.intaleqapp.com';
 
     try {
-      map.current = new maplibregl.Map({
+      const initialMap = new maplibregl.Map({
         container: mapContainer.current,
         style: {
           version: 8,
@@ -75,6 +75,12 @@ const MapComponent: React.FC<MapComponentProps> = ({
               type: 'vector',
               tiles: [`${tilesUrl}/planet_osm_point/{z}/{x}/{y}`],
               maxzoom: 14
+            },
+            'approved_roads': {
+              type: 'vector',
+              tiles: [`${tilesUrl}/approved_roads/{z}/{x}/{y}`],
+              minzoom: 8,
+              maxzoom: 18
             }
           },
           layers: [
@@ -145,6 +151,26 @@ const MapComponent: React.FC<MapComponentProps> = ({
                 'line-width': ['interpolate', ['linear'], ['zoom'], 13, 1, 16, 8] as any
               }
             },
+            {
+              id: 'approved-casing',
+              type: 'line',
+              source: 'approved_roads',
+              'source-layer': 'approved_roads',
+              paint: {
+                'line-color': '#d4d4d4',
+                'line-width': ['interpolate', ['linear'], ['zoom'], 13, 1, 16, 8] as any
+              }
+            },
+            {
+              id: 'approved-core',
+              type: 'line',
+              source: 'approved_roads',
+              'source-layer': 'approved_roads',
+              paint: {
+                'line-color': '#ffffff',
+                'line-width': ['interpolate', ['linear'], ['zoom'], 13, 0.5, 16, 6] as any
+              }
+            },
             {
               id: 'road-core-minor',
               type: 'line',
@@ -352,19 +378,37 @@ const MapComponent: React.FC<MapComponentProps> = ({
                 'text-anchor': 'top',
                 'visibility': showPOIs ? 'visible' : 'none'
               },
-              paint: { 
-                'text-color': '#222', 
-                'text-halo-color': 'rgba(255, 255, 255, 0.9)', 
+              paint: {
+                'text-color': '#222',
+                'text-halo-color': 'rgba(255, 255, 255, 0.9)',
                 'text-halo-width': 2
               }
             }
           ]
         },
         center: [35.9106, 31.9539],
-        zoom: 12,
       });
 
-      map.current.on('load', () => {
+      map.current = initialMap;
+
+      // Request User Location
+      if ('geolocation' in navigator) {
+        navigator.geolocation.getCurrentPosition(
+          (position) => {
+            if (initialMap) {
+              initialMap.flyTo({
+                center: [position.coords.longitude, position.coords.latitude],
+                zoom: 14,
+                essential: true
+              });
+            }
+          },
+          (error) => console.warn('Geolocation denied or failed', error),
+          { timeout: 5000 }
+        );
+      }
+
+      initialMap.on('load', () => {
         console.log("MapComponent: Map Loaded Successfully");
         onMapLoad(map.current!);
       });
@@ -394,13 +438,13 @@ const MapComponent: React.FC<MapComponentProps> = ({
   return (
     <div ref={mapContainer} style={{ width: '100%', height: '100%', position: 'relative' }}>
       {/* Intaleq Premium Branding Watermark */}
-      <div 
-        style={{ 
-          position: 'absolute', 
-          bottom: '10px', 
-          left: '10px', 
-          zIndex: 10, 
-          display: 'flex', 
+      <div
+        style={{
+          position: 'absolute',
+          bottom: '10px',
+          left: '10px',
+          zIndex: 10,
+          display: 'flex',
           alignItems: 'center',
           background: 'rgba(255, 255, 255, 0.85)',
           backdropFilter: 'blur(12px) saturate(180%)',
@@ -414,16 +458,16 @@ const MapComponent: React.FC<MapComponentProps> = ({
           border: '1px solid rgba(255,255,255,0.35)'
         }}
       >
-        <img 
-          src="/intaleq-logo.png" 
-          alt="Intaleq" 
-          style={{ height: '18px', filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.1))' }} 
+        <img
+          src="/intaleq-logo.png"
+          alt="Intaleq"
+          style={{ height: '18px', filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.1))' }}
         />
-        <span 
-          style={{ 
-            fontSize: '10px', 
-            fontWeight: 800, 
-            color: '#c0a048', 
+        <span
+          style={{
+            fontSize: '10px',
+            fontWeight: 800,
+            color: '#c0a048',
             letterSpacing: '0.8px',
             textTransform: 'uppercase'
           }}