syncfusion-aspnetcore-maps

Guide for implementing Syncfusion 3D Chart in ASP.NET Core. Always use this skill when user needs 3D chart functionality, data visualization, series configuration, axes setup, or interactive chart features like tooltips and selection. Covers setup, data binding, chart types, styling, and user interactions.

syncfusion-aspnetcore-accumulation-chart

Implement Syncfusion ASP.NET Core Accumulation Charts for proportional data visualization. Use this when creating pie charts, doughnut charts, pyramid charts, or funnel charts in ASP.NET Core applications. This skill covers chart setup, data binding, legends, tooltips, data labels, grouping, and accessibility features. Suitable for visualizing market share, sales distribution, survey results, and other percentage-based data representations.

syncfusion-aspnetcore-bullet-chart

Guide for implementing Syncfusion Bullet Chart in ASP.NET Core applications. Use this skill when building comparative performance visualizations, KPI dashboards, progress tracking, goal comparison charts, or any scenario requiring actual vs. target value display. Bullet charts effectively compare actual performance against target benchmarks in a compact format—ideal for dashboards, executive summaries, and performance monitoring systems. Trigger when user mentions bullet chart, performance comparison, target visualization, KPI dashboard, progress bars with targets.

syncfusion-aspnetcore-calendars

Comprehensive guide for implementing Syncfusion ASP.NET Core Calendar components including Calendar, DatePicker, DateRangePicker, DateTimePicker, and TimePicker. Use this skill ALWAYS and immediately when the user asks about any Syncfusion ASP.NET Core calendar, date picker, date range picker, time picker, datetime picker, calendar views, multi-selection, Islamic calendar, date range restriction, week numbers, day cell customization, renderDayCell, date selection, range selection, date formatting, date masking, globalization, localization, strict mode, accessibility, or any related calendar/date/time UI in ASP.NET Core tag helper applications.

syncfusion-aspnetcore-charts

Implements Syncfusion ASP.NET Core Chart (SfChart) for data visualization. Use this when building charts, visualizing time-series or categorical data, or creating dashboards. Covers series configuration (line, bar, pie), axes, tooltips, legends, and customization for ASP.NET Core applications.

syncfusion-aspnetcore-circular-chart-3d

Create interactive 3D Circular Charts with Syncfusion ASP.NET Core. Implement pie/donut series, data labels, legends, tooltips, custom styling, titles, empty point handling, and print/export functionality. Use this skill when the user needs to build or configure pie charts, donut charts, circular data visualizations, or charts showing proportional data in ASP.NET Core applications.

name	syncfusion-aspnetcore-maps
description	Implement Syncfusion Maps component for ASP.NET Core to visualize geographical data. Use this when working with maps, GeoJSON files, choropleth visualizations, or spatial data display. This skill covers map layers, markers, bubbles, map providers (Bing Maps, Azure Maps, OpenStreetMap), data binding, color mapping, and user interactions like zooming and panning. Suitable for world maps, country maps, regional visualizations, and location-based data presentation.
metadata	{"author":"Syncfusion Inc","version":"33.1.44","category":"Data Visualization","platform":"ASP.NET Core"}

Implementing Syncfusion Maps for ASP.NET Core

The Syncfusion Maps component is a powerful tool for visualizing geographical data using Scalable Vector Graphics (SVG). It supports GeoJSON data, multiple layers, map providers (Bing, Azure, OpenStreetMap), and rich interactive features like zooming, panning, tooltips, and selection.

When to Use This Skill
Component Overview
Documentation and Navigation Guide
Quick Start Example
- Basic Map with GeoJSON and Color Mapping
- Map with Markers
API Reference
Common Patterns
Key Properties Reference
Common Use Cases
Related Components
Additional Resources

When to Use This Skill

Use the Syncfusion Maps component when you need to:

Visualize geographical data - Display country, state, or regional data on interactive maps
Create choropleth maps - Show data distribution using color mapping across regions
Plot location markers - Display points of interest, offices, stores, or custom locations
Render bubble maps - Visualize quantitative data with size-based bubbles on geographical locations
Integrate map providers - Use Bing Maps, Azure Maps, or OpenStreetMap as base layers
Show custom shapes - Render custom GeoJSON shapes for specific regions or areas
Build interactive dashboards - Create zoomable, pannable maps with tooltips and selection
Display navigation routes - Show navigation lines connecting different locations
Overlay annotations - Add custom HTML/text annotations on maps
Create multi-layer visualizations - Combine multiple data layers on a single map

