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

ts tweak

Browse source
This commit is contained in:
Graham McIntire 2025-07-24 15:05:41 -05:00
parent 206adb6b7d
commit 9e45ffbf9a
No known key found for this signature in database
1 changed files with 227 additions and 142 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

369
assets/js/map.ts
View file

@ -291,9 +291,8 @@ let MapAPRSMap = {
console.log('Checking for L.vectorGrid:', typeof (L as any).vectorGrid); console.log('Checking for L.vectorGrid:', typeof (L as any).vectorGrid);
console.log('Checking for L.vectorGrid.protobuf:', typeof (L as any).vectorGrid?.protobuf); console.log('Checking for L.vectorGrid.protobuf:', typeof (L as any).vectorGrid?.protobuf);
// Use raster tiles by default for better appearance // Use vector tiles for better performance and scalability
// Vector tiles have rendering issues with water features at lower zoom levels const useVectorTiles = true;
const useVectorTiles = false; // Can be made configurable later
if (useVectorTiles && (L as any).vectorGrid && (L as any).vectorGrid.protobuf) { if (useVectorTiles && (L as any).vectorGrid && (L as any).vectorGrid.protobuf) {
try { try {
@ -302,44 +301,34 @@ let MapAPRSMap = {
const vectorProvider = tileProviders.osmVector; const vectorProvider = tileProviders.osmVector;
// Style configuration to match OSM raster tiles appearance // Style configuration to match OSM raster tiles appearance
// Using Shortbread schema layer names
const vectorTileStyles = { const vectorTileStyles = {
// Water features - hide at lower zoom levels to match raster tiles // Background layer
'water': function(properties: any, zoom: number) { 'background': {
// Hide ALL water features at zoom 12 and below fill: true,
if (zoom <= 12) { fillColor: '#f2efe9',
return { fill: false, stroke: false, weight: 0, opacity: 0 }; fillOpacity: 1,
} weight: 0
// Only show water at zoom 13+
return {
fill: true,
fillColor: '#aad3df',
fillOpacity: 0.8,
weight: 0
};
}, },
'water_areas': function(properties: any, zoom: number) { // Water features
// Also hide water_areas at low zoom 'water_areas': {
if (zoom <= 12) { fill: true,
return { fill: false, stroke: false, weight: 0, opacity: 0 }; fillColor: '#aad3df',
} fillOpacity: 1,
return { weight: 1,
fill: true, color: '#aad3df',
fillColor: '#aad3df', opacity: 1
fillOpacity: 0.8,
weight: 0
};
}, },
'water_polygons': function(properties: any, zoom: number) { 'water_areas_polygons': {
// Hide water polygons too fill: true,
if (zoom <= 12) { fillColor: '#aad3df',
return { fill: false, stroke: false, weight: 0, opacity: 0 }; fillOpacity: 1,
} weight: 0
return { },
fill: true, 'water_lines': {
fillColor: '#aad3df', weight: 2,
fillOpacity: 0.8, color: '#aad3df',
weight: 0 opacity: 1
};
}, },
'ocean': { 'ocean': {
fill: true, fill: true,
@ -347,96 +336,121 @@ let MapAPRSMap = {
fillOpacity: 1, fillOpacity: 1,
weight: 0 weight: 0
}, },
'water_lines': { // Land - match OSM standard background
weight: 1,
color: '#aad3df',
opacity: 0.6
},
// Land - match OSM raster background
'land': { 'land': {
fill: true, fill: true,
fillColor: '#f2efe9', fillColor: '#f2efe9',
fillOpacity: 1, fillOpacity: 1,
weight: 0 weight: 0
}, },
// Landcover layers // Landuse/landcover - various land use types
'landcover': function(properties: any) { 'landuse_areas': function(properties: any) {
const kind = properties.kind || properties.class; const kind = properties.kind || properties.landuse || properties.natural;
// Parks and recreation areas - light green // Parks and recreation
if (kind === 'park' || kind === 'recreation_ground' || kind === 'grass') { if (kind === 'park' || kind === 'recreation_ground' || kind === 'grass' || kind === 'village_green') {
return { return {
fill: true, fill: true,
fillColor: '#c8facc', fillColor: '#cdebb0',
fillOpacity: 0.6, fillOpacity: 1,
weight: 0 weight: 0
}; };
} }
// Forests and woods - darker green // Forests and woods
if (kind === 'forest' || kind === 'wood') { if (kind === 'forest' || kind === 'wood') {
return { return {
fill: true, fill: true,
fillColor: '#add19e', 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, fillOpacity: 0.8,
weight: 0 weight: 0
}; };
} }
// Residential areas - light gray // Default road areas
if (kind === 'residential') {
return {
fill: true,
fillColor: '#e0e0e0',
fillOpacity: 0.3,
weight: 0
};
}
// Commercial/industrial - slightly darker
if (kind === 'commercial' || kind === 'industrial') {
return {
fill: true,
fillColor: '#dfdfdf',
fillOpacity: 0.4,
weight: 0
};
}
// Default landcover
return { return {
fill: true, fill: true,
fillColor: '#f2efe9', fillColor: '#ffffff',
fillOpacity: 0.5, fillOpacity: 0.8,
weight: 0 weight: 0
}; };
}, },
// Streets/roads - match OSM styling // Main street lines
'streets': function(properties: any) { 'streets': function(properties: any, zoom: number) {
const kind = properties.kind || properties.highway; const kind = properties.kind || properties.highway || properties.type;
// Motorways - orange
// Adjust weights based on zoom
const zoomFactor = zoom > 15 ? 1.5 : zoom > 13 ? 1.2 : 1;
// Motorways
if (kind === 'motorway' || kind === 'motorway_link') { if (kind === 'motorway' || kind === 'motorway_link') {
return { return {
weight: 4, weight: 5 * zoomFactor,
color: '#e892a2', color: '#e892a2',
opacity: 1 opacity: 1
}; };
} }
// Trunk roads - pinkish // Trunk roads
if (kind === 'trunk' || kind === 'trunk_link') { if (kind === 'trunk' || kind === 'trunk_link') {
return { return {
weight: 4, weight: 4 * zoomFactor,
color: '#f9b29c', color: '#f9b29c',
opacity: 1 opacity: 1
}; };
} }
// Primary roads - orange/yellow // Primary roads
if (kind === 'primary' || kind === 'primary_link') { if (kind === 'primary' || kind === 'primary_link') {
return { return {
weight: 3, weight: 3.5 * zoomFactor,
color: '#fcd6a4', color: '#fcd6a4',
opacity: 1 opacity: 1
}; };
} }
// Secondary roads - yellow // Secondary roads
if (kind === 'secondary' || kind === 'secondary_link') { if (kind === 'secondary' || kind === 'secondary_link') {
return { return {
weight: 2.5, weight: 3 * zoomFactor,
color: '#f7fabf', color: '#f7fabf',
opacity: 1 opacity: 1
}; };
@ -444,7 +458,15 @@ let MapAPRSMap = {
// Tertiary roads // Tertiary roads
if (kind === 'tertiary' || kind === 'tertiary_link') { if (kind === 'tertiary' || kind === 'tertiary_link') {
return { return {
weight: 2, weight: 2.5 * zoomFactor,
color: '#ffffff',
opacity: 1
};
}
// Unclassified roads
if (kind === 'unclassified') {
return {
weight: 2 * zoomFactor,
color: '#ffffff', color: '#ffffff',
opacity: 1 opacity: 1
}; };
@ -452,7 +474,7 @@ let MapAPRSMap = {
// Residential streets // Residential streets
if (kind === 'residential' || kind === 'living_street') { if (kind === 'residential' || kind === 'living_street') {
return { return {
weight: 1.5, weight: 1.5 * zoomFactor,
color: '#ffffff', color: '#ffffff',
opacity: 0.9 opacity: 0.9
}; };
@ -460,65 +482,155 @@ let MapAPRSMap = {
// Service roads // Service roads
if (kind === 'service') { if (kind === 'service') {
return { return {
weight: 1, weight: 1 * zoomFactor,
color: '#ffffff', color: '#ffffff',
opacity: 0.8 opacity: 0.8
}; };
} }
// Default road style // 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 { return {
weight: 1, weight: 1,
color: '#ffffff', color: '#cccccc',
opacity: 0.8 opacity: 0.7
}; };
}, },
'streets_med': function(properties: any) { // Street labels
// Medium priority streets 'street_labels': {
return { weight: 0,
weight: 2, opacity: 0
color: '#ffffff',
opacity: 0.9
};
}, },
'streets_low': { 'street_labels_points': {
// Low priority streets weight: 0,
weight: 1, opacity: 0
color: '#ffffff',
opacity: 0.7
}, },
// Buildings - subtle gray // Buildings
'buildings': { 'buildings': {
fill: true, fill: true,
fillColor: '#d9d0c9', fillColor: '#d9d0c9',
fillOpacity: 0.7, fillOpacity: 1,
weight: 0.5, weight: 1,
color: '#cfc7c0', color: '#cdbbb4',
opacity: 0.8 opacity: 1
}, },
// POIs - hide them to match raster simplicity 'buildings_polygons': {
'pois': { 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, weight: 0,
opacity: 0, opacity: 0,
fillOpacity: 0 fillOpacity: 0
}, },
// Places - hide labels // Places - hide labels
'places': { 'place_labels': {
weight: 0, weight: 0,
opacity: 0, opacity: 0,
fillOpacity: 0 fillOpacity: 0
}, },
// Boundaries - subtle 'place_points': {
weight: 0,
opacity: 0,
fillOpacity: 0
},
// Boundaries - Shortbread uses 'boundaries_*'
'boundaries': { 'boundaries': {
weight: 0.8, weight: 0.8,
color: '#a09090', color: '#a09090',
opacity: 0.4, opacity: 0.4,
dashArray: '3, 3' dashArray: '3, 3'
}, },
// Transit - hide for simplicity 'boundaries_labels': {
'transit': {
weight: 0, weight: 0,
opacity: 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 // Default style - should rarely be used
'*': { '*': {
fill: false, fill: false,
@ -537,35 +649,8 @@ let MapAPRSMap = {
getFeatureId: function(feature: any) { getFeatureId: function(feature: any) {
return feature.properties.osm_id || feature.properties.id; return feature.properties.osm_id || feature.properties.id;
}, },
// Use a function for vectorTileLayerStyles to have full control // Pass styles object directly
vectorTileLayerStyles: function(properties: any, zoom: number) { vectorTileLayerStyles: vectorTileStyles
// Access layer name from 'this' context
const layerName = this.layerName || '';
// Apply styles based on layer name
const styles = vectorTileStyles;
// Check if we have a specific style for this layer
if (styles[layerName]) {
const style = styles[layerName];
if (typeof style === 'function') {
return style.call(this, properties, zoom);
}
return style;
}
// Use wildcard style if defined
if (styles['*']) {
const style = styles['*'];
if (typeof style === 'function') {
return style.call(this, properties, zoom);
}
return style;
}
// Default: hide unknown features
return { fill: false, stroke: false, weight: 0, opacity: 0 };
}
}); });
console.log('Leaflet VectorGrid layer created successfully'); console.log('Leaflet VectorGrid layer created successfully');