Azure Map Account Integration with Deck.gl

Paras 1

Is it possible to render Azure Maps as a Base Map in Deck.gl[@Deck .gl/react] while using with Reactjs?

QuantumCache 20,346 Reputation points

2021-02-19T03:31:01.61+00:00

Hello @Paras Just checking in if you have had a chance to see the previous response.
If the response is helpful, please click "Accept Answer" and upvote it so that it is helpful to other members.

1 answer

rbrundritt 18,791 Reputation points Microsoft Employee

2021-02-12T17:23:22.25+00:00
It is technically possible.

I have seen at least one person who wrote a wrapper around the Azure Maps web SDK and made it a map component in deck.gl (but doesn't look like they checked it into the repo). I don't have all the details though. The Azure Maps web SDK is built on top of the Mapbox gl js SDK (with added enhancements). I believe they modified the Mapbox component of deck GL to leverage this. The Azure Maps Web SDK exposes the Mapbox map instance via it's "map.map" property.

Another approach is to use any of the existing map components in deck.gl and add Azure Maps as a layer. Using raster tiles is really easy to do. Here is a simple example:

var azureMapsKey = '<Your Azure Maps Key>'; var map = new mapboxgl.Map({ container: 'map', center: [0, 0], zoom: 2, style: { "version": 8, "name": "Mapbox Streets", "sources": { "azure-maps-basemap": { "type": "raster", "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=${azureMapsKey}`], "tileSize": 256 } }, "layers": [{ "id": "basemap", "type": "raster", "source": "azure-maps-basemap" }] } });
Please sign in to rate this answer.

1 person found this answer helpful.
rbrundritt 18,791 Reputation points Microsoft Employee

2021-02-12T17:32:15.14+00:00

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://learn.microsoft.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.

Paras 1 Reputation point

2021-02-15T07:23:55.067+00:00

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

rbrundritt 18,791 Reputation points Microsoft Employee

2021-02-17T18:52:06.57+00:00

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).

rbrundritt 18,791 Reputation points Microsoft Employee

2021-02-17T18:52:22.217+00:00

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> </> );

Paras 1 Reputation point

2021-02-19T03:55:19.477+00:00

@rbrundritt : Thanks for taking up this issue.
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

Azure Map Account Integration with Deck.gl

1 answer

Your answer