Basic Map - One marker

This is a basic Leaflet map implementation with a custom marker. Everything is for you and this map can be created by calling a simple function.

import Map from "../components/Map""

export default function page(props) {
  return(
    <div className="map" style={{ height: "400px" }}>
      <Map
        center={[40.732346, -74.0014247]}
        zoom={13}
        className="h-100"
      />
    </div>
  )
}

loading

Styled Map - One marker

An example of the styled Leaflet map with a custom marker. You can easily replace the look by changin to another theme from Leaflet Providers.

import Map from "../components/Map""

export default function page(props) {
  return(
    <div className="map" style={{ height: "400px" }}>
      <Map
        center={[40.732346, -74.0014247]}
        zoom={13}
        className="h-100"
        light
      />
    </div>
  )
}

loading

Styled Map - Multiple markers with infobox, images and structured content from JSON

More complex implementation: data are loaded from a JSON file and custom infobox with an image is used in this example. Again, everything's prepared for you.

import Map from "../components/Map""

export default function page(props) {
  return(
    <div className="map" style={{ height: "600px" }}>
      <Map
        center={[40.732346, -74.0014247]}
        zoom={13}
        className="h-100"
        geoJSON={data} // JSON data file 
      />
    </div>
  )
}

loading

Your company © 2022

Version 1.2.0