Switch to OSM for maps #447

pjaudiomv · 2025-05-07T12:44:59Z

~~This add support for OpenStreetMaps which doesn't require api keys. Obviously not as pretty and nice as the mapbox tiles but it allows maps to work with no key which is nice.~~

Updated PR description 5/17:

eliminates Mapbox and WebMercatorViewport, replaces with React Leaflet
drops bundle size from 1.4m minified to 572k (-60%)
replaces Mapbox geocoding for "Near Location" mode with new C4R geocoder
fixes minor UX papercuts:
- refocuses map on markers when they change
- opens marker window when there's only one marker
- applies default distance to 5mi/km instead of making the user select
- applies location search when changing modes and search is present
- fixes overall tsml-ui height to be 100dvh

netlify · 2025-05-07T12:45:05Z

✅ Deploy Preview for tsml-ui ready!

Name	Link
🔨 Latest commit	`d29b886`
🔍 Latest deploy log	https://app.netlify.com/projects/tsml-ui/deploys/6828d32a34b7c800089affaf
😎 Deploy Preview	https://deploy-preview-447--tsml-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

fix tests add test for markers

joshreisner · 2025-05-09T03:37:10Z

this works way better than i thought it would!

my first concern when i saw this was the bundle size - but turns out it doesn't bring it up by that much. before it's 1.4m and after it's 1.56m, so an increase of 150k basically

my second concern is maintaining two solutions - but what if we were to use only this and take mapbox out? then the bundle drops to 580kb, and no one needs to sign up for a mapbox account. also OSM is more aligned with the AA ethos.

there are some CSS issues that would need to get ironed out, but i can help with that. definitely something worth discussing at the next meeting

joshreisner · 2025-05-09T15:09:06Z

hey @pjaudiomv is it ok if i push a commit on this branch that removes mapbox (except to power location search) and fixes some CSS issues?

pjaudiomv · 2025-05-09T15:24:34Z

hey @pjaudiomv is it ok if i push a commit on this branch that removes mapbox (except to power location search) and fixes some CSS issues?

Oh I thought it was a fork but ya do whatever you need to do

pjaudiomv · 2025-05-09T15:29:26Z

Ya OSM is nice because free, open source, no api keys. no corporate entity tracking you. pretty big open source eco system. you can use different tile providers if wanted

pjaudiomv · 2025-05-09T15:37:18Z

oh weird it seems you already pushed, how does that work with a fork. either way ya go ahead

joshreisner · 2025-05-09T15:56:20Z

yeah i synced with main already. later tonight ill try to push the change i mentioned

pjaudiomv · 2025-05-10T03:31:05Z

cool looks better fixed css, and its opening info modal with single meeting again

joshreisner · 2025-05-10T16:47:30Z

hi @Hiro-Tokyo we're considering a change to TSML UI away from Mapbox to Open Street Maps. these are less pretty but they are free!

before we change i wanted to check with you that this doesn't majorly degrade the experience in japan? here is a demo: https://deploy-preview-447--tsml-ui.netlify.app/tests/japan.html?view=map

please let us know what you think! thanks

Hiro-Tokyo · 2025-05-14T03:30:37Z

Hi @joshreisner Please let me check with some local service offices crew! I will let you know how we think about.

Hiro-Tokyo · 2025-05-14T03:45:05Z

Are there any advantages and disadvantages?

joshreisner · 2025-05-14T15:45:31Z

hi @Hiro-Tokyo the main advantages are:

sites no longer need an account with mapbox or anyone (mapbox accounts now require a credit card on file and a valid address, which is causing some concern about possible charges)
allows us to simplify the code and make it easier for us to maintain
overall bundle size is 60% lower so tsml ui should load faster, whether the user uses maps or not

the main disadvantages

~~maps aren't as pretty (to me)~~
maps don't smoothly zoom in and out, they go in stages

given these tradeoffs, the team is leaning toward adopting the new approach, but we want to make sure there isn't a problem with the default appearance that would cause problems on non-english sites

it is possible to use custom map appearances but we're still learning about that

joshreisner · 2025-05-14T21:57:24Z

