---
isPage: true
draft: false
title: Map
description: Add a map ( with Leaflet JS library)
icon: geo-alt
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-site/refs/heads/main/content/docs/map.md
      blank: true
    - text: Open street map
      url: https://www.openstreetmap.fr/
      blank: true
    - text: Leaflet JS library
      url: https://leafletjs.com/
      blank: true
blocks:
  - type: map
    background: false
    location: '{"type":"Point","coordinates":[-0.5737107,44.8425666]}'
    zoom: 14
    heading:
      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
    background: true
    location: '{"type":"Point","coordinates":[-0.5737107,44.8425666]}'
    zoom: 14
    heading:
      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
    background: false
    location: '{"type":"Point","coordinates":[-0.5737107,44.8425666]}'
    zoom: 14
    grid: small
    heading:
      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
    background: false
    location: '{"type":"Point","coordinates":[-0.5737107,44.8425666]}'
    zoom: 14
    grid: medium
    heading:
      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
    background: false
    location: '{"type":"Point","coordinates":[-0.5737107,44.8425666]}'
    zoom: 14
    grid: large
    heading:
      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
    background: false
    location: '{"type":"Point","coordinates":[-0.5737107,44.8425666]}'
    grid: container
    heading:
      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
    background: false
    location: '{"type":"Point","coordinates":[-0.5737107,44.8425666]}'
    grid: full
    heading:
      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.
---