Maps

Simple maps component

Adding a map to a page is a great way to describe a location in addition to a text-based description. This component uses the open source Leaflet.js to embed a functional map, using community-curated Open Street Maps data, into one of your pages.

To use the Maps component, you will need to know the latitude and longitude of the location you are looking to map. These can be found easily using Google Maps (the latitude and longitude can be found in the url) or a service like itouchmap.com.

Note

This component previously used Google Maps, but due to licensing costs has been migrated to Leaflet.js + OSM + Mapbox instead.

Basic example

<section>
  <div class="map-canvas" data-latlng="-37.798535, 144.960605"></div>
</section>

Height width and zoom

<section>
  <div class="map-canvas" data-height="400" data-latlng="-37.798535, 144.960605" data-width="600" data-zoom="17"></div>
</section>

Pins

You can add multiple pins to the map by separating their coordinates with pipes (|) inside the data-pin attribute.

<p>You can add multiple pins to the map by separating their coordinates with pipes (<code>|</code>) inside the <code>data-pin</code> attribute.
</p>
<section>
  <div class="map-canvas" data-latlng="-37.798535, 144.960605" data-pin="-37.798535, 144.960605|-37.798048, 144.960946"></div>
</section>

All options

<section>
  <div class="map-canvas" data-height="400" data-latlng="-37.798535, 144.960605" data-pin="-37.798535, 144.960605" data-width="600" data-zoom="17"></div>
</section>