@syncfusion/ej2-maps 20.3.56 → 20.4.38

package/src/maps/layers/marker.js

@@ -84,7 +84,8 @@ var Marker = /** @class */ (function () {
                     nullCount += (!isNaN(lat) && !isNaN(lng)) ? 0 : 1;
                     markerTemplateCount += (eventArgs.cancel) ? 1 : 0;
                     markerCount += (eventArgs.cancel) ? 1 : 0;
-                    maps.markerNullCount = (isNullOrUndefined(lng) || isNullOrUndefined(lat)) ? maps.markerNullCount + 1 : maps.markerNullCount;
+                    maps.markerNullCount = (isNullOrUndefined(lng) || isNullOrUndefined(lat)) ?
+                        maps.markerNullCount + 1 : maps.markerNullCount;
                     var markerDataLength = markerData.length - maps.markerNullCount;
                     if (_this.markerSVGObject.childElementCount === (markerDataLength - markerTemplateCount - nullCount) && (type !== 'Template')) {
                         layerElement.appendChild(_this.markerSVGObject);
@@ -142,129 +143,137 @@ var Marker = /** @class */ (function () {
     };
     /**
      * To calculate center position and factor value dynamically
+     *
+     * @param {LayerSettings[]} layersCollection - Specifies the layer settings instance.
+     * @returns {void}
      */
     Marker.prototype.calculateZoomCenterPositionAndFactor = function (layersCollection) {
-        if (this.maps.zoomSettings.shouldZoomInitially && this.maps.markerModule) {
-            var minLong_1;
-            var maxLat_1;
-            var minLat_1;
-            var maxLong_1;
-            var latZoom = void 0;
-            var lngZoom = void 0;
-            var result = void 0;
-            var zoomLevel = void 0;
-            var centerLat = void 0;
-            var centerLong = void 0;
-            var maxZoomFact = this.maps.zoomSettings.maxZoom;
-            var mapWidth = this.maps.mapAreaRect.width;
-            var mapHeight = this.maps.mapAreaRect.height;
-            this.maps.markerZoomedState = this.maps.markerZoomedState ? this.maps.markerZoomedState : isNullOrUndefined(this.maps.markerZoomFactor) ?
-                !this.maps.markerZoomedState : this.maps.markerZoomFactor > 1 ? this.maps.markerZoomedState : !this.maps.markerZoomedState;
-            this.maps.defaultState = this.maps.markerZoomedState ? !this.maps.markerZoomedState : this.maps.defaultState;
-            Array.prototype.forEach.call(layersCollection, function (currentLayer, layerIndex) {
-                var isMarker = currentLayer.markerSettings.length !== 0;
-                if (isMarker) {
-                    Array.prototype.forEach.call(currentLayer.markerSettings, function (markerSetting, markerIndex) {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        var markerData = markerSetting.dataSource;
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        Array.prototype.forEach.call(markerData, function (data, dataIndex) {
-                            var latitude = !isNullOrUndefined(data['latitude']) ? parseFloat(data['latitude']) :
-                                !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
-                            var longitude = !isNullOrUndefined(data['longitude']) ? parseFloat(data['longitude']) :
-                                !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
-                            minLong_1 = isNullOrUndefined(minLong_1) && dataIndex === 0 ?
-                                longitude : minLong_1;
-                            maxLat_1 = isNullOrUndefined(maxLat_1) && dataIndex === 0 ?
-                                latitude : maxLat_1;
-                            minLat_1 = isNullOrUndefined(minLat_1) && dataIndex === 0 ?
-                                latitude : minLat_1;
-                            maxLong_1 = isNullOrUndefined(maxLong_1) && dataIndex === 0 ?
-                                longitude : maxLong_1;
-                            if (minLong_1 > longitude) {
-                                minLong_1 = longitude;
-                            }
-                            if (minLat_1 > latitude) {
-                                minLat_1 = latitude;
-                            }
-                            if (maxLong_1 < longitude) {
-                                maxLong_1 = longitude;
-                            }
-                            if (maxLat_1 < latitude) {
-                                maxLat_1 = latitude;
-                            }
+        if (!isNullOrUndefined(this.maps)) {
+            if (this.maps.zoomSettings.shouldZoomInitially && this.maps.markerModule) {
+                var minLong_1;
+                var maxLat_1;
+                var minLat_1;
+                var maxLong_1;
+                var latZoom = void 0;
+                var lngZoom = void 0;
+                var result = void 0;
+                var zoomLevel = void 0;
+                var centerLat = void 0;
+                var centerLong = void 0;
+                var maxZoomFact = this.maps.zoomSettings.maxZoom;
+                var mapWidth = this.maps.mapAreaRect.width;
+                var mapHeight = this.maps.mapAreaRect.height;
+                this.maps.markerZoomedState = this.maps.markerZoomedState ? this.maps.markerZoomedState :
+                    isNullOrUndefined(this.maps.markerZoomFactor) ? !this.maps.markerZoomedState :
+                        this.maps.markerZoomFactor > 1 ? this.maps.markerZoomedState : !this.maps.markerZoomedState;
+                this.maps.defaultState = this.maps.markerZoomedState ? !this.maps.markerZoomedState : this.maps.defaultState;
+                Array.prototype.forEach.call(layersCollection, function (currentLayer) {
+                    var isMarker = currentLayer.markerSettings.length !== 0;
+                    if (isMarker) {
+                        Array.prototype.forEach.call(currentLayer.markerSettings, function (markerSetting) {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            var markerData = markerSetting.dataSource;
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            Array.prototype.forEach.call(markerData, function (data, dataIndex) {
+                                var latitude = !isNullOrUndefined(data['latitude']) ? parseFloat(data['latitude']) :
+                                    !isNullOrUndefined(data['Latitude']) ? parseFloat(data['Latitude']) : null;
+                                var longitude = !isNullOrUndefined(data['longitude']) ? parseFloat(data['longitude']) :
+                                    !isNullOrUndefined(data['Longitude']) ? parseFloat(data['Longitude']) : null;
+                                minLong_1 = isNullOrUndefined(minLong_1) && dataIndex === 0 ?
+                                    longitude : minLong_1;
+                                maxLat_1 = isNullOrUndefined(maxLat_1) && dataIndex === 0 ?
+                                    latitude : maxLat_1;
+                                minLat_1 = isNullOrUndefined(minLat_1) && dataIndex === 0 ?
+                                    latitude : minLat_1;
+                                maxLong_1 = isNullOrUndefined(maxLong_1) && dataIndex === 0 ?
+                                    longitude : maxLong_1;
+                                if (minLong_1 > longitude) {
+                                    minLong_1 = longitude;
+                                }
+                                if (minLat_1 > latitude) {
+                                    minLat_1 = latitude;
+                                }
+                                if (maxLong_1 < longitude) {
+                                    maxLong_1 = longitude;
+                                }
+                                if (maxLat_1 < latitude) {
+                                    maxLat_1 = latitude;
+                                }
+                            });
                         });
-                    });
-                }
-            });
-            if (!isNullOrUndefined(minLat_1) && !isNullOrUndefined(minLong_1) &&
-                !isNullOrUndefined(maxLong_1) && !isNullOrUndefined(maxLat_1)) {
-                // To find the center position
-                centerLat = (minLat_1 + maxLat_1) / 2;
-                centerLong = (minLong_1 + maxLong_1) / 2;
-                this.maps.markerCenterLatitude = centerLat;
-                this.maps.markerCenterLongitude = centerLong;
-                if (isNullOrUndefined(this.maps.markerZoomCenterPoint) || this.maps.markerZoomedState) {
-                    this.maps.markerZoomCenterPoint = {
-                        latitude: centerLat,
-                        longitude: centerLong
-                    };
-                }
-                var markerFactor = void 0;
-                if (this.maps.isTileMap || this.maps.baseMapRectBounds['min']['x'] === 0) {
-                    zoomLevel = calculateZoomLevel(minLat_1, maxLat_1, minLong_1, maxLong_1, mapWidth, mapHeight, this.maps);
-                    if (this.maps.isTileMap) {
-                        markerFactor = isNullOrUndefined(this.maps.markerZoomFactor) ?
-                            zoomLevel : isNullOrUndefined(this.maps.mapScaleValue) ?
-                            zoomLevel : this.maps.mapScaleValue > 1 && this.maps.markerZoomFactor !== 1 ?
-                            this.maps.mapScaleValue : zoomLevel;
+                    }
+                });
+                if (!isNullOrUndefined(minLat_1) && !isNullOrUndefined(minLong_1) &&
+                    !isNullOrUndefined(maxLong_1) && !isNullOrUndefined(maxLat_1)) {
+                    // To find the center position
+                    centerLat = (minLat_1 + maxLat_1) / 2;
+                    centerLong = (minLong_1 + maxLong_1) / 2;
+                    this.maps.markerCenterLatitude = centerLat;
+                    this.maps.markerCenterLongitude = centerLong;
+                    if (isNullOrUndefined(this.maps.markerZoomCenterPoint) || this.maps.markerZoomedState) {
+                        this.maps.markerZoomCenterPoint = {
+                            latitude: centerLat,
+                            longitude: centerLong
+                        };
+                    }
+                    var markerFactor = void 0;
+                    if (this.maps.isTileMap || this.maps.baseMapRectBounds['min']['x'] === 0) {
+                        zoomLevel = calculateZoomLevel(minLat_1, maxLat_1, minLong_1, maxLong_1, mapWidth, mapHeight, this.maps);
+                        if (this.maps.isTileMap) {
+                            markerFactor = isNullOrUndefined(this.maps.markerZoomFactor) ?
+                                zoomLevel : isNullOrUndefined(this.maps.mapScaleValue) ?
+                                zoomLevel : this.maps.mapScaleValue > 1 && this.maps.markerZoomFactor !== 1 ?
+                                this.maps.mapScaleValue : zoomLevel;
+                        }
+                        else {
+                            markerFactor = isNullOrUndefined(this.maps.mapScaleValue) ? zoomLevel :
+                                (Math.floor(this.maps.scale) !== 1 &&
+                                    this.maps.mapScaleValue !== zoomLevel)
+                                    &&
+                                        (isNullOrUndefined(this.maps.shouldZoomCurrentFactor))
+                                    ? this.maps.mapScaleValue : zoomLevel;
+                            if (((markerFactor === this.maps.mapScaleValue &&
+                                (this.maps.markerZoomFactor === 1 || this.maps.mapScaleValue === 1))
+                                && (!this.maps.enablePersistence))) {
+                                markerFactor = zoomLevel;
+                            }
+                        }
                     }
                     else {
+                        zoomLevel = this.calculateIndividualLayerMarkerZoomLevel(mapWidth, mapHeight, maxZoomFact);
                         markerFactor = isNullOrUndefined(this.maps.mapScaleValue) ? zoomLevel :
-                            (Math.floor(this.maps.scale) !== 1 &&
-                                this.maps.mapScaleValue !== zoomLevel)
-                                &&
-                                    (isNullOrUndefined(this.maps.shouldZoomCurrentFactor))
+                            (this.maps.mapScaleValue !== zoomLevel)
                                 ? this.maps.mapScaleValue : zoomLevel;
-                        if (((markerFactor === this.maps.mapScaleValue &&
-                            (this.maps.markerZoomFactor === 1 || this.maps.mapScaleValue === 1))
-                            && (!this.maps.enablePersistence))) {
-                            markerFactor = zoomLevel;
-                        }
                     }
+                    this.maps.markerZoomFactor = markerFactor;
                 }
-                else {
-                    zoomLevel = this.calculateIndividualLayerMarkerZoomLevel(mapWidth, mapHeight, maxZoomFact);
-                    markerFactor = isNullOrUndefined(this.maps.mapScaleValue) ? zoomLevel :
-                        (this.maps.mapScaleValue !== zoomLevel)
-                            ? this.maps.mapScaleValue : zoomLevel;
-                }
-                this.maps.markerZoomFactor = markerFactor;
             }
-        }
-        else {
-            this.maps.markerZoomedState = false;
-            if (this.maps.markerZoomFactor > 1) {
-                this.maps.markerCenterLatitude = null;
-                this.maps.markerCenterLongitude = null;
-                this.maps.markerZoomFactor = 1;
-                if (!this.maps.enablePersistence) {
-                    this.maps.mapScaleValue = 1;
+            else {
+                this.maps.markerZoomedState = false;
+                if (this.maps.markerZoomFactor > 1) {
+                    this.maps.markerCenterLatitude = null;
+                    this.maps.markerCenterLongitude = null;
+                    this.maps.markerZoomFactor = 1;
+                    if (!this.maps.enablePersistence) {
+                        this.maps.mapScaleValue = 1;
+                    }
                 }
-            }
-            if (this.maps.isTileMap && !this.maps.enablePersistence
-                && this.maps.mapScaleValue <= 1) {
-                this.maps.tileZoomLevel = this.maps.mapScaleValue === 0 ? (this.maps.isZoomByPosition ? this.maps.tileZoomLevel : 1)
-                    : this.maps.mapScaleValue;
-                if (this.maps.mapScaleValue === 1 && this.maps.markerZoomFactor === 1) {
-                    this.maps.tileTranslatePoint.x = 0;
-                    this.maps.tileTranslatePoint.y = 0;
+                if (this.maps.isTileMap && !this.maps.enablePersistence
+                    && this.maps.mapScaleValue <= 1) {
+                    this.maps.tileZoomLevel = this.maps.mapScaleValue === 0 ? (this.maps.isZoomByPosition ? this.maps.tileZoomLevel : 1)
+                        : this.maps.mapScaleValue;
+                    if (this.maps.mapScaleValue === 1 && this.maps.markerZoomFactor === 1) {
+                        this.maps.tileTranslatePoint.x = 0;
+                        this.maps.tileTranslatePoint.y = 0;
+                    }
                 }
             }
         }
     };
     /**
      * To check and trigger marker click event
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
      */
     Marker.prototype.markerClick = function (e) {
         var target = e.target.id;
@@ -286,6 +295,8 @@ var Marker = /** @class */ (function () {
     };
     /**
      * To check and trigger Cluster click event
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
      */
     Marker.prototype.markerClusterClick = function (e) {
         var target = e.target.id;
@@ -377,6 +388,9 @@ var Marker = /** @class */ (function () {
     };
     /**
      * To check and trigger marker move event
+     *
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
      */
     Marker.prototype.markerMove = function (e) {
         var targetId = e.target.id;
@@ -395,6 +409,9 @@ var Marker = /** @class */ (function () {
     };
     /**
      * To check and trigger cluster move event
+     *
+     * @param {PointerEvent} e - Specifies the pointer event argument.
+     * @returns {void}
      */
     Marker.prototype.markerClusterMouseMove = function (e) {
         var targetId = e.target.id;

package/src/maps/layers/navigation-selected-line.d.ts

@@ -8,6 +8,11 @@ export declare class NavigationLine {
     constructor(maps: Maps);
     /**
      * To render navigation line for maps
+     *
+     * @param {LayerSettings} layer - Specifies the layer instance to which the navigation line is to be rendered.
+     * @param {number} factor - Specifies the current zoom factor of the Maps.
+     * @param {number} layerIndex -Specifies the index of current layer.
+     * @returns {Element} - Returns the navigation line element.
      */
     renderNavigation(layer: LayerSettings, factor: number, layerIndex: number): Element;
     private convertRadius;

package/src/maps/layers/navigation-selected-line.js

@@ -8,123 +8,130 @@ var NavigationLine = /** @class */ (function () {
     function NavigationLine(maps) {
         this.maps = maps;
     }
-    // eslint-disable-next-line valid-jsdoc
     /**
      * To render navigation line for maps
+     *
+     * @param {LayerSettings} layer - Specifies the layer instance to which the navigation line is to be rendered.
+     * @param {number} factor - Specifies the current zoom factor of the Maps.
+     * @param {number} layerIndex -Specifies the index of current layer.
+     * @returns {Element} - Returns the navigation line element.
      */
     NavigationLine.prototype.renderNavigation = function (layer, factor, layerIndex) {
-        var navigationEle;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var navigation = layer.navigationLineSettings;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var longitude;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var point = [];
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var latitude;
-        var visible;
-        var angle;
-        var width;
-        var color;
-        var dashArray;
-        var pathOption;
-        var direction;
-        var showArrow;
-        var arrowColor;
-        var arrowSize;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        var arrowSettings;
-        var arrowPosition;
-        var startArrow;
-        var endArrow;
-        var offSet;
-        var offSetValue;
-        var navigationGroup;
-        var d;
-        var group = (this.maps.renderer.createGroup({
-            id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_line_Group'
-        }));
-        for (var i = 0; i < navigation.length; i++) {
-            latitude = navigation[i]['properties']['latitude'];
-            longitude = navigation[i]['properties']['longitude'];
-            visible = navigation[i]['properties']['visible'];
-            angle = navigation[i]['angle'];
-            width = navigation[i]['width'] || 1;
-            color = navigation[i]['color'];
-            dashArray = navigation[i]['properties']['dashArray'];
-            arrowSettings = navigation[i]['properties']['arrowSettings'];
-            showArrow = (isNullOrUndefined(arrowSettings)) ? false : arrowSettings['properties']['showArrow'];
-            if (longitude['length'] === latitude['length'] && visible) {
-                for (var i_1 = 0; i_1 < longitude['length']; i_1++) {
-                    var location_1 = (this.maps.isTileMap) ? convertTileLatLongToPoint(new Point(longitude[i_1], latitude[i_1]), factor, this.maps.tileTranslatePoint, true) : convertGeoToPoint(latitude[i_1], longitude[i_1], factor, layer, this.maps);
-                    point.push(location_1);
-                }
-            }
-            navigationGroup = (this.maps.renderer.createGroup({
-                id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationGroup' + i + ''
+        var group;
+        if (!isNullOrUndefined(this.maps)) {
+            var navigationEle = void 0;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var navigation = layer.navigationLineSettings;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var longitude = void 0;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var point = [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var latitude = void 0;
+            var visible = void 0;
+            var angle = void 0;
+            var width = void 0;
+            var color = void 0;
+            var dashArray = void 0;
+            var pathOption = void 0;
+            var direction = void 0;
+            var showArrow = void 0;
+            var arrowColor = void 0;
+            var arrowSize = void 0;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var arrowSettings = void 0;
+            var arrowPosition = void 0;
+            var startArrow = void 0;
+            var endArrow = void 0;
+            var offSet = void 0;
+            var offSetValue = void 0;
+            var navigationGroup = void 0;
+            var d = void 0;
+            group = (this.maps.renderer.createGroup({
+                id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_line_Group'
             }));
-            for (var j = 0; j < point['length'] - 1; j++) {
-                angle = (-1 > angle) ? -1 : angle;
-                angle = (1 < angle) ? 1 : angle;
-                var arcId = this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationIndex_' + i + '_Line' + j + '';
-                var radius = this.convertRadius(point[j], point[j + 1]);
-                if (angle <= 1 && angle > 0) {
-                    direction = 0;
-                    if (point[j]['x'] > point[j + 1]['x']) {
-                        direction = 1;
+            for (var i = 0; i < navigation.length; i++) {
+                latitude = navigation[i]['properties']['latitude'];
+                longitude = navigation[i]['properties']['longitude'];
+                visible = navigation[i]['properties']['visible'];
+                angle = navigation[i]['angle'];
+                width = navigation[i]['width'] || 1;
+                color = navigation[i]['color'];
+                dashArray = navigation[i]['properties']['dashArray'];
+                arrowSettings = navigation[i]['properties']['arrowSettings'];
+                showArrow = (isNullOrUndefined(arrowSettings)) ? false : arrowSettings['properties']['showArrow'];
+                if (longitude['length'] === latitude['length'] && visible) {
+                    for (var i_1 = 0; i_1 < longitude['length']; i_1++) {
+                        var location_1 = (this.maps.isTileMap) ? convertTileLatLongToPoint(new Point(longitude[i_1], latitude[i_1]), factor, this.maps.tileTranslatePoint, true) : convertGeoToPoint(latitude[i_1], longitude[i_1], factor, layer, this.maps);
+                        point.push(location_1);
                     }
                 }
-                if (angle >= -1 && angle < 0) {
-                    direction = 1;
-                    if (point[j]['x'] > point[j + 1]['x']) {
+                navigationGroup = (this.maps.renderer.createGroup({
+                    id: this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationGroup' + i + ''
+                }));
+                for (var j = 0; j < point['length'] - 1; j++) {
+                    angle = (-1 > angle) ? -1 : angle;
+                    angle = (1 < angle) ? 1 : angle;
+                    var arcId = this.maps.element.id + '_LayerIndex_' + layerIndex + '_NavigationIndex_' + i + '_Line' + j + '';
+                    var radius = this.convertRadius(point[j], point[j + 1]);
+                    if (angle <= 1 && angle > 0) {
                         direction = 0;
+                        if (point[j]['x'] > point[j + 1]['x']) {
+                            direction = 1;
+                        }
                     }
-                }
-                if (showArrow) {
-                    arrowColor = arrowSettings['properties']['color'];
-                    arrowSize = arrowSettings['properties']['size'];
-                    offSetValue = (arrowSettings['properties']['offSet'] === undefined) ? 0 : arrowSettings['properties']['offSet'];
-                    var divide = (Math.round(arrowSize / 2));
-                    arrowPosition = arrowSettings['properties']['position'];
-                    startArrow = (arrowPosition === 'Start') ? 'url(#triangle' + i + ')' : null;
-                    endArrow = (arrowPosition === 'End') ? 'url(#triangle' + i + ')' : null;
-                    if (offSet !== 0 && angle === 0) {
-                        offSet = (arrowPosition === 'Start') ? offSetValue : -(offSetValue);
+                    if (angle >= -1 && angle < 0) {
+                        direction = 1;
+                        if (point[j]['x'] > point[j + 1]['x']) {
+                            direction = 0;
+                        }
+                    }
+                    if (showArrow) {
+                        arrowColor = arrowSettings['properties']['color'];
+                        arrowSize = arrowSettings['properties']['size'];
+                        offSetValue = (arrowSettings['properties']['offSet'] === undefined) ? 0 : arrowSettings['properties']['offSet'];
+                        var divide = (Math.round(arrowSize / 2));
+                        arrowPosition = arrowSettings['properties']['position'];
+                        startArrow = (arrowPosition === 'Start') ? 'url(#triangle' + i + ')' : null;
+                        endArrow = (arrowPosition === 'End') ? 'url(#triangle' + i + ')' : null;
+                        if (offSet !== 0 && angle === 0) {
+                            offSet = (arrowPosition === 'Start') ? offSetValue : -(offSetValue);
+                        }
+                        offSet = (isNullOrUndefined(offSet)) ? 0 : offSet;
+                        var triId = this.maps.element.id + '_triangle';
+                        var defElement = this.maps.renderer.createDefs();
+                        defElement.innerHTML += '<marker id="' + 'triangle' + i + '"></marker>';
+                        var markerEle = defElement.querySelector('#' + 'triangle' + i);
+                        markerEle.setAttribute('markerWidth', (arrowSize.toString()));
+                        markerEle.setAttribute('markerHeight', (arrowSize.toString()));
+                        markerEle.setAttribute('refX', (divide - offSet).toString());
+                        markerEle.setAttribute('refY', divide.toString());
+                        markerEle.setAttribute('orient', 'auto');
+                        var d2 = 'M 0,0  L 0,' + arrowSize + ' L ' + divide + ', ' + divide + ' Z';
+                        pathOption = new PathOption(triId, arrowColor, width, color, 1, 1, dashArray, d2);
+                        navigationEle = this.maps.renderer.drawPath(pathOption);
+                        markerEle.appendChild(navigationEle);
+                        defElement.appendChild(markerEle);
+                        navigationGroup.appendChild(defElement);
                     }
-                    offSet = (isNullOrUndefined(offSet)) ? 0 : offSet;
-                    var triId = this.maps.element.id + '_triangle';
-                    var defElement = this.maps.renderer.createDefs();
-                    defElement.innerHTML += '<marker id="' + 'triangle' + i + '"></marker>';
-                    var markerEle = defElement.querySelector('#' + 'triangle' + i);
-                    markerEle.setAttribute('markerWidth', (arrowSize.toString()));
-                    markerEle.setAttribute('markerHeight', (arrowSize.toString()));
-                    markerEle.setAttribute('refX', (divide - offSet).toString());
-                    markerEle.setAttribute('refY', divide.toString());
-                    markerEle.setAttribute('orient', 'auto');
-                    var d2 = 'M 0,0  L 0,' + arrowSize + ' L ' + divide + ', ' + divide + ' Z';
-                    pathOption = new PathOption(triId, arrowColor, width, color, 1, 1, dashArray, d2);
+                    angle = Math.abs(angle);
+                    d = (angle === 0) ? 'M ' + point[j]['x'] + ',' + point[j]['y'] + 'L ' + point[j + 1]['x']
+                        + ',' + point[j + 1]['y'] + ' ' :
+                        'M ' + point[j]['x'] + ',' + point[j]['y'] + ' A ' + (radius / 2 + (1 - angle) * radius / (angle * 10)) +
+                            ' ' + (radius / 2 + (1 - angle) * radius / (angle * 10)) + ' ' + 0 + ',' + 0 + ','
+                            + direction + ' , ' + point[j + 1]['x'] + ',' + point[j + 1]['y'] + ' ';
+                    pathOption = new PathOption(arcId, 'none', width, color, 1, 1, dashArray, d);
                     navigationEle = this.maps.renderer.drawPath(pathOption);
-                    markerEle.appendChild(navigationEle);
-                    defElement.appendChild(markerEle);
-                    navigationGroup.appendChild(defElement);
-                }
-                angle = Math.abs(angle);
-                d = (angle === 0) ? 'M ' + point[j]['x'] + ',' + point[j]['y'] + 'L ' + point[j + 1]['x']
-                    + ',' + point[j + 1]['y'] + ' ' :
-                    'M ' + point[j]['x'] + ',' + point[j]['y'] + ' A ' + (radius / 2 + (1 - angle) * radius / (angle * 10)) +
-                        ' ' + (radius / 2 + (1 - angle) * radius / (angle * 10)) + ' ' + 0 + ',' + 0 + ','
-                        + direction + ' , ' + point[j + 1]['x'] + ',' + point[j + 1]['y'] + ' ';
-                pathOption = new PathOption(arcId, 'none', width, color, 1, 1, dashArray, d);
-                navigationEle = this.maps.renderer.drawPath(pathOption);
-                if (!isNullOrUndefined(arrowPosition)) {
-                    var position = (arrowPosition === 'Start') ? navigationEle.setAttribute('marker-start', startArrow)
-                        : navigationEle.setAttribute('marker-end', endArrow);
+                    if (!isNullOrUndefined(arrowPosition)) {
+                        var position = (arrowPosition === 'Start') ? navigationEle.setAttribute('marker-start', startArrow)
+                            : navigationEle.setAttribute('marker-end', endArrow);
+                    }
+                    maintainSelection(this.maps.selectedNavigationElementId, this.maps.navigationSelectionClass, navigationEle, 'navigationlineselectionMapStyle');
+                    navigationGroup.appendChild(navigationEle);
+                    group.appendChild(navigationGroup);
                 }
-                maintainSelection(this.maps.selectedNavigationElementId, this.maps.navigationSelectionClass, navigationEle, 'navigationlineselectionMapStyle');
-                navigationGroup.appendChild(navigationEle);
-                group.appendChild(navigationGroup);
+                point = [];
             }
-            point = [];
         }
         return group;
     };

package/src/maps/maps-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, Ajax } from '@syncfusion/ej2-base';import { EventHandler, Browser, EmitType, isNullOrUndefined, createElement, setValue, extend } from '@syncfusion/ej2-base';import { Event, remove, L10n, Collection, Internationalization, Complex } from '@syncfusion/ej2-base';import { ModuleDeclaration } from '@syncfusion/ej2-base';import { SvgRenderer } from '@syncfusion/ej2-svg-base';import { Size, createSvg, Point, removeElement, triggerShapeEvent, showTooltip, checkShapeDataFields, MapLocation, getMousePosition, calculateSize } from './utils/helper';import { getElement, removeClass, getTranslate, triggerItemSelectionEvent, mergeSeparateCluster, customizeStyle, querySelector } from './utils/helper';import { createStyle } from './utils/helper';import { ZoomSettings, LegendSettings, Tile } from './model/base';import { LayerSettings, TitleSettings, Border, Margin, MapsAreaSettings, Annotation, CenterPosition } from './model/base';import { ZoomSettingsModel, LegendSettingsModel, LayerSettingsModel, BubbleSettingsModel } from './model/base-model';import { MarkerSettingsModel, SelectionSettingsModel , InitialMarkerSelectionSettingsModel} from './model/base-model';import { TitleSettingsModel, BorderModel, MarginModel, CenterPositionModel, InitialShapeSelectionSettingsModel } from './model/base-model';import { MapsAreaSettingsModel, AnnotationModel } from './model/base-model';import { Bubble } from './layers/bubble';import { Legend } from './layers/legend';import { Marker } from './layers/marker';import { Highlight } from './user-interaction/highlight';import { Selection } from './user-interaction/selection';import { MapsTooltip } from './user-interaction/tooltip';import { Zoom } from './user-interaction/zoom';import { load, click, onclick, rightClick, loaded, doubleClick, resize, shapeSelected, itemSelection, zoomIn } from './model/constants';import { ProjectionType, MapsTheme, PanDirection, TooltipGesture } from './utils/enum';import { getThemeStyle, Theme } from './model/theme';import { BingMap } from './layers/bing-map';import { ILoadEventArgs, ILoadedEventArgs, IMouseEventArgs, IResizeEventArgs, ITooltipRenderEventArgs } from './model/interface';import { GeoPosition, ITooltipRenderCompleteEventArgs, ILegendRenderingEventArgs } from './model/interface';import { ILayerRenderingEventArgs, IShapeRenderingEventArgs, IMarkerRenderingEventArgs, IMarkerClickEventArgs } from './model/interface';import { IMarkerMoveEventArgs, ILabelRenderingEventArgs, IBubbleMoveEventArgs, IBubbleClickEventArgs } from './model/interface';import { IMarkerClusterClickEventArgs, IMarkerClusterMoveEventArgs, IMarkerClusterRenderingEventArgs } from './model/interface';import { ISelectionEventArgs, IShapeSelectedEventArgs, IMapPanEventArgs, IMapZoomEventArgs } from './model/interface';import { IBubbleRenderingEventArgs, IAnimationCompleteEventArgs, IPrintEventArgs, IThemeStyle } from './model/interface';import { LayerPanel } from './layers/layer-panel';import { GeoLocation, Rect, RectOption, measureText, getElementByID, MapAjax, processResult, getElementsByClassName } from '../maps/utils/helper';import { findPosition, textTrim, TextOption, renderTextElement, convertGeoToPoint, calculateZoomLevel } from '../maps/utils/helper';import { Annotations } from '../maps/user-interaction/annotation';import { FontModel, DataLabel, MarkerSettings, IAnnotationRenderingEventArgs } from './index';import { NavigationLineSettingsModel, changeBorderWidth } from './index';import { NavigationLine } from './layers/navigation-selected-line';import { DataManager, Query } from '@syncfusion/ej2-data';import { ExportType } from '../maps/utils/enum';import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';import { Print } from './model/print';import { PdfExport } from './model/export-pdf';import { ImageExport } from './model/export-image';
+import { Component, NotifyPropertyChanges, INotifyPropertyChanged, Property, Ajax } from '@syncfusion/ej2-base';import { EventHandler, Browser, EmitType, isNullOrUndefined, createElement, setValue, extend } from '@syncfusion/ej2-base';import { Event, remove, L10n, Collection, Internationalization, Complex } from '@syncfusion/ej2-base';import { ModuleDeclaration } from '@syncfusion/ej2-base';import { SvgRenderer } from '@syncfusion/ej2-svg-base';import { Size, createSvg, Point, removeElement, triggerShapeEvent, showTooltip, checkShapeDataFields, MapLocation, getMousePosition, calculateSize } from './utils/helper';import { getElement, removeClass, getTranslate, triggerItemSelectionEvent, mergeSeparateCluster, customizeStyle, querySelector } from './utils/helper';import { createStyle } from './utils/helper';import { ZoomSettings, LegendSettings } from './model/base';import { LayerSettings, TitleSettings, Border, Margin, MapsAreaSettings, Annotation, CenterPosition } from './model/base';import { ZoomSettingsModel, LegendSettingsModel, LayerSettingsModel, BubbleSettingsModel } from './model/base-model';import { MarkerSettingsModel, SelectionSettingsModel, InitialMarkerSelectionSettingsModel } from './model/base-model';import { TitleSettingsModel, BorderModel, MarginModel, CenterPositionModel, InitialShapeSelectionSettingsModel } from './model/base-model';import { MapsAreaSettingsModel, AnnotationModel } from './model/base-model';import { Bubble } from './layers/bubble';import { Legend } from './layers/legend';import { Marker } from './layers/marker';import { Highlight } from './user-interaction/highlight';import { Selection } from './user-interaction/selection';import { MapsTooltip } from './user-interaction/tooltip';import { Zoom } from './user-interaction/zoom';import { load, click, onclick, rightClick, loaded, doubleClick, resize, shapeSelected, itemSelection, zoomIn } from './model/constants';import { ProjectionType, MapsTheme, PanDirection, TooltipGesture } from './utils/enum';import { getThemeStyle, Theme } from './model/theme';import { ILoadEventArgs, ILoadedEventArgs, IMouseEventArgs, IResizeEventArgs, ITooltipRenderEventArgs } from './model/interface';import { GeoPosition, ITooltipRenderCompleteEventArgs, ILegendRenderingEventArgs } from './model/interface';import { ILayerRenderingEventArgs, IShapeRenderingEventArgs, IMarkerRenderingEventArgs, IMarkerClickEventArgs } from './model/interface';import { IMarkerMoveEventArgs, ILabelRenderingEventArgs, IBubbleMoveEventArgs, IBubbleClickEventArgs } from './model/interface';import { IMarkerClusterClickEventArgs, IMarkerClusterMoveEventArgs, IMarkerClusterRenderingEventArgs } from './model/interface';import { ISelectionEventArgs, IShapeSelectedEventArgs, IMapPanEventArgs, IMapZoomEventArgs } from './model/interface';import { IBubbleRenderingEventArgs, IAnimationCompleteEventArgs, IPrintEventArgs, IThemeStyle } from './model/interface';import { LayerPanel } from './layers/layer-panel';import { GeoLocation, Rect, RectOption, measureText, getElementByID, MapAjax, processResult, getElementsByClassName } from '../maps/utils/helper';import { findPosition, textTrim, TextOption, renderTextElement, calculateZoomLevel } from '../maps/utils/helper';import { Annotations } from '../maps/user-interaction/annotation';import { FontModel, DataLabel, MarkerSettings, IAnnotationRenderingEventArgs } from './index';import { NavigationLineSettingsModel, changeBorderWidth } from './index';import { NavigationLine } from './layers/navigation-selected-line';import { DataManager, Query } from '@syncfusion/ej2-data';import { ExportType } from '../maps/utils/enum';import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';import { Print } from './model/print';import { PdfExport } from './model/export-pdf';import { ImageExport } from './model/export-image';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**