Component Overview

Key Capabilities:

📍 Multiple Layers - Support for unlimited layers and sublayers with independent configuration
🗺️ GeoJSON Support - Load and render custom geographical shapes
🌐 Map Providers - Integration with Bing Maps, Azure Maps, and OpenStreetMap
🎨 Color Mapping - Visualize data with equal, range, and desaturation color schemes
📌 Markers & Bubbles - Plot locations with customizable markers and size-based bubbles
🏷️ Data Labels - Display shape names and data values with smart positioning
🎯 Interactivity - Zoom, pan, tooltip, selection, and highlight features
📊 Legend - Interactive legends for color mapping, markers, and bubbles
✏️ Annotations - Custom HTML overlays at specific coordinates
🌍 Projections - Support for 6 map projection types
🖨️ Export - Print and export maps to PNG, JPEG, SVG, PDF formats
♿ Accessibility - WCAG compliant with keyboard navigation and screen reader support

Documentation and Navigation Guide

Getting Started and Installation

📄 Read: references/getting-started.md

When user needs to:

Set up the Maps component for the first time
Install NuGet packages and configure dependencies
Add tag helpers and script references
Create a basic map with GeoJSON data
Understand the minimal setup requirements

Layers and GeoJSON Data

📄 Read: references/layers-and-geojson.md

When user needs to:

Understand map layer architecture
Work with GeoJSON format and custom shapes
Add multiple layers or sublayers
Load GeoJSON from files or URLs
Configure layer visibility and ordering
Handle layer-specific settings

Data Binding and Population

📄 Read: references/data-binding.md

When user needs to:

Bind data source to map shapes
Configure ShapeDataPath and ShapePropertyPath
Match data records to geographical shapes
Bind data from JSON, databases, or APIs
Update data dynamically
Transform data for visualization

Markers

📄 Read: references/markers.md

When user needs to:

Add location markers to maps
Use different marker types (Circle, Image, Letter, Template)
Customize marker appearance (size, color, borders)
Position markers using latitude/longitude
Add marker tooltips and events
Implement marker clustering
Create custom marker templates

Bubbles

📄 Read: references/bubbles.md

When user needs to:

Create bubble visualizations on maps
Size bubbles based on data values
Configure bubble colors and opacity
Set minimum and maximum bubble radius
Add bubble tooltips
Implement multiple bubble sets
Handle bubble selection

Data Labels

📄 Read: references/data-labels.md

When user needs to:

Display labels on map shapes
Configure label positioning and alignment
Use smart label modes (Trim, Hide, None)
Customize label fonts and styling
Create template-based labels
Handle label intersections
Add labels to markers and bubbles

Color Mapping

📄 Read: references/color-mapping.md

When user needs to:

Apply colors to shapes based on data
Configure equal color mapping (value-to-color)
Set up range color mapping (min-max ranges)
Use desaturation color mapping (gradient opacity)
Create choropleth maps
Define custom color palettes
Handle accessibility and contrast

Legend

📄 Read: references/legend.md

When user needs to:

Add legend to maps
Configure legend positioning and alignment
Enable interactive legend (toggle, highlight)
Customize legend shapes and text
Create legends for color mapping
Add legends for markers and bubbles
Implement legend paging for many items

Annotations

📄 Read: references/annotations.md

When user needs to:

Add custom HTML content to maps
Position annotations at specific coordinates
Create text or template-based annotations
Style and align annotations
Handle annotation z-index and layering
Add dynamic annotations
Create responsive annotations

User Interactions

📄 Read: references/user-interactions.md

When user needs to:

Enable zooming (mouse wheel, pinch, toolbar)
Configure panning features
Add tooltips with custom templates
Implement shape selection and multi-selection
Enable highlight on hover
Handle click events
Add navigation lines between locations
Set zoom levels and constraints

Map Providers Integration

📄 Read: references/map-providers.md

When user needs to:

Integrate Bing Maps (Road, Aerial, Hybrid)
Set up Azure Maps with API keys
Use OpenStreetMap (OSM) tiles
Configure custom tile servers
Combine providers with GeoJSON layers
Handle provider authentication
Compare provider features and limitations

Advanced Features

When user needs to:

