@syncfusion/ej2-angular-maps 19.4.56 → 19.4.57-105067

package/schematics/generators/maps-annotation/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html

@@ -1,15 +1,15 @@
-<div class="control-section">
-    <div align='center'>
-        <ejs-maps id='container' style="display:block;" [zoomSettings]='zoomSettings' [annotations]='annotations' [layers]='layers'
-            (load)="load($event)">
-        </ejs-maps>
-    </div>
-</div>
-<svg height="150" width="400">
-    <defs>
-        <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
-            <stop offset="0%" style="stop-color:#C5494B;stop-opacity:1"></stop>
-            <stop offset="100%" style="stop-color:#4C134F;stop-opacity:1"></stop>
-        </linearGradient>
-    </defs>
+<div class="control-section">
+    <div align='center'>
+        <ejs-maps id='container' style="display:block;" [zoomSettings]='zoomSettings' [annotations]='annotations' [layers]='layers'
+            (load)="load($event)">
+        </ejs-maps>
+    </div>
+</div>
+<svg height="150" width="400">
+    <defs>
+        <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" style="stop-color:#C5494B;stop-opacity:1"></stop>
+            <stop offset="100%" style="stop-color:#4C134F;stop-opacity:1"></stop>
+        </linearGradient>
+    </defs>
 </svg>

package/schematics/generators/maps-annotation/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts

@@ -1,58 +1,58 @@
-/* eslint-disable */
-import { Component, ViewEncapsulation } from '@angular/core';
-import { MapsTheme, Maps, Annotations, Marker, ILoadEventArgs, MapAjax } from '@syncfusion/ej2-angular-maps';
-import {africa_continent} from './assets/africa-continent';
-Maps.Inject(Annotations, Marker);
-
-/**
- * Sample for Accumulation Distribution
- */
-@Component({
-    selector: '<%=dasherize(selector)%>',
-    templateUrl: '<%=dasherize(name)%>.component.html',
-    styleUrls: ['<%=dasherize(name)%>.component.css'],
-    encapsulation: ViewEncapsulation.None
-})
-export class <%= classify(name) %>Component {
-    public zoomSettings: object= {
-        enable: false
-    };
-    public load = (args: ILoadEventArgs) => { 
-        let theme: string = location.hash.split('/')[1]; 
-        theme = theme ? theme : 'Material'; 
-        args.maps.theme = <MapsTheme>(theme.charAt(0).toUpperCase() + theme.slice(1));
-    }
-    public annotations: object[] = [
-        {
-            content: '<div id="maps-annotation"> <div id="annotation"> <div> <p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p> </div> <hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD"> <div> <ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400"> <li>Africa is the second largest and second most populated continent in the world.</li> <li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li> <li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li> </ul> </div> </div> </div>',
-            x: '0%', y: '70%'
-        }, {
-            content: '<div id="compass-maps"> <img src="src/app/maps/images/compass.svg" width="75px" height="75px"> </div>',
-            x: '85%', y: '5%'
-        }
-    ];
-    public layers: object[] = [
-            {
-                shapeDataPath: 'name',
-                shapePropertyPath: 'name',
-                shapeData: africa_continent,
-                shapeSettings: {
-                    fill: 'url(#grad1)'
-                },
-                markerSettings: [
-                    {
-                        visible: true,
-                        template: '<h3 style="color:white">{{:name}}</h3>',
-                        animationDuration: 1,
-                        dataSource: [{
-                            name: 'Africa', latitude: 13.97274101999902, longitude: 20.390625
-                        }]
-                    }
-                ]
-            }
-        ];
-    constructor() {
-        //code
-    };
-
+/* eslint-disable */
+import { Component, ViewEncapsulation } from '@angular/core';
+import { MapsTheme, Maps, Annotations, Marker, ILoadEventArgs, MapAjax } from '@syncfusion/ej2-angular-maps';
+import {africa_continent} from './assets/africa-continent';
+Maps.Inject(Annotations, Marker);
+
+/**
+ * Sample for Accumulation Distribution
+ */
+@Component({
+    selector: '<%=dasherize(selector)%>',
+    templateUrl: '<%=dasherize(name)%>.component.html',
+    styleUrls: ['<%=dasherize(name)%>.component.css'],
+    encapsulation: ViewEncapsulation.None
+})
+export class <%= classify(name) %>Component {
+    public zoomSettings: object= {
+        enable: false
+    };
+    public load = (args: ILoadEventArgs) => { 
+        let theme: string = location.hash.split('/')[1]; 
+        theme = theme ? theme : 'Material'; 
+        args.maps.theme = <MapsTheme>(theme.charAt(0).toUpperCase() + theme.slice(1));
+    }
+    public annotations: object[] = [
+        {
+            content: '<div id="maps-annotation"> <div id="annotation"> <div> <p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p> </div> <hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD"> <div> <ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400"> <li>Africa is the second largest and second most populated continent in the world.</li> <li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li> <li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li> </ul> </div> </div> </div>',
+            x: '0%', y: '70%'
+        }, {
+            content: '<div id="compass-maps"> <img src="src/app/maps/images/compass.svg" width="75px" height="75px"> </div>',
+            x: '85%', y: '5%'
+        }
+    ];
+    public layers: object[] = [
+            {
+                shapeDataPath: 'name',
+                shapePropertyPath: 'name',
+                shapeData: africa_continent,
+                shapeSettings: {
+                    fill: 'url(#grad1)'
+                },
+                markerSettings: [
+                    {
+                        visible: true,
+                        template: '<h3 style="color:white">{{:name}}</h3>',
+                        animationDuration: 1,
+                        dataSource: [{
+                            name: 'Africa', latitude: 13.97274101999902, longitude: 20.390625
+                        }]
+                    }
+                ]
+            }
+        ];
+    constructor() {
+        //code
+    };
+
 }

package/schematics/generators/maps-annotation/schema.json

@@ -1,6 +1,6 @@
 {
   "$schema": "http://json-schema.org/schema",
-  "id": "maps-annotation",
+  "$id": "EJ2SchemaTemplateID",
   "title": "maps-annotation",
   "type": "object",
   "properties": {
@@ -120,5 +120,6 @@
   },
   "required": [
     "name"
-  ]
+  ],
+  "id": "maps-annotation"
 }

