Skip to content
Snippets Groups Projects
Commit dd532c02 authored by tovo's avatar tovo
Browse files

map

parent 98b8f124
No related branches found
No related tags found
No related merge requests found
......@@ -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";
......@@ -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";
/* 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
......@@ -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>
);
......
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;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment