Create a DC map front end

Question

Create a DC map front end

Opened this issue 4 years ago · 13 comments

banjtheman commented 4 years ago

What is the Task

Create a front end application that can display a DC Map that can do the following

highlight a street
create a popup with the highlighted street name
Have a button in that popup that displays a random number

Why do we want to do this

This will set up the infrastructure needed for our Vision Zero Map

How can I get started?

Use an easy to use front end library and something that can import maps like OpenStreetMap/google maps
Here is a project that has a nice map: https://insightlane.org/showcase/index.html?city=dc

Definition of Done

Have a basic map with the highlighted features

Answer 1 · 2021-05-20T02:26:56.000Z

Can we break this out to a UX ticket for non-coding tasks?

Answer 2 · 2021-05-20T02:50:45.000Z

Hi, I'm (inappropriately, sorry, I can delete this comment later) jumping in on this issue to ask a semi-unrelated question. I've been lurking since I read an article about your project several days ago. I'd like to contribute (had hoped to make the Code for DC meetup tonight so I could try to connect with you all but it didn't work out)...

I see a lot of open issues and I'm not sure what the most useful thing to help out with would be at this point in the project. I have some front-end skills, and some data engineering skills, so I could potentially help with this issue, or one of the data ingest/scraping tasks if that is higher priority right now. Do you have a project slack or other better place to ask this kind of question? If you'd like to discuss further I'm on gmail at jtmelot, otherwise I can just take a look at whatever issue looks interesting and isn't already assigned. Thanks!

Answer 3 · 2021-05-20T14:12:31.000Z

Hey @jmelot sent you an invite to our slack. The issues labeled "good first issue" are good place to start so if your interested in tacking any of them happy to help you get started

Answer 4 · 2021-05-20T23:16:07.000Z

We would create the initial front end based on the design developed from #102

Answer 5 · 2021-08-19T00:15:33.000Z

Hey I can work on this, feel free to add me to the project and/or add me as an assignee

Answer 6 · 2021-08-19T00:15:58.000Z

Hi Cory, I'd love to work with you on this as well. May I be added to the issue?

Answer 7 · 2021-08-19T00:17:46.000Z

Hey I would like to work with you all as well on this project, could you add me on this project please

Answer 8 · 2021-08-19T00:30:54.000Z

Using the Leaflet JavaScript mapping library: https://leafletjs.com/reference-1.7.1.html

Answer 9 · 2021-08-19T01:10:39.000Z

Meeting notes

Used leaflet JS to generate a basic map - https://leafletjs.com/
Will embed geojson from OpenDataDC to get street data - https://opendata.dc.gov/datasets/roads/explore?location=8.865305%2C59.704936%2C0.00
Will need to get merge forked repo from @CoryLR

Answer 10 · 2021-09-09T00:48:54.000Z

Meeting notes

Used center street lines for smaller footprint - https://opendata.dc.gov/datasets/street-centerlines-2013/explore
Used Leaflet geojson to load the road data - https://leafletjs.com/reference-1.7.1.html#geojson
TODO filter roads
TODO turn roads orange

Answer 11 · 2021-10-05T23:52:47.000Z

We managed to group street segments by their STCODE last week. Afterwards, I reincorporated onhover and reset of styles. Once this past PR is merged, I have another one with the mouse events.

Answer 12 · 2021-10-06T21:03:09.000Z

Idea zoom in based on cursor location
Also showing street names when cursor is hovering over it
Also theres issues with more the one unaffiliated street getting highlighted

Answer 13 · 2022-01-13T01:47:23.000Z

This issue is an implementation of this idea:

The end goal of this project will be to create a fully automated data pipeline that can ingest data, train a model and provide an API endpoint for a front end map application that allows user to make predictions and experiment with input values