Optimizations

README.md

@@ -51,6 +51,8 @@ See the [documentation](https://github.com/Azure-Samples/azure-maps-services-ui/
 
 * [Azure Maps Animation module](https://github.com/Azure-Samples/azure-maps-animations)
 * [Azure Maps Geolocation Control module](https://github.com/Azure-Samples/azure-maps-geolocation-control)
+* [Azure Maps Fullscreen Control module](https://github.com/Azure-Samples/azure-maps-fullscreen-control)
+* [Azure Maps Selection Control module](https://github.com/Azure-Samples/azure-maps-selection-control)
 * [Azure Maps Sync Map module](https://github.com/Azure-Samples/azure-maps-sync-maps)
 
 **Additional projects**

src/control/RouteUI/RouteInstructionControl.ts

@@ -82,7 +82,10 @@ export class RouteInstructionControl implements azmaps.Control {
     */
     public setOptions(options: RouteInstructionControlOptions): void {
         if (options) {
-            if (typeof options.containerId !== 'undefined' && this._options.containerId !== options.containerId) {
+            let o = this._options;
+            let no: RouteInstructionControlOptions = {};
+
+            if (typeof options.containerId !== 'undefined' && o.containerId !== options.containerId) {
                 if (this._control) {
                     this._control.remove();
                 }
@@ -91,41 +94,43 @@ export class RouteInstructionControl implements azmaps.Control {
                     this._mapControlConatiner.remove();
                 }
 
-                this._options.containerId = options.containerId;
+                no.containerId = options.containerId;
             }
 
-            if (typeof options.displayDisclaimer === 'boolean' && this._options.displayDisclaimer !== options.displayDisclaimer) {
-                this._options.displayDisclaimer = options.displayDisclaimer;
+            if (typeof options.displayDisclaimer === 'boolean') {
+                no.displayDisclaimer = options.displayDisclaimer;
             }
 
-            /* if (typeof options.displayRouteSelector === 'boolean' && this._options.displayRouteSelector !== options.displayRouteSelector) {
-                 this._options.displayRouteSelector = options.displayRouteSelector;
+            /* if (typeof options.displayRouteSelector === 'boolean' {
+                 no.displayRouteSelector = options.displayRouteSelector;
              }*/
 
-            if (typeof options.routeIndex === 'boolean' && this._options.routeIndex !== options.routeIndex) {
-                this._options.routeIndex = options.routeIndex;
+            if (typeof options.routeIndex === 'boolean') {
+                no.routeIndex = options.routeIndex;
             }
 
-            if (typeof options.groupInstructions === 'boolean' && this._options.groupInstructions !== options.groupInstructions) {
-                this._options.groupInstructions = options.groupInstructions;
+            if (typeof options.groupInstructions === 'boolean') {
+                no.groupInstructions = options.groupInstructions;
             }
 
-            if (options.waypointTextFormat && this._options.waypointTextFormat !== options.waypointTextFormat) {
-                this._options.waypointTextFormat = options.waypointTextFormat;
+            if (options.waypointTextFormat) {
+                no.waypointTextFormat = options.waypointTextFormat;
             }
 
-            if (options.language && this._options.language !== options.language) {
-                this._options.language = options.language;
+            if (options.language && o.language !== options.language) {
+                no.language = options.language;
                 this._resources = null;
             }
 
-            if (options.style && this._options.style !== options.style) {
-                this._options.style = options.style;
+            if (options.style) {
+                no.style = options.style;
             }
 
-            if (options.units && this._options.units !== options.units) {
-                this._options.units = options.units;
+            if (options.units) {
+                no.units = options.units;
             }
+
+            Object.assign(this._options, no);
         }
 
         this._renderRoute();
@@ -152,23 +157,25 @@ export class RouteInstructionControl implements azmaps.Control {
      */
     public onAdd(map: azmaps.Map, options?: azmaps.ControlOptions): HTMLElement {
         this._map = map;
+        let mcc = this._mapControlConatiner;
 
         //Remove the control from the map incase it has been added previously.
-        if (this._mapControlConatiner) {
-            this._mapControlConatiner.remove();
+        if (mcc) {
+            mcc.remove();
         }
 
         if (!this._options.containerId) {
             //Create the container for display on the map. 
 
-            this._mapControlConatiner = document.createElement('div');
-            this._mapControlConatiner.classList.add('route-instruction-map-container');
-            // this._mapControlConatiner.setAttribute('aria-label', this._resource.title);
-            this._mapControlConatiner.style.flexDirection = 'column';
+            let mcc = document.createElement('div');
+            mcc.classList.add('route-instruction-map-container');
+            // mcc.setAttribute('aria-label', this._resource.title);
+            mcc.style.flexDirection = 'column';
+            this._mapControlConatiner = mcc;
         }
 
         this._renderRoute();
-        return this._mapControlConatiner;
+        return mcc;
     }
 
     /**
@@ -407,7 +414,7 @@ export class RouteInstructionControl implements azmaps.Control {
      * @returns A boolean indicating if the instruction is for a waypoint.
      */
     private _isWaypoint(instruction: azmapsrest.Models.RouteResultInstruction): boolean {
-        var m: string = instruction.maneuver;
+        let m: string = instruction.maneuver;
         switch (m) {
             case 'ARRIVE':
             case 'ARRIVE_LEFT':
@@ -440,13 +447,13 @@ export class RouteInstructionControl implements azmaps.Control {
         waypointText: string): HTMLDivElement {
 
         //Item container
-        var insItemElm = document.createElement('div');
+        let insItemElm = document.createElement('div');
         insItemElm.classList.add('route-instruction');
 
         //Maneuver icon
-        var icon = EmbeddedIcons.getRouteInstructionIcon(instruction);
+        let icon = EmbeddedIcons.getRouteInstructionIcon(instruction);
 
-        var maneuver = document.createElement('div');
+        let maneuver = document.createElement('div');
         maneuver.classList.add('route-maneuver');
         maneuver.setAttribute('aria-hidden', 'true');
 
@@ -460,17 +467,17 @@ export class RouteInstructionControl implements azmaps.Control {
         insItemElm.appendChild(maneuver);
 
         if (waypointText) {
-            var waypointTextElm = document.createElement('span');
+            let waypointTextElm = document.createElement('span');
             waypointTextElm.classList.add('route-maneuver-text');
             waypointTextElm.innerText = waypointText;
             insItemElm.appendChild(waypointTextElm);
         }
 
         //Message
-        var insText = document.createElement('div');
+        let insText = document.createElement('div');
         insText.classList.add('route-instruction-msg');
 
-        var msg = instruction.message;
+        let msg = instruction.message;
 
 
         msg = this._styleTaggedMessage(msg);
@@ -480,7 +487,7 @@ export class RouteInstructionControl implements azmaps.Control {
 
         //Distance
         if (distance > 0) {
-            var disText = document.createElement('div');
+            let disText = document.createElement('div');
             disText.classList.add('route-instruction-distance');
             disText.innerHTML = Utils.formatDistance(distance, distanceUnits);
 

src/control/RouteUI/RouteUIManager.ts

@@ -95,12 +95,12 @@ export class RouteUIManager {
                 //Generate instructions.
                 if (route.guidance && route.guidance.instructions) {
 
-                    var traveledDistance = 0;
-                    var traveledTime = 0;
+                    let traveledDistance = 0;
+                    let traveledTime = 0;
 
-                    for (var i = 0, len = route.guidance.instructions.length; i < len; i++) {
-                        var ins = route.guidance.instructions[i];
-                        var insElm = document.createElement('div');
+                    for (let i = 0, len = route.guidance.instructions.length; i < len; i++) {
+                        let ins = route.guidance.instructions[i];
+                        let insElm = document.createElement('div');
                         insElm.className = 'azure-maps-route-instruction';
                         insElm.innerHTML = ins.message;
 
@@ -125,7 +125,7 @@ export class RouteUIManager {
     };
 
     private _directionsError = (error?: any) => {
-        var msg: string;
+        let msg: string;
 
         if (error.msg) {
 

src/helpers/EmbeddedIcons.ts

@@ -9,9 +9,9 @@ export class EmbeddedIcons {
      * @returns An SVG icon for a route instruction.
      */
     public static getRouteInstructionIcon(instruction?: azmapsrest.Models.RouteResultInstruction): string {
-        var ds = instruction.drivingSide || 'RIGHT';
-        var m: string = instruction.maneuver;
-        var icon: string;
+        let ds = instruction.drivingSide || 'RIGHT';
+        let m: string = instruction.maneuver;
+        let icon: string;
 
         if (m) {
 

src/helpers/Localization.ts

@@ -34,8 +34,12 @@ export class Localization {
             language = Utils.detectLanguage(language);
         }
 
-        if (language && language.indexOf('-') > 0) {
-            language = language.substring(0, language.indexOf('-')).toLowerCase();
+        if (language) {
+            language = language.toLowerCase();
+
+            if (language.indexOf('-') > 0) {
+                language = language.substring(0, language.indexOf('-'));
+            }
         }
 
         if (!language || this._supportedLanguages.indexOf(language) === -1) {
@@ -46,11 +50,11 @@ export class Localization {
             return this._resxCache[language];
         }
 
-        var res = await fetch(`${this._localizationFolderPath}/${language}/resource.json`);
+        let res = await fetch(`${this._localizationFolderPath}/${language}/resource.json`);
 
         if (res.ok) {
-            var r = res.json();
-            var r2 = await r;
+            let r = res.json();
+            let r2 = await r;
 
             this._resxCache[language] = r2;
 

src/helpers/Utils.ts

@@ -1,6 +1,6 @@
 import * as azmaps from "azure-maps-control";
 import * as azmapsrest from "azure-maps-rest";
-import { Localization, Resource } from './Localization';
+import { Resource } from './Localization';
 
 export class Utils {
 
@@ -16,17 +16,17 @@ export class Utils {
      */
     public static highContrastStyle(): 'none' | 'light' | 'dark' {
         //Try and detect CSS media high contrast styles.
-        var elms = document.getElementsByClassName('atlas-accessibility-placeholder');
+        let elms = document.getElementsByClassName('atlas-accessibility-placeholder');
 
         if (!elms || elms.length === 0) {
-            var elm = document.createElement('div');
+            let elm = document.createElement('div');
             elm.classList.add('atlas-accessibility-placeholder');
             document.body.appendChild(elm);
             elms = document.getElementsByClassName('atlas-accessibility-placeholder');
         }
 
         if (elms && elms.length > 0) {
-            var zIndex = window.getComputedStyle(elms[0], null).getPropertyValue('z-index');
+            let zIndex = window.getComputedStyle(elms[0], null).getPropertyValue('z-index');
 
             switch (zIndex) {
                 case '2':   //Black on white
@@ -38,7 +38,7 @@ export class Utils {
         }
 
         //Detect Chrome extension for high contrast. The extention adds an 'hc' attribute to the HTML tag of the page.
-        var htmlTag = document.getElementsByTagName('html');
+        let htmlTag = document.getElementsByTagName('html');
         if (htmlTag[0].getAttribute('hc') !== null) {
             return 'dark';
         }
@@ -114,7 +114,7 @@ export class Utils {
      */
     public static formatDistance(distanceMeters: number, units: 'metric' | 'imperial', resources?: Resource): string {
 
-        var res: any = resources || {
+        let res: any = resources || {
             ft: "ft",
             km: "km",
             mi: "mi",
@@ -124,7 +124,7 @@ export class Utils {
         if (units === 'imperial') {  //miles/feet
             //Use miles for distances of 0.1 miles or more, use feet for shorter distances.
             if (distanceMeters >= 160.9344) { //use miles
-                var miles = distanceMeters * 0.00062137;
+                let miles = distanceMeters * 0.00062137;
 
                 //Show one decimal is less than 100 miles.
                 if (miles < 100) {
@@ -140,7 +140,7 @@ export class Utils {
         } else {    //KM/meters
             //Use km for distances of 0.1 km or more, use feet for shorter distances.
             if (distanceMeters >= 100) { //use miles
-                var km = distanceMeters * 0.001;
+                let km = distanceMeters * 0.001;
 
                 //Show one decimal if less than 100 km.
                 if (km < 100) {
@@ -162,10 +162,10 @@ export class Utils {
      * @returns A formatted timespan string. 
      */
     public static formatTimespan(timeInSeconds: number, resources?: Resource): string {
-        var t = '';
-        var days: number = 0, hours: number = 0, mins: number = 0;
+        let t = '';
+        let days: number = 0, hours: number = 0, mins: number = 0;
 
-        var res: any = resources || {
+        let res: any = resources || {
             min: "min",
             mins: "mins",
             hr: "hr",
@@ -229,11 +229,11 @@ export class Utils {
      * @returns A formatted arrival time.
      */
     public static formatArriveDateTime(dateString: string): string {
-        var d1: any = new Date();
-        var d2: any = new Date(Date.parse(dateString));
-        var diff = d2 - d1;
+        let d1: any = new Date();
+        let d2: any = new Date(Date.parse(dateString));
+        let diff = d2 - d1;
 
-        var days = Math.ceil(diff / (1000 * 60 * 60 * 24));
+        let days = Math.ceil(diff / (1000 * 60 * 60 * 24));
 
         //Check to see if the arrival time is today. 
         if (days === 0 || (days === 1 && d1.getDate() === d2.getDate())) {
@@ -249,7 +249,7 @@ export class Utils {
 
     /** Retrieves the executing file/URL path of the azure-maps-services-ui library. */
     public static getExecutingPath(): string {
-        var p = this._currentScriptPath;
+        let p = this._currentScriptPath;
 
         if (p.indexOf('/') > -1) {
             return p.substring(0, p.lastIndexOf("/"));
@@ -263,7 +263,7 @@ export class Utils {
     /////////////////////////////
 
     private static _getBrowserLocale(): string {
-        var locale = (navigator.languages && navigator.languages[0]) || navigator.language || navigator['userLanguage'];
+        let locale = (navigator.languages && navigator.languages[0]) || navigator.language || navigator['userLanguage'];
 
         if (locale) {
             //Handle complex locales by removing extra dashed info and making it look like a language code.