Example maps

Basic example

 
{{ hmlrMap({
  alt: "Map of Plymouth",
  caption: "Example map with default settings"
}) }} 
 
  

Example map with default settings

Custom size and location

 
{{ hmlrMap({
  alt: "Map of Cornwall, showing a field north of Liskeard",
  caption: "Custom size, coordinates and zoom",
  coords: "225000, 65000",
  zoom: 15,
  height: "400px",
  width: "620px"
}) }}
 

Custom size, coordinates and zoom

Loading external geoJSON

 
{{ hmlrMap({
  alt: "Map showing boundary data",
  caption: "Loading external GeoJSON with auto-fit",
  layers: [{
    path_to_geometry: "/public/data/boundary.json"
  }]
}) }}

Loading external GeoJSON with auto-fit

Custom styling

 
{{ hmlrMap({
  alt: "Map with custom styled boundary",
  caption: "Custom styling with dashed red line",
  coords: "225000, 65000",
  zoom: 15,
  layers: [{
    path_to_geometry: "/public/data/boundary.json",
    style: {
      fill: {
        color: "#d4351c33"
      },
      stroke: {
        color: "#d4351c",
        width: 2,
        lineDash: [4, 4]
      }
    }
  }]
}) }}

Custom styling with dashed red line

Selecting a single feature using geometry_index

 
{{ hmlrMap({
  alt: "Single feature selection",
  caption: "Selecting feature 3 from a collection",
  layers: [{
    path_to_geometry: "/public/data/fields.json",
    geometry_index: 3,
    style: "BLUE"
  }],
  width: "100%",
  height: "390px"
}) }} 

Selecting feature 3 from a collection

Interactive hidden geometry

 
{{ hmlrMap({
  alt: "Interactive map",
  caption: "Hidden geometry with click events",
  zoom: 15.5,
  layers: [{
    path_to_geometry: "/public/data/liskeard_overlaps.json",
    style: "hidden",
    interactive: "true"
  }]
}) }}
 

Example of hidden geometry with interactivity to dispatch click event

Click the map to see information about a title
 

Multiple layers with custom map tile and layer controls

 
{{ hmlrMap({
  alt: "Demo geojson from INSPIRE",
  caption: "Example of layered boundaries with controls and custom map tiles",
  layer_controls: "true",
  layers:[
    {
      path_to_geometry: "/public/data/liskeard_overlaps.geojson",
      description:"INSPIRE data",
      interactive: "true",
      style: {
        fill: {
          color: "#4c2c9222"
        },
        stroke: {
          color: "#4c2c9211",
          width: 0.5
        }
      }
    },
    {
      path_to_geometry: "/public/data/layer1.geojson",
      interactive: "true",
      style: {
        fill: {
          color: "#d4351c01"
        },
        stroke: {
          color: "#d4351c",
          width: 2
        }
      }
    },
    {
      path_to_geometry: "/public/data/layer2.geojson",
      description:"Custom description",
      interactive: "true",
      style: {
        fill: {
          color: "#00703c11"
        },
        stroke: {
          color: "#00703c",
          width: 2
        }
      }
    },
    {
      path_to_geometry: "/public/data/layer3.geojson",
      description:"Blue boundary",
      style: "BLUE"
    }
  ],
  zoom: 14.5,
  tile_url: 'https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'
}) }}
 

Example of layered boundaries with controls and custom map tiles

Layers

Experimental hatched fill

 
{{ hmlrMap({
  alt: "Map with hatched pattern",
  caption: "Experimental canvas hatching",
  layers: [{
    path_to_geometry: "/public/data/layer1.geojson",
    interactive: "true",
    style: "green HATCHED"
  }]
}) }}
 

Experimental canvas hatching