Map (experimental) example

With custom markers

Marker symbol type and colour can be customised. If this option is used to make different markers on the same map a key must be provided to explain to users what the different markers indicate.

Valid marker symbols are pin, circle or square. Allowed colour values are blue, green, orange or red.

Values for the key are the same as the markers.

How it looks (preview)

London stations

As an avid train enthusiast, this map records the London stations that I have visited.

Skip map

Map key

• Stations I have visited
• Stations I have stood outside
• Stations I want to visit

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: "London stations",
  description: sanitize("<p>As an avid train enthusiast, this map records the London stations that I have visited.</p>
    "),
  key: [
    {
      name: "Stations I have visited",
      symbol: "square",
      colour: "red"
    },
    {
      name: "Stations I have stood outside",
      symbol: "pin",
      colour: "orange"
    },
    {
      name: "Stations I want to visit",
      symbol: "circle",
      colour: "green"
    }
  ],
  key_heading: "Key for map",
  markers: [
    {
      geometry: {
        type: "Point",
        coordinates: [
          -0.1766,
          51.5163
        ]
      },
      properties: {
        name: "Paddington Station",
        description: "Designed by Isambard Kingdom Brunel and opened in 1838."
      },
      marker: {
        symbol: "square",
        colour: "red"
      }
    },
    {
      geometry: {
        type: "Point",
        coordinates: [
          -0.1236,
          51.5316
        ]
      },
      properties: {
        name: "Kings Cross station",
        description: "Opened in 1852 and built on the site of a smallpox and fever hospital."
      },
      marker: {
        symbol: "pin",
        colour: "orange"
      }
    },
    {
      geometry: {
        type: "Point",
        coordinates: [
          -0.1632,
          51.5224
        ]
      },
      properties: {
        name: "Marylebone Station"
      },
      marker: {
        colour: "green"
      }
    }
  ]
} %>