package/schematics/generators/maps-bubble/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.css

@@ -1,3 +1,3 @@
-.control-section {
-    min-height: 450px;
-}
+.control-section {
+    min-height: 450px;
+}

package/schematics/generators/maps-bubble/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html

@@ -1,10 +1,10 @@
-<div class="control-section">
-    <div align='center'>
-        <ejs-maps id='container' style="display:block;" format='n' useGroupingSeparator=t rue [zoomSettings]='zoomSettings' [layers]='layers'
-            [titleSettings]="titleSettings" (bubbleRendering)="bubbleRendering($event)" (load)="load($event)"
-            format='n' useGroupingSeparator="true">
-        </ejs-maps>
-    </div>
-</div>
-    
-
+<div class="control-section">
+    <div align='center'>
+        <ejs-maps id='container' style="display:block;" format='n' useGroupingSeparator=t rue [zoomSettings]='zoomSettings' [layers]='layers'
+            [titleSettings]="titleSettings" (bubbleRendering)="bubbleRendering($event)" (load)="load($event)"
+            format='n' useGroupingSeparator="true">
+        </ejs-maps>
+    </div>
+</div>
+    
+

package/schematics/generators/maps-bubble/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts

@@ -1,72 +1,72 @@
-/* eslint-disable */
-import { Component, ViewEncapsulation } from '@angular/core';
-import { MapsTheme, Maps, Bubble, IBubbleRenderingEventArgs, MapsTooltip, ILoadEventArgs, } from '@syncfusion/ej2-angular-maps';
-import {  internetUsers } from './assets/population-data';
-import { world_map } from './assets/world-map';
-
-Maps.Inject(Bubble, MapsTooltip); 
-
-export interface Data { value?: number; }
-
-@Component({
-    selector: '<%=dasherize(selector)%>',
-    templateUrl: '<%=dasherize(name)%>.component.html',
-    styleUrls: ['<%=dasherize(name)%>.component.css'], 
-    encapsulation: ViewEncapsulation.None
-})
-export class <%= classify(name) %>Component {
-    public load = (args: ILoadEventArgs) => { 
-        let theme: string = location.hash.split('/')[1]; 
-        theme = theme ? theme : 'Material'; 
-        args.maps.theme = <MapsTheme>(theme.charAt(0).toUpperCase() + theme.slice(1));
-    }
-    public zoomSettings: object= {
-        enable: true,
-        horizontalAlignment: 'Near',
-        toolBarOrientation: 'Vertical',
-        pinchZooming: true
-    }
-    
-    public titleSettings : object =  {
-        text: 'Top 30 countries with highest Internet users',
-        titleStyle: {
-            size: '16px'
-        }
-    }
-
-    public layers: object[] =  [
-        {
-            shapeDataPath: 'name',
-            shapePropertyPath: 'name',
-            shapeData:  world_map,
-            shapeSettings: {
-                fill: '#E5E5E5'
-            },
-            bubbleSettings: [
-                {
-                    visible: true,
-                    valuePath: 'value',
-                    colorValuePath: 'color',
-                    minRadius: 3,
-                    maxRadius: 70,
-                    opacity: 0.8,
-                    dataSource: internetUsers,
-                    tooltipSettings: {
-                        visible: true,
-                        valuePath: 'population',
-                        format: 'Country: ${name} <br> Population: ${population}'
-                    },
-                }
-            ]
-        }
-    ]
-
-    public bubbleRendering = (args: IBubbleRenderingEventArgs) => { 
-        args.radius = (args.data as Data).value; 
-    }
-
-    constructor() {
-        //code
-    };
-
+/* eslint-disable */
+import { Component, ViewEncapsulation } from '@angular/core';
+import { MapsTheme, Maps, Bubble, IBubbleRenderingEventArgs, MapsTooltip, ILoadEventArgs, } from '@syncfusion/ej2-angular-maps';
+import {  internetUsers } from './assets/population-data';
+import { world_map } from './assets/world-map';
+
+Maps.Inject(Bubble, MapsTooltip); 
+
+export interface Data { value?: number; }
+
+@Component({
+    selector: '<%=dasherize(selector)%>',
+    templateUrl: '<%=dasherize(name)%>.component.html',
+    styleUrls: ['<%=dasherize(name)%>.component.css'], 
+    encapsulation: ViewEncapsulation.None
+})
+export class <%= classify(name) %>Component {
+    public load = (args: ILoadEventArgs) => { 
+        let theme: string = location.hash.split('/')[1]; 
+        theme = theme ? theme : 'Material'; 
+        args.maps.theme = <MapsTheme>(theme.charAt(0).toUpperCase() + theme.slice(1));
+    }
+    public zoomSettings: object= {
+        enable: true,
+        horizontalAlignment: 'Near',
+        toolBarOrientation: 'Vertical',
+        pinchZooming: true
+    }
+    
+    public titleSettings : object =  {
+        text: 'Top 30 countries with highest Internet users',
+        titleStyle: {
+            size: '16px'
+        }
+    }
+
+    public layers: object[] =  [
+        {
+            shapeDataPath: 'name',
+            shapePropertyPath: 'name',
+            shapeData:  world_map,
+            shapeSettings: {
+                fill: '#E5E5E5'
+            },
+            bubbleSettings: [
+                {
+                    visible: true,
+                    valuePath: 'value',
+                    colorValuePath: 'color',
+                    minRadius: 3,
+                    maxRadius: 70,
+                    opacity: 0.8,
+                    dataSource: internetUsers,
+                    tooltipSettings: {
+                        visible: true,
+                        valuePath: 'population',
+                        format: 'Country: ${name} <br> Population: ${population}'
+                    },
+                }
+            ]
+        }
+    ]
+
+    public bubbleRendering = (args: IBubbleRenderingEventArgs) => { 
+        args.radius = (args.data as Data).value; 
+    }
+
+    constructor() {
+        //code
+    };
+
 }

package/schematics/generators/maps-bubble/samples/__path__/__name@dasherize@if-flat__/assets/population-data.ts

@@ -1,46 +1,46 @@
-/* eslint-disable */
-export let internetUsers: any = [
-    { 'rank': 1, 'name': 'China', 'value': bubblesize(746662194), 'color': '#7F38A0', 'population': 746662194},
-    { 'rank': 2, 'name': 'India', 'value': bubblesize(391292635), 'color': '#7F38A0 ', 'population': 391292635 },
-    { 'rank': 3, 'name': 'United States', 'value': bubblesize(245436423), 'color': '#99295D ','population': 245436423 },
-    { 'rank': 4, 'name': 'Brazil', 'value': bubblesize(123927230), 'color': '#364A98','population': 123927230 },
-    { 'rank': 5, 'name': 'Japan', 'value': bubblesize(117528631), 'color': '#7F38A0 ','population': 117528631 },
-    { 'rank': 6, 'name': 'Russia', 'value': bubblesize(110003284), 'color': '#2E769F','population': 110003284 },
-    { 'rank': 7, 'name': 'Mexico', 'value': bubblesize(75937568), 'color': '#99295D ','population': 75937568 },
-    { 'rank': 8, 'name': 'Germany', 'value': bubblesize(73436503), 'color': '#2E769F', 'population': 73436503 },
-    { 'rank': 9, 'name': 'Indonesia', 'value': bubblesize(66244991), 'color': '#7F38A0 ', 'population': 66244991 },
-    { 'rank': 10, 'name': 'United Kingdom', 'value': bubblesize(62354410), 'color': '#2E769F', 'population': 62354410 },
-    { 'rank': 11, 'name': 'Philippines', 'value': bubblesize(57342723), 'color': '#7F38A0 ', 'population': 57342723 },
-    { 'rank': 12, 'name': 'France', 'value': bubblesize(55413854), 'color': '#2E769F', 'population': 55413854 },
-    { 'rank': 13, 'name': 'Nigeria', 'value': bubblesize(47743541), 'color': '#816F28', 'population': 47743541 },
-    { 'rank': 14, 'name': 'South Africa', 'value': bubblesize(47094267), 'color': '#816F28', 'population': 47094267 },
-    { 'rank': 15, 'name': 'Turkey', 'value': bubblesize(46395500), 'color': '#2E769F', 'population': 46395500 },
-    { 'rank': 16, 'name': 'Vietnam', 'value': bubblesize(43974618), 'color': '#7F38A0 ', 'population': 43974618 },
-    { 'rank': 17, 'name': 'Iran', 'value': bubblesize(42731675), 'color': '#7F38A0 ', 'population': 42731675 },
-    { 'rank': 18, 'name': 'Egypt', 'value': bubblesize(37519531), 'color': '#816F28', 'population': 37519531 },
-    { 'rank': 19, 'name': 'Spain', 'value': bubblesize(37337607), 'color': '#2E769F', 'population': 37337607 },
-    { 'rank': 20, 'name': 'Italy', 'value': bubblesize(36442438), 'color': '#2E769F', 'population': 36442438 },
-    { 'rank': 21, 'name': 'Thailand', 'value': bubblesize(32710169), 'color': '#7F38A0 ', 'population': 32710169 },
-    { 'rank': 22, 'name': 'Canada', 'value': bubblesize(32602776), 'color': '#99295D ', 'population': 32602776 },
-    { 'rank': 23, 'name': 'Argentina', 'value': bubblesize(30758972), 'color': '#364A98', 'population': 30758972 },
-    { 'rank': 24, 'name': 'South Africa', 'value': bubblesize(30248355), 'color': '#816F28', 'population': 30248355 },
-    { 'rank': 25, 'name': 'Pakistan', 'value': bubblesize(29965859), 'color': '#7F38A0 ', 'population': 29965859 },
-    { 'rank': 26, 'name': 'Bangladesh', 'value': bubblesize(29738660), 'color': '#7F38A0 ', 'population': 29738660 },
-    { 'rank': 27, 'name': 'Colombia', 'value': bubblesize(28287098), 'color': '#364A98', 'population': 28287098 },
-    { 'rank': 28, 'name': 'Poland', 'value': bubblesize(28018492), 'color': '#2E769F', 'population': 28018492 },
-    { 'rank': 29, 'name': 'Malaysia', 'value': bubblesize(24572446), 'color': '#7F38A0 ', 'population': 24572446 },
-    { 'rank': 30, 'name': 'Saudi Arabia', 'value': bubblesize(23803319), 'color': '#7F38A0 ', 'population': 23803319 },
-
-];
-function bubblesize(value: number): number  {
-    let max: number = 1347565324;
-    let min: number = 324366;
-    let maxBox: number = 70 * 70 * 2 * Math.PI;
-    let minBox: number = 3 * 3 * 2 * Math.PI;
-    let box: number = (value - min) / (max - min) * (maxBox - minBox) + minBox;
-    if (box < minBox) {
-        box = minBox;
-    }
-    return Math.sqrt(box / (Math.PI * 2)) / 2;
-}
+/* eslint-disable */
+export let internetUsers: any = [
+    { 'rank': 1, 'name': 'China', 'value': bubblesize(746662194), 'color': '#7F38A0', 'population': 746662194},
+    { 'rank': 2, 'name': 'India', 'value': bubblesize(391292635), 'color': '#7F38A0 ', 'population': 391292635 },
+    { 'rank': 3, 'name': 'United States', 'value': bubblesize(245436423), 'color': '#99295D ','population': 245436423 },
+    { 'rank': 4, 'name': 'Brazil', 'value': bubblesize(123927230), 'color': '#364A98','population': 123927230 },
+    { 'rank': 5, 'name': 'Japan', 'value': bubblesize(117528631), 'color': '#7F38A0 ','population': 117528631 },
+    { 'rank': 6, 'name': 'Russia', 'value': bubblesize(110003284), 'color': '#2E769F','population': 110003284 },
+    { 'rank': 7, 'name': 'Mexico', 'value': bubblesize(75937568), 'color': '#99295D ','population': 75937568 },
+    { 'rank': 8, 'name': 'Germany', 'value': bubblesize(73436503), 'color': '#2E769F', 'population': 73436503 },
+    { 'rank': 9, 'name': 'Indonesia', 'value': bubblesize(66244991), 'color': '#7F38A0 ', 'population': 66244991 },
+    { 'rank': 10, 'name': 'United Kingdom', 'value': bubblesize(62354410), 'color': '#2E769F', 'population': 62354410 },
+    { 'rank': 11, 'name': 'Philippines', 'value': bubblesize(57342723), 'color': '#7F38A0 ', 'population': 57342723 },
+    { 'rank': 12, 'name': 'France', 'value': bubblesize(55413854), 'color': '#2E769F', 'population': 55413854 },
+    { 'rank': 13, 'name': 'Nigeria', 'value': bubblesize(47743541), 'color': '#816F28', 'population': 47743541 },
+    { 'rank': 14, 'name': 'South Africa', 'value': bubblesize(47094267), 'color': '#816F28', 'population': 47094267 },
+    { 'rank': 15, 'name': 'Turkey', 'value': bubblesize(46395500), 'color': '#2E769F', 'population': 46395500 },
+    { 'rank': 16, 'name': 'Vietnam', 'value': bubblesize(43974618), 'color': '#7F38A0 ', 'population': 43974618 },
+    { 'rank': 17, 'name': 'Iran', 'value': bubblesize(42731675), 'color': '#7F38A0 ', 'population': 42731675 },
+    { 'rank': 18, 'name': 'Egypt', 'value': bubblesize(37519531), 'color': '#816F28', 'population': 37519531 },
+    { 'rank': 19, 'name': 'Spain', 'value': bubblesize(37337607), 'color': '#2E769F', 'population': 37337607 },
+    { 'rank': 20, 'name': 'Italy', 'value': bubblesize(36442438), 'color': '#2E769F', 'population': 36442438 },
+    { 'rank': 21, 'name': 'Thailand', 'value': bubblesize(32710169), 'color': '#7F38A0 ', 'population': 32710169 },
+    { 'rank': 22, 'name': 'Canada', 'value': bubblesize(32602776), 'color': '#99295D ', 'population': 32602776 },
+    { 'rank': 23, 'name': 'Argentina', 'value': bubblesize(30758972), 'color': '#364A98', 'population': 30758972 },
+    { 'rank': 24, 'name': 'South Africa', 'value': bubblesize(30248355), 'color': '#816F28', 'population': 30248355 },
+    { 'rank': 25, 'name': 'Pakistan', 'value': bubblesize(29965859), 'color': '#7F38A0 ', 'population': 29965859 },
+    { 'rank': 26, 'name': 'Bangladesh', 'value': bubblesize(29738660), 'color': '#7F38A0 ', 'population': 29738660 },
+    { 'rank': 27, 'name': 'Colombia', 'value': bubblesize(28287098), 'color': '#364A98', 'population': 28287098 },
+    { 'rank': 28, 'name': 'Poland', 'value': bubblesize(28018492), 'color': '#2E769F', 'population': 28018492 },
+    { 'rank': 29, 'name': 'Malaysia', 'value': bubblesize(24572446), 'color': '#7F38A0 ', 'population': 24572446 },
+    { 'rank': 30, 'name': 'Saudi Arabia', 'value': bubblesize(23803319), 'color': '#7F38A0 ', 'population': 23803319 },
+
+];
+function bubblesize(value: number): number  {
+    let max: number = 1347565324;
+    let min: number = 324366;
+    let maxBox: number = 70 * 70 * 2 * Math.PI;
+    let minBox: number = 3 * 3 * 2 * Math.PI;
+    let box: number = (value - min) / (max - min) * (maxBox - minBox) + minBox;
+    if (box < minBox) {
+        box = minBox;
+    }
+    return Math.sqrt(box / (Math.PI * 2)) / 2;
+}