GreenInfo-Network/caliparks.org

Replace Google Maps API / Adjust credits + branding

Closed this issue · 6 comments

with...Leaflet? OL3?

Now that we're no longer using StreetView (for trails) or directions, there's no reason to use the Google Maps API. This is mainly an annoyance because of the branding confusion it introduces.

Replace with latest Leaflet.

I have confiirmed that Leaflet is known not to work with server-side rendering. which this application is. This is a longer-standing issue, noted on other projects. I tried and found not workable, various approaches including loading react-leaflet async in componentDidMount(), and other folks' libraries such as leaflet-react-universal.

  • Option: Just add better credits

If the largest issue is branding confusion, adding more prominent credits could be done readily.

  • Option: Rewrite to not use server-side rendering

This would be a more significant undertaking, and could cause the site loading to become more slow than it already is.

Per chat with Dan, we'll stick to the immediate need which is the branding, by adding something similar to L.Control.Credits which I often use for GreenInfo work.
credits_mock

I have a first cut up at http://caliparks-development.herokuapp.com/#explore

This appears on all maps.

  • Adheres to existing dark style, off-white text.
  • Right-aligned and height-matched to +- zoom control. Could instead align left and height-match to GPS icon, significantly smaller.
  • I didn't have a logo with white linework, so the black may be a bit dark. Could see about adjusting in GIMP.

@danrademacher What do you think?

How about this?

http://caliparks-development.herokuapp.com/#explore

Much smaller initial footprint, expanding into a smaller version of the previous version. Also, GIN logo is now white.

credits-expanded

credits-collapsed

Ship it!