By using the ALA WMS service you can easily create an occurrence layer that can be displayed in Google maps. The code below demonstrates this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var map;
var locationCentre = new google.maps.LatLng(-25.0, 135.0);
// Define MWS baselayer
var wmsMapType = new google.maps.ImageMapType({
getTileUrl: function (coord, zoom) {
return "https://tile.openstreetmap.org/" +
zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
alt: "ALA species layer",
name: "ALA",
maxZoom: 19
});
//Define custom WMS tiled layer
var SLPLayer = new google.maps.ImageMapType({
getTileUrl: function (coord, zoom) {
var proj = map.getProjection();
var zfactor = Math.pow(2, zoom);
// get Long Lat coordinates
var top = proj.fromPointToLatLng(new google.maps.Point(coord.x * 256 / zfactor, coord.y * 256 / zfactor));
var bot = proj.fromPointToLatLng(new google.maps.Point((coord.x + 1) * 256 / zfactor, (coord.y + 1) * 256 / zfactor));
//corrections for the slight shift of the SLP (mapserver)
var deltaX = 0.0013;
var deltaY = 0.00058;
//create the Bounding box string
var bbox = (top.lng() + deltaX) + "," +
(bot.lat() + deltaY) + "," +
(bot.lng() + deltaX) + "," +
(top.lat() + deltaY);
//base WMS URL
var url = "https://biocache.ala.org.au/ws/ogc/wms/reflect?q=taxon_name:Acacia+dealbata";
url += "&REQUEST=GetMap"; //WMS operation
url += "&SERVICE=WMS"; //WMS service
url += "&VERSION=1.1.1"; //WMS version
url += "&LAYERS=" + "ALA:occurrences"; //WMS layers
url += "&FORMAT=image/png" ; //WMS format
url += "&BGCOLOR=0xFFFFFF";
url += "&TRANSPARENT=TRUE";
url += "&ENV=color:e6704c;name:circle;size:4;opacity:0.8";
url += "&OUTLINE=false";
url += "&SRS=EPSG:4326"; //set WGS84
url += "&BBOX=" + bbox; // set bounding box
url += "&WIDTH=256"; //tile size in google
url += "&HEIGHT=256";
return url; // return URL for the tile
},
tileSize: new google.maps.Size(256, 256),
isPng: true
});
function initialize() {
var mapOptions = {
zoom: 4,
center: locationCentre,
mapTypeId: 'ALA',
mapTypeControlOptions: {
mapTypeIds: ['ALA', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.mapTypes.set('ALA', wmsMapType);
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
//add WMS layer
map.overlayMapTypes.push(SLPLayer);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>Lines 27 to 62 show how to call one of the WMS services to request a layer with occurrences for taxon name "Accacia dealbata".
You can see the code above in action by visiting the page Embedding occurrence layer in Google Maps which should display a map just like in the screenshot below.
You could see a warning pop up with the message: "This page can't load Google Maps correctly." and you will see some text in the maps also with the legend: "For development purposes only". Both of them can safely be ignored as the code does not use Google Maps API keys which you must set up for a production environment.
You can always access the latest version of the code shown in this page by going to this GitHub link.