bolt/pupmap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Activity

v0.3, 16-10-2025 pupicon added

Browse Source
This commit is contained in:
Bolt J Woofson
2025-10-16 21:32:19 +01:00
parent fcba00eb3e
commit 95029dfe49
1097 changed files with 5244 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
www/index.html
View File

@@ -2,12 +2,13 @@
<html>
<head>
<meta charset="utf-8" />
<title>Pupmap by BoopLabs – v2025-10-03_2300</title>
<title>Pupmap by BoopLabs – v2025-10-16_2221</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css">
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet"/>
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/pmtiles/dist/pmtiles.js"></script>
<script src="js/maplibre-gl-svg.js"></script>
</head>
<body>
@@ -28,21 +29,14 @@
map.on('load', () => {
// Roads
map.addSource('roads', {
type: 'geojson',
data: 'data/roads_europe_clean.geojson'
});
map.addSource('roads', { type: 'geojson', data: 'data/roads_europe_clean.geojson' });
map.addLayer({
id: 'roads-minor',
type: 'line',
source: 'roads',
filter: ['==', ['get', 'type'], 'minor'],
paint: {
'line-color': '#cccccc',
'line-width': 1,
'line-opacity': 0.5
}
paint: { 'line-color': '#cccccc', 'line-width': 1, 'line-opacity': 0.5 }
});
map.addLayer({
@@ -50,30 +44,18 @@
type: 'line',
source: 'roads',
filter: ['==', ['get', 'type'], 'major'],
paint: {
'line-color': '#555555',
'line-width': 2,
'line-opacity': 0.7
}
paint: { 'line-color': '#555555', 'line-width': 2, 'line-opacity': 0.7 }
});
// Cities
map.addSource('cities', {
type: 'geojson',
data: 'data/world_cities_europe_clean.geojson'
});
map.addSource('cities', { type: 'geojson', data: 'data/world_cities_europe_clean.geojson' });
map.addLayer({
id: 'city-points-small',
type: 'circle',
source: 'cities',
filter: ['<', ['get','POP_MAX'], 100000],
paint: {
'circle-radius': 3,
'circle-color': '#999999',
'circle-stroke-width': 1,
'circle-stroke-color': '#666666'
}
paint: { 'circle-radius': 3, 'circle-color': '#999999', 'circle-stroke-width': 1, 'circle-stroke-color': '#666666' }
});
map.addLayer({
@@ -81,12 +63,7 @@
type: 'circle',
source: 'cities',
filter: ['all', ['>=', ['get','POP_MAX'], 100000], ['<', ['get','POP_MAX'], 500000]],
paint: {
'circle-radius': 5,
'circle-color': '#777777',
'circle-stroke-width': 1,
'circle-stroke-color': '#555555'
}
paint: { 'circle-radius': 5, 'circle-color': '#777777', 'circle-stroke-width': 1, 'circle-stroke-color': '#555555' }
});
map.addLayer({
@@ -94,46 +71,23 @@
type: 'circle',
source: 'cities',
filter: ['>=', ['get','POP_MAX'], 500000],
paint: {
'circle-radius': 7,
'circle-color': '#444444',
'circle-stroke-width': 1,
'circle-stroke-color': '#222222'
}
paint: { 'circle-radius': 7, 'circle-color': '#444444', 'circle-stroke-width': 1, 'circle-stroke-color': '#222222' }
});
// City labels, zoom + population based
// City labels
map.addLayer({
id: 'city-labels',
type: 'symbol',
source: 'cities',
layout: {
'text-field': ['get', 'NAME'],
'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
'text-size': [
'interpolate', ['linear'], ['zoom'],
4, 10,
6, 12,
10, 16
],
'text-font': ['Noto Sans Regular'],
'text-size': ['interpolate', ['linear'], ['zoom'], 4, 10, 6, 12, 10, 16],
'text-offset': [0, 1.2],
'text-anchor': 'top'
},
paint: {
'text-color': '#222222',
'text-halo-color': '#ffffff',
'text-halo-width': 1
},
filter: [
'>',
['get','POP_MAX'],
['interpolate', ['linear'], ['zoom'],
4, 2000000, // at zoom 4, only megacities
6, 1000000, // at zoom 6, large cities
8, 500000, // at zoom 8, medium cities
10, 100000 // at zoom 10+, small cities
]
]
paint: { 'text-color': '#222222', 'text-halo-color': '#ffffff', 'text-halo-width': 1 },
filter: ['>', ['get','POP_MAX'], ['interpolate', ['linear'], ['zoom'], 4, 2000000, 6, 1000000, 8, 500000, 10, 100000]]
});
// City popups
@@ -147,7 +101,6 @@
.addTo(map);
});
// Cursor for city dots
['city-points-small','city-points-medium','city-points-large'].forEach(layer => {
map.on('mouseenter', layer, () => { map.getCanvas().style.cursor = 'pointer'; });
map.on('mouseleave', layer, () => { map.getCanvas().style.cursor = ''; });
@@ -162,13 +115,14 @@
clusterRadius: 50
});
// Clusters
map.addLayer({
id: 'clusters',
type: 'circle',
source: 'pois',
filter: ['has', 'point_count'],
paint: {
'circle-color': '#FF0000',
'circle-color': '#0000FF',
'circle-radius': ['step', ['get','point_count'], 15, 10, 20, 50, 25],
'circle-opacity': 0.7,
'circle-stroke-width': 1,
@@ -176,19 +130,25 @@
}
});
map.addLayer({
id: 'unclustered-point',
type: 'circle',
source: 'pois',
filter: ['!', ['has','point_count']],
paint: {
'circle-color': '#FF0000',
'circle-radius': 8,
'circle-opacity': 0.7,
'circle-stroke-width': 1,
'circle-stroke-color': '#fff'
}
});
svgManager = new maplibregl.SvgManager(map);
svgManager.add('pupIcon', 'js/pupicon.svg').then(() =>
{
map.addLayer({
id: 'unclustered-point',
type: 'symbol',
source: 'pois',
filter: ['!', ['has','point_count']],
layout: {
'icon-image': 'pupIcon',
'icon-size': 0.3,
'icon-allow-overlap': true,
'icon-ignore-placement': true
},
});
});
map.on('click', 'unclustered-point', (e) => {
const coordinates = e.features[0].geometry.coordinates.slice();
@@ -226,12 +186,11 @@
if(results.length>0){
const loc = results[0];
map.flyTo({ center: [loc.lon, loc.lat], zoom: 12 });
}else{ alert("No results found"); }
}catch(err){ alert("Error connecting to search API"); console.error(err);}
} else { alert("No results found"); }
} catch(err){ alert("Error connecting to search API"); console.error(err);}
}
});
</script>
</body>
</html>