HelpBot Assistant

How can I help you?

Populate data in Angular Maps component

6 Feb 202623 minutes to read

Geometry types

GeoJSON data contains geometry objects with properties such as geometry types and coordinates. The geometry types are the values present in the geometry objects of the GeoJSON data that specify the type of shape to be rendered, as well as the coordinates that help to draw the shape’s boundary line. The supportive geometry types are:

Shapes Supported
Polygon Yes
MultiPolygon Yes
LineString Yes
MultiLineString Yes
Point Yes
MultiPoint Yes
GeometryCollection Yes

Shape data

The shape data collection describes geographical shape information that is available in GeoJSON format. The Map shapes are rendered using this data. Custom shapes such as seat selection in a bus, seat selection in a cricket stadium, and other useful information can also be added as shapeData in the layer of the Maps.

export let usMap = // Paste all the content copied from the JSON file.

Data source

The dataSource property is used to represent statistical data in the Maps component, and it accepts a collection of values as input. For example, a list of objects can be provided as input to the data source. This data source is used to color the map, display data labels, and display tooltips, among other things.

The data source is populated with JSON data relative to shape data and stored as a JSON object. In the following example, populationData can be used as a data source in Maps.

export let populationData: object[] = [
    {
        'code': 'AF',
        'value': 53,
        'name': 'Afghanistan',
        'population': 29863010,
        'density': 119
    },
    {
        'code': 'AL',
        'value': 117,
        'name': 'Albania',
        'population': 3195000,
        'density': 111
    },
    {
        'code': 'DZ',
        'value': 15,
        'name': 'Algeria',
        'population': 34895000,
        'density': 15
    },
    {
        'code': 'AO',
        'value': 15,
        'name': 'Angola',
        'population': 18498000,
        'density': 15
    },
    {
        'code': 'AR',
        'value': 15,
        'name': 'Argentina',
        'population': 40091359,
        'density': 14
    },
    {
        'code': 'AM',
        'value': 109,
        'name': 'Armenia',
        'population': 3230100,
        'density': 108
    }
];

Data binding

The following properties in the layers are used for binding data in the Maps component. These two properties work together to establish the relationship between shape data and the data source.

  • shapePropertyPath
  • shapeDataPath

shapePropertyPath

The shapePropertyPath property is used to refer the field name in the shapeData property of shape layers to identify the shape. When the values of shapeDataPath property from the dataSource property and shapePropertyPath property from the shapeData property match, then the associated object from the data source is bound to the corresponding shape.

world-map.ts file contains following data and its field name value is used to map the corresponding shape with the provided data source.

