OpenEugene / little-help-book-web

Human service resource guide powered by White Bird Clinic
MIT License
6 stars 4 forks source link

Map feature #7

Closed ArthurSmid closed 3 years ago

ArthurSmid commented 4 years ago

category page map view

Seeing how maps can be used to search and view resources, clicking on a number (other than one) zooms closer and then clicking on a number one pulls up a resource listing, something like this could be helpful: https://eugene.craigslist.org/d/community/search/ccc

OpenStreetMap is what I used to create the Figma prototype and it seems like a potential resource for our site: https://www.openstreetmap.org/about

The brigade in Chapel Hill uses OpenStreetMap and the numbers too, though rather than pop-up windows the resource information opens in the sidebar: https://nccovidsupport.org/

This is open source and could be a useful resource for figuring out how to build maps into the Little Help Book: https://github.com/code-for-chapel-hill/NC-COVID-Support

ArthurSmid commented 4 years ago

The team working on NC COVID Support used OpenStreetMap along with Leaflet and Carto. They were able to use these for the clustering (the numbers on the map that zoom in and then display a resource listing when clicking on a single number one) and also to zero-out the visual noise in the default OpenStreetMap:

This page shows the map tile options available from Carto. https://carto.com/help/building-maps/basemap-list/#carto-raster-basemaps

We used this article early on to help us get started creating a map using VueJS and free tiles from Carto. https://travishorn.com/interactive-maps-with-vue-leaflet-5430527353c8

The provider page is ready to begin work figuring out how to place the map, the current img tag is a placeholder and I imagine it's a process of placing the code there inside this section, at line 38:

<section class="map"> <img src="GStreetSpringfield.jpg" alt="This is a placeholder for the OpenStreetMap"> </section>

https://github.com/OpenEugene/little-help-book-web/blob/develop/table-of-contents-style-homepage/provider.html

ArthurSmid commented 3 years ago

What we're seeing and trying to correct for now is a consistent westward shift of all pins. The pins are about a block or two from where their actual address is on the map.

Toward solving this issue, an email to the Code for Chapel Hill team:

I'd mentioned this to Kate in a message on Slack and thought to try reaching you all here as well. I volunteer with Open Eugene and we're using the same mapping software as NC Covid Support.

While working with the mapping software, our team noticed that all the pins are shifted westward by a block or two. We've been trouble shooting, and since we're using Leaflet, Carto, and OpenStreetMap, I thought to check if it's also happening on nccovidsupport.org and compared a location providing free meals, 100 W. Rosemary Street, Chapel Hill, NC 27516, on your site's map with that address in Google Maps, and it's off by about two blocks.

Can you please share this issue with your team and see if anyone has an idea how to fix this?

Likewise, if our team figures it out I'll share what we've found. It's a small margin of error but for a site that foregrounds a map feature, I think this is significant.

Their reply:

Thanks for the catch. The offset is not there for all of our addresses, so I’ll do some more digging.

Here is one tip from someone on the team (see below)- not sure if this is the source of the issue. I’ll let you know as I learn more!

Just offering thoughts on where to start looking for the people most intimately familiar with engineering. These are things that have frequently come up in the past when working with geospatial data. • This could easily just be an issue of mismatched projections for the source of the data and Leaflet. Leaflet expects all data is using WGS 84 and automatically projects data using this coordinate system. • This could also be an issue of decimal precision. Interestingly enough, the number of decimal points really makes a difference when you are interested in this amount of precision Just offering these as thoughts for where to start. These may already be taken into consideration somewhere. Just not sure.

ArthurSmid commented 3 years ago

And this note: https://github.com/OpenEugene/little-help-book-web/issues/102

I've tried to find it and haven't found the "what's here" dialog box, is that on Google Maps or is it something else? Here's the screenshot of what I'm seeing (I clicked though that hamburger menu too and didn't see it in there).

BethelBranchLibrary

ArthurSmid commented 3 years ago

Code for America, for the win! https://www.arcgis.com/home/webmap/viewer.html?webmap=3161b24fdcef46c3b0ff47f0ac8a6763&extent=-134.3308,19.6024,-69.4236,54.0085

Mark entered the updated latitude and longitude to Airtable.

And a tip from Lloyd Dalton (his team uses Leaflet too) and for geo-coding, it's possible to verify latitude and longitude numbers using a few different resources, and see if anything's off:

BigMaps ... did I mishear that on the call, was it Bing? LocationIQ :: https://locationiq.com/ US Census Bureau API - not very accurate