Map (experimental) example

Custom height

The map defaults to a height of 500px on desktop but this can be overridden if required. The height on tablet and mobile is set to be no taller than the window.

How it looks (preview)

Kings Cross station

Skip map

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

How to call this example

<%= render "components/map", {
  height: 200,
  heading_text: "Kings Cross station",
  geojson: "data:application/geo+json;base64,ewogICJ0eXBlIjogIkZlYXR1cmVDb2xsZWN0aW9uIiwKICAiZmVhdHVyZXMiOiBbCiAgICB7CiAgICAgICJpZCI6IDEsCiAgICAgICJ0eXBlIjogIkZlYXR1cmUiLAogICAgICAicHJvcGVydGllcyI6IHsKICAgICAgICAiZGVzY3JpcHRpb24iOiAiT3BlbmVkIGluIDE4NTIgYW5kIGJ1aWx0IG9uIHRoZSBzaXRlIG9mIGEgc21hbGxwb3ggYW5kIGZldmVyIGhvc3BpdGFsLiIsCiAgICAgICAgIm5hbWUiOiAiS2luZ3MgQ3Jvc3Mgc3RhdGlvbiIKICAgICAgfSwKICAgICAgImdlb21ldHJ5IjogewogICAgICAgICJjb29yZGluYXRlcyI6IFsKICAgICAgICAgIC0wLjEyMzYsCiAgICAgICAgICA1MS41MzE2CiAgICAgICAgXSwKICAgICAgICAidHlwZSI6ICJQb2ludCIKICAgICAgfQogICAgfQogIF0KfQo=",
  zoom: 12,
  centre: [
    -0.1236,
    51.5316
  ]
} %>