Render polygons with custom data
Add navigation lines with arrows
Print or export maps to images/PDF
Implement internationalization (i18n)
Configure localization (l10n)
Enable accessibility features
Implement state persistence
Use programmatic methods
Optimize performance
Migrate from EJ1 to EJ2

Quick Start Example

Basic Map with GeoJSON and Color Mapping

@using Newtonsoft.Json
@using Syncfusion.EJ2.Maps

@{
    // Load GeoJSON data
    string geoJson = System.IO.File.ReadAllText("wwwroot/scripts/MapsData/WorldMap.json");
    var worldMapData = JsonConvert.DeserializeObject(geoJson);
    
    // Load data source
    string dataJson = System.IO.File.ReadAllText("wwwroot/scripts/MapsData/population.json");
    var populationData = JsonConvert.DeserializeObject(dataJson);
    
    // Define color mapping
    var colorMapping = new List<MapsColorMapping> {
        new MapsColorMapping { From = 0, To = 100000000, Color = "#C6E7F0", Label = "< 100M" },
        new MapsColorMapping { From = 100000000, To = 500000000, Color = "#6AB7D6", Label = "100M - 500M" },
        new MapsColorMapping { From = 500000000, To = 1500000000, Color = "#1A7FA0", Label = "> 500M" }
    };
    
    var propertyPath = new[] { "name" };
}

<ejs-maps id="maps" height="600px">
    <e-maps-titlesettings text="World Population by Country">
        <e-maps-titlesettings-textstyle size="16px" fontWeight="500"></e-maps-titlesettings-textstyle>
    </e-maps-titlesettings>
    
    <e-maps-legendsettings visible="true" position="Bottom"></e-maps-legendsettings>
    
    <e-maps-layers>
        <e-maps-layer shapeData="worldMapData" 
                      dataSource="populationData"
                      shapeDataPath="Country" 
                      shapePropertyPath="propertyPath">
            <e-layersettings-shapesettings 
                fill="#E5E5E5" 
                colorValuePath="Population"
                colorMapping="colorMapping">
            </e-layersettings-shapesettings>
            
            <e-layersettings-tooltipsettings visible="true" valuePath="Country">
                <e-tooltipsettings-template>
                    <div style="padding: 8px;">
                        <strong>${Country}</strong><br/>
                        Population: ${Population}
                    </div>
                </e-tooltipsettings-template>
            </e-layersettings-tooltipsettings>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>

Map with Markers

@using Newtonsoft.Json
@using Syncfusion.EJ2.Maps

@{
    var worldMapData = JsonConvert.DeserializeObject(System.IO.File.ReadAllText("wwwroot/scripts/MapsData/WorldMap.json"));
    
    var cities = new[]
    {
        new { Name = "New York", Latitude = 40.7128, Longitude = -74.0060, Population = "8.4M" },
        new { Name = "Tokyo", Latitude = 35.6762, Longitude = 139.6503, Population = "13.9M" },
        new { Name = "London", Latitude = 51.5074, Longitude = -0.1278, Population = "9.0M" },
        new { Name = "Sydney", Latitude = -33.8688, Longitude = 151.2093, Population = "5.3M" }
    };
}

<ejs-maps id="maps" height="600px">
    <e-maps-zoomsettings enable="true" zoomFactor="2"></e-maps-zoomsettings>
    
    <e-maps-layers>
        <e-maps-layer shapeData="worldMapData">
            <e-layersettings-shapesettings fill="#C3E6ED"></e-layersettings-shapesettings>
            
            <e-layersettings-markersettings>
                <e-layersettings-markersetting 
                    visible="true" 
                    dataSource="cities"
                    shape="Circle"
                    fill="#FF6347"
                    height="15"
                    width="15">
                    <e-layersettings-markersetting-tooltipsettings 
                        visible="true" 
                        valuePath="Name">
                        <e-markersetting-tooltipsettings-template>
                            <div style="padding: 8px;">
                                <strong>${Name}</strong><br/>
                                Population: ${Population}
                            </div>
                        </e-markersetting-tooltipsettings-template>
                    </e-layersettings-markersetting-tooltipsettings>
                </e-layersettings-markersetting>
            </e-layersettings-markersettings>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>

API Reference

Maps Class

The primary Maps component class with properties, methods, and events for controlling map behavior and appearance.

