See this map at http://ru.auckland.ac.nz/the-network/.
The code
Insert the following “inline” where you want the map to appear. At the time of writing, the code was still in flux, but what you see here will be a functional subset of what may be available later.
<!-- rū map -->
<div id="ru_canvas"></div>
<style type="text/css">
@import url("https://nzseis.phy.auckland.ac.nz/map/css/ru_mapem.css");
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script><script src="https://nzseis.phy.auckland.ac.nz/last50/js/ru_stations.js"></script><script src="https://nzseis.phy.auckland.ac.nz/map/geonet.php?mode=js"></script><script src="https://nzseis.phy.auckland.ac.nz/map/usgs.php?mode=js"></script><script src="https://nzseis.phy.auckland.ac.nz/map/js/ru_mapfunctions.js"></script><script src="https://nzseis.phy.auckland.ac.nz/map/js/ru_legend.js"></script><script src="https://nzseis.phy.auckland.ac.nz/map/js/ru_mapinitem.js"></script><script type="text/javascript">
// <![CDATA[
var ru_options = {
"centreonstation": false,
"width": "640px",
"height": "640px",
"zoom": 5,
"iconscale": 1,
"fontscale": "100%",
"showusgs": true,
"showgeonet": true,
"showlegend": true,
"lat": -41.0,
"lon": 174.0,
"canvas": document.getElementById('ru_canvas'),
};
RU_ICON_SCALE = ru_options.iconscale;
RU_FONT_SCALE = ru_options.fontscale;
google.maps.event.addDomListener(window, 'load', ru_initialize());
// ]]>
</script>
<!-- /rū map -->
A number of parameters can be configured to change the way the map is displayed -these are wrapped up in a javascript object (ru_options).
The paramaters
centreonstation
false or the short name of a station in the Rū family. If false, then the map will centre on the latitude and longitude specified using “lat” and “lon”. If a station is specified, then the map will centre on the latitude and longitude recorded for that station.
width and height
String literals that are assigned to the respective style properties of the map canvas. You could specify a dimension in pixels, a percentage, or whatever units CSS allows. The posts associated with stations in this web site, use “474px” for height and width.
“100%” (with appropriate styling of the canvas element) could be used to fill a viewport.
zoom
An integer between 1 and 20, representing the zoom steps the Google Maps API allows. 5 or 6 is good for a view of the whole of New Zealand, 17 is good for a view of a building in its context.
iconscale
A positive and non-zero decimal value used to vary the scale of the icons used as map markers. All markers are scaled by this value which can be used to make the map more legible at different sizes.
fontscale
A string literal added as a font-size style property to the legend (if it is visible). This can be used to adjust how the legend looks at different sizes.
showusgs, showgeonet and showlegend
True or false. These give you control of the visibility of the various information layers available.
lat and lon
A Latitude and longitude that will be used to centre the map if centreonstation is false. The default provided is near the centre of New Zealand (-41.0, 174.0).
canvas
Used to pass the element used as the map canvas to the initialisation function -if you name the container differently (ie. not ru_canvas), then change the id inside the getElementById expression.
