// Setting up map configuration
let config = {
minZoom: 1,
maxZoom: 18,
};
// Initial zoom level of the map
const zoom = 18;
// Coordinates
const lat = 52.22977;
const lng = 21.01178;
// Creating the map
const map = L.map("map", config).setView([lat, lng], zoom);
// Loading and displaying tile layers on the map
// Most tile servers require attribution, which you can set under `Layer`
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
// ------------------------------
const bbox = [17, 54, 23, 50];
const cellSide = 50;
const options = { units: "kilometers" };
const squareGrid = turf.squareGrid(bbox, cellSide, options);
//Adding to Map
const addToMap = [squareGrid];
const gridLayers = L.geoJSON(addToMap, {
onEachFeature: function (feature, layer) {
layer.on("mouseover", function (e) {
// show region
this.setStyle({
fillColor: "#eb4034",
weight: 2,
color: "red",
fillOpacity: 0.7,
});
});
layer.on("mouseout", function () {
this.setStyle({
fillColor: "#3388ff",
weight: 2,
color: "#3388ff",
fillOpacity: 0.2,
});
});
},
}).addTo(map);
map.setView(gridLayers.getBounds().getCenter(), 7);
*,
:after,
:before {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body,
html,
#map {
width: 100%;
height: 100%;
}
body {
position: relative;
min-height: 100%;
margin: 0;
padding: 0;
background-color: #f1f1f1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="056960646369607145342b322b34">[email protected]</a>/dist/leaflet.js"></script>
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0aca5a1a6aca5b480f1eef7eef1">[email protected]</a>/dist/leaflet.css" rel="stylesheet"/>
<div id="map"></div>