Blog

With this update we’ve included the ability to pan between “domains” or areas of the map which contain related surf, swell, wind, and additional data. 

 

We think the Pinpointsurf map should be the primary source of surf information and allow seamless navigation between forecasting features. Users should be able to interact with the map intuitively and cue up the information they want to see. This update is a big step in that direction.

 

Previously, we allowed users to use the map to pan to different domains, but the data wouldn’t populate in the new domain. This issue is partially due to the structure of the primary forecasting data. These map domain areas contain overlapping forecast information, so they cannot be displayed simultaneously. The solution we chose was to determine when the user pans past a domain boundary, indicating we should display the data for that new domain.

 

A technical requirement was to avoid re-rendering the map on domain change and when toggling a forecast layer to improve performance and cost efficiency. To accomplish this, we created layer and overlay representations within our React app which closely mirror the layer concept documented by Mapbox GL. By collecting the Mapbox GL layer configuration and constructing the layers for each domain before the user navigates to the domain or toggles the layer, we can toggle the visibility of the new layer or domain, saving tons of loading time, Mapbox GL rendering costs, and making the experience better for our users.

 

Enjoy!

Britton