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