map

index.d.ts

@@ -78,4 +78,9 @@ interface HeroProps {
  */
 export function Hero(props: HeroProps): JSX.Element;
 
+interface MapProps {
+  idMap: number;
+}
+export function Map(props: MapProps): JSX.Element;
+
 declare module "@onegeo/gatsby-theme-onegeo";

index.js

@@ -9,6 +9,7 @@ export { default as Button } from "./src/components/core/Button";
 export { default as Card } from "./src/components/core/Card";
 export { default as Link } from "./src/components/core/Link";
 export { default as Search } from "./src/components/core/Search";
+export { default as Map } from "./src/components/core/Map";
 
 // Feature components
 export { default as Hero } from "./src/components/Hero";

package.json

@@ -14,11 +14,14 @@
     "gatsby-plugin-env-variables": "^2.2.0",
     "gatsby-plugin-typesense": "^0.3.0",
     "gatsby-source-graphql": "^4.12.1",
+    "leaflet": "^1.9.2",
     "react-autosuggest": "^10.1.0",
     "react-instantsearch-dom": "^6.12.1",
+    "react-leaflet": "^4.1.0",
     "typesense-instantsearch-adapter": "^1.2.2"
   },
   "devDependencies": {
+    "@types/leaflet": "^1.9.0",
     "@types/react-autosuggest": "^10.1.5",
     "@types/react-instantsearch-dom": "^6.12.0",
     "dotenv": "^10.0.0",

src/components/core/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 {
+  idMap: 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 idMap = props.idMap
+
+    // 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(projectUrl + "/geoportail/rest/geostore/data/" + idMap)
+        .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
+            )
+        })
+    }, [projectUrl, map, idMap])
+
+    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

src/pages-doc/doc/core/index.tsx

@@ -14,6 +14,8 @@ function index(): ReactElement {
         <Link to="/doc/core/card">Card</Link>
         <br></br>
         <Link to="/doc/core/hero">Hero</Link>
+        <br></br>
+        <Link to="/doc/core/map">Map</Link>
       </div>
     </Content>
   );

src/pages-doc/doc/core/map.tsx

+import React, { ReactElement } from "react";
+import { Link } from "gatsby";
+
+import { Content } from "@onegeo/gatsby-theme-onegeo";
+import { Map } from "@onegeo/gatsby-theme-onegeo";
+
+function map(): ReactElement {
+  return (
+    <Content>
+      <div className="prose">
+        <Link to="/doc/core">Retour</Link>
+
+        <h1>Map</h1>
+        <h2>Props</h2>
+        <div className="mockup-code">
+          <pre>
+            <code>
+              {`
+interface MapProps {
+  idMap: number;
+}`}
+            </code>
+          </pre>
+        </div>
+
+        <h2>Example</h2>
+      </div>
+      <div className="flex gap-6 m-4 h-96">
+        <Map 
+          idMap={109}
+        />
+      </div>
+    </Content>
+  );
+}
+
+export default map;