syncfusion-aspnetcore-maps

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.

Table of Contents

• When to Use This Skill
• Component Overview
• Documentation and Navigation Guide
  • Getting Started and Installation
  • Layers and GeoJSON Data
  • Data Binding and Population
  • Markers
  • Bubbles
  • Data Labels
  • Color Mapping
  • Legend
  • Annotations
  • User Interactions
  • Map Providers Integration
  • Advanced Features
• Quick Start Example
  • Basic Map with GeoJSON and Color Mapping
  • Map with Markers
• API Reference
  • Maps Class
    • Core Properties (63 total)
    • Maps Events (28 total)
  • MapsLayer Class
    • Key Properties of MapsLayer
  • MapsZoomSettings Class
    • Key Properties of MapsZoomSettings
  • MapsShapeSettings Class
    • Key Properties of MapsShapeSettings
  • MapsMarker Class
    • Key Properties of MapsMarker
  • Related Classes (40+ classes available)
  • Enumerations
    • ProjectionType
    • MarkerType
    • MapsTheme
    • TooltipGesture
    • LegendType
• Common Patterns
  • Pattern 1: Choropleth Map with Data Binding
  • Pattern 2: Interactive Map with Zoom and Selection
  • Pattern 3: Multiple Data Layers
  • Pattern 4: Bing Maps Integration
• Key Properties Reference
  • Essential Properties
  • Layer Configuration
  • Interaction Settings
• Common Use Cases
  • Use Case 1: Sales Dashboard by Region
  • Use Case 2: Store Locator
  • Use Case 3: Population Density Visualization
  • Use Case 4: Election Results Map
  • Use Case 5: Shipping Routes Visualization
  • Use Case 6: Weather Map Dashboard
  • Use Case 7: Real Estate Property Map
• 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-titlesettings-textstyle size="16px" fontWeight="500"></e-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" template="#tooltipTemplate">
            </e-layersettings-tooltipsettings>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>

<div id="tooltipTemplate" style="background: white; padding: 12px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15);">
    <h4 style="margin: 0 0 8px 0; color: #333;">${Country}</h4>
    <div style="font-size: 14px;">
        <div><strong>Population:</strong> ${Population}</div>
        <div><strong>Capital:</strong> ${Capital}</div>
    </div>
</div>

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" }
    };

    var tooltip = new MapsTooltipSettings
    {
        Visible = true,
        ValuePath = "Name"
    };
}

<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-markers>
                <e-layersettings-marker 
                    visible="true" 
                    dataSource="cities"
                    shape="Circle"
                    fill="#FF6347"
                    height="15"
                    width="15"
                    tooltipSettings="tooltip">
                </e-layersettings-marker>
            </e-layersettings-markers>
        </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<MapsAnnotation>	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<MapsLayer>	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.

Official API Reference

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<MapsBubble>	null	Configuration for bubble visualization
MarkerSettings	List<MapsMarker>	null	Configuration for marker visualization
DataLabelSettings	MapsDataLabelSettings	null	Configuration for data labels on shapes
NavigationLineSettings	List<MapsNavigationLine>	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.

Official API Reference

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.

Official API Reference

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<MapsColorMapping>	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.

Official API Reference

Key Properties of MapsMarker

Property	Type	Default	Description
DataSource	object	null	Data source containing marker locations and properties
Latitude	double	null	Latitude coordinate for marker placement
Longitude	double	null	Longitude coordinate for marker placement
Shape	MarkerType	Circle	Marker shape (Circle, Rectangle, Image, Letter, Template)
Width	double	20	Width of the marker
Height	double	20	Height of the marker
Fill	string	"#F41747"	Fill color of the marker
Border	string	null	Border configuration
ImageUrl	string	null	Image URL for image type markers
TooltipSettings	MapsTooltipSettings	null	Tooltip configuration for markers

Related Classes (40+ classes available)

Class	Purpose	API Link
MapsLegendSettings	Configure and customize legend	Link
MapsTooltipSettings	Configure tooltip behavior	Link
MapsBubble	Bubble visualization settings	Link
MapsColorMapping	Define color mapping rules	Link
MapsDataLabelSettings	Data label customization	Link
MapsAnnotation	Annotation configuration	Link
MapsNavigationLine	Navigation line settings	Link
MapsMarkerClusterSettings	Marker clustering configuration	Link
MapsTitleSettings	Map title customization	Link
MapsMargin	Margin configuration	Link

Enumerations

ProjectionType

Defines supported map projections.

Value	Description
Mercator	Web Mercator projection (default)
EquirectangularProjection	Equirectangular/Plate Carée projection
MercatorProjection	Mercator projection
Miller	Miller cylindrical projection
NaturalEarth1	Natural Earth 1 projection
NaturalEarth2	Natural Earth 2 projection

MarkerType

Defines available marker shapes.

Value	Description
Circle	Circular marker
Rectangle	Rectangular marker
Triangle	Triangular marker
Diamond	Diamond-shaped marker
Image	Custom image marker
Letter	Letter-based marker
Template	Custom template marker

MapsTheme

Defines available themes.

Value	Description
Material	Material design theme
Fabric	Fabric design theme
HighContrast	High contrast theme
BootstrapDark	Bootstrap dark theme
BootstrapLight	Bootstrap light theme

TooltipGesture

Defines tooltip display modes.

Value	Description
MouseMove	Display on mouse move (default)
Click	Display on click
DoubleClick	Display on double click

LegendType

Defines legend types.

Value	Description
Layers	Legend for layers
Markers	Legend for markers
Bubbles	Legend for bubbles

Common Patterns

Pattern 1: Choropleth Map with Data Binding

Use Case: Visualize statistical data across regions with color-coded shapes.

