graham/aprs.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove all VectorGrid references and code

Browse source 
- 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>
This commit is contained in:
Graham McIntire 2025-07-28 07:43:44 -05:00
parent 02d9879b79
commit dab0c8737b
No known key found for this signature in database
8 changed files with 7 additions and 8053 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

402
assets/js/map.ts
View file

@ -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)
let tileLayer: L.Layer;
// 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
// Create raster tile layer
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, {
const tileLayer = L.tileLayer(provider.url, {
attribution: provider.attribution,
maxZoom: 19,
subdomains: provider.subdomains,

37
assets/js/types/leaflet-vectorgrid.d.ts vendored
View file

@ -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 {};

2530
assets/vendor/js/leaflet-vectorgrid.js vendored
View file

File diff suppressed because one or more lines are too long

2536
assets/vendor/js/plugins-optimized.js vendored
View file

File diff suppressed because one or more lines are too long

2533
assets/vendor/js/vendor-bundle.js vendored
View file

File diff suppressed because one or more lines are too long

5
scripts/build-vendor-bundle.js
View file

@ -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'
}
];

6
scripts/create-minimal-bundles.js
View file

@ -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;

9
scripts/optimize-vendor-bundle.js
View file

@ -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',
'leaflet-vectorgrid.js'
'topbar.js'
];
let optimizedBundle = '';
@ -97,8 +96,8 @@ function createMinimalVendorBundle() {
optimizedBundle += `\n/* chartjs-adapter-date-fns */\n${content}\n`;
}
// Add topbar and vectorgrid
['topbar.js', 'leaflet-vectorgrid.js'].forEach(file => {
// Add topbar
['topbar.js'].forEach(file => {
const filePath = path.join(jsDir, file);
if (fs.existsSync(filePath)) {
const content = fs.readFileSync(filePath, 'utf8');