Azure Map Account Integration with Deck.gl

Also, what specific features in deck.gl are you interested in? Azure Maps Web SDK has a lot of open source modules that extend its capabilities; https://video2.skills-academy.com/en-us/azure/azure-maps/open-source-projects For example, the Azure Maps Gridded Data Source module is similar to the hexagon/H3 layer in deck.gl. We are always looking for feedback on what features developers are looking for.

First, Thanks for your reply @rbrundritt and took time for this issue.

Yes your are right Azure Map SDK is build on Mapbox gl(say 1.10.0) but I am interested in rendering(2d) Azure Map(as a base map) as a component in Deck.gl as it has done with mapbox(by using import {StaticMap} from 'react-map-gl';) integration with deckgl

<DeckGL
initialViewState={<!-- -->{longitude: -122.45, latitude: 37.78, zoom: 12}}
controller={true}
layers={[new ScatterplotLayer({data})]}

<StaticMap  
  mapStyle="mapbox://styles/mapbox/dark-v9"  
  mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} /> **Here I want to use azureMapKey**  

</DeckGL>
Source:https://deck.gl/docs/api-reference/react/deckgl

The mapStyle and mapboxApiAccessToken would only be needed if you were connecting to Mapbox services. You can skip those properties which would give you an empty map canvas. You can then use a tile layer to pull in Azure Maps. Note that the static map class is just the ReactMapGL class with some options that disable interactions (better to just use ReactMapGL).

Here is a quick example that uses Azure Maps:

const azMapsKey = '<Your Azure Maps Key>';

const azureMapsRoadMapLayer = {
    type: 'raster',
    source: {
        type: 'raster',
        tileSize: 256,
        tiles: [
            `https://atlas.microsoft.com/map/tile?api-version=2.0&tilesetId=microsoft.base.road&zoom={z}&x={x}&y={y}&tileSize=256&language=en-US&view=Auto&subscription-key=${azMapsKey}`
        ]
    },
    minzoom: 0,
    maxzoom: 22
};

const [viewport, setViewport] = useState({
    latitude: 0,
    longitude: 0,
    zoom: 1
  });

const [settings, setSettings] = useState({
    dragPan: false,
    dragRotate: false,
    scrollZoom: false,
    touchZoom: false,
    touchRotate: false,
    keyboard: false,
    doubleClickZoom: false
});

return (
<>
  <ReactMapGL
    {...viewport}
    {...settings}
    width="100%"
    height="100%"
  >
     <Layer {...azureMapsRoadMapLayer} />
    )}
  </ReactMapGL>
</>
);