Map (experimental) example

Passed geojson

Given a URL to a GeoJSON file, the map will draw markers and apply popups as specified in the file. The map will auto zoom and position based on the markers found.

Note that other markers can also be added to this map using the method already described. They will be included when automatically setting the map position and zoom.

How it looks (preview)

Birmingham and surrounding places

Skip map

Loading map... This map uses JavaScript to work. To view the map, turn on JavaScript in your browser's settings.

Locations on this map

How to call this example

<%= render "components/map", {
  url: "/assets/frontend/components/map/map-test.geojson",
  heading_text: "Birmingham and surrounding places",
  markers: [
    {
      geometry: {
        type: "Point",
        coordinates: [
          -0.1766,
          51.5163
        ]
      },
      properties: {
        name: "Paddington Station",
        description: "Designed by Isambard Kingdom Brunel and opened in 1838."
      }
    }
  ]
} %>