Namespace: Syncfusion.EJ2.Maps
Assembly: Syncfusion.EJ2.dll
Official API Reference

Core Properties (63 total)

Property	Type	Default	Description	API Link
AllowImageExport	bool	false	Enables or disables the export to image (PNG, JPEG, SVG) functionality in maps	Learn More
AllowPdfExport	bool	false	Enables or disables the export to PDF functionality in maps	Learn More
AllowPrint	bool	false	Enables or disables the print functionality in maps	Learn More
Annotations	List	null	Gets or sets the options for customizing the annotations in the maps. Annotations allow custom HTML/text overlays at specific coordinates	Learn More
Background	string	null	Gets or sets the background color of the maps container	Learn More
BaseLayerIndex	double	0	Gets or sets the index of the layer which will be the base layer. Determines which layer is visible in the maps	Learn More
Border	MapsBorder	null	Gets or sets the options for customizing the style properties of the maps border (width, color)	Learn More
CenterPosition	MapsCenterPosition	null	Gets or sets the center position of the maps using latitude and longitude coordinates	Learn More
Description	string	null	Gets or sets the description of the maps for assistive technology and accessibility	Learn More
EnablePersistence	bool	false	Enable or disable persisting component's state between page reloads. Maintains zoom level, pan position, etc.	Learn More
EnableRtl	bool	false	Enable or disable rendering component in right to left direction for RTL languages	Learn More
Format	string	null	Gets or sets the format to apply internationalization for the text in the maps	Learn More
Height	string	null	Gets or sets the height in which the maps is to be rendered. Can be percentage or pixel value	Learn More
HtmlAttributes	object	null	Allows additional HTML attributes such as title, name, data-*, etc. in key-value pair format	Learn More
Layers	List	null	Gets or sets the options to customize the layers of the maps. Supports unlimited layers and sublayers	Learn More
LegendSettings	MapsLegendSettings	null	Gets or sets the options to customize the legend of the maps (position, alignment, visibility, etc.)	Learn More
Locale	string	"en-US"	Overrides the global culture and localization value for this component	Learn More
MapsArea	MapsMapsAreaSettings	null	Gets or sets the options to customize the area around the map (background, border)	Learn More
Margin	MapsMargin	null	Gets or sets the options to customize the margin of the maps (top, bottom, left, right)	Learn More
ProjectionType	ProjectionType	Mercator	Gets or sets the projection type (Mercator, EquirectangularProjection, MercatorProjection, etc.)	Learn More
TabIndex	double	0	Gets or sets the tab index value for the maps	Learn More
Theme	MapsTheme	Material	Gets or sets the theme styles supported for maps (Material, Fabric, HighContrast, BootstrapDark, etc.)	Learn More
TitleSettings	MapsTitleSettings	null	Gets or sets the options to customize the title of the maps (text, alignment, font, etc.)	Learn More
TooltipDisplayMode	TooltipGesture	MouseMove	Gets or sets the mode in which the tooltip is displayed (MouseMove, Click, DoubleClick)	Learn More
UseGroupingSeparator	bool	false	Enables or disables the visibility state of the separator for grouping in formatted numbers	Learn More
Width	string	null	Gets or sets the width in which the maps is to be rendered. Can be percentage or pixel value	Learn More
ZoomSettings	MapsZoomSettings	null	Gets or sets the options to customize the zooming operations in maps	Learn More

Maps Events (28 total)

