Examples

This page contains examples of some of our map layers and how to use them in Leaflet and OpenLayers. The code examples are hosted in CodePen and embedded here. You can edit these pens in CodePen, or copy and paste the HTML, CSS and Javascript in to your own site. Be sure to include the Leaflet / OpenLayers / Proj4js libraries where necessary, visible via the 'Resources' buttons.

N.B. If you are using an older browser, such as Internet Explorer, the maps below may not show, and Codepen won't work. Try using a more up to date browser, like Chrome, Firefox or Microsoft Edge to view this site.
Leaflet: WMS Basemap

See the Pen Leaflet WMS Basemap by Manaaki Whenua - Landcare Research (@mwlcr) on CodePen.

Leaflet: TMS LRI

See the Pen Leaflet TMS LRI by Manaaki Whenua - Landcare Research (@mwlcr) on CodePen.

OpenLayers: LRI WMTS with WMS Legend

See the Pen Example LRI WMTS with WMS Legend by Manaaki Whenua - Landcare Research (@mwlcr) on CodePen.

OpenLayers: Basemap WMTS

See the Pen Example Basemap WMTS by Manaaki Whenua - Landcare Research (@mwlcr) on CodePen.

OpenLayers: Basemap + LCDB WMTS with WMS Legend

See the Pen Example Basemap + LCDB WMTS with WMS Legend by Manaaki Whenua - Landcare Research (@mwlcr) on CodePen.

OpenLayers: XYZ LRI - EPSG:3857 (Google Maps Compatible)

See the Pen Example XYZ LRI - EPSG:3857 (Google Maps Compatible) by Manaaki Whenua - Landcare Research (@mwlcr) on CodePen.

OpenLayers: Basemap WMS

See the Pen Example Basemap WMS by Manaaki Whenua - Landcare Research (@mwlcr) on CodePen.