Skip to main content

Maps component

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Usage

When viewing this page in the browser, you will see the component above the heading.

import LeafletMap from "~/components/mdx/integrations/leaflet/Map.astro";

<LeafletMap
  mapOptions={{
    attribution:
      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    caption: "Lorem ipsum dolor sit amet consectetur adipiscing elit",
    id: "map-test",
    latitude: 51.509865,
    longitude: -0.118092,
    tileLayer: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
    zoom: 5,
    markers: [
      { latitude: 51.5, longitude: -0.09, popup: "Hello world" },
      { latitude: 51.51, longitude: -0.1, popup: "Another marker" },
    ],
  }}
/>

## You can continue writing your markdown content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.

Examples

Lorem ipsum dolor sit amet consectetur adipiscing elit
Lorem ipsum dolor sit amet consectetur adipiscing elit

More information

astro-skeleton uses the @astrojs/mdx integration installed and configured in the astro.config.mjs config file.

Why MDX?

MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to mix JavaScript and UI Components into Markdown content for things like interactive charts or alerts.

If you have existing content authored in MDX, this integration will hopefully make migrating a breeze.