Event	Type	Trigger Condition	Description
AnimationComplete	string	null	Triggers after the animation is completed in the maps
AnnotationRendering	string	null	Triggers before rendering an annotation in the maps
BeforePrint	string	null	Triggers before the print gets started
BubbleClick	string	null	Triggers when performing the click operation on the bubble element in maps
BubbleMouseMove	string	null	Triggers when hovering the mouse on the bubble element in maps
BubbleRendering	string	null	Triggers before the bubble element gets rendered on the map
Click	string	null	Triggers when a user clicks on an element in Maps
DataLabelRendering	string	null	Triggers before the data-label gets rendered
DoubleClick	string	null	Triggers when performing the double click operation on an element in maps
ItemHighlight	string	null	Trigger before the shape, bubble or marker gets highlighted
ItemSelection	string	null	Triggers before the shape, bubble or marker gets selected
LayerRendering	string	null	Triggers before the maps layer gets rendered
LegendRendering	string	null	Triggers before the legend gets rendered
Load	string	null	Triggers before the maps gets rendered
Loaded	string	null	Triggers after the maps gets rendered
MarkerClick	string	null	Triggers when clicking on a marker element
MarkerClusterClick	string	null	Triggers when clicking the marker cluster in maps
MarkerClusterMouseMove	string	null	Triggers when moving the mouse over the marker cluster element
MarkerClusterRendering	string	null	Triggers before the maps marker cluster gets rendered
MarkerDragEnd	string	null	When the marker has stopped dragging on the map, this event is triggered
MarkerDragStart	string	null	When the marker begins to drag on the map, this event is triggered
MarkerMouseMove	string	null	Triggers when moving the mouse over the marker element in maps
MarkerRendering	string	null	Triggers before the maps marker gets rendered
MouseMove	string	null	This event is triggered when the mouse pointer moves over the map
Pan	string	null	Triggers before performing the panning operation
PanComplete	string	null	This event is triggered after performing the panning action
Resize	string	null	Triggers to notify the resize of the maps when the window is resized
RightClick	string	null	Triggers when performing the right click operation on an element in maps
ShapeHighlight	string	null	Triggers before the shape gets highlighted
ShapeRendering	string	null	Triggers before the maps shape gets rendered
ShapeSelected	string	null	Triggers when a shape is selected in the maps
TooltipRender	string	null	Triggers before the maps tooltip gets rendered
TooltipRenderComplete	string	null	Triggers after the maps tooltip gets rendered
Zoom	string	null	Triggers before the zoom operations such as zoom in and zoom out
ZoomComplete	string	null	This event is triggered after the zooming operation is completed

MapsLayer Class

Defines the configuration for individual map layers supporting geometry data, map providers, and data binding.

Key Properties of MapsLayer

Property	Type	Default	Description
DataSource	object	null	Data source for binding with shapes
ShapeData	object	null	GeoJSON data for rendering the shapes
ShapeDataPath	string	null	Property path in the data source to match with shapes
ShapePropertyPath	string[]	null	Property path in the shape data to match with data source
BubbleSettings	List	null	Configuration for bubble visualization
MarkerSettings	List	null	Configuration for marker visualization
DataLabelSettings	MapsDataLabelSettings	null	Configuration for data labels on shapes
NavigationLineSettings	List	null	Configuration for navigation lines
SelectionSettings	MapsSelectionSettings	null	Configuration for shape selection
HighlightSettings	MapsHighlightSettings	null	Configuration for shape highlighting on hover
TooltipSettings	MapsTooltipSettings	null	Configuration for layer tooltips
ShapeSettings	MapsShapeSettings	null	Configuration for shape styling
Type	string	"Layer"	Layer type (Layer or SubLayer)
Visible	bool	true	Gets or sets the visibility of the layer

MapsZoomSettings Class

Manages map zoom and pan behavior.

Key Properties of MapsZoomSettings

Property	Type	Default	Description
Enable	bool	false	Enables or disables zooming in maps
ToolbarOrientation	string	"Vertical"	Specifies the orientation of zoom toolbar (Horizontal/Vertical)
Toolbars	string[]	null	Defines zoom toolbar buttons (Zoom, ZoomIn, ZoomOut, Pan, Reset)
ZoomFactor	double	2	Zoom factor for each zoom in or zoom out
MinZoom	double	1	Minimum zoom level
MaxZoom	double	28	Maximum zoom level
EnableMouseWheelZoom	bool	false	Enable zooming using mouse wheel
EnablePinchZoom	bool	false	Enable zooming using pinch gesture on touch devices
EnableSelectionZooming	bool	false	Enable zooming by selection (draw box to zoom)
EnableDoubleTapZoom	bool	true	Enable zooming on double tap

MapsShapeSettings Class

Configures appearance and behavior of shapes in the map.

Key Properties of MapsShapeSettings

Property	Type	Default	Description
Fill	string	"#E5E5E5"	Color to fill the shapes
Opacity	double	1.0	Opacity of shapes (0 to 1)
Palette	string[]	null	Color palette for color mapping
ColorValuePath	string	null	Property path in data source for color mapping
ColorMapping	List	null	Color mapping configuration
DashArray	string	""	Defines dash pattern for shape borders

MapsMarker Class

Defines markers to be displayed on the map at specified coordinates.