Using Bing/Azure maps in iTwin viewer

[abdul-lashkarwala]

Hello team,

I am working on creating an iTwin web viewer using iTwin.js and would like to use Bing/Azure base maps in the app. As indicated in the documentation, I have created an Azure Maps account and added the following configuration in the Viewer and the respective key in the .env file, but it isn't working. Am I missing anything here? I would appreciate any help from the community.

mapLayerOptions={{
AzureMaps: {
key: "subscription-key",
value: process.env.IMJS_AZURE_MAP_KEY ?? "",
},

}}

[hl662]

Hello! Can I ask what was the source of the documentation? We haven't added support for AzureMaps yet, and Bing Maps is deprecated. There is a draft PR up for Azure Maps support, but we haven't prioritized picking it up just yet, because Azure Maps is not feature parity with Bing Maps in terms of map imagery. We are instead however, looking to switch to using google maps: iTwin/itwinjs-core#7414

[abdul-lashkarwala]

Hi @hl662 , thanks for your reply. I was referring to this documentation - https://www.itwinjs.org/reference/core-frontend/maplayers/maplayeroptions/

[hl662]

Thanks for sharing, we'll look into updating the documentation to recommend users to not use those...

[hl662]

At the moment, you can implement your own MapLayerProvider for AzureMaps - here is a link to our abstract interface for a MapLayerImageryProvider. Upon startup of the IModelApp, you can register your own provider, like in this class.

Then, assuming you have a viewport created and accessible through your own iTwin viewer, you can do the following to change the map layer imagery for that viewport at any point (perhaps as early in the viewer initialization stage as you can) like so:

viewport.displayStyle.attachMapLayer({
      settings: ImageMapLayerSettings.fromJSON({name: "PhillyRailLines", formatId: "ArcGIS", url: "https://services7.arcgis.com/nZ2Vb4CUwdo9AIiQ/ArcGIS/rest/services/PhillyRailLines/MapServer"}), 
      mapLayerIndex: {isOverlay: true, index: 0}
    });

The formatId will be the custom formatId you decide for your own imagery provider. You can see how one of our colleagues is implementing a GoogleMaps Provider through this link, and where they set the map layer here (it might be a different approach to setting the map layer, but they still make use of the concept of attaching map layers)

[abdul-lashkarwala]

Hi @hl662 , thanks for your reply. I am new to iTwin.JS, can you share a working sample that I can refer to integrate basemaps?

[hl662]

Sure! In this sample, is a working example of how to set a viewport display style's backgroundMapBase, to update the terrain being shown. If you navigate to the CarDecorationApi.ts file, at line 125, you'll see the snippet of code where that is performed. This sample is outdated, so that's why you'll see it still being able to use BingMaps - it's using a previous BingMap key created before deprecation.

Since you're new to iTwinJS, the concepts of Widgets and Providers may feel new and quite overwhelming. I recommend going through some of the top learning tutorials here, or you can look through the samples others have created.
Will you be using React to implement your iTwin viewer?

[abdul-lashkarwala]

Thanks for your reply. Yes, I am going to use React for our iTwin viewer.