Use legends in azure map contol older version

Satyam Chauhan 547

Hi,

I am using azure maps control version - 2.1.8 and I want to show a customized legend for my map. I have seen the example provided in azure map samples - https://samples.azuremaps.com/?search=legend&sample= which uses - new atlas.control.LegendControl, but on using it, I get the following error - Property 'LegendControl' does not exist on type 'typeof control'.

Please share some examples how can I use this in older version of azure-map-control package. Due to restrictions I cannot upgrade the package version.

1 answer

rbrundritt 18,591 Microsoft Employee

That legend control was created for version 2 so it should work. Note that it is not a built-in part of the Azure Maps control, but an open-source module you can host and load into your app. Be sure to download the source files from the dist folder from here: https://github.com/Azure-Samples/azure-maps-layer-legend Then host these as js/css files in your app, load them into your page after the script tag for the Azure Maps control, and it will add itself to the atlas namespace.

Satyam Chauhan 547

Hello @rbrundritt , Thanks for the answer.

I am trying to implement the solution as suggested by you, but I am not able to get it working.
Sharing the details I tried :

We are using the npm packages and not the CDNs.

The package.json file


"dependencies": {
	"azure-maps-control": "^2.1.8",
	"azure-maps-drawing-tools": "^1.0.0",
	"azure-maps-indoor": "^0.1.6",
	"azure-maps-rest": "^2.0.5"
}

The Azure map component HTML :

<div class="azure-map-div" #azureMapDiv>
  <div #mapDiv id="azure-map">
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
  </div>
</div>

Azure map component ts :

import { AuthenticationType } from 'azure-maps-control';
import { indoor } from 'azure-maps-indoor';
import * as atlas from 'azure-maps-control';

import * as control from './azure-maps-layer-legend.js';


@Component({
  selector: 'app-azure-map',
  templateUrl: './azure-map.component.html',
  styleUrls: ['./azure-map.component.css'],
})

export class AzureMapComponent{
	control :any;
	legend : any;

	constructor(){
		this.control = control.control;
	}
	
	AzureMapComponent.map = new atlas.Map('azure-map', {
      bearing: -10.5,
      center: environment.centerCoordinates,
      zoom: environment.zoomLevel,
      maxZoom: 23.9,
      style: 'road',
      view: 'Auto',
      showLogo: false,
      showFeedbackLink: false,
      progressiveLoading: true,
      disableTelemetry: true,
      fadeDuration: 0,
      authOptions: window.location.hostname == "localhost" ?
          {
            //use subscription key authentication when code is run locally
            authType: AuthenticationType.subscriptionKey,
            subscriptionKey: environment.azMapSubscriptionKey,
          } :
          {
            //Use Azure Active Directory authentication when deployed.
            authType: AuthenticationType.anonymous,
            clientId: environment.azureMapClientId, //Your Azure Maps client id 		for accessing your Azure Maps account.
            getToken: function (resolve, reject, map) {
              //URL to your authentication service that retrieves an Azure Active Directory Token.
              let tokenServiceUrl = `${environment.apiURL}/Authentication/GetAccessTokenForMaps`;
              fetch(tokenServiceUrl).then(r => r.text()).then((token: any) => {
                resolve(JSON.parse(token)['value'])});
            }
          }
    });
	
	AzureMapComponent.map.events.add('ready', () => {
		
		this.legend = new this.control.LegendControl({
        //Global title to display for the legend.
        title: 'My Legend',

        //Hide the button to collapse the legend.
        showToggle: false,
        
        //All legend cards to display within the legend control.
        legends: [
           {
                type: 'category',
                subtitle: 'Category',
                layout: 'column',
                itemLayout: 'row',
                footer: 'A category legend that uses a combination of shapes and icons.',
                strokeWidth: 2,
                items: [
                    {
                        color: 'DodgerBlue',
                        label: 'label1',

                        //Url to an image.
                        shape: '/images/icons/campfire.png',
                        alt: 'Campfire'
                    }, {
                        color: 'Yellow',
                        label: 'label2',
                        shape: 'square'
                    }, {
                        color: 'Orange',
                        label: 'Ricky',
                        shape: 'line'
                    }, {
                        color: 'Red',
                        label: 'is',
                        shape: 'circle'
                    }, {
                        color: 'purple',
                        label: 'awesome!',
                        shape: 'triangle'
                    }
                ]
            }
        ]
    });
	});
}

The above component gives error - Error: export 'control' (imported as 'control') was not found in './azure-maps-layer-legend.js' (possible exports: atlas)

Please help how to fix it

rbrundritt 18,591 Reputation points Microsoft Employee

2024-06-04T18:05:56.76+00:00

I'm not really sure here. It looks like you are using a framework of some sort, possibly react. I see you have this.control.LegendControl which I suspect wouldn't work as this likely points to the AzureMapComponent instance. I'm also pretty sure import * as control from './azure-maps-layer-legend.js'; will not work as expected as the legend control attaches itself to the atlas.control namespace. Possibly try import * from './azure-maps-layer-legend.js'; then atlas.control.LegendControl
rbrundritt 18,591 Reputation points Microsoft Employee

2024-06-04T18:07:30.5866667+00:00

If that doesn't work, provide details on what kind of legend you are trying to create. It's fairly easy to create a simple legend in HTML/JavaScript, this module is more so for data driven and complex legend scenarios.

Share via

Use legends in azure map contol older version

1 answer

Your answer