Rebuild the signs work order map with mapbox by chiaberry · Pull Request #324 · cityofaustin/atd-knack-signs-markings

chiaberry · 2025-04-01T19:00:23Z

Collector branch for cityofaustin/atd-data-tech#21517

I copied most of the map and the geocoder from the vision zero crash map. react-mapbox-gl is at version ^7.1.9 in vision zero, but the package say its on v8 now, so the imports are different and the types will be different.

cd signs-work-order-map

then to first spin up, nvm use and npm install and cp env_template .env, fill out the mapbox token.

npm run dev

You should see a full screen map. Test putting in an address in the upper left input. it should take you to that address
You can drag the map and the marker will recenter and i am console.logging the new lat/lon

For comparison, here is the existing map deployed https://atd-knack-signs-markings.netlify.app/

Does this feel like a good start to a collector branch?

chiaberry · 2025-04-03T16:23:59Z

Something I completely overlooked when reviewing this repo last month was the calcs file, which renders some calculation widgets https://atd-knack-signs-markings.netlify.app/calcs, embedded in a page in knack. Christina is checking if this is still being used by SMD and if it needs to be included when we redeploy.

johnclary

This looks so good! Thanks @chiaberry for getting us set up with scaffolding to rebuild this app 🚀 🚀 🚀

johnclary · 2025-04-03T18:21:33Z

for consistency with VZE, should we save our vars to .env.local instead of .env? in earlier versions of nextjs i thought there were some important benefits from using .env.local vs .env for local dev, but as far as i can tell this is more of a consideration when using Vercel for deployments.

i think the VZE consitency point is a good one. i think Next will use whichever one it finds so i think it is a matter of just renaming the file

johnclary · 2025-04-03T18:32:03Z

@@ -0,0 +1,10 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript", "prettier"],


when i run npm run lint i get an error about a missing prettier config 💥

i see this too. i think adding the eslint plugin like is in the VZE dev dependencies will get this back in business 😎

I added the eslint plugins like vz. now im getting an error message when i run npm run lint
ESLint configuration in ../package.json » eslint-config-react-app is invalid:, I'll see where the mismatch is.

mddilley

Rad to have this map to start this rebuild 💪 And to have the geocoder in here already is so nice! I left some comments - this was a fun one to read and think through. I think this is a great start as a collector branch. 🗺️

mddilley · 2025-04-03T22:55:30Z

@@ -0,0 +1,10 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript", "prettier"],


i see this too. i think adding the eslint plugin like is in the VZE dev dependencies will get this back in business 😎

mddilley · 2025-04-03T23:28:00Z

i think the VZE consitency point is a good one. i think Next will use whichever one it finds so i think it is a matter of just renaming the file

mateoclarke

This looks good to me as a starting place/collector branch. 👍

mateoclarke · 2025-04-04T00:31:26Z

+        accessToken: MAPBOX_TOKEN || "",
+        bbox: ATX_BOUNDING_BOX,
+      });
+      // ctrl.on('loading', props.onLoading);


maybe this was just copy/pasta but will we need these commented lines?

mateoclarke · 2025-04-04T00:32:05Z

