JSFiddle - React, Tailwind, and code Playground

by asdasdasd111093833

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.8.0/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.8.0/leaflet.css">
<div id="map"></div>

CSS

#map {
  height: 100vh;
}

JavaScript

// center of the map
var center = [43.7731, 11.2555];

// Create the map
var map = L.map('map').setView(center, 19);

// Set up the OSM layer
L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxNativeZoom: 19, // OSM max available zoom is at 19.
    maxZoom: 22 // Match the map maxZoom, or leave map.options.maxZoom undefined.
  }).addTo(map);

// add a marker in the given location
var marker = L.marker(center).addTo(map);
marker.bindPopup("Hi, try to zoom!").openPopup();