-
-
Notifications
You must be signed in to change notification settings - Fork 37
/
openfreemap-demo.html
126 lines (114 loc) · 2.92 KB
/
openfreemap-demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
<head>
<title>MapLibre GL + OpenFreeMap demo</title>
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
<style>
body, html {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map" style="width: 100%; height: 100vh"></div>
<script>
// Function to generate random coordinates within a bounding box
function getRandomCoordinate(minLng, maxLng, minLat, maxLat) {
const lng = Math.random() * (maxLng - minLng) + minLng;
const lat = Math.random() * (maxLat - minLat) + minLat;
return [lng, lat];
}
// San Francisco bounding box (approximate)
const sfBounds = {
minLng: -122.5155,
maxLng: -122.3247,
minLat: 37.7038,
maxLat: 37.8324
};
// Create the map
const map = new maplibregl.Map({
style: 'https://tiles.openfreemap.org/styles/liberty',
center: [-122.4194, 37.7749], // San Francisco coordinates
zoom: 11,
container: 'map',
});
map.setPitch(50);
// Array to store all marker coordinates
const markerCoordinates = [];
// Generate 1000 random markers
for (let i = 0; i < 1000; i++) {
const [lng, lat] = getRandomCoordinate(
sfBounds.minLng,
sfBounds.maxLng,
sfBounds.minLat,
sfBounds.maxLat
);
markerCoordinates.push([lng, lat]);
}
// Option 1: Use built-in scaling
function addScaledMarkers() {
markerCoordinates.forEach(coord => {
new maplibregl.Marker({ scale: 0.5 }) // Scale down to 50%
.setLngLat(coord)
.addTo(map);
});
}
// Option 2: Custom HTML element
function addCustomMarkers() {
markerCoordinates.forEach(coord => {
const el = document.createElement('div');
el.className = 'custom-marker';
el.style.width = '10px';
el.style.height = '10px';
el.style.borderRadius = '50%';
el.style.backgroundColor = 'red';
new maplibregl.Marker(el)
.setLngLat(coord)
.addTo(map);
});
}
// Option 3: Use circle layer instead of markers
function addCircleLayer() {
map.on('load', () => {
map.addSource('markers', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: markerCoordinates.map(coord => ({
type: 'Feature',
geometry: {
type: 'Point',
coordinates: coord
}
}))
}
});
map.addLayer({
id: 'markers',
type: 'circle',
source: 'markers',
paint: {
'circle-radius': 3,
'circle-color': 'blue'
}
});
});
}
// Choose one of these options:
// addScaledMarkers();
// addCustomMarkers();
addCircleLayer();
// Fit the map to the extent of all markers
map.on('load', () => {
const bounds = markerCoordinates.reduce((bounds, coord) => {
return bounds.extend(coord);
}, new maplibregl.LngLatBounds(markerCoordinates[0], markerCoordinates[0]));
map.fitBounds(bounds, {
padding: 50 // Add some padding around the markers
});
});
</script>
</body>
</html>