From 3a1ffd53a51303140abc14eb04fbd615678e9439 Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Tue, 24 Oct 2023 20:08:48 -0700
Subject: [PATCH] Different colored markers

---
 gis/pmtiles.md | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/gis/pmtiles.md b/gis/pmtiles.md
index 7a580247a6..2941acc915 100644
--- a/gis/pmtiles.md
+++ b/gis/pmtiles.md
@@ -257,8 +257,15 @@ myMap.on("load", () => {
         const catlist = [categories.main, ...(categories.alternate || [])].join(
           ", ",
         );
+        let color = '#000080';
+        if (/store|shop/.test(catlist)) {
+          color = '#006400';
+        }
+        if (/restaurant|cafe/.test(catlist)) {
+          color = '#FFA500';
+        };
         const name = JSON.parse(row.names).value[0][0].value[0];
-        const marker = new maplibregl.Marker({ scale: 0.5, color: "#000080" });
+        const marker = new maplibregl.Marker({ scale: 0.5, color: color });
         marker
           .setLngLat([row.longitude, row.latitude])
           .setPopup(
@@ -274,6 +281,8 @@ myMap.on("load", () => {
 ```
 The JSON format is a bit untidy, hence the `JSON.parse()` calls. But this works!
 
+I'm using a very simple set of regular expressions to show shops and restaurants with different marker colors.
+
 At first the markers were displaying in the wrong places, and the popup windows corrupted the display of the map. It turns out this is because I hadn't loaded the `maplibre-gl.css` file.
 
 I added this to `index.html`: