Getting an Azure Maps subscription key

Before connecting to Azure Maps, you must first set up authentication. LuciadRIA supports the Shared Key authentication method. It requires you to pass in a subscription key in requests to the Azure Maps REST API. The Azure Maps portal allows you to create an Azure Maps account and one or more Azure Maps subscription keys.

To get started with Azure Maps, you can request a key to try it for free:

  1. Go to https://www.microsoft.com/en-us/maps/azure/get-started.

  2. Click "Start for free".

  3. Click "Try Azure for free".

  4. Sign in with your Windows Live ID, or create one.

  5. In the Azure Maps portal, click "Azure Maps Accounts". If you don’t see it, you can use the search field to find it.

  6. Click "Create".

  7. Fill in the Instance details, such as name and region.

  8. Click on "Review + create".

  9. In the account page, click "View authentication". This shows a primary and secondary key that can be used for Shared Key authentication.

Visualizing Azure Maps data

Visualizing Azure Maps data requires two steps:

  1. Create an AzureMapsTileSetModel with your subscription key and an optional set of map requirements.

  2. Use a RasterTileSetLayer to visualize the model.

Program: Creating an Azure Maps raster layer (from toolbox/ria/loaders/AzureMapsDataLoader.js) 
const tileSetModelOptions: AzureMapsTileSetModelCreateOptions = {
  subscriptionKey,
  tileSetId
};
const model = await createAzureMapsTileSetModel(tileSetModelOptions);
model.getLogo = function(): string {
  return AzureLogoUrl;
};
let isBaseLayer = AzureMapsDataLoader.isBaseLayer(tileSetId);
const rasterTileSetLayer = new RasterTileSetLayer(model, {
  label,
  layerType: isBaseLayer ? LayerType.BASE : LayerType.STATIC
});
if (map) {
  rasterTileSetLayer.detailFactor = map.displayScale;
}
return rasterTileSetLayer;

To comply with the terms of use for Azure Maps data, you must show the attribution information of the map data.

The LuciadRIA sample code contains an Attribution overlay component to handle this. This component ensures that the correct attribution is retrieved depending on what part of the data you are visualizing.

Refer to the sample samples/common/ui/overlay/Attribution.tsx for more details.

Program: Including Azure Maps attribution information using the Attribution sample component (from samples/common/ui/overlay/Attribution.tsx) 
export const Attribution = ({map, separator = " • ", staticAttributions}: Props) => {

  const [layerAttributions, setLayerAttributions] = useState<LayerAttribution[]>([]);

  useEffect(() => {
    const attributionProvider = new TileSetAttributionProvider(map);

    const layerAttributionListener = attributionProvider.on("LayerAttributionsChanged", (layerAttributions) => {
      setLayerAttributions(layerAttributions);
    });

    setLayerAttributions(attributionProvider.getLayerAttributions())

    return () => {
      layerAttributionListener.remove();
    }
  }, [map]);

  // From top to bottom, we show all the attribution strings followed by all the attribution logos.
  return (
      <div className="attribution">
        <div className="attribution-strings">
          {layerAttributions.map(attr =>
              <div key={attr.layer.id}>
                {attr.attributionStrings.join(separator)}
              </div>
          )}

          {staticAttributions}

          <div style={{margin: `6px 0`}}/>

          <div className="attribution-logos">
            {layerAttributions.flatMap(attr =>
                (attr.attributionLogos as string[]).map(
                    logo => <img className="attributionLogo" alt={logo} key={logo} src={logo}/>
                )
            )}
          </div>
        </div>
      </div>
  )
}