Mapbox Integration with SentinelHub WMS

Hello,
I want to display tiles from SentinelHub WMS on a Mapbox map. Current results:

 <script>
      // ADD YOUR ACCESS TOKEN FROM
      // https://account.mapbox.com
      mapboxgl.accessToken ="  accessToken: '!!!!!!',
"
      const map = new mapboxgl.Map({
        container: "map",
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: "mapbox://styles/mapbox/light-v11",
        zoom: 14, // Adjust the zoom level to fit the provided bounding box
        center: [-8.586401, 30.56998], // Adjust the center to fit the provided bounding box
        maxBounds: [
          [-8.588868, 30.568395], // Southwest coordinates
          [-8.583934, 30.571564], // Northeast coordinates
        ],
      });

      map.on("load", () => {
        map.addSource("sentinel-hub-source", {
          type: "raster",
          // use the tiles option to specify a WMS tile source URL
          tiles: [
            "https://services.sentinel-hub.com/ogc/wms/id?format=image/png&service=WMS&request=GetMap&layers=NDVI&styles=&format=image%2Fpng&transparent=true&version=1.3.0&geometry=POLYGON((30.571647%20-8.584721%2C30.566159%20-8.582425%2C30.563388%20-8.59148%2C30.568894%20-8.593776%2C30.571647%20-8.584721))&maxcc=20&time=2024-03-01T00%3A00%3A00Z&width=640&height=640&distinct=date&crs=EPSG%3A4326&minZoom=6&maxZoom=20&bbox=30.56699087315334,-8.591308593750002,30.5717205651999,-8.585815429687502",
          ],
          tileSize: 256,
        });
        map.addLayer({
          id: xxxx,
          type: "raster",
          source: "sentinel-hub-source",
          paint: {},
        });

        // Add layer switcher control
        const layerSwitcher = new mapboxgl.ControlLayers({
          style: "horizontal",
          layers: [
            {
              id: "Map",
              checked: true,
            },
            {
              id: "NDVI",
              checked: false,
            },
          ],
        });
        map.addControl(layerSwitcher, "top-right");
      });
    </script>

Hi Yasmine,

One of our legacy projects used Mapbox. You can find source code here:

GitHub

GitHub - sentinel-hub/water-observatory-frontend: Frontend React app for…

Frontend React app for https://water.blue-dot-observatory.com/ - GitHub - sentinel-hub/water-observatory-frontend: Frontend React app for https://water.blue-dot-observatory.com/

Hope that this helps you out!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.