Trash Free Seas Map
Optimized map version with cluster and rendering based on map view.
Features
- Webpack 3 based.
- ES6 as a source.
- Places Autocomplete
- Styled out of the box
- Packages Cluster Modules with the SDK
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.
- Google Maps SDK and a Google Maps API KEY
- The FreeSeasMap SDK
- Basic HTML and JS to render the map
- Somewhere to host the widget
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
yarn build
ornpm run build
- produces production version of your library under thelib
folderyarn start
ornpm run start
- produces development version of your library and runs a watcher