hackgvl / open-map-data-multi-layers-demo

A bookmarkable map displaying all layers from HackGreenville Labs' Open Map Data
https://hackgvl.github.io/open-map-data-multi-layers-demo/
MIT License
2 stars 2 forks source link

Bug: Workaround for Breaking Issue When Map Point Features.Properties Are Numeric Values #8

Closed allella closed 1 year ago

allella commented 1 year ago

@oliviasculley I noticed the Recycling layer wasn't rendering on the Demo Map, or in the map preview.

The GeoJSON is fine and the issue, at least with the map preview, is the recycling data has zip codes as one of the key:value pair in map point data features.properties values.

I think we both have custom JS to find and replace underscores and to force URLs in the features.properties into HTML links for the pop-ups when a point is clicked on the map.

The Javascript is seeing the zip code as a numeric type, which was breaking the String.replaceAll() I was using on the map preview.

So, it may be breaking the underscore replace() or URL replace you're using in https://github.com/hackgvl/open-map-data-multi-layers-demo/blob/stable/src/components/MainMap.vue around the onEachFeature section starting around line 123.

I'm not sure if what I did is the most elegant, but forcing the features.properties key and value to a string with toString() fixed it.

  var popuphtml = popuphtml + "<li><strong>" + key.toString().replaceAll('_', ' ').toProperCase() + "</strong>: " + value.toString().replaceAll(urlRegEx, '<a href="$1">$1</a>') + "</li>"

image

image

oliviasculley commented 1 year ago

Great catch! Recycling locations should be working again!