Create a DC map front end

[banjtheman]

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

[banjtheman]

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

[jmelot]

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!

[banjtheman]

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

[banjtheman]

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

[CoryLR]

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

[damien868]

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

[shammi-udum]

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

[CoryLR]

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

[banjtheman]

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

[banjtheman]

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

[leplerjacob]

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.

[shammi-udum]

• [ ] 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

[adunkman]

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