The International Coastal Cleanup Map can be found at this live location:
https://oceanconservancy.org/trash-free-seas/international-coastal-cleanup/map/

The map pulls content from two different sources: “constant content” and “map data” (click to skip to the map data section of this article).

Constant Content

This content includes contextual information including the header banner copy, countdown timer, introductory copy, help copy, “no results” copy and the signup form submission confirmation copy. The majority of this content can be edited, when logged in to the WordPress CMS, on this screen:
https://oceanconservancy.org/wp-admin/post.php?post=29635&action=edit

Header Banner
Generally reserved for the ICC date announcement, this is an open-ended field, but is intended to display text only and should be kept brief.

Frontend Display:

Backend Field:

Countdown Timer
The timer is based on a selected date and should generally be reserved for the current year’s upcoming International Coastal Cleanup. When the backend field is clicked, a date and time picker widget will display to make the selection a breeze.

Frontend Display:

Backend Field:

Introductory Copy
In the map’s initial state, this block of copy is displayed and then replaced by map data details and search results.

Frontend Display:

Backend Fields:

Help Copy
The help copy is revealed by clicking on “How to Use This Map” from the initial state introductory block. This copy can also be edited from within WordPress.

Frontend Display:

Backend Field:

“No Results” Copy
Portions of this content may be edited, including the bold title and the copy below it, as well as the small copy at the bottom. At this time, the photo and the CleanSwell copy and buttons are hard-coded.

Frontend Display:

Backend Fields:

Map Data

The data that is searchable and populates the map with markers and details is all stored in it’s own WordPress custom post type. You can find this data by navigating to “Map Locations” on the admin left-hand sidebar menu.

Post Table
Each unique location on the map is stored as an individual post with a unique ID. When selecting “Map Locations” from the left-hand sidebar menu, a table listing all of the map data will be displayed.

Post ID
Like any other post, you can manage each location’s details and visibility by selecting the location. You can also search for posts by entering the ID number inside of the post search box.

Adding Posts
New Locations may be added by either clicking on “Add new location”, or by using the front-end submission form found here: https://oceanconservancy.org/trash-free-seas/international-coastal-cleanup/add-cleanup-location/

When a location is submitted via the front-end submission form, the location post will be saved as a draft and it will not be visible to the public. You must change the publish settings from draft to “Published” before the location will be visible on the map. This is an intended security step to allow for administrative moderation of the submitted data before it is made public.

Location Images
By default, the images that display alongside a location are one of 30 pre-formatted photos that are selected at random each time a user clicks on a marker or selects a location after conducting a search. This behavior can be over-ridden by adding a “featured image” to the post. The intended use of the featured image is to display the partner’s logo. That logo should always be formatted as a 400 pixel by 400 pixel square with a white background.

 


Minor disclaimer: While navigating the map you may notice that the South Korea portion of the map is unstyled. This is a legal matter that is detailed here: https://snazzymaps.com/help under “Why are my styles not being applied to South Korea?”.