Map.tsx

/* eslint-disable react-hooks/rules-of-hooks */
import React, { useState, useEffect } from "react"
import { isArray } from "lodash"
import {
    MapContainer,
    LayersControl,
    TileLayer,
    WMSTileLayer,
    GeoJSON,
} from "react-leaflet"
import "leaflet/dist/leaflet.css"

interface Props {
    mapid: number
}

const Map = (props: Props) => {
    const projectUrl = process.env.PROJECT_URL as string
    if (typeof window !== "undefined") {
        let className = "z-40 h-full w-full"

        // Default id map (from mapstore)
        const mapId = props.mapid

        // Default center, zoom
        const center: number[] = [47.1, -1.25]
        const zoom: number = 9
        const layers: any[] = []

        // Get current map Object when ready (whenCreated)
        const [map, setMap] = useState(null)

        // Init default map context
        const [mapContext, setMapContext] = useState({
            center: {
                x: center[1],
                y: center[0],
            },
            zoom: zoom,
            layers: layers,
        })

        // Get Mapstore context
        useEffect(() => {
            fetch("/geoportal/rest/geostore/data/" + mapId)
                .then((response) => response.json())
                .then((resultData) => {
                    setMapContext(resultData.map)
                    // Update map view with context data
                    if (map)
                        // @ts-ignore
                        map.setView(
                            [resultData.map.center.y, resultData.map.center.x],
                            resultData.map.zoom
                        )
                })
                .catch((error) => {
                    console.log(error)
                })
        }, [projectUrl, map, mapId])

        return (
            <>
                <MapContainer
                    center={[mapContext.center.y, mapContext.center.x]}
                    zoom={mapContext.zoom}
                    // @ts-ignore
                    whenCreated={setMap}
                    className={className}
                    // scrollWheelZoom={false}
                >
                    <LayersControl>
                        {
                            // BACKGROUNDS
                            mapContext.layers
                                .filter((layer) => layer.group === "background")
                                .map((layer, key) => {
                                    switch (layer.type) {
                                        case "osm":
                                            return (
                                                <LayersControl.BaseLayer
                                                    key={key}
                                                    checked={layer.visibility}
                                                    name={layer.title}
                                                >
                                                    <TileLayer
                                                        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                                                        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                                                    />
                                                </LayersControl.BaseLayer>
                                            )
                                        case "wmts":
                                            // URL for IGN WMTS services
                                            // TODO: test for other WMTS
                                            const url =
                                                layer.url +
                                                "?service=WMTS&request=GetTile&version=1.0.0&tilematrixset=PM&tilematrix={z}&tilecol={x}&tilerow={y}&layer=" +
                                                layer.name +
                                                "&format=" +
                                                layer.format +
                                                "&style=" +
                                                layer.style
                                            return (
                                                <LayersControl.BaseLayer
                                                    key={key}
                                                    checked={layer.visibility}
                                                    name={layer.title}
                                                >
                                                    <TileLayer
                                                        url={url}
                                                        tileSize={256}
                                                        opacity={layer.opacity}
                                                    />
                                                </LayersControl.BaseLayer>
                                            )
                                    }
                                })
                        }

                        {
                            // OVERLAYS

                            // Load layers from context
                            mapContext.layers.map((layer, key) => {
                                if (isArray(layer.url)) return null
                                switch (layer.type) {
                                    case "vector":
                                        return (
                                            <LayersControl.Overlay
                                                key={key}
                                                checked={layer.visibility}
                                                name={layer.name}
                                            >
                                                <GeoJSON
                                                    data={layer.features}
                                                    pathOptions={
                                                        layer.style || ""
                                                    }
                                                />
                                            </LayersControl.Overlay>
                                        )
                                    case "wfs":
                                        break
                                    case "wms":
                                        return (
                                            <LayersControl.Overlay
                                                key={key}
                                                checked={layer.visibility}
                                                name={layer.title}
                                            >
                                                <WMSTileLayer
                                                    layers={layer.name}
                                                    format={layer.format}
                                                    transparent={true}
                                                    url={layer.url}
                                                    styles={layer.style || ""}
                                                    opacity={layer.opacity}
                                                />
                                            </LayersControl.Overlay>
                                        )
                                }
                                return null
                            })
                        }
                    </LayersControl>
                </MapContainer>
            </>
        )
    }

    return null
}

export default Map