Closed ArthurSmid closed 3 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>
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.
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).
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
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