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={{}} >