Remove all VectorGrid references and code

- Removed VectorGrid from map.ts, now using only raster tiles
- Removed VectorGrid from vendor bundle build scripts
- Removed VectorGrid TypeScript definitions
- Removed VectorGrid JavaScript file
- Rebuilt all vendor bundles without VectorGrid
- Simplified tile layer creation to use only OpenStreetMap raster tiles

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

assets/js/map.ts

@@ -28,7 +28,6 @@ import type {
 } from "./types/leaflet-plugins";
 import type { APRSMarker } from "./types/marker-extensions";
 import type { BaseEventPayload } from "./types/events";
-// Vector grid types are included via the vendor bundle
 
 // Leaflet and plugins are loaded globally from vendor bundle
 // We'll access window.L dynamically when needed instead of storing it at module load time
@@ -288,408 +287,11 @@ let MapAPRSMap = {
             '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a> | APRS.me',
           subdomains: ["a", "b", "c", "d"],
         },
-        osmVector: {
-          // Using official OpenStreetMap vector tiles
-          url: "https://vector.openstreetmap.org/shortbread_v1/{z}/{x}/{y}.mvt",
-          attribution:
-            '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors | APRS.me',
-          isVector: true,
-          maxZoom: 14, // OSM vector tiles only go to zoom 14
-        },
       };
 