src/styles/controls.ts

    right: 0;
  }

  @media ${media.lgAndUp} {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;

-    & > div:nth-child(2) > div > div {
+    & > div:nth-of-type(2) > div > div {


react complains about nth-child

joshreisner · 2025-05-14T21:58:49Z

webpack.mix.js

@@ -1,7 +1,7 @@
 let mix = require('laravel-mix');
 const webpack = require('webpack');

-mix.options({publicPath: 'public/'});
+mix.options({ publicPath: 'public/', processCssUrls: false });


added this so the build step would not publish leaflet image files into the public directory

pjaudiomv · 2025-05-15T17:12:11Z

README.md

+    tiles_dark: {
+      attribution:
+        '&copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+      url: 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png',


I think stadiamaps requires a api key, like it works fine on 127.0.0.1 or localhost but in production you need a key. so to use darkmode you would have to do url: 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png?api_key=db30b16c-caba-blah',

https://docs.stadiamaps.com/authentication/#local-development

see https://gist.github.com/BrendonKoz/b1df234fe3ee388b402cd8e98f7eedbd I did see a response on this fun thread from OSM team that they are working on actual darkmode vectors https://en.osm.town/@osm_tech/113482687301656785

thanks that's a good callout - this is the dark mode value that i added to the aasanjose story (i didn't need an API key but i did need to set up authorized domains). i just added this as an example for the documentation, but perhaps i should either make this obviously fictitious or pick another one that works out of the box?

I couldn't find one that didn't need a key, I think either make fictions or just add note about possibly needing keys for different map providers

this totally works

map: { tiles: { attribution: `Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>`, url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1Ij_MY_KEY_HERE', }, tiles_dark: { attribution: `Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>`, url: 'https://api.mapbox.com/styles/v1/mapbox/dark-v10/tiles/{z}/{x}/{y}?access_token=pk.eyJ1Ij_MY_KEY_HERE', }, }

so if you wanted to you could still support mapbox with the smallest of code changes (just pass in key to tiles)

Hiro-Tokyo · 2025-05-16T03:38:31Z

Hi @joshreisner

Thank you for your information!

We think it will be okay to change to Open Street Map basically. OSM information provides some old information, venue name, street name... so we need to edit them, though.

Hiro-Tokyo · 2025-05-21T07:57:57Z

Hi @joshreisner seemed already changed to OSM so can we remove MapBox settings on our website?

joshreisner · 2025-05-21T15:08:50Z

@Hiro-Tokyo yes, but i would wait a month - just in case we need to roll back

Hiro-Tokyo · 2025-05-21T22:52:06Z

@Hiro-Tokyo yes, but i would wait a month - just in case we need to roll back

Okay thanks!

pjaudiomv force-pushed the feat-osm-map branch from 322c16f to ac63621 Compare May 7, 2025 12:51

Feat: Add support for OSM map if no mapbox key is provided

f56b424

fix tests add test for markers

pjaudiomv force-pushed the feat-osm-map branch from ac63621 to f56b424 Compare May 7, 2025 13:04

joshreisner added 2 commits May 8, 2025 20:11

Merge branch 'main' into pr/447

449d59b

fix whitespace and merge conflicts

1f46fce

remove mapbox, fix styling

da5d1c9

joshreisner added 2 commits May 10, 2025 08:56

fix custom icons

884bbb0

css tweaks

4e30752

joshreisner changed the title ~~Feat: Add support for OSM map if no mapbox key is provided~~ Switch to OSM for maps May 10, 2025

add japan test for localization

b7c74fb

joshreisner added 8 commits May 10, 2025 10:08

hide zoom control on touch devices

1c22921

replace mapbox with c4r geocoding service

fe91019

refocus map when markers change

c6b23c2

customizable tile layer URL

2bee325

refactor map logic

880b6e6

Merge branch 'main' into pr/447

be41a8d

dont rename imported components

bb0aff3

fix tests

46bc0d4

a little padding so markers aren't too close to the edge

ec8c684

joshreisner requested review from joshreisner, gkovats and FlipperPA May 14, 2025 15:52

joshreisner approved these changes May 14, 2025

View reviewed changes

joshreisner added 3 commits May 14, 2025 09:01

background color

3ec52fb

fixing some location search bugs

dc162bc

tweaks

ac7bffa

joshreisner reviewed May 14, 2025

View reviewed changes

joshreisner added 2 commits May 14, 2025 22:17

dark mode maps

f251bda

efficiency update

92d6c92

pjaudiomv commented May 15, 2025

View reviewed changes

update readme and add better error states

058df57

joshreisner added 5 commits May 15, 2025 23:46

geo markers

d13fb95

bug fixes

4672f32

polish ux when switching search modes

7a7f8b7

tweak markers

20e1ee0

add note about mapbox

d29b886

joshreisner merged commit 45dd706 into code4recovery:main May 18, 2025
4 of 5 checks passed

Switch to OSM for maps #447

Switch to OSM for maps #447

Uh oh!

Conversation

pjaudiomv commented May 7, 2025 • edited by joshreisner Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented May 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for tsml-ui ready!

Uh oh!

joshreisner commented May 9, 2025

Uh oh!

joshreisner commented May 9, 2025

Uh oh!

pjaudiomv commented May 9, 2025

Uh oh!

pjaudiomv commented May 9, 2025

Uh oh!

pjaudiomv commented May 9, 2025

Uh oh!

joshreisner commented May 9, 2025

Uh oh!

pjaudiomv commented May 10, 2025

Uh oh!

joshreisner commented May 10, 2025

Uh oh!

Hiro-Tokyo commented May 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Hiro-Tokyo commented May 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

joshreisner commented May 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

joshreisner May 14, 2025

Choose a reason for hiding this comment

Uh oh!

joshreisner May 14, 2025

Choose a reason for hiding this comment

Uh oh!

pjaudiomv May 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pjaudiomv May 15, 2025

Choose a reason for hiding this comment

Uh oh!

joshreisner May 15, 2025

Choose a reason for hiding this comment

Uh oh!

pjaudiomv May 15, 2025

Choose a reason for hiding this comment

Uh oh!

pjaudiomv May 17, 2025

Choose a reason for hiding this comment

Uh oh!

pjaudiomv May 17, 2025

Choose a reason for hiding this comment

Uh oh!

Hiro-Tokyo commented May 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Hiro-Tokyo commented May 21, 2025

Uh oh!

joshreisner commented May 21, 2025

Uh oh!

Hiro-Tokyo commented May 21, 2025

Uh oh!

Uh oh!

pjaudiomv commented May 7, 2025 •

edited by joshreisner

Loading

netlify bot commented May 7, 2025 •

edited

Loading

Hiro-Tokyo commented May 14, 2025 •

edited

Loading

Hiro-Tokyo commented May 14, 2025 •

edited

Loading

joshreisner commented May 14, 2025 •

edited

Loading

pjaudiomv May 15, 2025 •

edited

Loading

Hiro-Tokyo commented May 16, 2025 •

edited

Loading