|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | +<head> |
| 4 | +<meta charset="utf-8"> |
| 5 | +<meta name="viewport" content="width=device-width, initial-scale=1"> |
| 6 | +<title>CSV marker map - use ?csv=URL to CSV to populate</title> |
| 7 | +<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/> |
| 8 | +<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script> |
| 9 | +<style> |
| 10 | +html, body { |
| 11 | + height: 100%; |
| 12 | + margin: 0; |
| 13 | +} |
| 14 | +.custom-marker { |
| 15 | + background-color: darkred; |
| 16 | + border-radius: 50%; |
| 17 | + border: 1px solid white; |
| 18 | +} |
| 19 | +</style> |
| 20 | +</head> |
| 21 | +<body> |
| 22 | +<div id="map" style="width: 100%; height: 100%;"></div> |
| 23 | +<script> |
| 24 | +function toPoint(s) { |
| 25 | + return s.split(",").map(parseFloat); |
| 26 | +} |
| 27 | +async function load() { |
| 28 | + let params = new URLSearchParams(location.search); |
| 29 | + let center = params.get('center') || '0,0'; |
| 30 | + let initialZoom = params.get('zoom'); |
| 31 | + let zoom = parseInt(initialZoom || '2', 10); |
| 32 | + let q = params.get('q'); |
| 33 | + let markers = params.getAll('marker'); |
| 34 | + let csvUrl = params.get('csv'); |
| 35 | + let markerColor = params.get('color') || 'blue'; |
| 36 | + |
| 37 | + let styleElement = document.getElementsByTagName('style')[0]; |
| 38 | + // Get the CSS rule for .custom-marker |
| 39 | + let cssRules = styleElement.sheet.cssRules; |
| 40 | + let customMarkerRule; |
| 41 | + |
| 42 | + for (var i = 0; i < cssRules.length; i++) { |
| 43 | + if (cssRules[i].selectorText === '.custom-marker') { |
| 44 | + customMarkerRule = cssRules[i]; |
| 45 | + break; |
| 46 | + } |
| 47 | + } |
| 48 | + if (customMarkerRule) { |
| 49 | + customMarkerRule.style.backgroundColor = markerColor; |
| 50 | + } |
| 51 | + |
| 52 | + let map = L.map('map', { zoomControl: false }).setView(toPoint(center), zoom); |
| 53 | + L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
| 54 | + maxZoom: 19, |
| 55 | + attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>', |
| 56 | + detectRetina: true |
| 57 | + }).addTo(map); |
| 58 | + if (q && !params.get('center')) { |
| 59 | + let response = await fetch( |
| 60 | + `https://nominatim.openstreetmap.org/search.php?q=${encodeURIComponent(q)}&format=jsonv2` |
| 61 | + ) |
| 62 | + let data = await response.json(); |
| 63 | + let bounds = [ |
| 64 | + [data[0].boundingbox[0],data[0].boundingbox[2]], |
| 65 | + [data[0].boundingbox[1],data[0].boundingbox[3]] |
| 66 | + ]; |
| 67 | + map.fitBounds(bounds); |
| 68 | + // User-provided zoom over-rides this |
| 69 | + if (initialZoom) { |
| 70 | + map.setZoom(parseInt(initialZoom)); |
| 71 | + } |
| 72 | + } |
| 73 | + map.on('moveend zoomend', () => { |
| 74 | + // Update URL bar with current location |
| 75 | + let newZoom = map.getZoom(); |
| 76 | + let center = map.getCenter(); |
| 77 | + let u = new URLSearchParams(); |
| 78 | + markers.forEach(s => u.append('marker', s)); |
| 79 | + u.append('center', `${center.lat},${center.lng}`); |
| 80 | + u.append('zoom', newZoom); |
| 81 | + if (csvUrl) { |
| 82 | + u.append('csv', csvUrl); |
| 83 | + } |
| 84 | + history.replaceState(null, null, '?' + u.toString()); |
| 85 | + }); |
| 86 | + markers.forEach(s => { |
| 87 | + L.marker(toPoint(s)).addTo(map); |
| 88 | + }); |
| 89 | + if (csvUrl) { |
| 90 | + await new Promise((resolve, reject) => { |
| 91 | + let script = document.createElement('script'); |
| 92 | + script.src = 'https://unpkg.com/papaparse@5.3.0/papaparse.min.js'; |
| 93 | + script.onload = resolve; |
| 94 | + script.onerror = reject; |
| 95 | + document.head.appendChild(script); |
| 96 | + }); |
| 97 | + Papa.parse(csvUrl, { |
| 98 | + download: true, |
| 99 | + header: true, |
| 100 | + complete: results => { |
| 101 | + results.data.forEach(row => { |
| 102 | + if (row.latitude && row.longitude) { |
| 103 | + L.marker([parseFloat(row.latitude), parseFloat(row.longitude)], { |
| 104 | + icon: L.divIcon({ |
| 105 | + className: 'custom-marker', |
| 106 | + iconSize: [10, 10], |
| 107 | + iconAnchor: [5, 5] |
| 108 | + }) |
| 109 | + }).addTo(map); |
| 110 | + } |
| 111 | + }); |
| 112 | + } |
| 113 | + }); |
| 114 | + } |
| 115 | +} |
| 116 | +load(); |
| 117 | +</script> |
| 118 | +</body> |
| 119 | +</html> |
0 commit comments