Rendering style for marine protected areas

[ZeLonewolf]

Many protected area boundaries cross water and land, so the styling absolutely has to contrast well with both. Using a different style for marine sanctuaries is not a solution to that problem. However, since marine sanctuaries are entirely over water a different style could look much better especially at low zoom levels.

On the coast of Massachusetts for example, there are two large protected areas. The boundary of Cape Cod National Seashore crosses land and water, but stays close to the coast. At low zoom this is barely visible and the boundary line just looks like it's on the shore. On the other hand, the boundary of Stellwagen Bank National Marine Sanctuary is entirely in the ocean. The coast of California also has many of these marine protected areas sticking far out into the ocean.

Using a blue outline where the boundary is entirely or mostly over water would be a nice cartographic effect and less distracting than a green outline in the middle of the ocean. We could also decide to simply exclude marine sanctuaries on the basis that this map style focuses on land based features.

Originally posted by @zekefarwell in https://github.com/ZeLonewolf/openstreetmap-americana/issues/49#issuecomment-886741275

[ZeLonewolf]

The effect I'm envisioning is something similar to how marinas currently render in openstreetmap-carto. I don't think mapLibre has a string "contains" function, however, I would not be opposed to creating an exhaustive list of protection titles that equate to marine areas and using that in a giant case statement in the style. Then, we could link it to the open issue in mapLibre expressing the need for a regex function.

Also, for the case of marine protected areas that include small bits of the shore or wetlands, I suspect it will be perfectly fine for the blue boundary to go partially over land.

Further, for render simplicity sake, perhaps we could simply render the marine boundary/label above the general protected area boundary styling, provided that we use the same or thicker-width line, so there will be no need to evaluate the mega-case-statement twice.

Since we'll need multiple copies of the mega-case-statement, this will be a good use case for separating it out into a separate variable in the javascript.

[zekefarwell]

For reference, here's a small piece of a National Geographic map showing different styling for marine vs on land protected areas.