From fd5fedfd1109cee92a87e31bce03c44904808388 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mirko=20M=C3=A4licke?= Date: Thu, 6 Apr 2023 10:47:18 +0200 Subject: [PATCH 1/2] added terrain source --- src/components/MainMapMaplibre.tsx | 74 ++++++++++++++++++++---------- 1 file changed, 49 insertions(+), 25 deletions(-) diff --git a/src/components/MainMapMaplibre.tsx b/src/components/MainMapMaplibre.tsx index 5e6d9b0..d807d47 100644 --- a/src/components/MainMapMaplibre.tsx +++ b/src/components/MainMapMaplibre.tsx @@ -14,33 +14,42 @@ const MainMap: React.FC = () => { // resize the map once loaded (e as MapLibreEvent).target.resize(); setTimeout(() => e.target.resize(), 500); + + // add terrain control + (e as MapLibreEvent).target.addControl( + new maplibregl.TerrainControl({ + source: "terrainSource", + exaggeration: 1.5, + }), + 'top-left' + ) }; // some hard-coded styles - const stamenStyle = { - version: 8, - sources: { - terrainSource: { - type: "raster", - tiles: [ - "https://stamen-tiles.a.ssl.fastly.net/terrain-background/{z}/{x}/{y}.jpg", - ], - tileSize: 256, - attribution: - 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.', - // maxzoom: 10, - }, - }, - layers: [ - { - id: "terrainSource", - source: "terrainSource", - type: "raster", - }, - ], - } as Style; + // const stamenStyle = { + // version: 8, + // sources: { + // terrainSource: { + // type: "raster", + // tiles: [ + // "https://stamen-tiles.a.ssl.fastly.net/terrain-background/{z}/{x}/{y}.jpg", + // ], + // tileSize: 256, + // attribution: + // 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.', + // // maxzoom: 10, + // }, + // }, + // layers: [ + // { + // id: "terrainSource", + // source: "terrainSource", + // type: "raster", + // }, + // ], + // } as Style; - const osmStyle = { + const mapStyle = { version: 8, sources: { osm: { @@ -50,6 +59,12 @@ const MainMap: React.FC = () => { attribution: "© OpenStreetMap Contributors", maxzoom: 19, }, + // found here: https://betterprogramming.pub/using-3d-terrain-in-your-web-apps-1c0c56ae07e1 + terrainSource: { + type: "raster-dem", + tiles: ['https://api.ellipsis-drive.com/v3/path/085f5e10-63b6-4e8f-a4c6-dce9689100d3/raster/timestamp/3179fa80-60ad-41c7-ae67-cdd5eeeca693/tile/{z}/{x}/{y}?style={"method":"terrainRgb", "parameters":{"alpha":1, "bandNumber":1} }'], + tileSize: 256, + } }, layers: [ { @@ -57,6 +72,11 @@ const MainMap: React.FC = () => { type: "raster", source: "osm", }, + // { + // id: "hillshade", + // source: "terrainSource", + // type: "hillshade", + // } ], } as Style; @@ -65,14 +85,18 @@ const MainMap: React.FC = () => { mapLib={maplibregl} style={{ width: "100%", height: "100%" }} onLoad={(m) => onLoad(m)} - mapStyle={osmStyle} + mapStyle={mapStyle} initialViewState={{ longitude: 8.088652, latitude: 47.88443, zoom: 15, - // pitch: 52, + pitch: 45, // 47.884438269626294, 8.088652498339387 }} + terrain={{ + source: "terrainSource", + exaggeration: 1.5, + }} > From 70bf29a3ef536c714ea18fbeed394a76f530fb9f Mon Sep 17 00:00:00 2001 From: JesJehle Date: Wed, 12 Apr 2023 11:18:03 +0200 Subject: [PATCH 2/2] fixing bug --- src/components/MainMapMaplibre.tsx | 41 ++++++++++++++++++------------ 1 file changed, 25 insertions(+), 16 deletions(-) diff --git a/src/components/MainMapMaplibre.tsx b/src/components/MainMapMaplibre.tsx index d807d47..4842668 100644 --- a/src/components/MainMapMaplibre.tsx +++ b/src/components/MainMapMaplibre.tsx @@ -1,6 +1,6 @@ import { Style } from "mapbox-gl"; import maplibregl, { MapLibreEvent } from "maplibre-gl"; -import Map from "react-map-gl"; +import Map, { Source } from "react-map-gl"; // load the maplibre CSS styles import "maplibre-gl/dist/maplibre-gl.css"; @@ -16,13 +16,13 @@ const MainMap: React.FC = () => { setTimeout(() => e.target.resize(), 500); // add terrain control - (e as MapLibreEvent).target.addControl( - new maplibregl.TerrainControl({ - source: "terrainSource", - exaggeration: 1.5, - }), - 'top-left' - ) + // (e as MapLibreEvent).target.addControl( + // new maplibregl.TerrainControl({ + // source: "terrainSource", + // exaggeration: 1.5, + // }), + // "top-left" + // ); }; // some hard-coded styles @@ -62,9 +62,12 @@ const MainMap: React.FC = () => { // found here: https://betterprogramming.pub/using-3d-terrain-in-your-web-apps-1c0c56ae07e1 terrainSource: { type: "raster-dem", - tiles: ['https://api.ellipsis-drive.com/v3/path/085f5e10-63b6-4e8f-a4c6-dce9689100d3/raster/timestamp/3179fa80-60ad-41c7-ae67-cdd5eeeca693/tile/{z}/{x}/{y}?style={"method":"terrainRgb", "parameters":{"alpha":1, "bandNumber":1} }'], + tiles: [ + 'https://api.ellipsis-drive.com/v3/path/085f5e10-63b6-4e8f-a4c6-dce9689100d3/raster/timestamp/3179fa80-60ad-41c7-ae67-cdd5eeeca693/tile/{z}/{x}/{y}?style={"method":"terrainRgb","parameters":{"alpha":1,"bandNumber":1}}', + ], tileSize: 256, - } + maxzoom: 13, + }, }, layers: [ { @@ -72,12 +75,16 @@ const MainMap: React.FC = () => { type: "raster", source: "osm", }, - // { - // id: "hillshade", - // source: "terrainSource", - // type: "hillshade", - // } + { + id: "hillshade", + source: "terrainSource", + type: "hillshade", + }, ], + // terrain: { + // source: "terrainSource", + // exaggeration: 1, + // }, } as Style; return ( @@ -95,8 +102,10 @@ const MainMap: React.FC = () => { }} terrain={{ source: "terrainSource", - exaggeration: 1.5, + exaggeration: 1, }} + maxPitch={85} + // hillshade={{}} >