Azure Map Account Integration with

Paras 1 Reputation point

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

Azure Maps
Azure Maps
An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.
517 questions
{count} votes

1 answer

Sort by: Most helpful
  1. rbrundritt 12,516 Reputation points Microsoft Employee

    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 (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 "" property.

    Another approach is to use any of the existing map components in 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": [`{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"
    1 person found this answer helpful.