@{
    var colorMapping = new List<MapsColorMapping> {
        new MapsColorMapping { Value = "Low", Color = "#90EE90" },
        new MapsColorMapping { Value = "Medium", Color = "#FFD700" },
        new MapsColorMapping { Value = "High", Color = "#FF6347" }
    };
}

<e-maps-layer shapeData="@geoJsonData" 
              dataSource="@statisticsData"
              shapeDataPath="RegionName" 
              shapePropertyPath="@(new[] { "name" })">
    <e-layersettings-shapesettings 
        colorValuePath="DataLevel"
        colorMapping="colorMapping">
    </e-layersettings-shapesettings>
</e-maps-layer>

Pattern 2: Interactive Map with Zoom and Selection

Use Case: Enable user interaction for detailed exploration.

<ejs-maps id="maps">
    <e-maps-zoomsettings 
        enable="true" 
        enableSelectionZooming="true"
        toolbars='new string[] {"Zoom", "ZoomIn", "ZoomOut", "Pan", "Reset"}'>
    </e-maps-zoomsettings>
    
    <e-maps-layers>
        <e-maps-layer shapeData="@mapData">
            <e-layersettings-selectionsettings 
                enable="true" 
                fill="#8B0000"
                opacity="0.5">
            </e-layersettings-selectionsettings>
            
            <e-layersettings-highlightsettings 
                enable="true" 
                fill="#FF6347">
            </e-layersettings-highlightsettings>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>

Pattern 3: Multiple Data Layers

Use Case: Overlay multiple data sets on a single map.

<e-maps-layers>
    <!-- Base layer: Country boundaries -->
    <e-maps-layer shapeData="@countryData" type="Layer">
        <e-layersettings-shapesettings fill="#E5E5E5"></e-layersettings-shapesettings>
    </e-maps-layer>
    
    <!-- Sublayer: State boundaries -->
    <e-maps-layer shapeData="@stateData" type="SubLayer">
        <e-layersettings-shapesettings fill="transparent" border-width="1"></e-layersettings-shapesettings>
    </e-maps-layer>
    
    <!-- Data layer: Markers -->
    <e-maps-layer type="Layer">
        <e-layersettings-markers>
            <e-layersettings-marker dataSource="@locations" shape="Circle"></e-layersettings-marker>
        </e-layersettings-markers>
    </e-maps-layer>
</e-maps-layers>

Pattern 4: Bing Maps Integration

Use Case: Use Bing Maps as base layer with custom data overlay.

<ejs-maps id="maps">
    <e-maps-layers>
        <!-- Bing Maps base layer -->
        <e-maps-layer layerType="Bing" bingMapType="Aerial" key="YOUR_BING_MAPS_KEY">
        </e-maps-layer>
        
        <!-- Data overlay layer -->
        <e-maps-layer type="SubLayer" shapeData="@customData">
            <e-layersettings-shapesettings fill="#FF6347" opacity="0.5"></e-layersettings-shapesettings>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>

Key Properties Reference

Essential Properties

Property	Purpose	Example
shapeData	GeoJSON data for rendering shapes	shapeData="worldMapData"
dataSource	Data to bind to shapes	dataSource="populationData"
shapeDataPath	Property in dataSource to match shapes	shapeDataPath="Country"
shapePropertyPath	Property in GeoJSON to match data	shapePropertyPath="@(new[] { "name" })"
colorValuePath	Data property for color mapping	colorValuePath="Population"
colorMapping	Define color ranges/values	colorMapping="@colorMappingList"

Layer Configuration

Property	Purpose	Common Values
type	Layer type	Layer, SubLayer
layerType	Provider type	Geometry, Bing, OSM
visible	Show/hide layer	true, false
shapeSettings	Shape styling	Fill, border, palette
markerSettings	Marker configuration	Shape, size, color
bubbleSettings	Bubble configuration	Size, color, radius

Interaction Settings

Property	Purpose	Configuration
zoomSettings	Zoom configuration	enable, zoomFactor, minZoom, maxZoom
tooltipSettings	Tooltip configuration	visible, valuePath, template
selectionSettings	Selection configuration	enable, fill, opacity
highlightSettings	Hover highlight	enable, fill, border

Common Use Cases

Use Case 1: Sales Dashboard by Region

Create a choropleth map showing sales performance across different regions with color-coded intensity.

Applies: Color mapping, data binding, legend, tooltips

Use Case 2: Store Locator

Display retail store locations on a map with custom markers, allowing users to zoom and click for details.

Applies: Markers, tooltips, zooming, Bing/OSM integration

Use Case 3: Population Density Visualization

Show population density using bubble sizes, with larger bubbles representing higher populations.

Applies: Bubbles, data binding, legend, color mapping

Use Case 4: Election Results Map

Visualize election results by state/region with color coding and interactive selection.

Applies: Color mapping, selection, highlight, data labels, legend

Use Case 5: Shipping Routes Visualization

Display shipping routes between cities using navigation lines with directional arrows.

Applies: Navigation lines, markers, annotations, layers

Use Case 6: Weather Map Dashboard

Overlay weather data on maps with custom annotations and real-time data updates.

Applies: Annotations, dynamic data, multiple layers, map providers

Use Case 7: Real Estate Property Map

Show property listings with custom markers, filtering, and detailed tooltips.

Applies: Markers, custom templates, tooltips, zooming, panning

Related Components

• Chart - For non-geographical data visualization
• HeatMap - For matrix-based heat map visualization
• TreeMap - For hierarchical data visualization
• Diagram - For network and flowchart visualization

Additional Resources

• Syncfusion Maps Documentation
• API Reference
• GeoJSON Format Specification
• Sample GeoJSON Data