diff --git a/src/components/MainMapMaplibre.tsx b/src/components/MainMapMaplibre.tsx
index 5e6d9b0..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";
@@ -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,15 @@ 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,
+ maxzoom: 13,
+ },
},
layers: [
{
@@ -57,7 +75,16 @@ const MainMap: React.FC = () => {
type: "raster",
source: "osm",
},
+ {
+ id: "hillshade",
+ source: "terrainSource",
+ type: "hillshade",
+ },
],
+ // terrain: {
+ // source: "terrainSource",
+ // exaggeration: 1,
+ // },
} as Style;
return (
@@ -65,14 +92,20 @@ 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,
+ }}
+ maxPitch={85}
+ // hillshade={{}}
>