Map (experimental) example

Custom bounds

This allows the initial position of the map to be set, overriding the automatic adjustment to show all markers.

How it looks (preview)

Places with Ham in their name

There's another one over in the east, look.

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", {
  heading_text: "Places with Ham in their name",
  description: sanitize("<p>There's another one over in the east, look.</p>
    "),
  bounds: [
    -3.203169743770889,
    51.643668495828116,
    -0.8983602517140259,
    50.68105666989489
  ],
  markers: [
    {
      geometry: {
        type: "Point",
        coordinates: [
          -2.87,
          50.98
        ]
      },
      properties: {
        name: "Hambridge, Somerset"
      }
    },
    {
      geometry: {
        type: "Point",
        coordinates: [
          -2.52,
          51.49
        ]
      },
      properties: {
        name: "Hambrook, South Gloucestershire"
      }
    },
    {
      geometry: {
        type: "Point",
        coordinates: [
          -1.33,
          50.85
        ]
      },
      properties: {
        name: "Hamble-le-Rice, Hampshire"
      }
    },
    {
      geometry: {
        type: "Point",
        coordinates: [
          1.326,
          51.233
        ]
      },
      properties: {
        name: "Ham, Kent"
      }
    }
  ]
} %>