OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add syncfusion/angular-ui-components-skills --skill syncfusion-angular-maps
Implement Syncfusion Angular Maps component for geographical data visualization. Use this when users need to display maps, visualize geographical data with markers and bubbles, integrate map providers like Bing or OpenStreetMap, render GeoJSON shapes, or create choropleth maps with color-coded regions. Supports interactive features like zooming, panning, layers, legends, tooltips, color mapping, and accessibility.
npx skills add syncfusion/angular-ui-components-skills --skill syncfusion-angular-maps
Comprehensive guide for implementing the Syncfusion Angular Maps component to visualize geographical data with interactive features, multiple layers, and rich customization options.
Use this skill when you need to:
The Syncfusion Angular Maps component (@syncfusion/ej2-angular-maps) is a powerful data visualization tool that renders geographical data using Scalable Vector Graphics (SVG). It supports:
📄 Read: references/getting-started.md
When implementing Maps for the first time or setting up a new Angular project:
📄 Read: references/layers-and-data.md
For working with map layers, shape data, and data source binding:
📄 Read: references/markers.md
For adding and customizing location markers:
📄 Read: references/data-visualization.md
For visualizing data with bubbles, colors, labels, and legends:
📄 Read: references/user-interactions.md
For implementing interactive map behaviors:
📄 Read: references/map-providers.md
For integrating external map services:
📄 Read: references/polygon-shapes.md
For drawing and customizing polygons:
📄 Read: references/customization.md
For theming and visual customization:
📄 Read: references/localization.md
For globalizing map content:
📄 Read: references/advanced-features.md
For advanced capabilities and APIs:
📄 Read: references/accessibility.md
For accessible map implementations:
shapeData - GeoJSON data for shapesdataSource - External data to bindshapeDataPath - Field in dataSource identifying shapeshapePropertyPath - Field in shapeData matching dataSourceshapeSettings - Visual styling for shapestype - Layer type ('Layer' or 'SubLayer')fill - Shape fill colorborder - Border configuration (color, width, opacity)colorValuePath - Data field for color mappingcolorMapping - Array of color ranges or valuesautofill - Auto-generate colors for shapesvisible - Show/hide markersdataSource - Marker data with latitude/longitudeshape - Marker shape typeheight / width - Marker dimensionstemplate - Custom HTML templatetooltipSettings - Marker tooltip configurationenable - Enable/disable zoomingzoomFactor - Initial zoom levelmaxZoom / minZoom - Zoom limitstoolbars - Zoom control buttonsmouseWheelZoom - Enable mouse wheel zoomingpinchZooming - Enable touch pinch zoomvisible - Show/hide legendposition - Legend placement (Top, Bottom, Left, Right)mode - Legend mode ('Default', 'Interactive')type - Legend type ('Layers', 'Bubbles', 'Markers')Create choropleth maps showing sales data across countries or states with color-coded regions, interactive tooltips, and legends. Useful for business intelligence dashboards.
Display store locations with custom marker icons, clustering for dense areas, and tooltips showing store details. Integrate with map providers for street-level detail.
Show election results across districts/states using color mapping, with drilldown capability to explore detailed regional data.
Plot vehicle, shipment, or asset locations with animated markers, navigation lines showing routes, and real-time data updates.
Visualize temperature, rainfall, air quality, or other environmental metrics using color gradients and data labels on geographic regions.
Display case counts, vaccination rates, or infection rates by region using bubble sizes and color intensity.
Show flight paths between cities using navigation lines, with markers for airports and interactive selection.
Use custom GeoJSON shapes for non-geographic visualizations like seat selection in theaters, stadiums, or transportation.
The Maps component uses feature-specific services that must be injected:
📘 Full API Reference Guide - Comprehensive documentation of all Maps APIs
Each reference guide includes relevant API tables:
Package: @syncfusion/ej2-angular-maps
Documentation: Syncfusion Angular Maps Documentation
Demos: Syncfusion Angular Maps Demos
import { Component } from '@angular/core';
import { MapsModule } from '@syncfusion/ej2-angular-maps';
import { world_map } from './world-map';
@Component({
selector: 'app-root',
standalone: true,
imports: [MapsModule],
template: `
<ejs-maps id='maps-container'>
<e-layers>
<e-layer
[shapeData]='shapeData'
[dataSource]='dataSource'
shapeDataPath='Country'
shapePropertyPath='name'
[shapeSettings]='shapeSettings'>
</e-layer>
</e-layers>
</ejs-maps>
`
})
export class AppComponent {
public shapeData: object = world_map;
public dataSource: object[] = [
{ Country: 'United States', Population: 331002651, Code: 'US' },
{ Country: 'India', Population: 1380004385, Code: 'IN' },
{ Country: 'China', Population: 1439323776, Code: 'CN' }
];
public shapeSettings: object = {
colorValuePath: 'Population',
colorMapping: [
{ from: 0, to: 100000000, color: '#C5E8B7' },
{ from: 100000001, to: 500000000, color: '#5BC85A' },
{ from: 500000001, to: 2000000000, color: '#238B45' }
]
};
}import { Component } from '@angular/core';
import { MapsModule, MarkerService, MapsTooltipService } from '@syncfusion/ej2-angular-maps';
import { world_map } from './world-map';
@Component({
selector: 'app-root',
standalone: true,
imports: [MapsModule],
providers: [MarkerService, MapsTooltipService],
template: `
<ejs-maps id='maps-container'>
<e-layers>
<e-layer
[shapeData]='shapeData'
[markerSettings]='markerSettings'>
</e-layer>
</e-layers>
</ejs-maps>
`
})
export class AppComponent {
public shapeData: object = world_map;
public markerSettings: object[] = [{
visible: true,
dataSource: [
{ latitude: 40.7128, longitude: -74.0060, name: 'New York' },
{ latitude: 51.5074, longitude: -0.1278, name: 'London' },
{ latitude: 35.6762, longitude: 139.6503, name: 'Tokyo' }
],
shape: 'Circle',
fill: '#FF6347',
height: 15,
width: 15,
tooltipSettings: {
visible: true,
valuePath: 'name'
}
}];
}import { Component } from '@angular/core';
import { MapsModule, ZoomService, LegendService } from '@syncfusion/ej2-angular-maps';
import { world_map } from './world-map';
@Component({
selector: 'app-root',
standalone: true,
imports: [MapsModule],
providers: [ZoomService, LegendService],
template: `
<ejs-maps
id='maps-container'
[zoomSettings]='zoomSettings'
[legendSettings]='legendSettings'>
<e-layers>
<e-layer
[shapeData]='shapeData'
[dataSource]='dataSource'
shapeDataPath='Country'
shapePropertyPath='name'
[shapeSettings]='shapeSettings'>
</e-layer>
</e-layers>
</ejs-maps>
`
})
export class AppComponent {
public shapeData: object = world_map;
public dataSource: object[] = [
{ Country: 'United States', Category: 'High' },
{ Country: 'Canada', Category: 'Medium' },
{ Country: 'Mexico', Category: 'Low' }
];
public shapeSettings: object = {
colorValuePath: 'Category',
colorMapping: [
{ value: 'High', color: '#E74C3C' },
{ value: 'Medium', color: '#F39C12' },
{ value: 'Low', color: '#27AE60' }
]
};
public zoomSettings: object = {
enable: true,
toolbars: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset']
};
public legendSettings: object = {
visible: true,
position: 'Bottom'
};
}import { Component } from '@angular/core';
import { MapsModule } from '@syncfusion/ej2-angular-maps';
import { world_map } from './world-map';
import { usa_map } from './usa-map';
import { california } from './california';
@Component({
selector: 'app-root',
standalone: true,
imports: [MapsModule],
template: `
<ejs-maps id='maps-container'>
<e-layers>
<!-- Base layer -->
<e-layer
[shapeData]='usaMap'
[shapeSettings]='baseShapeSettings'>
</e-layer>
<!-- Sublayer highlighting California -->
<e-layer
type='SubLayer'
[shapeData]='californiaMap'
[shapeSettings]='sublayerShapeSettings'>
</e-layer>
</e-layers>
</ejs-maps>
`
})
export class AppComponent {
public usaMap: object = usa_map;
public californiaMap: object = california;
public baseShapeSettings: object = {
fill: '#E5E5E5',
border: { color: '#000000', width: 0.5 }
};
public sublayerShapeSettings: object = {
fill: '#FFD700',
border: { color: '#FF6347', width: 2 }
};
}import {
MapsModule,
MarkerService, // For markers
BubbleService, // For bubbles
DataLabelService, // For data labels
LegendService, // For legends
MapsTooltipService, // For tooltips
ZoomService, // For zoom and pan
SelectionService, // For selection
HighlightService, // For highlighting
NavigationLineService, // For navigation lines
AnnotationsService, // For annotations
PolygonService // For polygons
} from '@syncfusion/ej2-angular-maps';
@Component({
providers: [
MarkerService,
LegendService,
MapsTooltipService,
ZoomService
// Add only the services you need
]
})