-      // Try to use vector tiles if L.vectorGrid is available (loaded from CDN)
+      // Create raster tile layer
-      let tileLayer: L.Layer;
+      const provider = tileProviders.osm;
-      
+      const tileLayer = L.tileLayer(provider.url, {
-      // Check if L.vectorGrid is available and if we should use vector tiles
-      console.log('Checking for L.vectorGrid:', typeof (L as any).vectorGrid);
-      console.log('Checking for L.vectorGrid.protobuf:', typeof (L as any).vectorGrid?.protobuf);
-      
-      // Use vector tiles for better performance and scalability
-      const useVectorTiles = false;
-      
-      if (useVectorTiles && (L as any).vectorGrid && (L as any).vectorGrid.protobuf) {
-        try {
-          console.log('L.vectorGrid.protobuf is available, attempting to use OpenStreetMap vector tiles');
-          
-          const vectorProvider = tileProviders.osmVector;
-          
-          // Style configuration to match OSM raster tiles appearance
-          // Using Shortbread schema layer names
-          const vectorTileStyles = {
-            // Background layer
-            'background': {
-              fill: true,
-              fillColor: '#f2efe9',
-              fillOpacity: 1,
-              weight: 0
-            },
-            // Water features
-            'water_areas': {
-              fill: true,
-              fillColor: '#aad3df',
-              fillOpacity: 1,
-              weight: 1,
-              color: '#aad3df',
-              opacity: 1
-            },
-            'water_areas_polygons': {
-              fill: true,
-              fillColor: '#aad3df',
-              fillOpacity: 1,
-              weight: 0
-            },
-            'water_lines': {
-              weight: 2,
-              color: '#aad3df',
-              opacity: 1
-            },
-            'ocean': {
-              fill: true,
-              fillColor: '#aad3df',
-              fillOpacity: 1,
-              weight: 0
-            },
-            // Land - match OSM standard background  
-            'land': {
-              fill: true,
-              fillColor: '#f2efe9',
-              fillOpacity: 1,
-              weight: 0
-            },
-            // Landuse/landcover - various land use types
-            'landuse_areas': function(properties: any) {
-              const kind = properties.kind || properties.landuse || properties.natural;
-              // Parks and recreation
-              if (kind === 'park' || kind === 'recreation_ground' || kind === 'grass' || kind === 'village_green') {
-                return {
-                  fill: true,
-                  fillColor: '#cdebb0',
-                  fillOpacity: 1,
-                  weight: 0
-                };
-              }
-              // Forests and woods
-              if (kind === 'forest' || kind === 'wood') {
-                return {
-                  fill: true,
-                  fillColor: '#add19e',
-                  fillOpacity: 1,
-                  weight: 0
-                };
-              }
-              // Residential
-              if (kind === 'residential') {
-                return {
-                  fill: true,
-                  fillColor: '#e0dfdf',
-                  fillOpacity: 0.5,
-                  weight: 0
-                };
-              }
-              // Commercial/retail
-              if (kind === 'commercial' || kind === 'retail') {
-                return {
-                  fill: true,
-                  fillColor: '#f2dad9',
-                  fillOpacity: 0.5,
-                  weight: 0
-                };
-              }
-              // Industrial
-              if (kind === 'industrial') {
-                return {
-                  fill: true,
-                  fillColor: '#dfd1d6',
-                  fillOpacity: 0.5,
-                  weight: 0
-                };
-              }
-              // Default
-              return {
-                fill: false,
-                weight: 0
-              };
-            },
-            // Streets/roads - road areas and parking
-            'streets_polygons': function(properties: any) {
-              const kind = properties.kind || properties.area;
-              if (kind === 'parking') {
-                return {
-                  fill: true,
-                  fillColor: '#f7efb7',
-                  fillOpacity: 0.8,
-                  weight: 0
-                };
-              }
-              // Default road areas
-              return {
-                fill: true,
-                fillColor: '#ffffff',
-                fillOpacity: 0.8,
-                weight: 0
-              };
-            },
-            // Main street lines
-            'streets': function(properties: any, zoom: number) {
-              const kind = properties.kind || properties.highway || properties.type;
-              
-              // Adjust weights based on zoom
-              const zoomFactor = zoom > 15 ? 1.5 : zoom > 13 ? 1.2 : 1;
-              
-              // Motorways
-              if (kind === 'motorway' || kind === 'motorway_link') {
-                return {
-                  weight: 5 * zoomFactor,
-                  color: '#e892a2',
-                  opacity: 1
-                };
-              }
-              // Trunk roads
-              if (kind === 'trunk' || kind === 'trunk_link') {
-                return {
-                  weight: 4 * zoomFactor,
-                  color: '#f9b29c',
-                  opacity: 1
-                };
-              }
-              // Primary roads
-              if (kind === 'primary' || kind === 'primary_link') {
-                return {
-                  weight: 3.5 * zoomFactor,
-                  color: '#fcd6a4',
-                  opacity: 1
-                };
-              }
-              // Secondary roads
-              if (kind === 'secondary' || kind === 'secondary_link') {
-                return {
-                  weight: 3 * zoomFactor,
-                  color: '#f7fabf',
-                  opacity: 1
-                };
-              }
-              // Tertiary roads
-              if (kind === 'tertiary' || kind === 'tertiary_link') {
-                return {
-                  weight: 2.5 * zoomFactor,
-                  color: '#ffffff',
-                  opacity: 1
-                };
-              }
-              // Unclassified roads
-              if (kind === 'unclassified') {
-                return {
-                  weight: 2 * zoomFactor,
-                  color: '#ffffff',
-                  opacity: 1
-                };
-              }
-              // Residential streets
-              if (kind === 'residential' || kind === 'living_street') {
-                return {
-                  weight: 1.5 * zoomFactor,
-                  color: '#ffffff',
-                  opacity: 0.9
-                };
-              }
-              // Service roads
-              if (kind === 'service') {
-                return {
-                  weight: 1 * zoomFactor,
-                  color: '#ffffff',
-                  opacity: 0.8
-                };
-              }
-              // Paths and tracks
-              if (kind === 'path' || kind === 'track' || kind === 'footway' || kind === 'cycleway') {
-                return {
-                  weight: 0.8,
-                  color: '#fa8072',
-                  opacity: 0.8,
-                  dashArray: '2, 2'
-                };
-              }
-              // Default
-              return {
-                weight: 1,
-                color: '#cccccc',
-                opacity: 0.7
-              };
-            },
-            // Street labels
-            'street_labels': {
-              weight: 0,
-              opacity: 0
-            },
-            'street_labels_points': {
-              weight: 0,
-              opacity: 0
-            },
-            // Buildings
-            'buildings': {
-              fill: true,
-              fillColor: '#d9d0c9',
-              fillOpacity: 1,
-              weight: 1,
-              color: '#cdbbb4',
-              opacity: 1
-            },
-            'buildings_polygons': {
-              fill: true,
-              fillColor: '#d9d0c9',
-              fillOpacity: 1,
-              weight: 1,
-              color: '#cdbbb4',
-              opacity: 1
-            },
-            // POIs - Shortbread uses 'pois_*' layers
-            'pois_points': {
-              weight: 0,
-              opacity: 0,
-              fillOpacity: 0
-            },
-            'pois_polygons': {
-              weight: 0,
-              opacity: 0,
-              fillOpacity: 0
-            },
-            // Places - hide labels
-            'place_labels': {
-              weight: 0,
-              opacity: 0,
-              fillOpacity: 0
-            },
-            'place_points': {
-              weight: 0,
-              opacity: 0,
-              fillOpacity: 0
-            },
-            // Boundaries - Shortbread uses 'boundaries_*'
-            'boundaries': {
-              weight: 0.8,
-              color: '#a09090',
-              opacity: 0.4,
-              dashArray: '3, 3'
-            },
-            'boundaries_labels': {
-              weight: 0,
-              opacity: 0
-            },
-            // Transit - hide for simplicity
-            'transit_points': {
-              weight: 0,
-              opacity: 0
-            },
-            'transit_polygons': {
-              weight: 0,
-              opacity: 0
-            },
-            'transit_lines': {
-              weight: 0,
-              opacity: 0
-            },
-            // Additional layers
-            'addresses': {
-              weight: 0,
-              opacity: 0
-            },
-            'aerialways': {
-              weight: 1,
-              color: '#999999',
-              opacity: 0.5,
-              dashArray: '5, 3'
-            },
-            'bridges': {
-              weight: 0,
-              opacity: 0
-            },
-            'ferries': {
-              weight: 1,
-              color: '#66f',
-              opacity: 0.5,
-              dashArray: '3, 3'
-            },
-            'piers': {
-              fill: true,
-              fillColor: '#f2efe9',
-              fillOpacity: 1,
-              weight: 1,
-              color: '#aaa',
-              opacity: 1
-            },
-            'public_transport': {
-              weight: 0,
-              opacity: 0
-            },
-            'sites': function(properties: any) {
-              const kind = properties.kind || properties.type;
-              if (kind === 'university' || kind === 'college' || kind === 'school') {
-                return {
-                  fill: true,
-                  fillColor: '#f0f0d8',
-                  fillOpacity: 0.5,
-                  weight: 0
-                };
-              }
-              if (kind === 'hospital') {
-                return {
-                  fill: true,
-                  fillColor: '#fde',
-                  fillOpacity: 0.5,
-                  weight: 0
-                };
-              }
-              return {
-                fill: false,
-                weight: 0
-              };
-            },
-            // Default style - should rarely be used
-            '*': {
-              fill: false,
-              weight: 0,
-              opacity: 0
-            }
-          };
-          
-          // Create vector grid layer using L.vectorGrid.protobuf
-          tileLayer = (L as any).vectorGrid.protobuf(vectorProvider.url, {
-            attribution: vectorProvider.attribution,
-            maxNativeZoom: vectorProvider.maxZoom,
-            maxZoom: 19,
-            rendererFactory: L.canvas.tile,
-            interactive: false,
-            getFeatureId: function(feature: any) {
-              return feature.properties.osm_id || feature.properties.id;
-            },
-            // Pass styles object directly
-            vectorTileLayerStyles: vectorTileStyles
-          });
-        
-          console.log('Leaflet VectorGrid layer created successfully');
-          console.log('Vector tile layer:', tileLayer);
-        } catch (error) {
-          console.error('Failed to create vector tile layer with Leaflet.VectorGrid:', error);
-          // Fall back to raster tiles on error
-          const provider = tileProviders.osm;
-          tileLayer = L.tileLayer(provider.url, {
-            attribution: provider.attribution,
-            maxZoom: 19,
-            subdomains: provider.subdomains,
-            tileSize: 256,
-            keepBuffer: 2,
-            updateWhenZooming: false,
-            updateInterval: 200,
-            errorTileUrl:
-              "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",
-          });
-        }
-      } else {
-        console.log('Leaflet.VectorGrid not available, falling back to raster tiles');
-        // Fallback to raster tiles
-        const provider = tileProviders.osm;
-        tileLayer = L.tileLayer(provider.url, {
         attribution: provider.attribution,
         maxZoom: 19,
         subdomains: provider.subdomains,

assets/js/types/leaflet-vectorgrid.d.ts

@@ -1,37 +0,0 @@
-// Type definitions for leaflet.vectorgrid
-import * as L from 'leaflet';
-
-declare module 'leaflet' {
-  namespace vectorGrid {
-    interface VectorGridOptions extends L.GridLayerOptions {
-      rendererFactory?: L.Renderer;
-      vectorTileLayerStyles?: any;
-      interactive?: boolean;
-      getFeatureId?: (feature: any) => string | number;
-    }
-
-    interface ProtobufOptions extends VectorGridOptions {
-      subdomains?: string | string[];
-      key?: string;
-      token?: string;
-      maxNativeZoom?: number;
-    }
-
-    class VectorGrid extends L.GridLayer {
-      constructor(options?: VectorGridOptions);
-      setFeatureStyle(id: string | number, style: L.PathOptions): void;
-      resetFeatureStyle(id: string | number): void;
-      clearHighlight(): void;
-    }
-
-    class Protobuf extends VectorGrid {
-      constructor(url: string, options?: ProtobufOptions);
-    }
-
-    function protobuf(url: string, options?: ProtobufOptions): Protobuf;
-  }
-
-  function vectorGrid(options?: any): any;
-}
-
-export {};

scripts/build-vendor-bundle.js

@@ -45,11 +45,6 @@ const libraries = [
     name: 'topbar',
     url: 'https://unpkg.com/topbar@3.0.0/topbar.min.js',
     minUrl: 'https://unpkg.com/topbar@3.0.0/topbar.min.js'
-  },
-  {
-    name: 'leaflet-vectorgrid',
-    url: 'https://unpkg.com/leaflet.vectorgrid@1.3.0/dist/Leaflet.VectorGrid.bundled.js',
-    minUrl: 'https://unpkg.com/leaflet.vectorgrid@1.3.0/dist/Leaflet.VectorGrid.bundled.js'
   }
 ];
 

scripts/create-minimal-bundles.js

@@ -122,12 +122,6 @@ function createOptimizedPlugins() {
     }
   });
   
-  // Add vector grid only if needed (conditional loading)
-  const vectorGridPath = path.join(JS_DIR, 'leaflet-vectorgrid.js');
-  if (fs.existsSync(vectorGridPath)) {
-    const vectorGridContent = fs.readFileSync(vectorGridPath, 'utf8');
-    pluginBundle += `\n/* leaflet-vectorgrid.js - lazy loaded */\nwindow.LeafletVectorGrid = (function() {\n${vectorGridContent}\nreturn L.vectorGrid;\n})();\n`;
-  }
   
   fs.writeFileSync(path.join(JS_DIR, 'plugins-optimized.js'), pluginBundle);
   return pluginBundle.length;

scripts/optimize-vendor-bundle.js

@@ -15,7 +15,7 @@ const LEAFLET_USED_FEATURES = [
   'L.polyline', 'L.circle', 'L.circleMarker', 'L.control', 'L.DomUtil', 'L.DomEvent',
   
   // Plugins used
-  'L.heatLayer', 'L.markerClusterGroup', 'L.vectorGrid'
+  'L.heatLayer', 'L.markerClusterGroup'
 ];
 
 const CHARTJS_USED_FEATURES = [
@@ -69,8 +69,7 @@ function createMinimalVendorBundle() {
     'leaflet-heat.js', 
     'leaflet-markercluster.js',
     'overlapping-marker-spiderfier.js',
-    'topbar.js',
+    'topbar.js'
-    'leaflet-vectorgrid.js'
   ];
   
   let optimizedBundle = '';
@@ -97,8 +96,8 @@ function createMinimalVendorBundle() {
     optimizedBundle += `\n/* chartjs-adapter-date-fns */\n${content}\n`;
   }
   
-  // Add topbar and vectorgrid
+  // Add topbar
-  ['topbar.js', 'leaflet-vectorgrid.js'].forEach(file => {
+  ['topbar.js'].forEach(file => {
     const filePath = path.join(jsDir, file);
     if (fs.existsSync(filePath)) {
       const content = fs.readFileSync(filePath, 'utf8');