Home Reference Source

Trash Free Seas Map

Optimized map version with cluster and rendering based on map view.

Features

Docs

https://revolution-messaging.github.io/oco-trash-free-seas-map/

Getting Started

Embed the map on your site. You will need three things to get started.

There are two methods of placing the map on your site.

Using Ocean Conservancy's Google Map API Key

To add this map to your site you simply can place an iframe with the follow source and set the height and width to what you desire.

<iframe src="https://tfsmap.oceanconservancy.org/" frameborder="0" height="800px" width="100%"></iframe>

This would create a full screen map and can be placed anywhere on your site. Ensure you have permission to do this as Ocean Conservancy can rotate API keys to prevent abuse and that will break your map. If you don't have permission use the method below.

Using your own Google Maps API Key and hosting the map yourself

Using the initialize method

In order to use your own google maps api key you will host your own map and provide it to an iframe. To host your own create a basic website with the following document as an index. The only configuration you will need to change here is the Google Maps API Key. Most defaults here are setup to be easy to copy and paste over. Just change YOUR_GOOGLE_MAPS_KEY_HERE to your Google Maps API Key.

<!DOCTYPE html>
<html class="no-js" lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <!-- import the fonts -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700|Roboto:100,100i,300,300i,400,400i,700,700i|Noticia+Text:400i,700i">

  <!-- import the css -->
  <link rel="stylesheet" href="https://oceanconservancy.org/wp-content/themes/oco-wp/css/map.css">
  <title>FreeSeasMap</title>
</head>

<body>


  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_KEY_HERE&libraries=places"></script>
  <script>
    (function (w, d, s, o, f, js, fjs) {
      w['JS-Widget'] = o; w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
      js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
      js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
    }(window, document, 'script', 'fsmap', 'https://tfsmap.oceanconservancy.org/ocean-concervancy-free-seas-map.min.js'));
    var hostUrl = 'https://oceanconservancy.org';
    fsmap('init', {
      google: window.google,
      customMapOptions: {
        maxZoom: 18, minZoom: 3,
        center: { lat: 35.623883, lng:  -39.459826 },
        zoom: 2
      },
      plusZoomControlImage: hostUrl + '/wp-content/themes/oco-wp/images/map/zoom-in.png',
      minusZoomControlImage: hostUrl + '/wp-content/themes/oco-wp/images/map/zoom-out.png',
      wordpressUrl: hostUrl,
      ocoMapUrl: hostUrl + '/trash-free-seas/map',
      markerIconPath: hostUrl + '/wp-content/themes/oco-wp/images/map/marker.png',
      clusterMarkerIconPath: hostUrl + '/wp-content/themes/oco-wp/images/map/cluster.svg',
      markerPlaceholderImagesUrl: hostUrl + '/wp-content/themes/oco-wp/images/map',
      onClickMarkerIconPath: hostUrl + '/wp-content/themes/oco-wp/images/map/marker-on.png',
      gestureHandling: 'cooperative'
    });
  </script>
</body>

</html>

Now you can host your own iframe using your own Google Maps Api key.

<iframe src="https://yourdomain.com/map" frameborder="0" height="800px" width="100%"></iframe>

An use the same method Ocean Conservancy uses.

Using the SDK

Using the SDK allows for much more granular control of what the map is capable of, the original map interaction on oceanconservancy.org uses this method. Place this and the freeSeasMap will be placed on a window to be used.

<!-- include the google maps library synchronously first -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_KEY_HERE&libraries=places"></script>
<script>
    (function (w, d, s, o, f, js, fjs) {
      w['JS-Widget'] = o; w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
      js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
      js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
    }(window, document, 'script', 'fsmap','https://tfsmap.oceanconservancy.org/ocean-concervancy-free-seas-map.min.js'));
    fsmap('sdk');
</script>

Then we can access the map and create a new map with parameters similar to those above

let hostUrl = 'https://oceanconservancy.org';
let options = {
      element: document.getElementById('map'),
      customMapOptions: {
        maxZoom: 18, minZoom: 3, // keep the max zoom for the world view 
        center: { lat: 35.623883, lng:  -39.459826 }, // set a world view
        zoom: 2 // set the zoom to 2
      },
      searchBoxElement : document.getElementById("mapAutocomplete"),
      searchBoxClickElement: document.getElementById('mapSearchSubmit'),
      google: window.google,
      gestureHandling: 'auto',
      wordpressUrl: hostUrl,
      plusZoomControlImage: hostUrl + '/wp-content/themes/oco-wp/images/map/zoom-in.png',
      minusZoomControlImage: hostUrl + '/wp-content/themes/oco-wp/images/map/zoom-out.png',
      markerIconPath: hostUrl + '/wp-content/themes/oco-wp/images/map/marker.png',
      onClickMarkerIconPath: hostUrl + '/wp-content/themes/oco-wp/images/map/marker-on.png',
      clusterMarkerIconPath: hostUrl + '/wp-content/themes/oco-wp/images/map/cluster.svg',
      customClusterStyles: clusterStyles,
      markerPlaceholderImagesUrl: hostUrl + '/wp-content/themes/oco-wp/images/map'
    }

// Create a new Map Instance
window.freeSeasMap = new freeSeasMap(options);

// Tell the Map to Render
window.freeSeasMap.render();

URL Features

The FreeSeas map allows passing in variables into the url as a query string. These are location_id and search. You can use these to save a location on an embed map or SDK map and link to a location. The location_id is the wordpress post id, and search is mapped to a google maps place.

An example location_id would be:

https://tfsmap.oceanconservancy.org/?location_id=29122

and a search

https://tfsmap.oceanconservancy.org/?search=vancouver

This will map and set the map zoom to the location, the search query and location_id are appended when using the map so you can chose these then set them based on your needs.

Misc

Check out the dev folder to see an example of a full screen version of this map that runs the widget. The SDK docs are under the docs folder and are standard ESdoc/JsDoc format.

That example contains a Google Maps API key, please do not use that key in production as it may be revoked at anytime.

Development