From 026baca4314866b5b51a24601db4e74d3fc15138 Mon Sep 17 00:00:00 2001 From: Patrick Nagel Date: Sat, 2 Mar 2024 21:15:08 +0100 Subject: [PATCH] Added specialMarker parameter --- README.md | 4 ++++ index.html | 7 +++++++ 2 files changed, 11 insertions(+) diff --git a/README.md b/README.md index 130b5bb..171469b 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,10 @@ To add markers to the map, use `?marker=lat,lon`. You can pass this multiple tim - https://map.simonwillison.net/?center=51.49,0&zoom=8&marker=51.49,0&marker=51.3,0.2 +To add a special marker (red), use `?specialMarker=lat,lon`. + +- https://map.simonwillison.net/?center=51.49,0&zoom=8&marker=51.49,0&marker=51.3,0.2&specialMarker=51.523774,-0.158431 + ## Using this with shot-scraper You can use this tool to create static map images using [shot-scraper](https://shot-scraper.datasette.io/). For example: diff --git a/index.html b/index.html index 2233bef..bd1c47b 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,9 @@ height: 100%; margin: 0; } +img.specialcolor { + filter: hue-rotate(120deg); +} @@ -26,6 +29,7 @@ let zoom = parseInt(initialZoom || '2', 10); let q = params.get('q'); let markers = params.getAll('marker'); + let specialMarker = params.get('specialMarker'); let map = L.map('map', { zoomControl: false }).setView(toPoint(center), zoom); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, @@ -53,6 +57,7 @@ let center = map.getCenter(); let u = new URLSearchParams(); markers.forEach(s => u.append('marker', s)); + u.append('specialMarker', specialMarker); u.append('center', `${center.lat},${center.lng}`); u.append('zoom', newZoom); history.replaceState(null, null, '?' + u.toString()); @@ -60,6 +65,8 @@ markers.forEach(s => { L.marker(toPoint(s)).addTo(map); }); + var s = L.marker(toPoint(specialMarker)).addTo(map); + s._icon.classList.add("specialcolor"); } load();