search

spatialdev / osmquality-web

A UI to summarize OSM Map Quality as defined by Atlas Checks
https://osmquality.io/
2 stars 5 forks source link

Add slippy tiles #71

Closed nachtm closed 5 years ago

nachtm commented 5 years ago

We now use mapbox-gl to display our data instead of static images. Users can zoom in/out and pan around to an extent: image image

Since we were concerned about potentially hitting our quota of map loads, I did some work to recycle the map instances as much as possible. Basically, the <App/> component stores a div and a <Map/> associated with that div. The CityProfileCard needs access to that div, which I could have done by passing it down as a prop but decided to try using a Context instead. I think it's pretty clean but I'm happy to rework. Actually getting the CityProfileCard to show an element passed in to it took a little hacking/magic as seen in this comment.

Thanks to @ahmouda12 for doing a lot of the initial legwork here!

Remaining TODOs on the map area:

MonicaBrandeis commented 5 years ago

@nachtm let me know if rest to-do will be on your other PR so we can merge or we should wait!

nachtm commented 5 years ago

I took the svg that @ahmouda12 created through d3 and added it directly to the map as the legend. Looks like this: image If anyone has a better eye for design and wants to make/suggest improvements I'm all ears.

nachtm commented 5 years ago

More updates: we now have an open in iD editor button (the pencil logo on the right) and a switch-map-styles button (the layers button on the left).

Looks like this: image

More specifically, here are the three different layers: image

@MonicaBrandeis can you confirm that these are correct?

MonicaBrandeis commented 5 years ago

Not exactly 1) No car -> Car Ownership 2) Population Delete the work from home

nachtm commented 5 years ago

Updated the layer names again: image