I need help please. I would like to hide the other maps and only show the one of Cameroon. I'm using Leaflet and I'm on Next.js to be able to display the map. I saw this page React-Leaflet 4 with NextJS 14 | Working Setup so I'm starting from this Map and page to be able to hide the other maps. Here is my Map and page code to hide the other maps and leave only the one of Cameroon, but I don't know why the map is not displaying.
**Map.tsx:**
"use client";
import "leaflet/dist/leaflet.css";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css";
import "leaflet-defaulticon-compatibility";
import L from "leaflet";
import { useEffect, useRef } from "react";
import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";
export default function Map() {
const mapRef = useRef<L.Map | null>(null);
useEffect(() => {
if (!mapRef.current) {
mapRef.current = L.map("map").setView([7.369722, 12.354722], 6);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© OpenStreetMap contributors",
}).addTo(mapRef.current);
var cameroon: GeoJSON.Feature<GeoJSON.Polygon> = {
type: "Feature",
properties: {
name: "Cameroon",
code: "CMR",
group: "Countries",
},
geometry: {
type: "Polygon",
coordinates: [
[
[13.075822, 2.267097],
[12.951334, 2.321616],
[12.35938, 2.192812],
[11.751665, 2.326758],
[11.276449, 2.261051],
[9.649158, 2.283866],
[9.795196, 3.073404],
[9.404367, 3.734527],
[8.948116, 3.904129],
[8.744924, 4.352215],
[8.488816, 4.495617],
[8.500288, 4.771983],
[8.757533, 5.479666],
[9.233163, 6.444491],
[9.522706, 6.453482],
[10.118277, 7.038775],
[10.497375, 7.055358],
[11.058788, 6.644427],
[11.745774, 6.981383],
[11.839309, 7.397042],
[12.063946, 7.799808],
[12.218872, 8.305824],
[12.753672, 8.717763],
[12.955468, 9.417772],
[13.1676, 9.640626],
[13.308676, 10.160362],
[13.57295, 10.798566],
[14.415379, 11.572369],
[14.468192, 11.904752],
[14.577178, 12.085361],
[14.181336, 12.483657],
[14.213531, 12.802035],
[14.495787, 12.859396],
[14.893386, 12.219048],
[14.960152, 11.555574],
[14.923565, 10.891325],
[15.467873, 9.982337],
[14.909354, 9.992129],
[14.627201, 9.920919],
[14.171466, 10.021378],
[13.954218, 9.549495],
[14.544467, 8.965861],
[14.979996, 8.796104],
[15.120866, 8.38215],
[15.436092, 7.692812],
[15.27946, 7.421925],
[14.776545, 6.408498],
[14.53656, 6.226959],
[14.459407, 5.451761],
[14.558936, 5.030598],
[14.478372, 4.732605],
[14.950953, 4.210389],
[15.03622, 3.851367],
[15.405396, 3.335301],
[15.862732, 3.013537],
[15.907381, 2.557389],
[16.012852, 2.26764],
[15.940919, 1.727673],
[15.146342, 1.964015],
[14.337813, 2.227875],
[13.075822, 2.267097],
],
],
},
};
L.geoJSON(cameroon).addTo(mapRef.current);
var outerRing = [
[-180, -90],
[-180, 90],
[180, 90],
[180, -90],
[-180, -90],
];
var cameroonCoordinates = cameroon.geometry.coordinates[0];
var mask: GeoJSON.Feature<GeoJSON.Polygon> = {
type: "Feature",
properties: {},
geometry: {
type: "Polygon",
coordinates: [outerRing.concat(cameroonCoordinates.reverse())],
},
};
L.geoJSON(mask).addTo(mapRef.current).setStyle({
interactive: false,
color: "#000",
fillColor: "#000",
fillOpacity: 0.6,
});
}
}, []);
return <div id="map" style={{ height: "100vh", width: "100%" }}></div>;
}
**page.tsx**:
"use client";
import dynamic from "next/dynamic";
const LazyMap = dynamic(() => import("../../../app/dashboard/Cartographie/Map"), {
ssr: false,
loading: () => <p>Chargement...</p>,
});
export default function Home() {
return (
<main>
<LazyMap />
</main>
);
}
As I said, I've coded this code but there's no map and no error message on my front end.
