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
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
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