---
isPage: true
draft: false
title: Map
description: Add a map ( with Leaflet JS library)
icon: map-pin
hero:
  surtitle: Blocks
  title: Block map
  text: Add a map (OpenStreetMap with Leaflet JS library).
  ctas:
    - text: Documentation
      url: https://www.hugolify.io/docs/blocks/map/
      blank: true
    - text: Page code on Github
      url: https://raw.githubusercontent.com/Hugolify/hugolify-example-blocks/refs/heads/main/content/docs/map.md
      blank: true
      link: true
  ui:
    align: center
    theme: light
blocks:
  - type: map
    ui:
      grid: container
    location: '{"type":"Point","coordinates":[-0.5737107,44.8425666]}'
    zoom: 14
    heading:
      surtitle: Grid container / Zoom 14
      title: Nulla luctus quam ut nisi tincidunt lobortis. Vestibulum sed bibendum lectus.
      text:
        Duis placerat quam et ante pellentesque, et porttitor lectus sollicitudin.
        Fusce maximus hendrerit eros, sed pulvinar erat pretium eget.
  - type: map
    ui:
      grid: container
    location: '{"type":"Point","coordinates":[-0.5737107,44.8425666]}'
    zoom: 14
    heading:
      surtitle: Grid container / Zoom 14
      text:
        Duis placerat quam et ante pellentesque, et porttitor lectus sollicitudin.
        Fusce maximus hendrerit eros, sed pulvinar erat pretium eget.
      title:
        Nulla luctus quam ut nisi tincidunt lobortis. Vestibulum sed bibendum
        lectus.
  - type: map
    ui:
      grid: small
      offset: center
    location: '{"type":"Point","coordinates":[-0.5737107,44.8425666]}'
    zoom: 14
    heading:
      surtitle: Grid small / Zoom 14
      text:
        Duis placerat quam et ante pellentesque, et porttitor lectus sollicitudin.
        Fusce maximus hendrerit eros, sed pulvinar erat pretium eget.
      title:
        Nulla luctus quam ut nisi tincidunt lobortis. Vestibulum sed bibendum
        lectus.
  - type: map
    ui:
      grid: medium
      offset: center
    location: '{"type":"Point","coordinates":[-0.5737107,44.8425666]}'
    zoom: 14
    heading:
      surtitle: Grid medium / Zoom 14
      text:
        Duis placerat quam et ante pellentesque, et porttitor lectus sollicitudin.
        Fusce maximus hendrerit eros, sed pulvinar erat pretium eget.
      title:
        Nulla luctus quam ut nisi tincidunt lobortis. Vestibulum sed bibendum
        lectus.
  - type: map
    ui:
      grid: large
      offset: center
    location: '{"type":"Point","coordinates":[-0.5737107,44.8425666]}'
    zoom: 14
    heading:
      surtitle: Grid large / Zoom 14
      text:
        Duis placerat quam et ante pellentesque, et porttitor lectus sollicitudin.
        Fusce maximus hendrerit eros, sed pulvinar erat pretium eget.
      title:
        Nulla luctus quam ut nisi tincidunt lobortis. Vestibulum sed bibendum
        lectus.
  - type: map
    ui:
      grid: container
    location: '{"type":"Point","coordinates":[-0.5737107,44.8425666]}'
    heading:
      surtitle: Grid container
      text:
        Duis placerat quam et ante pellentesque, et porttitor lectus sollicitudin.
        Fusce maximus hendrerit eros, sed pulvinar erat pretium eget.
      title:
        Nulla luctus quam ut nisi tincidunt lobortis. Vestibulum sed bibendum
        lectus.
  - type: map
    ui:
      grid: full
    location: '{"type":"Point","coordinates":[-0.5737107,44.8425666]}'
    heading:
      surtitle: Grid full
      text:
        Duis placerat quam et ante pellentesque, et porttitor lectus sollicitudin.
        Fusce maximus hendrerit eros, sed pulvinar erat pretium eget.
      title:
        Nulla luctus quam ut nisi tincidunt lobortis. Vestibulum sed bibendum
        lectus.

  - type: map
    ui:
      grid: container
      theme: light
    location: '{"type":"Point","coordinates":[-0.5737107,44.8425666]}'
    zoom: 14
    heading:
      surtitle: Grid container / Zoom 14 / Theme light
      title: Nulla luctus quam ut nisi tincidunt lobortis. Vestibulum sed bibendum lectus.
      text:
        Duis placerat quam et ante pellentesque, et porttitor lectus sollicitudin.
        Fusce maximus hendrerit eros, sed pulvinar erat pretium eget.

  - type: map
    ui:
      grid: container
      theme: highlight
    location: '{"type":"Point","coordinates":[-0.5737107,44.8425666]}'
    zoom: 14
    heading:
      surtitle: Grid container / Zoom 14 / Theme highlight
      title: Nulla luctus quam ut nisi tincidunt lobortis. Vestibulum sed bibendum lectus.
      text:
        Duis placerat quam et ante pellentesque, et porttitor lectus sollicitudin.
        Fusce maximus hendrerit eros, sed pulvinar erat pretium eget.

  - type: map
    ui:
      grid: container
      theme: accent
    location: '{"type":"Point","coordinates":[-0.5737107,44.8425666]}'
    zoom: 14
    heading:
      surtitle: Grid container / Zoom 14 / Theme accent
      title: Nulla luctus quam ut nisi tincidunt lobortis. Vestibulum sed bibendum lectus.
      text:
        Duis placerat quam et ante pellentesque, et porttitor lectus sollicitudin.
        Fusce maximus hendrerit eros, sed pulvinar erat pretium eget.

  - type: map
    ui:
      grid: container
      theme: dark
    location: '{"type":"Point","coordinates":[-0.5737107,44.8425666]}'
    zoom: 14
    heading:
      surtitle: Grid container / Zoom 14 / Theme dark
      title: Nulla luctus quam ut nisi tincidunt lobortis. Vestibulum sed bibendum lectus.
      text:
        Duis placerat quam et ante pellentesque, et porttitor lectus sollicitudin.
        Fusce maximus hendrerit eros, sed pulvinar erat pretium eget.

  - type: map
    ui:
      grid: container
      theme: neutral
    location: '{"type":"Point","coordinates":[-0.5737107,44.8425666]}'
    zoom: 14
    heading:
      surtitle: Grid container / Zoom 14 / Theme neutral
      title: Nulla luctus quam ut nisi tincidunt lobortis. Vestibulum sed bibendum lectus.
      text:
        Duis placerat quam et ante pellentesque, et porttitor lectus sollicitudin.
        Fusce maximus hendrerit eros, sed pulvinar erat pretium eget.

  - type: map
    ui:
      grid: container
      theme: black
    location: '{"type":"Point","coordinates":[-0.5737107,44.8425666]}'
    zoom: 14
    heading:
      surtitle: Grid container / Zoom 14 / Theme black
      title: Nulla luctus quam ut nisi tincidunt lobortis. Vestibulum sed bibendum lectus.
      text:
        Duis placerat quam et ante pellentesque, et porttitor lectus sollicitudin.
        Fusce maximus hendrerit eros, sed pulvinar erat pretium eget.

  - type: map
    ui:
      grid: container
      theme: white
    location: '{"type":"Point","coordinates":[-0.5737107,44.8425666]}'
    zoom: 14
    heading:
      surtitle: Grid container / Zoom 14 / Theme white
      title: Nulla luctus quam ut nisi tincidunt lobortis. Vestibulum sed bibendum lectus.
      text:
        Duis placerat quam et ante pellentesque, et porttitor lectus sollicitudin.
        Fusce maximus hendrerit eros, sed pulvinar erat pretium eget.
---