Use legends in azure map contol older version

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

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