+      });
+      // ctrl.on('loading', props.onLoading);
+      // ctrl.on('results', props.onResults);
+      ctrl.on("result", (evt) => {


I noticed above we call this param e, here we call it evt. My preference would be to consistency and verbosity with event

mateoclarke · 2025-04-04T00:37:08Z

+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",


How would we feel about picking a non-default port number for this to run locally that doesn't conflict with VZE (:3002) or Moped Editor (:3000)?

For example:
"dev": "next dev -p 3003",

I tried updating the package.json with this, but then I got 403s with the mapbox tiles. I dont understand why....

I wonder if there's an IP whitelist for mapbox (i'm surprised that 3001 works with the VZE, though). there definitely is for Nearmap when it comes time to get that key set up

Traditionally, these slippy-map keys have been restricted by what the referrer sent by the client when requesting resources is. To me, it's hand-wavy security, because it's pretty easy to write a proxy for them that you can use to mask the actual referrer sent from the browser, or to even just redefine the browser's own referrer behavior. That said, I can see that if you don't want to wade into the complexity of JWTs or similar, you gotta just ship that API key out to the client and hope for the best.

Anyway, Mapbox tokens are not required, but may include, these referrer restrictions. See the following screenshot from the token issuance page for some more info.

johnclary · 2025-04-08T14:24:19Z

Updates look good! Should we hold off on approving, since this is a collector? Or can staging be the collector branch (since there's no CI?)?

chiaberry · 2025-04-08T14:30:21Z

@johnclary I was thinking of not merging this branch, but you are right since there is no CI, we could use staging as the collector branch! Now I am not sure.

Adds pop-ups for rendered AGOL sign locations

…oning

…de ASSET_LOCATION_ID, show form on iframe load

Made-with: Cursor

This reverts commit 25a47e9.

Made-with: Cursor

…ocations Adds ability to add existing locations

chiaberry added 8 commits March 28, 2025 15:14

delete the issue templates

1035226

hello next world the app

6ab61f5

add geocoder

240bd8d

it needed the css

e410d50

first pass at including marker

63f0ca9

taking some parts from the vz crash map

a53198e

update metadata and remove some boilerplate

a538e42

include mateos recommended config

d9a5d09

chiaberry requested review from frankhereford, mateoclarke, mddilley, roseeichelmann and tillyw April 1, 2025 20:48

chiaberry added 2 commits April 2, 2025 10:16

include the env template

5ac3bfb

remove boilerplate and add new line

0b0dd39

chiaberry requested a review from ChristinaTremel April 2, 2025 19:49

specify what is copied and not used yet

4cf71e0

johnclary reviewed Apr 3, 2025

View reviewed changes

mddilley reviewed Apr 3, 2025

View reviewed changes

mateoclarke reviewed Apr 4, 2025

View reviewed changes

chiaberry added 7 commits April 4, 2025 14:50

use scss

8eb0618

remove uneeded map geocoder package

dfdb871

use port 3003 and add prettier configs

d56d798

back to 3000 for now

77db443

move map into own component

dd19342

feeling 22

697bbcf

ondrag

2eb6ad3

mateoclarke added 28 commits February 12, 2026 10:18

refactor popup, thanks John!

6830026

Merge pull request #338 from cityofaustin/mateo/26317_popups

1ce7041

Adds pop-ups for rendered AGOL sign locations

fix markdown typo

f7021cf

Types and iframe messaging for “select existing”

18babc1

Add Create Location / Select Existing toggle and Pin and Crosshair icons

759050d

Wire map and popup for Select Existing mode and popup viewport positi…

6e2b1e6

…oning

Show loading state until Knack payload and avoid map jump on load

2db3983

Knack: handle EXISTING_LOCATION_SELECTED and LOCATION_MODE_CHANGE, hi…

a7c4d1b

…de ASSET_LOCATION_ID, show form on iframe load

chore: empty commit to trigger deploy

a8b91b8

Made-with: Cursor

update knack location pin color

25a47e9

Revert "update knack location pin color"

fbc3b1c

This reverts commit 25a47e9.

update Knack location pins to yellow

131f3ad

fix bug so assetLocationId gets populated in the hidden form

4cbbf8c

helpful debugging console.logs

d5cadde

expect and enforce assetLocationId as type number

55f10b0

css and formatting refactoring

8d1eb63

dont commit Dev file. oops

e8ad99c

in line style refactoring

346e770

fix popup styling

74a3f89

Persists Create Location vs Select Existing across iframe reloads

801025a

adopt Lucide icon library

fdeae55

add docstring for function

8653817

update empty state with user friendly message

af6fe4c

mateo no here no more

f6cefb5

update iframe event message names for clarity

52ade4b

Made-with: Cursor

DRY up code and move config code

6338b10

reinsert anchor for popup

8a4053b

tweeks

e33bd3f

mddilley mentioned this pull request Apr 2, 2026

Config JS projects to use dependency cooldowns cityofaustin/atd-data-tech#27715

Open

4 tasks

Merge pull request #341 from cityofaustin/mateo/21665_add_exisiting_l…

6349233

…ocations Adds ability to add existing locations

		@@ -0,0 +1,10 @@
		{
		"extends": ["next/core-web-vitals", "next/typescript", "prettier"],

Conversation

chiaberry commented Apr 1, 2025

Uh oh!

chiaberry commented Apr 3, 2025

Uh oh!

johnclary left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mddilley left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mateoclarke left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

johnclary commented Apr 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chiaberry commented Apr 8, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

johnclary commented Apr 8, 2025 •

edited

Loading