export let world_map: object = {
    "type": "Feature",
    "properties": {
        "admin": "Afghanistan",
        "name": "Afghanistan",
        "continent": "Asia"
    },
    "geometry": { "type": "Polygon", "coordinates": [[[61.21081709172573, https://ej2.syncfusion.com/angular/documentation. },
...

shapeDataPath

The shapeDataPath property is similar to the shapePropertyPath property, but it refers to the field name in the dataSource property. For example, populationData contains the code, value, name, population, and density fields. Here, the name field is set to the shapeDataPath to map the corresponding value of the field name in shape data.

In the following example, both name fields contain the same value Afghanistan. This value is matched in both the shape data and data source, so the details associated with Afghanistan are mapped to the corresponding shape and used to color the shape, display data labels, display tooltips, and more.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps'




import { Component, OnInit } from '@angular/core';
import { world_map } from './world-map';
@Component({
imports: [
             MapsModule
        ],
standalone: true,
    selector: 'app-container',
    template:
    `<ejs-maps id='rn-container' >
    <e-layers>
    <e-layer  [shapeData]= 'shapeData'  [shapePropertyPath]= 'shapePropertyPath' [shapeDataPath]= 'shapeDataPath' [dataSource] = 'dataSource' [shapeSettings]='shapeSettings'></e-layer>
    </e-layers>
    </ejs-maps>`
})
export class AppComponent implements OnInit {
    public dataSource?: object[];
    public shapeData?: object;
    public shapePropertyPath?: string;
    public shapeDataPath?: string;
    public shapeSettings?: object;
    ngOnInit(): void {
        this.dataSource = [  
            {
                'code': 'AF',
                'value': 53,
                'name': 'Afghanistan',
                'population': 29863010,
                'density': 119,
                'color': '#DEEBAE'
            },
            {
                'code': 'AL',
                'value': 117,
                'name': 'Albania',
                'population': 3195000,
                'density': 111,
                'color': '#A4D6AD'
            },
            {
                'code': 'DZ',
                'value': 15,
                'name': 'Algeria',
                'population': 34895000,
                'density': 15,
                'color': '#37AFAB'
            },
            {
                'code': 'AO',
                'value': 15,
                'name': 'Angola',
                'population': 18498000,
                'density': 15,
                'color': '#547C84'
            },
            {
                'code': 'AR',
                'value': 15,
                'name': 'Argentina',
                'population': 40091359,
                'density': 14,
                'color': '#CEBF93'
            },
            {
                'code': 'AM',
                'value': 109,
                'name': 'Armenia',
                'population': 3230100,
                'density': 108,
                'color': '#a69d70'
            }
        ]
        this.shapeData = world_map;
        this.shapePropertyPath = 'name';
        this.shapeDataPath= 'name';
        this.shapeSettings = {
            colorValuePath: 'color',
            fill: '#E5E5E5'
        }
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Binding complex data source

Data from a data source can be bound to the Maps in two different ways.

  1. Bind the field name directly to the properties such as shapeDataPath, colorValuePath, valuePath, and shapeValuePath.

  2. Bind the field name as data.field to the properties such as shapeDataPath, colorValuePath, valuePath, and shapeValuePath.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps'
import { MarkerService, MapsTooltipService, BubbleService } from '@syncfusion/ej2-angular-maps'




import { Component, OnInit } from '@angular/core';
import { world_map } from './world-map';

@Component({
imports: [
         MapsModule
    ],

providers: [MarkerService, MapsTooltipService, BubbleService],
standalone: true,
    selector: 'app-container',
    template:
    `<ejs-maps id='rn-container' >
    <e-layers>
    <e-layer  [shapeData]= 'shapeData'  [shapePropertyPath]= 'shapePropertyPath' [shapeDataPath]= 'shapeDataPath'
	[shapeSettings]='shapeSettings' [dataSource] = 'dataSource' [tooltipSettings]='tooltipSettings'
	[bubbleSettings]='bubbleSettings' [markerSettings]='markerSettings'></e-layer>
    </e-layers>
    </ejs-maps>`
})
export class AppComponent implements OnInit {
    public dataSource?: object[];
    public shapeData?: object;
    public shapePropertyPath?: string;
    public shapeDataPath?: string;
    public shapeSettings?: object;
    public tooltipSettings?: object;
    public bubbleSettings?: object[];
    public markerSettings?: object[];
    ngOnInit(): void {
        this.dataSource = [
			{ "Continent": "North America", 'color': '#71B081',
            data: { "continent": "North America", 'color': '#71B081' }
            },
            { "Continent": "South America", 'color': '#5A9A77',
            data: { "continent": "South America", 'color': '#5A9A77' }
            },
            { "Continent": "Africa", 'color': '#498770',
            data: { "continent": "Africa", 'color': '#498770' }
            },
            { "Continent": "Europe", 'color': '#39776C',
            data: { "continent": "Europe", 'color': '#39776C' }
            },
            { "Continent": "Asia", 'color': '#266665',
            data: { "continent": "Asia", 'color': '#266665' }
            },
            { "Continent": "Australia", 'color': '#124F5E',
            data: { "continent": "Australia", 'color': '#124F5E' }
            }
		]
        this.shapeData = world_map;
        this.shapePropertyPath = 'continent';
        this.shapeDataPath= 'data.continent';
	    this.shapeSettings = {
	       colorValuePath : 'data.color'
	    };
	    this.tooltipSettings = {
	        visible: true,
            valuePath: 'data.continent'
	    };
	    this.bubbleSettings =  [
            {
                visible: true,
                valuePath: 'data.value',
                colorValuePath: 'data.color',
                animationDuration: 0,
                minRadius: 20,
                maxRadius: 90,
                opacity: 0.8,
                dataSource: [
                    { 'name': 'India', 'value': 18.89685398845257, 'population': 391292635,
                    data: { 'color': 'red', 'population': 391292635, 'value': 189685398845257 }
                    }
                ],
                tooltipSettings: {
                    visible: true,
                    valuePath: 'data.population',
                    template:"<div>${data.population}</div>"
                }
            }
        ];
	    this.markerSettings = [
            {
                visible: true,
                dataSource: [
                    { latitude: 37.6276571, longitude: -122.4276688, name: 'San Bruno',
                    data: { x: 37.6276571, y: -122.4276688, name: 'San Bruno', shape: 'Pentagon',
                    color: 'red', imageUrl: 'images/ballon.png' }
                    },
                    { latitude: 33.5302186, longitude: -117.7418381, name: 'Laguna Niguel',
                    data: { x: 33.5302186, y: -117.7418381, name: 'Laguna Niguel', color: 'blue',
                    shape: 'Pentagon', imageUrl: 'images/ballon.png' }
                    }
                ],
                shapeValuePath: "data.shape",
                colorValuePath: "data.color",
                height: 20,
                width: 20,
                offset: {
                    y: -10,
                    x: 0
                },
                longitudeValuePath: "data.y",
                latitudeValuePath: "data.x",
                tooltipSettings: {
                    visible: true,
                    valuePath: 'data.name',
                    format: "${data.name}: ${data.x} : ${data.y}"
                },
                animationDuration: 0
            }
        ]
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));