syncfusion-angular-maps

Implementing 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. When to Use This Skill Use this skill when you need to: - Visualize geographical data - Display statistical data on world maps, country maps, regional maps, or custom geographic shapes - Create interactive maps - Build maps with zoom, pan, selection, highlighting, and tooltip interactions - Plot locations - Add markers, bubbles, or annotations to highlight specific geographic p…

,\n 'EUR': '€',\n 'GBP': '£',\n 'JPY': '¥',\n 'INR': '₹'\n };\n \n return `GDP: ${symbols[this.selectedCurrency]}\\${gdp}`;\n }\n}\n```\n\n### Multilingual Data Labels\n\nDisplay labels in multiple languages:\n\n```typescript\nexport class MultilingualLabelsComponent {\n public currentLanguage: string = 'en';\n \n public countryNames = {\n 'en': {\n 'US': 'United States',\n 'DE': 'Germany',\n 'FR': 'France'\n },\n 'de': {\n 'US': 'Vereinigte Staaten',\n 'DE': 'Deutschland',\n 'FR': 'Frankreich'\n },\n 'fr': {\n 'US': 'États-Unis',\n 'DE': 'Allemagne',\n 'FR': 'France'\n }\n };\n \n public getLocalizedName(countryCode: string): string {\n return this.countryNames[this.currentLanguage][countryCode] || countryCode;\n }\n \n public dataLabelSettings: object = {\n visible: true,\n template: (args: any) => {\n const code = args.data['code'];\n return this.getLocalizedName(code);\n }\n };\n}\n```\n\n---\n\n## Next Steps\n\n- **[Accessibility](./accessibility.md)** - Implement accessible internationalization\n- **[Customization](./customization.md)** - Style localized text elements\n- **[User Interactions](./user-interactions.md)** - Localize interactive elements\n- **[Data Visualization](./data-visualization.md)** - Format visualized data\n- **[Advanced Features](./advanced-features.md)** - Export localized maps\n\nFor complete API documentation, visit the [Syncfusion Angular Maps API Reference](https://ej2.syncfusion.com/angular/documentation/api/maps/).\n\n---\n\n## API Reference Summary\n\n### Localization APIs\n\n| API | Description | Documentation Link |\n|-----|-------------|-------------------|\n| `locale` | Localization culture | [locale](https://ej2.syncfusion.com/angular/documentation/api/maps/mapsComponent#locale) |\n| `enableRtl` | Right-to-left mode | [enableRtl](https://ej2.syncfusion.com/angular/documentation/api/maps/mapsComponent#enablertl) |\n\n**For complete API documentation, see:** [api-reference.md](references/api-reference.md)","content_type":"text/markdown; charset=utf-8","language":"markdown","size":13129,"content_sha256":"543c7ff94ae3dfb5a18256f722621437a220aad5733549363c045233a79d6cce"},{"filename":"references/map-providers.md","content":"# Map Providers Integration in Angular Maps\n\nIntegrate online map tile services into Syncfusion Angular Maps to display real-world geographic data. This guide covers OpenStreetMap, Bing Maps, Azure Maps, and other third-party providers.\n\n## Table of Contents\n\n- [OpenStreetMap (OSM)](#openstreetmap-osm)\n - [Basic Integration](#basic-integration)\n - [Custom Tile Servers](#custom-tile-servers)\n - [OSM Attribution Requirements](#osm-attribution-requirements)\n- [Bing Maps](#bing-maps)\n - [Prerequisites and API Key](#prerequisites-and-api-key)\n - [Adding Bing Maps](#adding-bing-maps)\n - [Bing Map Types](#bing-map-types)\n- [Azure Maps](#azure-maps)\n - [Azure Prerequisites](#azure-prerequisites)\n - [Integration Steps](#integration-steps)\n - [Azure Map Styles](#azure-map-styles)\n- [Other Map Providers](#other-map-providers)\n - [TomTom Maps](#tomtom-maps)\n - [Custom Providers](#custom-providers)\n- [Common Features](#common-features)\n - [Zooming and Panning](#zooming-and-panning)\n - [Markers and Navigation Lines](#markers-and-navigation-lines)\n - [Sublayers](#sublayers)\n - [Legends](#legends)\n\n---\n\n## OpenStreetMap (OSM)\n\nOpenStreetMap is an open-source, community-driven map provider offering free tile services under the Open Database License.\n\n### Basic Integration\n\nIntegrate OSM using the `urlTemplate` property:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { MapsModule } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n template: `\n \u003cejs-maps>\n \u003ce-layers>\n \u003ce-layer [urlTemplate]=\"urlTemplate\">\u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n // OpenStreetMap standard tile server\n public urlTemplate: string = 'your URL link';\n}\n```\n\n**URL Template Placeholders:**\n- `{z}` - Zoom level (automatically replaced by Maps)\n- `{x}` - Tile X coordinate (automatically replaced by Maps)\n- `{y}` - Tile Y coordinate (automatically replaced by Maps)\n\n### Custom Tile Servers\n\nUse alternative OSM tile servers for different styles:\n\n```typescript\nexport class OsmVariantsComponent {\n // Standard OSM\n public osmStandard: string = 'your URL link';\n \n // OSM Humanitarian style\n public osmHumanitarian: string = 'your URL link';\n \n // OSM Transport\n public osmTransport: string = 'your URL link';\n \n // Current active template\n public urlTemplate: string = this.osmStandard;\n \n public switchStyle(style: string): void {\n switch(style) {\n case 'standard':\n this.urlTemplate = this.osmStandard;\n break;\n case 'humanitarian':\n this.urlTemplate = this.osmHumanitarian;\n break;\n case 'transport':\n this.urlTemplate = this.osmTransport;\n break;\n }\n }\n}\n```\n\n### OSM Attribution Requirements\n\nOSM requires proper attribution per their license:\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n template: `\n \u003cdiv style=\"position: relative;\">\n \u003cejs-maps>\n \u003ce-layers>\n \u003ce-layer [urlTemplate]=\"urlTemplate\">\u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public urlTemplate: string = 'your URL link';\n}\n```\n\n---\n\n## Bing Maps\n\nBing Maps is Microsoft's online map service offering satellite imagery, road maps, and hybrid views.\n\n### Prerequisites and API Key\n\n**Requirements:**\n1. Microsoft account\n2. Bing Maps Dev Center account\n3. API key (Basic or Enterprise)\n\n**Obtain a Bing Maps Key:**\n1. Visit [Bing Maps Dev Center](https://www.microsoft.com/en-us/maps/create-a-bing-maps-key)\n2. Sign in with Microsoft account\n3. Create a new key for your application\n4. Choose key type (Basic/Enterprise)\n5. Copy the generated key\n\n### Adding Bing Maps\n\nBing Maps requires a special URL conversion using the `getBingUrlTemplate` method:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { MapsModule, ILoadEventArgs } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n template: `\n \u003cejs-maps (load)=\"onLoad($event)\">\n \u003ce-layers>\n \u003ce-layer>\u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public onLoad(args: ILoadEventArgs): void {\n // Replace YOUR_BING_MAPS_KEY with your actual key\n const bingUrl = 'your URL link';\n \n args.maps.getBingUrlTemplate(bingUrl).then((url: string) => {\n args.maps.layers[0].urlTemplate = url;\n });\n }\n}\n```\n\n### Bing Map Types\n\nBing Maps supports multiple map visualization styles:\n\n**Available Types:**\n- **Aerial**: Satellite imagery\n- **AerialWithLabel**: Satellite with labels\n- **Road**: Standard road map\n- **CanvasDark**: Dark theme roads\n- **CanvasLight**: Light theme roads\n- **CanvasGray**: Grayscale roads\n\n```typescript\nimport { Component } from '@angular/core';\nimport { ILoadEventArgs } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n template: `\n \u003cdiv>\n \u003cselect (change)=\"changeBingMapType($event.target.value)\">\n \u003coption value=\"Aerial\">Aerial\u003c/option>\n \u003coption value=\"AerialWithLabel\">Aerial with Labels\u003c/option>\n \u003coption value=\"Road\">Road\u003c/option>\n \u003coption value=\"CanvasDark\">Canvas Dark\u003c/option>\n \u003coption value=\"CanvasLight\" selected>Canvas Light\u003c/option>\n \u003coption value=\"CanvasGray\">Canvas Gray\u003c/option>\n \u003c/select>\n \n \u003cejs-maps #maps (load)=\"onLoad($event)\">\n \u003ce-layers>\n \u003ce-layer>\u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n \u003c/div>\n `\n})\nexport class AppComponent {\n @ViewChild('maps') public mapObj!: MapsComponent;\n private bingApiKey: string = 'YOUR_BING_MAPS_KEY';\n private currentMapType: string = 'CanvasLight';\n \n public onLoad(args: ILoadEventArgs): void {\n this.loadBingMap(args.maps, this.currentMapType);\n }\n \n public changeBingMapType(mapType: string): void {\n this.currentMapType = mapType;\n this.loadBingMap(this.mapObj, mapType);\n }\n \n private loadBingMap(mapsInstance: any, mapType: string): void {\n const bingUrl = 'your URL link';\n \n mapsInstance.getBingUrlTemplate(bingUrl).then((url: string) => {\n mapsInstance.layers[0].urlTemplate = url;\n mapsInstance.refresh();\n });\n }\n}\n```\n\n---\n\n## Azure Maps\n\nAzure Maps is Microsoft's cloud-based geospatial services platform offering various map styles and global coverage.\n\n### Azure Prerequisites\n\n**Requirements:**\n1. Microsoft Azure account\n2. Azure Maps account resource\n3. Subscription key (Primary or Secondary)\n\n**Obtain Azure Maps Subscription Key:**\n1. Sign in to [Azure Portal](https://portal.azure.com)\n2. Create an Azure Maps Account resource\n3. Navigate to Authentication settings\n4. Copy Primary Key or Secondary Key\n\n**Pricing Information:**\n- Refer to [Azure Maps Pricing](https://azure.microsoft.com/en-in/pricing/details/azure-maps/)\n\n### Integration Steps\n\nAdd Azure Maps using the subscription key:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { MapsModule } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n template: `\n \u003cejs-maps>\n \u003ce-layers>\n \u003ce-layer [urlTemplate]=\"urlTemplate\">\u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n // Replace YOUR_AZURE_MAPS_KEY with your subscription key\n public urlTemplate: string = 'your URL link';\n```\n\n### Azure Map Styles\n\nAzure Maps provides multiple pre-defined styles:\n\n```typescript\nexport class AzureMapStylesComponent {\n private azureKey: string = 'YOUR_AZURE_MAPS_KEY';\n private baseUrl: string = 'your URL link';\n \n // Satellite imagery\n public satelliteStyle: string = 'your URL link';\n \n // Road map style\n public roadStyle: string = 'your URL link';\n \n // Grayscale road map\n public grayscaleStyle: string = 'your URL link';\n \n // Night mode\n public nightStyle: string = 'your URL link';\n \n // Current active style\n public urlTemplate: string = this.satelliteStyle;\n}\n```\n\n---\n\n## Other Map Providers\n\nIntegrate third-party map providers using standard URL templates.\n\n### TomTom Maps\n\nAdd TomTom Maps with API key:\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n template: `\n \u003cejs-maps>\n \u003ce-layers>\n \u003ce-layer [urlTemplate]=\"urlTemplate\">\u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n // Replace YOUR_TOMTOM_KEY with your TomTom API key\n public urlTemplate: string = 'your URL link';\n}\n```\n\n**TomTom Map Styles:**\n\n```typescript\nexport class TomTomStylesComponent {\n private tomtomKey: string = 'YOUR_TOMTOM_KEY';\n \n // Basic style\n public basic: string = 'your URL link';\n \n // Hybrid (satellite + labels)\n public hybrid: string = 'your URL link';\n \n // Labels only\n public labels: string = 'your URL link';\n \n public urlTemplate: string = this.basic;\n}\n```\n\n### Custom Providers\n\nIntegrate any tile-based map provider using the URL template pattern:\n\n```typescript\nexport class CustomProviderComponent {\n // Generic template structure\n // Replace with your provider's URL and parameters\n public urlTemplate: string = 'your URL link';\n \n // Example: MapBox (requires API key)\n public mapboxTemplate: string = 'your URL link';\n \n // Example: Stamen Terrain (no key required)\n public stamenTerrain: string = 'your URL link';\n \n // Example: CartoDB Positron (no key required)\n public cartoDBPositron: string = 'your URL link';\n}\n```\n\n**URL Template Components:**\n- **{z}**: Zoom level placeholder\n- **{x}**: Tile X coordinate placeholder\n- **{y}**: Tile Y coordinate placeholder\n- **Auth params**: API keys, tokens, or credentials\n\n---\n\n## Common Features\n\nThese features work consistently across all map providers.\n\n### Zooming and Panning\n\nEnable zoom and pan for any tile-based map:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { ZoomService } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n providers: [ZoomService],\n template: `\n \u003cejs-maps [zoomSettings]=\"zoomSettings\">\n \u003ce-layers>\n \u003ce-layer [urlTemplate]=\"urlTemplate\">\u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public urlTemplate: string = 'your URL link';\n \n public zoomSettings: object = {\n enable: true,\n enablePanning: true,\n mouseWheelZoom: true,\n doubleClickZoom: true,\n pinchZooming: true,\n zoomFactor: 4,\n minZoom: 1,\n maxZoom: 18,\n toolbarSettings: {\n buttonSettings: {\n toolbarItems: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset']\n }\n }\n };\n}\n```\n\n### Markers and Navigation Lines\n\nAdd markers and routes on any map provider:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { ZoomService, MarkerService, NavigationLine } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n providers: [ZoomService, MarkerService, NavigationLine],\n template: `\n \u003cejs-maps \n [zoomSettings]=\"zoomSettings\"\n [centerPosition]=\"centerPosition\">\n \u003ce-layers>\n \u003ce-layer \n [urlTemplate]=\"urlTemplate\"\n [markerSettings]=\"markerSettings\"\n [navigationLineSettings]=\"navigationLineSettings\">\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public urlTemplate: string = 'your URL link';\n \n public zoomSettings: object = {\n enable: true,\n zoomFactor: 4\n };\n \n public centerPosition: object = {\n latitude: 39.8283,\n longitude: -98.5795\n };\n \n // Add markers\n public markerSettings: object[] = [{\n visible: true,\n height: 25,\n width: 15,\n dataSource: [\n { latitude: 40.7128, longitude: -74.0060, city: 'New York' },\n { latitude: 34.0522, longitude: -118.2437, city: 'Los Angeles' },\n { latitude: 41.8781, longitude: -87.6298, city: 'Chicago' }\n ],\n tooltipSettings: {\n visible: true,\n valuePath: 'city'\n }\n }];\n \n // Draw navigation lines\n public navigationLineSettings: object[] = [{\n visible: true,\n latitude: [40.7128, 34.0522],\n longitude: [-74.0060, -118.2437],\n color: '#1976D2',\n width: 3,\n angle: 0.5,\n arrowSettings: {\n showArrow: true,\n position: 'End',\n size: 8\n }\n }];\n}\n```\n\n### Sublayers\n\nOverlay GeoJSON shapes on tile-based maps:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { usaMap } from './usa-map'; // Your GeoJSON data\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n template: `\n \u003cejs-maps [zoomSettings]=\"zoomSettings\">\n \u003ce-layers>\n \u003c!-- Base tile layer -->\n \u003ce-layer [urlTemplate]=\"urlTemplate\">\u003c/e-layer>\n \n \u003c!-- GeoJSON sublayer -->\n \u003ce-layer \n [type]=\"'SubLayer'\"\n [shapeData]=\"usaMap\"\n [shapeSettings]=\"shapeSettings\">\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public urlTemplate: string = 'your URL link';\n public usaMap: object = usaMap;\n \n public zoomSettings: object = {\n enable: true,\n zoomFactor: 4\n };\n \n public shapeSettings: object = {\n fill: 'rgba(30, 144, 255, 0.3)', // Semi-transparent blue\n border: {\n color: '#1E90FF',\n width: 2\n }\n };\n}\n```\n\n**Multiple Sublayers:**\n\n```typescript\npublic layers: object[] = [\n // Base map\n {\n urlTemplate: 'your URL link';\n },\n // Country boundaries\n {\n type: 'SubLayer',\n shapeData: this.worldMap,\n shapeSettings: {\n fill: 'transparent',\n border: { color: '#424242', width: 1 }\n }\n },\n // Highlighted regions\n {\n type: 'SubLayer',\n shapeData: this.highlightedRegions,\n shapeSettings: {\n fill: 'rgba(255, 87, 34, 0.4)',\n border: { color: '#FF5722', width: 2 }\n }\n }\n];\n```\n\n### Legends\n\nAdd legends to tile-based maps:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { MarkerService, Legend } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n providers: [MarkerService, Legend],\n template: `\n \u003cejs-maps [legendSettings]=\"legendSettings\">\n \u003ce-layers>\n \u003ce-layer \n [urlTemplate]=\"urlTemplate\"\n [markerSettings]=\"markerSettings\">\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public urlTemplate: string = 'your URL link';\n \n public legendSettings: object = {\n visible: true,\n type: 'Markers',\n position: 'Bottom',\n alignment: 'Center',\n useMarkerShape: true,\n toggleLegendSettings: {\n enable: true\n }\n };\n \n public markerSettings: object[] = [{\n visible: true,\n dataSource: [\n { latitude: 40.7128, longitude: -74.0060, category: 'Major City', color: '#F44336' },\n { latitude: 41.8781, longitude: -87.6298, category: 'Major City', color: '#F44336' },\n { latitude: 33.4484, longitude: -112.0740, category: 'Regional Hub', color: '#2196F3' }\n ],\n colorValuePath: 'color',\n legendText: 'category'\n }];\n}\n```\n\n---\n\n## Best Practices\n\n### Provider Selection\n\n1. **Consider Usage Limits**: Check provider's free tier limits and pricing\n2. **Evaluate Coverage**: Ensure provider covers your target regions\n3. **Check Licensing**: Understand attribution and licensing requirements\n4. **Test Performance**: Evaluate tile loading speed for your users\n5. **Plan for Fallbacks**: Implement fallback providers in case of service issues\n\n### API Key Management\n\n1. **Secure Key Storage**: Never commit API keys to source control\n2. **Use Environment Variables**: Store keys in environment configurations\n3. **Implement Key Rotation**: Regularly rotate API keys for security\n4. **Monitor Usage**: Track API usage to avoid unexpected charges\n5. **Restrict Key Access**: Use domain/IP restrictions when possible\n\n```typescript\n// Use environment variables for API keys\nimport { environment } from '../environments/environment';\n\nexport class SecureMapComponent {\n private apiKey: string = environment.mapApiKey;\n \n public urlTemplate: string = 'your URL link';\n}\n```\n\n### Performance Optimization\n\n1. **Set Appropriate Zoom Limits**: Restrict maxZoom based on tile availability\n2. **Cache Tiles Locally**: Enable browser caching for faster loading\n3. **Optimize Marker Count**: Limit markers visible at once (use clustering)\n4. **Lazy Load Features**: Load additional features only when needed\n5. **Minimize Sublayer Complexity**: Keep GeoJSON sublayers simple\n\n### Error Handling\n\nImplement robust error handling for tile loading failures:\n\n```typescript\nimport { Component, ViewChild } from '@angular/core';\nimport { MapsComponent } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n template: `\n \u003cejs-maps \n #maps\n (load)=\"onLoad($event)\"\n (loadFailed)=\"onLoadFailed($event)\">\n \u003ce-layers>\n \u003ce-layer [urlTemplate]=\"urlTemplate\">\u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n \n \u003cdiv *ngIf=\"errorMessage\" class=\"error-banner\">\n {{errorMessage}}\n \u003cbutton (click)=\"retry()\">Retry\u003c/button>\n \u003c/div>\n `\n})\nexport class AppComponent {\n @ViewChild('maps') public mapObj!: MapsComponent;\n public errorMessage: string = '';\n public urlTemplate: string = 'your URL link';\n \n public onLoadFailed(args: any): void {\n this.errorMessage = 'Failed to load map tiles. Please check your connection.';\n console.error('Map load error:', args);\n }\n \n public retry(): void {\n this.errorMessage = '';\n this.mapObj.refresh();\n }\n}\n```\n\n---\n\n## Common Patterns\n\n### Multi-Provider Support\n\nSwitch between multiple map providers:\n\n```typescript\nexport class MultiProviderComponent {\n @ViewChild('maps') public mapObj!: MapsComponent;\n \n public providers: any = {\n osm: 'your URL link',\n bing: null, // Loaded dynamically\n azure: 'your URL link';\n };\n \n public currentProvider: string = 'osm';\n public urlTemplate: string = this.providers.osm;\n \n public switchProvider(provider: string): void {\n if (provider === 'bing') {\n this.loadBingMaps();\n } else {\n this.currentProvider = provider;\n this.urlTemplate = this.providers[provider];\n this.mapObj.refresh();\n }\n }\n \n private loadBingMaps(): void {\n const bingUrl = 'your URL link';\n \n this.mapObj.getBingUrlTemplate(bingUrl).then((url: string) => {\n this.providers.bing = url;\n this.urlTemplate = url;\n this.currentProvider = 'bing';\n this.mapObj.refresh();\n });\n }\n}\n```\n\n### Hybrid Visualization\n\nCombine tile maps with custom data overlays:\n\n```typescript\nexport class HybridMapComponent {\n public urlTemplate: string = 'your URL link';\n \n // Base tile layer with custom data overlay\n public layers: object[] = [\n {\n urlTemplate: this.urlTemplate\n },\n {\n type: 'SubLayer',\n shapeData: this.stateData,\n dataSource: this.electionData,\n shapePropertyPath: 'name',\n shapeDataPath: 'state',\n shapeSettings: {\n colorValuePath: 'result',\n colorMapping: [\n { value: 'Democrat', color: 'rgba(0, 0, 255, 0.3)' },\n { value: 'Republican', color: 'rgba(255, 0, 0, 0.3)' }\n ]\n }\n }\n ];\n \n public markerSettings: object[] = [{\n visible: true,\n dataSource: this.capitalCities,\n shape: 'Diamond',\n fill: '#FFD700'\n }];\n}\n```\n\n### Progressive Enhancement\n\nStart with basic map, enhance with features:\n\n```typescript\nexport class ProgressiveMapComponent implements OnInit {\n public urlTemplate: string = 'your URL link';\n public markersLoaded: boolean = false;\n public overlaysLoaded: boolean = false;\n \n ngOnInit(): void {\n // Load base map first\n this.loadBaseMap();\n \n // Load markers after base map\n setTimeout(() => this.loadMarkers(), 1000);\n \n // Load overlays last\n setTimeout(() => this.loadOverlays(), 2000);\n }\n \n private loadBaseMap(): void {\n // Base map already configured\n console.log('Base map loaded');\n }\n \n private loadMarkers(): void {\n this.markerSettings = [{\n visible: true,\n dataSource: this.cityData\n }];\n this.markersLoaded = true;\n }\n \n private loadOverlays(): void {\n this.layers.push({\n type: 'SubLayer',\n shapeData: this.overlayData\n });\n this.overlaysLoaded = true;\n }\n}\n```\n\n---\n\nFor complete API documentation, visit the [Syncfusion Angular Maps API Reference](https://ej2.syncfusion.com/angular/documentation/api/maps/).\n\n---\n\n## API Reference Summary\n\n### Map Provider APIs\n\n| API | Description | Documentation Link |\n|-----|-------------|-------------------|\n| `urlTemplate` | Tile URL template | [urlTemplate](https://ej2.syncfusion.com/angular/documentation/api/maps/layerSettings#urltemplate) |\n| `LayerSettings` | Layer configuration | [LayerSettings](https://ej2.syncfusion.com/angular/documentation/api/maps/layerSettings) |\n\n**For complete API documentation, see:** [api-reference.md](references/api-reference.md)","content_type":"text/markdown; charset=utf-8","language":"markdown","size":21263,"content_sha256":"551319b992a87d2a1fcacee0c0009cfabeed2811f9c50eaeec3326b1bcf447bc"},{"filename":"references/markers.md","content":"# Markers\n\nComplete guide to adding, customizing, and working with markers in Angular Maps to pinpoint specific locations.\n\n## Table of Contents\n- [Overview](#overview)\n- [Adding Basic Markers](#adding-basic-markers)\n- [Marker Shapes](#marker-shapes)\n- [Custom Marker Templates](#custom-marker-templates)\n- [Marker Customization](#marker-customization)\n- [Multiple Marker Groups](#multiple-marker-groups)\n- [Data-Driven Markers](#data-driven-markers)\n- [Marker Clustering](#marker-clustering)\n- [Marker Drag and Drop](#marker-drag-and-drop)\n- [Marker Tooltips](#marker-tooltips)\n- [Marker Zooming](#marker-zooming)\n- [Best Practices](#best-practices)\n\n## Overview\n\nMarkers are visual indicators that pinpoint specific locations on maps. They're essential for:\n- 📍 **Location highlighting** - Show points of interest, store locations, or landmarks\n- 🗺️ **Data visualization** - Display quantitative data at specific coordinates\n- 🎯 **Interactive maps** - Enable click, hover, and selection interactions\n- 📊 **Analytics dashboards** - Visualize geographic data points\n\n**Key requirement:** Inject `MarkerService` in your component providers.\n\n## Adding Basic Markers\n\n### Step 1: Inject MarkerService\n\n```typescript\nimport { Component } from '@angular/core';\nimport { MapsModule, MarkerService } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n providers: [MarkerService], // Required!\n template: `...`\n})\nexport class AppComponent { }\n```\n\n### Step 2: Define Marker Data\n\nMarker data requires `latitude` and `longitude` fields:\n\n```typescript\npublic markerData: object[] = [\n { latitude: 40.7128, longitude: -74.0060, name: 'New York' },\n { latitude: 51.5074, longitude: -0.1278, name: 'London' },\n { latitude: 35.6762, longitude: 139.6503, name: 'Tokyo' },\n { latitude: -33.8688, longitude: 151.2093, name: 'Sydney' }\n];\n```\n\n### Step 3: Configure Marker Settings\n\n```typescript\nimport { Component } from '@angular/core';\nimport { MapsModule, MarkerService } from '@syncfusion/ej2-angular-maps';\nimport { world_map } from './world-map';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n providers: [MarkerService],\n template: `\n \u003cejs-maps id='maps-container'>\n \u003ce-layers>\n \u003ce-layer \n [shapeData]='shapeData'\n [markerSettings]='markerSettings'>\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public shapeData: object = world_map;\n \n public markerSettings: object[] = [{\n visible: true,\n dataSource: [\n { latitude: 40.7128, longitude: -74.0060, name: 'New York' },\n { latitude: 51.5074, longitude: -0.1278, name: 'London' },\n { latitude: 35.6762, longitude: 139.6503, name: 'Tokyo' }\n ]\n }];\n}\n```\n\n## Marker Shapes\n\nThe Maps component supports multiple built-in marker shapes:\n\n### Available Shapes\n\n- **Balloon** - Speech bubble shape\n- **Circle** - Round marker (default)\n- **Cross** - X-shaped marker\n- **Diamond** - Diamond shape\n- **Image** - Custom image\n- **Rectangle** - Square/rectangular shape\n- **Star** - Star shape\n- **Triangle** - Triangular marker\n- **VerticalLine** - Vertical line\n- **HorizontalLine** - Horizontal line\n\n### Using Built-in Shapes\n\n```typescript\npublic markerSettings: object[] = [{\n visible: true,\n shape: 'Diamond', // Change shape\n height: 15,\n width: 15,\n fill: '#FF6347',\n dataSource: [\n { latitude: 40.7128, longitude: -74.0060, name: 'New York' }\n ]\n}];\n```\n\n### Using Image Markers\n\n#### Method 1: Single Image for All Markers\n\n```typescript\npublic markerSettings: object[] = [{\n visible: true,\n shape: 'Image',\n imageUrl: 'assets/marker-icon.png',\n height: 30,\n width: 30,\n dataSource: [\n { latitude: 40.7128, longitude: -74.0060, name: 'New York' }\n ]\n}];\n```\n\n#### Method 2: Different Images from Data Source\n\n```typescript\npublic markerSettings: object[] = [{\n visible: true,\n shape: 'Image',\n imageUrlValuePath: 'iconPath', // Field containing image path\n height: 30,\n width: 30,\n dataSource: [\n { \n latitude: 40.7128, \n longitude: -74.0060, \n name: 'New York',\n iconPath: 'assets/city-icon.png'\n },\n { \n latitude: 51.5074, \n longitude: -0.1278, \n name: 'London',\n iconPath: 'assets/capital-icon.png'\n }\n ]\n}];\n```\n\n## Custom Marker Templates\n\nFor advanced customization, use HTML templates:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { MapsModule, MarkerService } from '@syncfusion/ej2-angular-maps';\nimport { world_map } from './world-map';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n providers: [MarkerService],\n template: `\n \u003cejs-maps id='maps-container'>\n \u003ce-layers>\n \u003ce-layer \n [shapeData]='shapeData'\n [markerSettings]='markerSettings'>\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n \n \u003c!-- Marker template -->\n \u003cng-template #markerTemplate let-data>\n \u003cdiv style=\"background: #FF6347; color: white; padding: 5px 10px; border-radius: 5px;\">\n \u003cstrong>{{data.name}}\u003c/strong>\u003cbr>\n \u003csmall>{{data.population}}\u003c/small>\n \u003c/div>\n \u003c/ng-template>\n `\n})\nexport class AppComponent {\n @ViewChild('markerTemplate', { static: true }) markerTemplate: any;\n \n public shapeData: object = world_map;\n public markerSettings: object[] = [];\n \n ngAfterViewInit() {\n this.markerSettings = [{\n visible: true,\n template: this.markerTemplate,\n dataSource: [\n { latitude: 40.7128, longitude: -74.0060, name: 'New York', population: '8.3M' },\n { latitude: 51.5074, longitude: -0.1278, name: 'London', population: '9.0M' }\n ]\n }];\n }\n}\n```\n\n## Marker Customization\n\n### Visual Customization Properties\n\n```typescript\npublic markerSettings: object[] = [{\n visible: true,\n dataSource: markerData,\n \n // Shape and size\n shape: 'Circle',\n height: 20,\n width: 20,\n \n // Colors\n fill: '#FF6347',\n opacity: 0.8,\n \n // Border\n border: {\n color: '#000000',\n width: 2,\n opacity: 1\n },\n \n // Dash pattern\n dashArray: '5,5',\n \n // Position offset\n offset: {\n x: 0,\n y: -10\n },\n \n // Animation\n animationDuration: 1000,\n animationDelay: 500\n}];\n```\n\n### Individual Marker Sizing\n\nUse value paths to set different sizes for each marker:\n\n```typescript\npublic markerSettings: object[] = [{\n visible: true,\n shape: 'Circle',\n widthValuePath: 'markerWidth', // Field for width\n heightValuePath: 'markerHeight', // Field for height\n dataSource: [\n { \n latitude: 40.7128, \n longitude: -74.0060, \n name: 'New York',\n markerWidth: 25,\n markerHeight: 25\n },\n { \n latitude: 51.5074, \n longitude: -0.1278, \n name: 'London',\n markerWidth: 15,\n markerHeight: 15\n }\n ]\n}];\n```\n\n## Multiple Marker Groups\n\nCreate multiple marker groups with different styles:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { MapsModule, MarkerService } from '@syncfusion/ej2-angular-maps';\nimport { world_map } from './world-map';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n providers: [MarkerService],\n template: `\n \u003cejs-maps id='maps-container'>\n \u003ce-layers>\n \u003ce-layer \n [shapeData]='shapeData'\n [markerSettings]='markerSettings'>\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public shapeData: object = world_map;\n \n // Multiple marker groups\n public markerSettings: object[] = [\n // Group 1: Capital cities\n {\n visible: true,\n shape: 'Star',\n fill: '#FFD700',\n height: 20,\n width: 20,\n dataSource: [\n { latitude: 40.7128, longitude: -74.0060, name: 'New York', type: 'Capital' },\n { latitude: 51.5074, longitude: -0.1278, name: 'London', type: 'Capital' }\n ]\n },\n // Group 2: Major cities\n {\n visible: true,\n shape: 'Circle',\n fill: '#FF6347',\n height: 15,\n width: 15,\n dataSource: [\n { latitude: 34.0522, longitude: -118.2437, name: 'Los Angeles', type: 'Major' },\n { latitude: 48.8566, longitude: 2.3522, name: 'Paris', type: 'Major' }\n ]\n },\n // Group 3: Ports\n {\n visible: true,\n shape: 'Diamond',\n fill: '#4169E1',\n height: 12,\n width: 12,\n dataSource: [\n { latitude: 1.3521, longitude: 103.8198, name: 'Singapore', type: 'Port' },\n { latitude: 22.3193, longitude: 114.1694, name: 'Hong Kong', type: 'Port' }\n ]\n }\n ];\n}\n```\n\n## Data-Driven Markers\n\n### Binding Shapes from Data Source\n\n```typescript\npublic markerSettings: object[] = [{\n visible: true,\n shapeValuePath: 'markerShape', // Field containing shape name\n colorValuePath: 'markerColor', // Field containing color\n dataSource: [\n { \n latitude: 40.7128, \n longitude: -74.0060, \n name: 'New York',\n markerShape: 'Star',\n markerColor: '#FFD700'\n },\n { \n latitude: 51.5074, \n longitude: -0.1278, \n name: 'London',\n markerShape: 'Circle',\n markerColor: '#FF6347'\n }\n ]\n}];\n```\n\n### Custom Latitude/Longitude Fields\n\n```typescript\npublic markerSettings: object[] = [{\n visible: true,\n latitudeValuePath: 'lat', // Custom latitude field name\n longitudeValuePath: 'lng', // Custom longitude field name\n dataSource: [\n { lat: 40.7128, lng: -74.0060, name: 'New York' },\n { lat: 51.5074, lng: -0.1278, name: 'London' }\n ]\n}];\n```\n\n## Marker Clustering\n\nWhen markers overlap at certain zoom levels, clustering improves readability.\n\n### Enabling Clustering\n\n```typescript\nimport { Component } from '@angular/core';\nimport { MapsModule, MarkerService, ZoomService } from '@syncfusion/ej2-angular-maps';\nimport { world_map } from './world-map';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n providers: [MarkerService, ZoomService],\n template: `\n \u003cejs-maps \n id='maps-container'\n [zoomSettings]='zoomSettings'>\n \u003ce-layers>\n \u003ce-layer \n [shapeData]='shapeData'\n [markerSettings]='markerSettings'\n [markerClusterSettings]='markerClusterSettings'>\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public shapeData: object = world_map;\n \n public markerSettings: object[] = [{\n visible: true,\n shape: 'Circle',\n height: 10,\n width: 10,\n dataSource: [\n // Many markers in close proximity\n { latitude: 40.7128, longitude: -74.0060, name: 'Location 1' },\n { latitude: 40.7580, longitude: -73.9855, name: 'Location 2' },\n { latitude: 40.7489, longitude: -73.9680, name: 'Location 3' },\n // ... more markers\n ]\n }];\n \n // Enable clustering\n public markerClusterSettings: object = {\n allowClustering: true,\n allowClusterExpand: true,\n shape: 'Circle',\n height: 40,\n width: 40,\n fill: '#FF6347',\n opacity: 0.8,\n labelStyle: {\n color: 'white',\n size: '14px'\n }\n };\n \n public zoomSettings: object = {\n enable: true\n };\n}\n```\n\n### Cluster Customization\n\n```typescript\npublic markerClusterSettings: object = {\n allowClustering: true,\n allowClusterExpand: true, // Allow clicking to expand\n \n // Visual styling\n shape: 'Circle',\n height: 50,\n width: 50,\n fill: '#4169E1',\n opacity: 0.9,\n \n // Border\n border: {\n color: '#FFFFFF',\n width: 3\n },\n \n // Label (shows count)\n labelStyle: {\n color: 'white',\n size: '16px',\n fontWeight: 'bold'\n },\n \n // Position offset\n offset: {\n x: 0,\n y: 0\n },\n \n // Connector lines (when expanded)\n connectorLineSettings: {\n color: '#000000',\n width: 2,\n opacity: 0.5\n }\n};\n```\n\n### Per-Group Clustering\n\nEnable clustering for specific marker groups:\n\n```typescript\npublic markerSettings: object[] = [\n // Group 1: With clustering\n {\n visible: true,\n dataSource: denseMarkerData,\n clusterSettings: {\n allowClustering: true,\n shape: 'Circle',\n fill: '#FF6347'\n }\n },\n // Group 2: Without clustering\n {\n visible: true,\n dataSource: sparseMarkerData\n // No clusterSettings - markers always visible\n }\n];\n```\n\n## Marker Drag and Drop\n\nAllow users to reposition markers by dragging:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { MapsModule, MarkerService } from '@syncfusion/ej2-angular-maps';\nimport { world_map } from './world-map';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n providers: [MarkerService],\n template: `\n \u003cejs-maps \n id='maps-container'\n (markerDragStart)='onMarkerDragStart($event)'\n (markerDragEnd)='onMarkerDragEnd($event)'>\n \u003ce-layers>\n \u003ce-layer \n [shapeData]='shapeData'\n [markerSettings]='markerSettings'>\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public shapeData: object = world_map;\n \n public markerSettings: object[] = [{\n visible: true,\n enableDrag: true, // Enable drag and drop\n shape: 'Circle',\n height: 20,\n width: 20,\n fill: '#FF6347',\n dataSource: [\n { latitude: 40.7128, longitude: -74.0060, name: 'New York' },\n { latitude: 51.5074, longitude: -0.1278, name: 'London' }\n ]\n }];\n \n onMarkerDragStart(args: any) {\n console.log('Marker drag started:', args);\n console.log('Original position:', args.latitude, args.longitude);\n }\n \n onMarkerDragEnd(args: any) {\n console.log('Marker drag ended:', args);\n console.log('New position:', args.latitude, args.longitude);\n \n // Update data source with new position\n const marker = this.markerSettings[args.markerIndex].dataSource[args.dataIndex];\n marker.latitude = args.latitude;\n marker.longitude = args.longitude;\n }\n}\n```\n\n**Event Properties:**\n- `dataIndex` - Index of the marker in dataSource\n- `markerIndex` - Index of the marker group\n- `layerIndex` - Index of the layer\n- `latitude` - New latitude coordinate\n- `longitude` - New longitude coordinate\n- `x`, `y` - Mouse pointer position\n\n## Marker Tooltips\n\nDisplay additional information on hover:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { MapsModule, MarkerService, MapsTooltipService } from '@syncfusion/ej2-angular-maps';\nimport { world_map } from './world-map';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n providers: [MarkerService, MapsTooltipService],\n template: `\n \u003cejs-maps id='maps-container'>\n \u003ce-layers>\n \u003ce-layer \n [shapeData]='shapeData'\n [markerSettings]='markerSettings'>\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public shapeData: object = world_map;\n \n public markerSettings: object[] = [{\n visible: true,\n shape: 'Circle',\n fill: '#FF6347',\n dataSource: [\n { \n latitude: 40.7128, \n longitude: -74.0060, \n name: 'New York',\n population: '8.3M',\n country: 'USA'\n }\n ],\n tooltipSettings: {\n visible: true,\n valuePath: 'name', // Simple tooltip\n // Or use format for complex tooltips:\n format: '${name}\u003cbr>Population: ${population}\u003cbr>Country: ${country}'\n }\n }];\n}\n```\n\n## Marker Zooming\n\nAutomatically zoom to fit all markers:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { MapsModule, MarkerService, ZoomService } from '@syncfusion/ej2-angular-maps';\nimport { world_map } from './world-map';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n providers: [MarkerService, ZoomService],\n template: `\n \u003cejs-maps \n id='maps-container'\n [zoomSettings]='zoomSettings'>\n \u003ce-layers>\n \u003ce-layer \n [shapeData]='shapeData'\n [markerSettings]='markerSettings'>\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public shapeData: object = world_map;\n \n public markerSettings: object[] = [{\n visible: true,\n dataSource: [\n { latitude: 40.7128, longitude: -74.0060, name: 'New York' },\n { latitude: 51.5074, longitude: -0.1278, name: 'London' },\n { latitude: 35.6762, longitude: 139.6503, name: 'Tokyo' }\n ]\n }];\n \n public zoomSettings: object = {\n enable: true,\n shouldZoomInitially: true // Auto-zoom to fit all markers\n };\n}\n```\n\n## Best Practices\n\n### 1. Inject Required Services\n\nAlways inject `MarkerService` when using markers:\n\n```typescript\n@Component({\n providers: [MarkerService] // Required!\n})\n```\n\nAdd other services as needed:\n- `MapsTooltipService` - For marker tooltips\n- `ZoomService` - For zoom functionality\n- `SelectionService` - For marker selection\n\n### 2. Optimize Large Marker Sets\n\nFor maps with many markers:\n\n```typescript\n// ✅ Good: Use clustering\npublic markerClusterSettings: object = {\n allowClustering: true\n};\n\n// ✅ Good: Reduce marker size\npublic markerSettings: object[] = [{\n height: 8,\n width: 8\n}];\n\n// ✅ Good: Load markers on demand\nasync loadMarkersForRegion(region: string) {\n const markers = await this.fetchMarkers(region);\n this.markerSettings[0].dataSource = markers;\n}\n```\n\n### 3. Use Appropriate Shapes\n\n- **Circle** - Default, general purpose\n- **Star** - Highlight important locations\n- **Diamond** - Distinguish secondary locations\n- **Image** - Brand-specific or custom icons\n- **Balloon** - For labels/callouts\n\n### 4. Consistent Data Structure\n\nMaintain consistent field names across marker groups:\n\n```typescript\n// ✅ Good: Consistent structure\n{ latitude: 40.7, longitude: -74.0, name: 'NYC' }\n{ latitude: 51.5, longitude: -0.1, name: 'London' }\n\n// ❌ Bad: Inconsistent structure\n{ lat: 40.7, lng: -74.0, city: 'NYC' }\n{ latitude: 51.5, longitude: -0.1, name: 'London' }\n```\n\n### 5. Marker Visibility\n\nControl when markers appear:\n\n```typescript\n// Show/hide based on zoom level or conditions\npublic markerSettings: object[] = [{\n visible: this.currentZoomLevel > 5\n}];\n```\n\n### 6. Accessibility\n\nProvide meaningful tooltip content:\n\n```typescript\ntooltipSettings: {\n visible: true,\n format: '${name} - ${description}' // Descriptive text\n}\n```\n\n### 7. Performance Tips\n\n- Limit markers to \u003c1000 per layer for smooth performance\n- Use clustering for dense marker areas\n- Lazy load markers as users pan/zoom\n- Simplify custom templates\n\n## Common Patterns\n\n### Pattern 1: Store Locator\n\n```typescript\npublic markerSettings: object[] = [{\n visible: true,\n shape: 'Image',\n imageUrl: 'assets/store-icon.png',\n height: 30,\n width: 30,\n dataSource: storeLocations,\n tooltipSettings: {\n visible: true,\n format: '${storeName}\u003cbr>${address}\u003cbr>Phone: ${phone}'\n }\n}];\n```\n\n### Pattern 2: Real-Time Tracking\n\n```typescript\n// Update marker positions in real-time\nsetInterval(() => {\n this.updateMarkerPositions();\n}, 5000);\n\nupdateMarkerPositions() {\n this.markerSettings[0].dataSource = this.fetchLatestPositions();\n}\n```\n\n### Pattern 3: Interactive Selection\n\n```typescript\nimport { SelectionService } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n providers: [MarkerService, SelectionService]\n})\n\npublic selectionSettings: object = {\n enable: true,\n enableMultiSelect: true\n};\n```\n\n## Next Steps\n\n- **[Data Visualization](data-visualization.md)** - Add bubbles, legends, and color mapping\n- **[User Interactions](user-interactions.md)** - Enable zoom, pan, and selection\n- **[Advanced Features](advanced-features.md)** - Create routes between markers\n- **[Customization](customization.md)** - Style and theme your markers\n\n---\n\n## API Reference Summary\n\n### Marker APIs\n\n| API | Description | Documentation Link |\n|-----|-------------|-------------------|\n| `MarkerSettings` | Marker configuration model | [MarkerSettings](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettings) |\n| `dataSource` | Marker data array | [dataSource](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettings#datasource) |\n| `shape` | Marker shape type | [shape](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettings#shape) |\n| `latitudeValuePath` | Latitude data field | [latitudeValuePath](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettings#latitudevaluepath) |\n| `longitudeValuePath` | Longitude data field | [longitudeValuePath](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettings#longitudevaluepath) |\n| `template` | Custom marker template | [template](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettings#template) |\n| `imageUrl` | Image marker URL | [imageUrl](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettings#imageurl) |\n| `tooltipSettings` | Marker tooltip config | [tooltipSettings](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettings#tooltipsettings) |\n\n### Marker Events\n\n| Event | Description | Documentation Link |\n|-------|-------------|-------------------|\n| `markerClick` | Fires on marker click | [markerClick](https://ej2.syncfusion.com/angular/documentation/api/maps/mapsComponent#markerclick) |\n| `markerMouseMove` | Fires on marker hover | [markerMouseMove](https://ej2.syncfusion.com/angular/documentation/api/maps/mapsComponent#markermousemove) |\n| `markerRendering` | Fires before marker renders | [markerRendering](https://ej2.syncfusion.com/angular/documentation/api/maps/mapsComponent#markerrendering) |\n\n### Enumerations\n\n| Enum | Values | Documentation Link |\n|------|--------|-------------------|\n| `MarkerType` | Balloon, Circle, Cross, Diamond, Image, Rectangle, Star, Triangle | [MarkerType](https://ej2.syncfusion.com/angular/documentation/api/maps/markerType) |\n\n**For complete API documentation, see:** [api-reference.md](references/api-reference.md)","content_type":"text/markdown; charset=utf-8","language":"markdown","size":21874,"content_sha256":"489ab79012466cf906f92784ab5bd7b862c50af40bf90b729bd57de520072b3f"},{"filename":"references/polygon-shapes.md","content":"# Polygon Shapes in Angular Maps\n\nMaster polygon overlay features in Syncfusion Angular Maps to highlight custom geographic regions, draw boundaries, and mark zones of interest.\n\n## Overview\n\nPolygons enable custom shape overlays on maps for visualizing coverage zones, territorial boundaries, restricted areas, or any custom geographic regions. Polygons work on both geometry-based maps and online tile maps.\n\n---\n\n## Adding Polygon Shapes\n\nDefine polygons using latitude/longitude coordinate arrays:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { MapsModule, PolygonService } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n providers: [PolygonService],\n template: `\n \u003cejs-maps>\n \u003ce-layers>\n \u003ce-layer \n [shapeData]=\"worldMap\"\n [polygonSettings]=\"polygonSettings\">\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public worldMap: object = // Your GeoJSON data\n \n public polygonSettings: object = {\n polygons: [\n {\n points: [\n { latitude: 40.7128, longitude: -74.0060 }, // New York\n { latitude: 41.8781, longitude: -87.6298 }, // Chicago\n { latitude: 34.0522, longitude: -118.2437 }, // Los Angeles\n { latitude: 40.7128, longitude: -74.0060 } // Close the polygon\n ],\n fill: 'rgba(30, 144, 255, 0.4)',\n opacity: 0.7,\n borderColor: '#1E90FF',\n borderWidth: 2,\n borderOpacity: 1\n }\n ]\n };\n}\n```\n\n---\n\n## Polygon Customization\n\n### Styling Properties\n\nCustomize polygon appearance with fill, border, and opacity settings:\n\n```typescript\npublic polygonSettings: object = {\n polygons: [\n {\n points: this.triangleCoordinates,\n fill: '#FF5722', // Fill color\n opacity: 0.6, // Fill opacity (0-1)\n borderColor: '#D84315', // Border color\n borderWidth: 3, // Border width in pixels\n borderOpacity: 1 // Border opacity (0-1)\n }\n ]\n};\n```\n\n### Multiple Polygons\n\nAdd multiple independent polygon shapes:\n\n```typescript\npublic polygonSettings: object = {\n polygons: [\n // Coverage Zone 1\n {\n points: [\n { latitude: 40.7128, longitude: -74.0060 },\n { latitude: 42.3601, longitude: -71.0589 },\n { latitude: 39.9526, longitude: -75.1652 }\n ],\n fill: 'rgba(76, 175, 80, 0.4)',\n borderColor: '#4CAF50',\n borderWidth: 2\n },\n // Coverage Zone 2\n {\n points: [\n { latitude: 34.0522, longitude: -118.2437 },\n { latitude: 37.7749, longitude: -122.4194 },\n { latitude: 32.7157, longitude: -117.1611 }\n ],\n fill: 'rgba(255, 152, 0, 0.4)',\n borderColor: '#FF9800',\n borderWidth: 2\n },\n // Restricted Zone\n {\n points: [\n { latitude: 41.8781, longitude: -87.6298 },\n { latitude: 43.0389, longitude: -87.9065 },\n { latitude: 42.3314, longitude: -83.0458 }\n ],\n fill: 'rgba(244, 67, 54, 0.4)',\n borderColor: '#F44336',\n borderWidth: 2\n }\n ]\n};\n```\n\n---\n\n## Polygon Tooltips\n\nDisplay information when users hover over polygons:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { MapsTooltipService, PolygonService } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n providers: [PolygonService, MapsTooltipService],\n template: `\n \u003cejs-maps>\n \u003ce-layers>\n \u003ce-layer \n [shapeData]=\"worldMap\"\n [polygonSettings]=\"polygonSettings\">\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public polygonSettings: object = {\n polygons: [\n {\n points: this.zoneCoordinates,\n fill: 'rgba(33, 150, 243, 0.4)',\n tooltipText: 'Service Area - Zone A',\n tooltipSettings: {\n visible: true,\n fill: '#212121',\n border: {\n color: '#424242',\n width: 1\n },\n textStyle: {\n color: '#FFFFFF',\n size: '12px',\n fontFamily: 'Segoe UI'\n }\n }\n }\n ]\n };\n}\n```\n\n### Tooltip Templates\n\nUse custom HTML templates for rich tooltip content:\n\n```typescript\n@Component({\n selector: 'app-root',\n template: `\n \u003cejs-maps>\n \u003ce-layers>\n \u003ce-layer \n [shapeData]=\"worldMap\"\n [polygonSettings]=\"polygonSettings\">\n \u003cng-template #polygonTooltip let-data>\n \u003cdiv style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n padding: 12px;\n border-radius: 6px;\n color: white;\">\n \u003cdiv style=\"font-weight: bold; font-size: 14px; margin-bottom: 5px;\">\n {{data.zoneName}}\n \u003c/div>\n \u003cdiv style=\"font-size: 11px;\">\n \u003cdiv>Area: {{data.area}} sq km\u003c/div>\n \u003cdiv>Status: {{data.status}}\u003c/div>\n \u003cdiv>Population: {{data.population | number}}\u003c/div>\n \u003c/div>\n \u003c/div>\n \u003c/ng-template>\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public polygonSettings: object = {\n polygons: [\n {\n points: this.zoneCoordinates,\n tooltipTemplate: '#polygonTooltip',\n tooltipSettings: { visible: true },\n // Data available in template\n zoneName: 'Metropolitan Area',\n area: 450,\n status: 'Active',\n population: 2500000\n }\n ]\n };\n}\n```\n\n---\n\n## Selection and Highlighting\n\nEnable user interaction with polygons:\n\n### Polygon Selection\n\nAllow users to select polygons:\n\n```typescript\npublic polygonSettings: object = {\n polygons: [\n {\n points: this.regionCoordinates,\n fill: 'rgba(156, 39, 176, 0.3)',\n selectionSettings: {\n enable: true,\n enableMultiSelect: true,\n fill: 'rgba(156, 39, 176, 0.7)',\n opacity: 0.9,\n border: {\n color: '#9C27B0',\n width: 3,\n opacity: 1\n }\n }\n }\n ]\n};\n```\n\n### Polygon Highlighting\n\nProvide visual feedback on hover:\n\n```typescript\npublic polygonSettings: object = {\n polygons: [\n {\n points: this.areaCoordinates,\n fill: 'rgba(255, 193, 7, 0.3)',\n highlightSettings: {\n enable: true,\n fill: 'rgba(255, 193, 7, 0.6)',\n opacity: 0.8,\n border: {\n color: '#FFC107',\n width: 2,\n opacity: 1\n }\n }\n }\n ]\n};\n```\n\n### Combined Selection and Highlighting\n\nUse both features together for rich interactions:\n\n```typescript\npublic polygonSettings: object = {\n polygons: [\n {\n points: this.territoryCoordinates,\n fill: 'rgba(0, 150, 136, 0.3)',\n borderColor: '#009688',\n borderWidth: 2,\n // Highlight on hover\n highlightSettings: {\n enable: true,\n fill: 'rgba(0, 150, 136, 0.5)',\n border: { color: '#00796B', width: 2 }\n },\n // Select on click\n selectionSettings: {\n enable: true,\n fill: 'rgba(0, 150, 136, 0.8)',\n border: { color: '#004D40', width: 3 }\n }\n }\n ]\n};\n```\n\n---\n\n## Use Cases\n\n### Coverage Area Visualization\n\nDisplay service or network coverage zones:\n\n```typescript\nexport class CoverageMapComponent {\n public polygonSettings: object = {\n polygons: [\n {\n points: [\n { latitude: 37.7749, longitude: -122.4194 },\n { latitude: 37.8044, longitude: -122.2712 },\n { latitude: 37.3382, longitude: -121.8863 },\n { latitude: 37.3541, longitude: -121.9552 }\n ],\n fill: 'rgba(76, 175, 80, 0.3)',\n borderColor: '#4CAF50',\n borderWidth: 2,\n tooltipText: '5G Coverage Zone - Bay Area',\n tooltipSettings: { visible: true }\n },\n {\n points: [\n { latitude: 34.0522, longitude: -118.2437 },\n { latitude: 34.1478, longitude: -118.1445 },\n { latitude: 33.9425, longitude: -118.4081 },\n { latitude: 33.8121, longitude: -117.9190 }\n ],\n fill: 'rgba(255, 235, 59, 0.3)',\n borderColor: '#FFEB3B',\n borderWidth: 2,\n tooltipText: '4G Coverage Zone - Los Angeles',\n tooltipSettings: { visible: true }\n }\n ]\n };\n}\n```\n\n### Restricted Zones\n\nMark no-fly zones, restricted areas, or dangerous regions:\n\n```typescript\nexport class RestrictedZonesComponent {\n public polygonSettings: object = {\n polygons: [\n {\n points: this.militaryBasePerimeter,\n fill: 'rgba(244, 67, 54, 0.4)',\n borderColor: '#F44336',\n borderWidth: 3,\n tooltipText: 'Restricted Area - No Entry',\n tooltipSettings: {\n visible: true,\n fill: '#C62828',\n textStyle: { color: '#FFFFFF' }\n },\n selectionSettings: {\n enable: false // Disable selection for restricted zones\n }\n }\n ]\n };\n}\n```\n\n### Territory Boundaries\n\nDisplay political or administrative boundaries:\n\n```typescript\nexport class TerritoryComponent {\n public salesTerritories: any[] = [\n {\n name: 'North Territory',\n points: [/* coordinates */],\n color: '#2196F3',\n manager: 'John Smith',\n revenue: 5600000\n },\n {\n name: 'South Territory',\n points: [/* coordinates */],\n color: '#4CAF50',\n manager: 'Jane Doe',\n revenue: 7200000\n }\n ];\n \n public polygonSettings: object = {\n polygons: this.salesTerritories.map(territory => ({\n points: territory.points,\n fill: `${territory.color}33`, // Add transparency\n borderColor: territory.color,\n borderWidth: 2,\n tooltipText: `${territory.name} - Manager: ${territory.manager}`,\n tooltipSettings: { visible: true }\n }))\n };\n}\n```\n\n### Delivery Zones\n\nVisualize delivery or service areas:\n\n```typescript\nexport class DeliveryZonesComponent {\n public polygonSettings: object = {\n polygons: [\n {\n points: this.zone1Coordinates,\n fill: 'rgba(46, 125, 50, 0.3)',\n borderColor: '#2E7D32',\n borderWidth: 2,\n tooltipSettings: {\n visible: true,\n template: '\u003cdiv>\u003cb>Zone 1\u003c/b>\u003cbr>Free delivery\u003cbr>15-30 min\u003c/div>'\n }\n },\n {\n points: this.zone2Coordinates,\n fill: 'rgba(251, 192, 45, 0.3)',\n borderColor: '#FBC02D',\n borderWidth: 2,\n tooltipSettings: {\n visible: true,\n template: '\u003cdiv>\u003cb>Zone 2\u003c/b>\u003cbr>$5 delivery fee\u003cbr>30-45 min\u003c/div>'\n }\n },\n {\n points: this.zone3Coordinates,\n fill: 'rgba(229, 57, 53, 0.3)',\n borderColor: '#E53935',\n borderWidth: 2,\n tooltipSettings: {\n visible: true,\n template: '\u003cdiv>\u003cb>Zone 3\u003c/b>\u003cbr>$10 delivery fee\u003cbr>45-60 min\u003c/div>'\n }\n }\n ]\n };\n}\n```\n\n---\n\n## Best Practices\n\n### Coordinate Management\n\n1. **Close Polygons Properly**: First and last points should be identical to close the polygon\n2. **Order Points Correctly**: Define points in clockwise or counter-clockwise order\n3. **Validate Coordinates**: Ensure latitude (-90 to 90) and longitude (-180 to 180) are valid\n4. **Use Appropriate Precision**: Limit decimal places to 6 for coordinate precision\n5. **Store Complex Shapes**: Use GeoJSON format for complex polygons with holes\n\n### Visual Design\n\n1. **Use Semi-Transparent Fills**: Set opacity between 0.3-0.6 to see underlying map features\n2. **Choose Contrasting Borders**: Make borders visible against both fill and map\n3. **Color Code Meaningfully**: Use intuitive colors (green=safe, red=danger, blue=water)\n4. **Limit Polygon Count**: Keep visible polygons under 50 for optimal performance\n5. **Provide Context**: Always include tooltips or labels to explain polygon meaning\n\n### Performance Optimization\n\n1. **Simplify Complex Polygons**: Reduce coordinate count for intricate shapes\n2. **Lazy Load Polygons**: Load polygons progressively as users zoom/pan\n3. **Use Appropriate Detail Level**: Match polygon complexity to zoom level\n4. **Cache Polygon Data**: Store frequently used polygon coordinates\n5. **Batch Updates**: Group multiple polygon operations into single refresh\n\n### User Experience\n\n1. **Enable Tooltips**: Always provide information about polygon purpose\n2. **Support Interaction**: Allow selection/highlighting when appropriate\n3. **Use Visual Hierarchy**: More important zones should have stronger visual presence\n4. **Add Labels**: Consider adding text labels for large, important polygons\n5. **Provide Legend**: Include a legend explaining polygon color coding\n\n---\n\n## Common Patterns\n\n### Dynamic Polygon Creation\n\nCreate polygons based on user input or data:\n\n```typescript\nexport class DynamicPolygonComponent {\n @ViewChild('maps') public mapObj!: MapsComponent;\n public drawnPoints: any[] = [];\n \n public onMapClick(args: IMouseEventArgs): void {\n // Add point on each click\n this.drawnPoints.push({\n latitude: args.latitude,\n longitude: args.longitude\n });\n \n // Create polygon after 3+ points\n if (this.drawnPoints.length >= 3) {\n this.createPolygon(this.drawnPoints);\n }\n }\n \n private createPolygon(points: any[]): void {\n const newPolygon = {\n points: [...points, points[0]], // Close the polygon\n fill: 'rgba(33, 150, 243, 0.4)',\n borderColor: '#2196F3',\n borderWidth: 2\n };\n \n this.polygonSettings.polygons.push(newPolygon);\n this.mapObj.refresh();\n }\n \n public clearPolygons(): void {\n this.drawnPoints = [];\n this.polygonSettings.polygons = [];\n this.mapObj.refresh();\n }\n}\n```\n\n### Polygon from GeoJSON\n\nConvert GeoJSON polygons to map polygons:\n\n```typescript\nexport class GeoJsonPolygonComponent {\n public loadGeoJsonPolygons(geoJson: any): void {\n const polygons = geoJson.features\n .filter((feature: any) => feature.geometry.type === 'Polygon')\n .map((feature: any) => ({\n points: feature.geometry.coordinates[0].map((coord: number[]) => ({\n latitude: coord[1],\n longitude: coord[0]\n })),\n fill: feature.properties.fill || 'rgba(33, 150, 243, 0.4)',\n borderColor: feature.properties.borderColor || '#2196F3',\n tooltipText: feature.properties.name || 'Unnamed Region'\n }));\n \n this.polygonSettings = { polygons };\n }\n}\n```\n\n### Conditional Polygon Styling\n\nStyle polygons based on data values:\n\n```typescript\nexport class ConditionalPolygonComponent {\n public createPolygonsFromData(zoneData: any[]): void {\n this.polygonSettings = {\n polygons: zoneData.map(zone => {\n let fill, borderColor;\n \n // Style based on risk level\n if (zone.riskLevel === 'high') {\n fill = 'rgba(244, 67, 54, 0.4)';\n borderColor = '#F44336';\n } else if (zone.riskLevel === 'medium') {\n fill = 'rgba(255, 152, 0, 0.4)';\n borderColor = '#FF9800';\n } else {\n fill = 'rgba(76, 175, 80, 0.4)';\n borderColor = '#4CAF50';\n }\n \n return {\n points: zone.coordinates,\n fill,\n borderColor,\n borderWidth: 2,\n tooltipText: `${zone.name} - Risk: ${zone.riskLevel}`,\n tooltipSettings: { visible: true }\n };\n })\n };\n }\n}\n```\n\n---\n\n## Next Steps\n\n- **[Data Visualization](./data-visualization.md)** - Learn about bubbles, color mapping, and legends\n- **[User Interactions](./user-interactions.md)** - Implement selection, highlighting, and tooltips\n- **[Map Providers](./map-providers.md)** - Use polygons with online map tiles\n- **[Markers](../markers.md)** - Combine polygons with location markers\n- **[Advanced Features](./advanced-features.md)** - Export maps with polygons\n\nFor complete API documentation, visit the [Syncfusion Angular Maps API Reference](https://ej2.syncfusion.com/angular/documentation/api/maps/polygonSettingsModel).\n\n---\n\n## API Reference Summary\n\n### Shape Configuration APIs\n\n| API | Description | Documentation Link |\n|-----|-------------|-------------------|\n| `shapeData` | GeoJSON shape data | [shapeData](https://ej2.syncfusion.com/angular/documentation/api/maps/layerSettings#shapedata) |\n| `geometryType` | Geometry type | [geometryType](https://ej2.syncfusion.com/angular/documentation/api/maps/layerSettings#geometrytype) |\n| `ShapeSettings` | Shape styling | [ShapeSettings](https://ej2.syncfusion.com/angular/documentation/api/maps/shapeSettings) |\n\n**For complete API documentation, see:** [api-reference.md](references/api-reference.md)","content_type":"text/markdown; charset=utf-8","language":"markdown","size":16684,"content_sha256":"04b85ab82f72568a9e67c46c58092500d0cab24591b8f38f54edf9c35ff3fdfe"},{"filename":"references/user-interactions.md","content":"# User Interactions in Angular Maps\n\nMaster user interaction techniques in Syncfusion Angular Maps to create engaging, interactive geographic visualizations. This comprehensive guide covers zooming, panning, selection, highlighting, tooltips, and event handling.\n\n## Table of Contents\n\n- [Zooming](#zooming)\n - [Enabling Zoom Features](#enabling-zoom-features)\n - [Zoom Types](#zoom-types)\n - [Zoom Toolbar Configuration](#zoom-toolbar-configuration)\n - [Zoom Limits and Animation](#zoom-limits-and-animation)\n- [Panning](#panning)\n - [Enabling Panning](#enabling-panning)\n - [Pan with Zoom](#pan-with-zoom)\n- [Selection](#selection)\n - [Shape Selection](#shape-selection)\n - [Bubble and Marker Selection](#bubble-and-marker-selection)\n - [Polygon Selection](#polygon-selection)\n - [Multi-Select](#multi-select)\n- [Highlighting](#highlighting)\n - [Shape Highlighting](#shape-highlighting)\n - [Interactive Elements](#interactive-elements)\n- [Tooltips](#tooltips)\n - [Layer Tooltips](#layer-tooltips)\n - [Tooltip Customization](#tooltip-customization)\n - [Tooltip Templates](#tooltip-templates)\n- [Events](#events)\n - [User Action Events](#user-action-events)\n - [Rendering Events](#rendering-events)\n - [Lifecycle Events](#lifecycle-events)\n\n---\n\n## Zooming\n\nZooming enables users to focus on specific map regions for detailed analysis. The Maps component supports multiple zoom interaction methods.\n\n### Enabling Zoom Features\n\nEnable basic zooming functionality:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { MapsModule, ZoomService } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n providers: [ZoomService],\n template: `\n \u003cejs-maps [zoomSettings]=\"zoomSettings\">\n \u003ce-layers>\n \u003ce-layer [shapeData]=\"worldMap\">\u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public worldMap: object = // Your GeoJSON data\n \n public zoomSettings: object = {\n enable: true,\n enablePanning: true,\n zoomFactor: 1, // Initial zoom level\n maxZoom: 20, // Maximum zoom level\n minZoom: 1 // Minimum zoom level\n };\n}\n```\n\n### Zoom Types\n\nConfigure different zoom interaction methods:\n\n**Mouse Wheel Zooming:**\n\n```typescript\npublic zoomSettings: object = {\n enable: true,\n mouseWheelZoom: true, // Enable scroll wheel zoom\n enablePanning: true\n};\n```\n\n**Pinch Zooming (Touch Devices):**\n\n```typescript\npublic zoomSettings: object = {\n enable: true,\n pinchZooming: true, // Enable pinch-to-zoom on touch devices\n enablePanning: true\n};\n```\n\n**Double-Click Zooming:**\n\n```typescript\npublic zoomSettings: object = {\n enable: true,\n doubleClickZoom: true, // Zoom in on double click\n enablePanning: true\n};\n```\n\n**Single-Click Zooming:**\n\n```typescript\npublic zoomSettings: object = {\n enable: true,\n zoomOnClick: true, // Zoom in on single click\n enablePanning: true\n};\n```\n\n**Selection Zooming (Rectangle Selection):**\n\n```typescript\npublic zoomSettings: object = {\n enable: true,\n enableSelectionZooming: true, // Draw rectangle to zoom\n enablePanning: false // Must be false for selection zooming\n};\n```\n\n### Zoom Toolbar Configuration\n\nAdd a zoom toolbar with interactive controls:\n\n```typescript\npublic zoomSettings: object = {\n enable: true,\n enablePanning: true,\n toolbarSettings: {\n buttonSettings: {\n toolbarItems: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset']\n }\n }\n};\n```\n\n**Available Toolbar Items:**\n- **Zoom**: Enable rectangular selection zoom\n- **ZoomIn**: Zoom in by one level\n- **ZoomOut**: Zoom out by one level\n- **Pan**: Enable panning mode\n- **Reset**: Reset to initial zoom level\n\n**Customize Toolbar Appearance:**\n\n```typescript\npublic zoomSettings: object = {\n enable: true,\n toolbarSettings: {\n backgroundColor: '#FFFFFF',\n borderColor: '#1976D2',\n borderWidth: 1,\n borderOpacity: 1,\n horizontalAlignment: 'Far', // 'Near', 'Center', 'Far'\n verticalAlignment: 'Near', // 'Near', 'Center', 'Far'\n orientation: 'Horizontal', // 'Horizontal' or 'Vertical'\n buttonSettings: {\n toolbarItems: ['ZoomIn', 'ZoomOut', 'Reset'],\n fill: '#E3F2FD',\n color: '#1976D2',\n borderColor: '#1976D2',\n borderWidth: 1,\n borderOpacity: 1,\n radius: 30,\n selectionColor: '#0D47A1',\n highlightColor: '#64B5F6',\n padding: 5,\n opacity: 1\n }\n }\n};\n```\n\n**Customize Toolbar Tooltips:**\n\n```typescript\npublic zoomSettings: object = {\n enable: true,\n toolbarSettings: {\n buttonSettings: {\n toolbarItems: ['ZoomIn', 'ZoomOut', 'Reset']\n },\n tooltipSettings: {\n visible: true,\n fill: '#212121',\n borderColor: '#424242',\n borderWidth: 1,\n borderOpacity: 1,\n fontColor: '#FFFFFF',\n fontFamily: 'Segoe UI',\n fontSize: '12px',\n fontStyle: 'Normal',\n fontWeight: 'Normal',\n fontOpacity: 1\n }\n }\n};\n```\n\n### Zoom Limits and Animation\n\nControl zoom behavior with limits and animations:\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n providers: [ZoomService],\n template: `\n \u003cejs-maps [zoomSettings]=\"zoomSettings\">\n \u003ce-layers>\n \u003ce-layer \n [shapeData]=\"worldMap\"\n [animationDuration]=\"animationDuration\">\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public zoomSettings: object = {\n enable: true,\n minZoom: 2, // Minimum zoom level\n maxZoom: 15, // Maximum zoom level\n zoomFactor: 3, // Initial zoom level\n mouseWheelZoom: true,\n enablePanning: true\n };\n \n public animationDuration: number = 500; // Zoom animation duration in ms\n}\n```\n\n### Center Position Zooming\n\nZoom to a specific geographic location:\n\n```typescript\nimport { Component, ViewChild } from '@angular/core';\nimport { MapsComponent } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n providers: [ZoomService],\n template: `\n \u003cejs-maps \n #maps\n [centerPosition]=\"centerPosition\"\n [zoomSettings]=\"zoomSettings\">\n \u003ce-layers>\n \u003ce-layer [shapeData]=\"worldMap\">\u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n \n \u003cbutton (click)=\"zoomToLocation()\">Zoom to New York\u003c/button>\n `\n})\nexport class AppComponent {\n @ViewChild('maps') public mapObj!: MapsComponent;\n \n public centerPosition: object = {\n latitude: 40.7128, // Center latitude\n longitude: -74.0060 // Center longitude\n };\n \n public zoomSettings: object = {\n enable: true,\n zoomFactor: 8,\n enablePanning: true\n };\n \n public zoomToLocation(): void {\n this.mapObj.centerPosition = { latitude: 40.7128, longitude: -74.0060 };\n this.mapObj.zoomSettings.zoomFactor = 10;\n this.mapObj.refresh();\n }\n}\n```\n\n---\n\n## Panning\n\nPanning allows users to navigate across the map by dragging.\n\n### Enabling Panning\n\nEnable panning with zoom functionality:\n\n```typescript\npublic zoomSettings: object = {\n enable: true,\n enablePanning: true, // Enable map panning\n mouseWheelZoom: true\n};\n```\n\n### Pan with Zoom\n\nCombine panning with various zoom modes:\n\n```typescript\npublic zoomSettings: object = {\n enable: true,\n enablePanning: true,\n mouseWheelZoom: true,\n doubleClickZoom: true,\n pinchZooming: true,\n toolbarSettings: {\n buttonSettings: {\n toolbarItems: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset']\n }\n }\n};\n```\n\n**Programmatic Panning:**\n\n```typescript\nimport { Component, ViewChild } from '@angular/core';\nimport { MapsComponent } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n template: `\n \u003cejs-maps #maps [zoomSettings]=\"zoomSettings\">\n \u003ce-layers>\n \u003ce-layer [shapeData]=\"worldMap\">\u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n \n \u003cbutton (click)=\"panToCenter()\">Pan to Center\u003c/button>\n `\n})\nexport class AppComponent {\n @ViewChild('maps') public mapObj!: MapsComponent;\n \n public panToCenter(): void {\n this.mapObj.centerPosition = { latitude: 0, longitude: 0 };\n this.mapObj.refresh();\n }\n}\n```\n\n---\n\n## Selection\n\nSelection allows users to interact with and highlight specific map elements.\n\n### Shape Selection\n\nEnable selection for map shapes:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { MapsModule } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n template: `\n \u003cejs-maps>\n \u003ce-layers>\n \u003ce-layer \n [shapeData]=\"worldMap\"\n [selectionSettings]=\"selectionSettings\">\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public worldMap: object = // GeoJSON data\n \n public selectionSettings: object = {\n enable: true,\n fill: '#FF5722',\n opacity: 1,\n border: {\n color: '#D84315',\n width: 2,\n opacity: 1\n },\n enableMultiSelect: false // Single selection by default\n };\n}\n```\n\n### Multi-Select\n\nEnable selection of multiple shapes:\n\n```typescript\npublic selectionSettings: object = {\n enable: true,\n fill: '#FF5722',\n enableMultiSelect: true // Allow multiple selections\n};\n```\n\n### Bubble and Marker Selection\n\nEnable selection for bubbles:\n\n```typescript\npublic bubbleSettings: object[] = [{\n visible: true,\n dataSource: this.populationData,\n valuePath: 'population',\n selectionSettings: {\n enable: true,\n fill: '#FFEB3B',\n opacity: 1,\n border: { color: '#FBC02D', width: 2 }\n }\n}];\n```\n\nEnable selection for markers:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { MarkerService } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n providers: [MarkerService],\n template: `\n \u003cejs-maps>\n \u003ce-layers>\n \u003ce-layer \n [shapeData]=\"worldMap\"\n [markerSettings]=\"markerSettings\">\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public markerSettings: object[] = [{\n visible: true,\n dataSource: [\n { latitude: 40.7128, longitude: -74.0060, name: 'New York' },\n { latitude: 51.5074, longitude: -0.1278, name: 'London' }\n ],\n selectionSettings: {\n enable: true,\n fill: '#4CAF50',\n opacity: 1,\n border: { color: '#2E7D32', width: 2 }\n }\n }];\n}\n```\n\n### Polygon Selection\n\nEnable selection for polygon shapes:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { PolygonService } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n providers: [PolygonService],\n template: `\n \u003cejs-maps>\n \u003ce-layers>\n \u003ce-layer \n [shapeData]=\"worldMap\"\n [polygonSettings]=\"polygonSettings\">\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public polygonSettings: object = {\n polygons: [{\n points: [\n { latitude: 40.7128, longitude: -74.0060 },\n { latitude: 41.8781, longitude: -87.6298 },\n { latitude: 34.0522, longitude: -118.2437 }\n ],\n fill: '#E3F2FD',\n opacity: 0.7,\n selectionSettings: {\n enable: true,\n enableMultiSelect: true,\n fill: '#1976D2',\n opacity: 0.8,\n border: { color: '#0D47A1', width: 2 }\n }\n }]\n };\n}\n```\n\n### Initial Shape Selection\n\nPre-select shapes when the map loads:\n\n```typescript\npublic initialShapeSelection: object[] = [\n {\n shapePath: 'name',\n shapeValue: 'United States'\n },\n {\n shapePath: 'name',\n shapeValue: 'Canada'\n }\n];\n```\n\n### Initial Marker Selection\n\nPre-select markers when the map loads:\n\n```typescript\npublic initialMarkerSelection: object[] = [\n {\n latitude: 40.7128,\n longitude: -74.0060\n },\n {\n latitude: 51.5074,\n longitude: -0.1278\n }\n];\n```\n\n### Programmatic Selection\n\nProgrammatically select shapes using public methods:\n\n```typescript\nimport { Component, ViewChild } from '@angular/core';\nimport { MapsComponent } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n template: `\n \u003cejs-maps #maps>\n \u003ce-layers>\n \u003ce-layer \n [shapeData]=\"worldMap\"\n [selectionSettings]=\"selectionSettings\">\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n \n \u003cbutton (click)=\"selectShape()\">Select USA\u003c/button>\n `\n})\nexport class AppComponent {\n @ViewChild('maps') public mapObj!: MapsComponent;\n \n public selectionSettings: object = {\n enable: true,\n fill: '#FF5722'\n };\n \n public selectShape(): void {\n // Parameters: layerIndex, propertyName, propertyValue, selected\n this.mapObj.shapeSelection(0, 'name', 'United States', true);\n }\n}\n```\n\n---\n\n## Highlighting\n\nHighlighting provides visual feedback when users hover over map elements.\n\n### Shape Highlighting\n\nEnable highlighting for map shapes:\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n template: `\n \u003cejs-maps>\n \u003ce-layers>\n \u003ce-layer \n [shapeData]=\"worldMap\"\n [highlightSettings]=\"highlightSettings\">\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public worldMap: object = // GeoJSON data\n \n public highlightSettings: object = {\n enable: true,\n fill: '#64B5F6',\n opacity: 0.7,\n border: {\n color: '#1976D2',\n width: 2,\n opacity: 1\n }\n };\n}\n```\n\n### Interactive Elements\n\nEnable highlighting for bubbles, markers, and polygons:\n\n**Bubble Highlighting:**\n\n```typescript\npublic bubbleSettings: object[] = [{\n visible: true,\n dataSource: this.populationData,\n valuePath: 'population',\n highlightSettings: {\n enable: true,\n fill: '#FFC107',\n opacity: 0.8,\n border: { color: '#FF8F00', width: 2 }\n }\n}];\n```\n\n**Marker Highlighting:**\n\n```typescript\nimport { Component } from '@angular/core';\nimport { MarkerService } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n providers: [MarkerService],\n template: `\n \u003cejs-maps>\n \u003ce-layers>\n \u003ce-layer \n [shapeData]=\"worldMap\"\n [markerSettings]=\"markerSettings\">\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public markerSettings: object[] = [{\n visible: true,\n dataSource: this.cities,\n highlightSettings: {\n enable: true,\n fill: '#E91E63',\n opacity: 1,\n border: { color: '#C2185B', width: 2 }\n }\n }];\n}\n```\n\n**Polygon Highlighting:**\n\n```typescript\nimport { Component } from '@angular/core';\nimport { PolygonService } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n providers: [PolygonService],\n template: `\n \u003cejs-maps>\n \u003ce-layers>\n \u003ce-layer \n [shapeData]=\"worldMap\"\n [polygonSettings]=\"polygonSettings\">\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public polygonSettings: object = {\n polygons: [{\n points: this.polygonCoordinates,\n highlightSettings: {\n enable: true,\n fill: '#9C27B0',\n opacity: 0.6,\n border: { color: '#6A1B9A', width: 2 }\n }\n }]\n };\n}\n```\n\n---\n\n## Tooltips\n\nTooltips display additional information when users hover over or touch map elements.\n\n### Layer Tooltips\n\nEnable tooltips for map shapes:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { MapsTooltipService } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n providers: [MapsTooltipService],\n template: `\n \u003cejs-maps [tooltipDisplayMode]=\"tooltipDisplayMode\">\n \u003ce-layers>\n \u003ce-layer \n [shapeData]=\"worldMap\"\n [dataSource]=\"populationData\"\n shapePropertyPath=\"name\"\n shapeDataPath=\"country\"\n [tooltipSettings]=\"tooltipSettings\">\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public worldMap: object = // GeoJSON data\n \n public populationData: object[] = [\n { country: 'United States', population: 331000000 },\n { country: 'China', population: 1440000000 }\n ];\n \n public tooltipDisplayMode: string = 'MouseMove'; // 'MouseMove', 'Click', 'DoubleClick'\n \n public tooltipSettings: object = {\n visible: true,\n valuePath: 'country',\n format: '${country}: ${population} people'\n };\n}\n```\n\n### Tooltip Customization\n\nCustomize tooltip appearance:\n\n```typescript\npublic tooltipSettings: object = {\n visible: true,\n valuePath: 'name',\n fill: '#212121',\n border: {\n color: '#424242',\n width: 1,\n opacity: 1\n },\n textStyle: {\n fontFamily: 'Segoe UI',\n size: '13px',\n fontWeight: 'Normal',\n color: '#FFFFFF',\n opacity: 1\n },\n format: '\u003cb>${name}\u003c/b>\u003cbr>Population: ${population}'\n};\n```\n\n### Tooltip Templates\n\nUse custom HTML templates for rich tooltip content:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { MapsTooltipService } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n providers: [MapsTooltipService],\n template: `\n \u003cejs-maps>\n \u003ce-layers>\n \u003ce-layer \n [shapeData]=\"worldMap\"\n [dataSource]=\"countryData\"\n [tooltipSettings]=\"tooltipSettings\">\n \u003cng-template #tooltipTemplate let-data>\n \u003cdiv style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); \n padding: 15px; \n border-radius: 8px; \n color: white; \n box-shadow: 0 4px 6px rgba(0,0,0,0.3);\">\n \u003cdiv style=\"font-size: 16px; font-weight: bold; margin-bottom: 8px;\">\n {{data.name}}\n \u003c/div>\n \u003cdiv style=\"font-size: 12px; opacity: 0.9;\">\n \u003cdiv>Population: {{data.population | number}}\u003c/div>\n \u003cdiv>GDP: ${{data.gdp}}T\u003c/div>\n \u003cdiv>Capital: {{data.capital}}\u003c/div>\n \u003c/div>\n \u003c/div>\n \u003c/ng-template>\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public tooltipSettings: object = {\n visible: true,\n template: '#tooltipTemplate'\n };\n}\n```\n\n### Tooltip Duration (Mobile)\n\nControl tooltip display duration on mobile devices:\n\n```typescript\npublic tooltipSettings: object = {\n visible: true,\n valuePath: 'name',\n duration: 3000 // Display for 3 seconds (0 = infinite)\n};\n```\n\n### Marker and Bubble Tooltips\n\nEnable tooltips for markers and bubbles:\n\n```typescript\n// Marker tooltip\npublic markerSettings: object[] = [{\n visible: true,\n dataSource: this.cities,\n tooltipSettings: {\n visible: true,\n valuePath: 'name',\n template: '\u003cdiv>\u003cb>${name}\u003c/b>\u003cbr>Lat: ${latitude}\u003cbr>Lng: ${longitude}\u003c/div>'\n }\n}];\n\n// Bubble tooltip\npublic bubbleSettings: object[] = [{\n visible: true,\n dataSource: this.populationData,\n valuePath: 'population',\n tooltipSettings: {\n visible: true,\n valuePath: 'country',\n format: '${country}: ${population}'\n }\n}];\n```\n\n---\n\n## Events\n\nHandle user interactions and lifecycle events to create dynamic map experiences.\n\n### User Action Events\n\n**Click Event:**\n\n```typescript\nimport { Component } from '@angular/core';\nimport { IMouseEventArgs } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n template: `\n \u003cejs-maps (click)=\"onMapClick($event)\">\n \u003ce-layers>\n \u003ce-layer [shapeData]=\"worldMap\">\u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public onMapClick(args: IMouseEventArgs): void {\n console.log('Map clicked at:', args.x, args.y);\n console.log('Target:', args.target);\n }\n}\n```\n\n**Double Click Event:**\n\n```typescript\npublic onDoubleClick(args: IMouseEventArgs): void {\n console.log('Map double-clicked');\n // Implement custom double-click behavior\n}\n```\n\n**Right Click Event:**\n\n```typescript\npublic onRightClick(args: IMouseEventArgs): void {\n console.log('Right-clicked on map');\n args.cancel = true; // Prevent default context menu\n // Show custom context menu\n}\n```\n\n**Shape Selected Event:**\n\n```typescript\nimport { IShapeSelectedEventArgs } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n template: `\n \u003cejs-maps (shapeSelected)=\"onShapeSelected($event)\">\n \u003ce-layers>\n \u003ce-layer \n [shapeData]=\"worldMap\"\n [selectionSettings]=\"selectionSettings\">\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public onShapeSelected(args: IShapeSelectedEventArgs): void {\n console.log('Shape selected:', args.data);\n console.log('Shape name:', args.shapeName);\n console.log('Layer index:', args.layerIndex);\n }\n}\n```\n\n**Item Highlight Event:**\n\n```typescript\nimport { ISelectionEventArgs } from '@syncfusion/ej2-angular-maps';\n\npublic onItemHighlight(args: ISelectionEventArgs): void {\n console.log('Item highlighted:', args.data);\n // Customize highlight behavior\n}\n```\n\n**Item Selection Event:**\n\n```typescript\npublic onItemSelection(args: ISelectionEventArgs): void {\n console.log('Item selected:', args.data);\n console.log('Is selected:', args.isSelected);\n // Custom selection handling\n}\n```\n\n**Marker Click Event:**\n\n```typescript\nimport { IMarkerClickEventArgs } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n template: `\n \u003cejs-maps (markerClick)=\"onMarkerClick($event)\">\n \u003ce-layers>\n \u003ce-layer [markerSettings]=\"markerSettings\">\u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public onMarkerClick(args: IMarkerClickEventArgs): void {\n console.log('Marker clicked:', args.data);\n console.log('Marker index:', args.markerIndex);\n }\n}\n```\n\n**Bubble Click Event:**\n\n```typescript\nimport { IBubbleClickEventArgs } from '@syncfusion/ej2-angular-maps';\n\npublic onBubbleClick(args: IBubbleClickEventArgs): void {\n console.log('Bubble clicked:', args.data);\n console.log('Bubble value:', args.value);\n}\n```\n\n### Rendering Events\n\n**Shape Rendering Event:**\n\n```typescript\nimport { IShapeRenderingEventArgs } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n template: `\n \u003cejs-maps (shapeRendering)=\"onShapeRendering($event)\">\n \u003ce-layers>\n \u003ce-layer [shapeData]=\"worldMap\">\u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public onShapeRendering(args: IShapeRenderingEventArgs): void {\n // Customize shape appearance during rendering\n if (args.data['name'] === 'United States') {\n args.fill = '#FF5722';\n }\n }\n}\n```\n\n**Marker Rendering Event:**\n\n```typescript\nimport { IMarkerRenderingEventArgs } from '@syncfusion/ej2-angular-maps';\n\npublic onMarkerRendering(args: IMarkerRenderingEventArgs): void {\n // Customize marker appearance\n if (args.data['population'] > 10000000) {\n args.fill = '#F44336';\n args.height = 20;\n args.width = 20;\n }\n}\n```\n\n**Bubble Rendering Event:**\n\n```typescript\nimport { IBubbleRenderingEventArgs } from '@syncfusion/ej2-angular-maps';\n\npublic onBubbleRendering(args: IBubbleRenderingEventArgs): void {\n // Customize bubble appearance\n if (args.data['value'] > 1000000) {\n args.fill = '#4CAF50';\n }\n}\n```\n\n**Legend Rendering Event:**\n\n```typescript\nimport { ILegendRenderingEventArgs } from '@syncfusion/ej2-angular-maps';\n\npublic onLegendRendering(args: ILegendRenderingEventArgs): void {\n // Customize legend items\n args.fill = '#' + Math.floor(Math.random() * 16777215).toString(16);\n}\n```\n\n**Data Label Rendering Event:**\n\n```typescript\nimport { ILabelRenderingEventArgs } from '@syncfusion/ej2-angular-maps';\n\npublic onDataLabelRendering(args: ILabelRenderingEventArgs): void {\n // Customize data labels\n if (args.text.length > 10) {\n args.text = args.text.substring(0, 10) + '...';\n }\n}\n```\n\n### Lifecycle Events\n\n**Load Event:**\n\n```typescript\nimport { ILoadEventArgs } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n template: `\n \u003cejs-maps (load)=\"onLoad($event)\">\n \u003ce-layers>\n \u003ce-layer [shapeData]=\"worldMap\">\u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public onLoad(args: ILoadEventArgs): void {\n console.log('Maps component loading');\n // Perform initialization tasks\n }\n}\n```\n\n**Loaded Event:**\n\n```typescript\nimport { ILoadedEventArgs } from '@syncfusion/ej2-angular-maps';\n\npublic onLoaded(args: ILoadedEventArgs): void {\n console.log('Maps component loaded');\n // Component is fully rendered and ready\n}\n```\n\n**Zoom Event:**\n\n```typescript\nimport { IMapZoomEventArgs } from '@syncfusion/ej2-angular-maps';\n\n@Component({\n selector: 'app-root',\n template: `\n \u003cejs-maps \n (zoom)=\"onZoom($event)\"\n [zoomSettings]=\"zoomSettings\">\n \u003ce-layers>\n \u003ce-layer [shapeData]=\"worldMap\">\u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public onZoom(args: IMapZoomEventArgs): void {\n console.log('Zoom level:', args.scale);\n console.log('Type:', args.type); // 'ZoomIn' or 'ZoomOut'\n }\n}\n```\n\n**Pan Event:**\n\n```typescript\nimport { IMapPanEventArgs } from '@syncfusion/ej2-angular-maps';\n\npublic onPan(args: IMapPanEventArgs): void {\n console.log('Panning to:', args.x, args.y);\n}\n```\n\n**Resize Event:**\n\n```typescript\nimport { IResizeEventArgs } from '@syncfusion/ej2-angular-maps';\n\npublic onResize(args: IResizeEventArgs): void {\n console.log('Map resized:', args.currentSize);\n}\n```\n\n**Tooltip Render Event:**\n\n```typescript\nimport { ITooltipRenderEventArgs } from '@syncfusion/ej2-angular-maps';\n\npublic onTooltipRender(args: ITooltipRenderEventArgs): void {\n // Customize tooltip content before rendering\n args.content = '\u003cb>' + args.content + '\u003c/b>';\n}\n```\n\n**Animation Complete Event:**\n\n```typescript\nimport { IAnimationCompleteEventArgs } from '@syncfusion/ej2-angular-maps';\n\npublic onAnimationComplete(args: IAnimationCompleteEventArgs): void {\n console.log('Animation completed');\n // Perform post-animation tasks\n}\n```\n\n---\n\n## Best Practices\n\n### User Experience\n\n1. **Enable Multiple Zoom Methods**: Provide mouse wheel, toolbar, and double-click zooming for flexibility\n2. **Add Visual Feedback**: Use highlighting to provide immediate feedback on hover\n3. **Configure Appropriate Zoom Limits**: Set reasonable minZoom and maxZoom values to prevent confusion\n4. **Enable Tooltips**: Always provide tooltips with meaningful information\n5. **Use Smooth Animations**: Set animationDuration to 300-500ms for smooth interactions\n\n### Performance Optimization\n\n1. **Throttle Event Handlers**: Debounce or throttle high-frequency events like mouse move\n2. **Limit Selection Elements**: Avoid enabling selection on too many elements simultaneously\n3. **Use Event Delegation**: Handle events at the layer level rather than individual shapes when possible\n4. **Optimize Tooltip Content**: Keep tooltip content lightweight for fast rendering\n5. **Cache Event Data**: Store frequently accessed event data to avoid repeated calculations\n\n### Accessibility\n\n1. **Provide Keyboard Navigation**: Enable zoom with +/- keys and panning with arrow keys\n2. **Add ARIA Labels**: Include descriptive ARIA labels for interactive elements\n3. **Support Screen Readers**: Ensure tooltips and labels are screen reader friendly\n4. **Maintain Focus Management**: Implement proper focus handling for keyboard navigation\n5. **Use High Contrast Colors**: Ensure selection and highlight colors have sufficient contrast\n\n### Mobile Optimization\n\n1. **Enable Touch Interactions**: Always enable pinchZooming for touch devices\n2. **Increase Touch Targets**: Make interactive elements large enough for touch (minimum 44x44px)\n3. **Optimize Tooltip Duration**: Set appropriate tooltip duration for mobile displays\n4. **Test on Multiple Devices**: Verify interactions work on various screen sizes\n5. **Reduce Visual Complexity**: Simplify visualizations for smaller screens\n\n---\n\n## Common Patterns\n\n### Interactive Dashboard Map\n\n```typescript\nexport class InteractiveDashboardComponent {\n public zoomSettings: object = {\n enable: true,\n enablePanning: true,\n mouseWheelZoom: true,\n doubleClickZoom: true,\n toolbarSettings: {\n buttonSettings: {\n toolbarItems: ['ZoomIn', 'ZoomOut', 'Reset']\n }\n }\n };\n \n public selectionSettings: object = {\n enable: true,\n enableMultiSelect: true,\n fill: '#FF5722'\n };\n \n public highlightSettings: object = {\n enable: true,\n fill: '#64B5F6'\n };\n \n public tooltipSettings: object = {\n visible: true,\n template: '#customTooltip'\n };\n \n public onShapeSelected(args: IShapeSelectedEventArgs): void {\n // Load detailed data for selected region\n this.loadRegionData(args.shapeName);\n }\n}\n```\n\n### Drill-Down Interaction\n\n```typescript\nexport class DrillDownMapComponent {\n public currentLevel: string = 'world';\n \n public onShapeClick(args: IMouseEventArgs): void {\n if (this.currentLevel === 'world') {\n // Drill down to country level\n this.loadCountryData(args.target);\n this.currentLevel = 'country';\n } else if (this.currentLevel === 'country') {\n // Drill down to state level\n this.loadStateData(args.target);\n this.currentLevel = 'state';\n }\n }\n \n public navigateUp(): void {\n if (this.currentLevel === 'state') {\n this.loadCountryData();\n this.currentLevel = 'country';\n } else if (this.currentLevel === 'country') {\n this.loadWorldData();\n this.currentLevel = 'world';\n }\n }\n}\n```\n\n### Advanced Zoom Control\n\n```typescript\nexport class AdvancedZoomComponent {\n @ViewChild('maps') public mapObj!: MapsComponent;\n \n public zoomToRegion(bounds: { north: number; south: number; east: number; west: number }): void {\n const centerLat = (bounds.north + bounds.south) / 2;\n const centerLng = (bounds.east + bounds.west) / 2;\n \n this.mapObj.centerPosition = {\n latitude: centerLat,\n longitude: centerLng\n };\n \n // Calculate appropriate zoom level based on bounds\n const zoomLevel = this.calculateZoomLevel(bounds);\n this.mapObj.zoomSettings.zoomFactor = zoomLevel;\n this.mapObj.refresh();\n }\n \n private calculateZoomLevel(bounds: any): number {\n // Calculate zoom level based on lat/lng bounds\n const latDiff = Math.abs(bounds.north - bounds.south);\n const lngDiff = Math.abs(bounds.east - bounds.west);\n const maxDiff = Math.max(latDiff, lngDiff);\n \n return Math.min(20, Math.max(1, Math.floor(180 / maxDiff)));\n }\n}\n```\n\n---\n\n## Next Steps\n\n- **[Data Visualization](./data-visualization.md)** - Learn about bubbles, color mapping, and legends\n- **[Map Providers](./map-providers.md)** - Integrate online map services\n- **[Polygon Shapes](./polygon-shapes.md)** - Draw and customize polygon overlays\n- **[Advanced Features](./advanced-features.md)** - Explore print, export, and methods\n- **[Accessibility](./accessibility.md)** - Implement accessibility features\n\nFor complete API documentation, visit the [Syncfusion Angular Maps API Reference](https://ej2.syncfusion.com/angular/documentation/api/maps/).\n\n---\n\n## API Reference Summary\n\n### Zoom & Pan APIs\n\n| API | Description | Documentation Link |\n|-----|-------------|-------------------|\n| `ZoomSettings` | Zoom configuration model | [ZoomSettings](https://ej2.syncfusion.com/angular/documentation/api/maps/zoomSettings) |\n| `enable` | Enable/disable zooming | [enable](https://ej2.syncfusion.com/angular/documentation/api/maps/zoomSettings#enable) |\n| `zoomFactor` | Zoom level factor | [zoomFactor](https://ej2.syncfusion.com/angular/documentation/api/maps/zoomSettings#zoomfactor) |\n| `mouseWheelZoom` | Mouse wheel zoom | [mouseWheelZoom](https://ej2.syncfusion.com/angular/documentation/api/maps/zoomSettings#mousewheelzoom) |\n| `pinchZoom` | Pinch zoom (touch) | [pinchZoom](https://ej2.syncfusion.com/angular/documentation/api/maps/zoomSettings#pinchzoom) |\n| `toolbars` | Zoom toolbar buttons | [toolbars](https://ej2.syncfusion.com/angular/documentation/api/maps/zoomSettings#toolbars) |\n\n### Tooltip & Selection APIs\n\n| API | Description | Documentation Link |\n|-----|-------------|-------------------|\n| `TooltipSettings` | Tooltip configuration | [TooltipSettings](https://ej2.syncfusion.com/angular/documentation/api/maps/tooltipSettings) |\n| `SelectionSettings` | Selection configuration | [SelectionSettings](https://ej2.syncfusion.com/angular/documentation/api/maps/selectionSettings) |\n| `HighlightSettings` | Highlight configuration | [HighlightSettings](https://ej2.syncfusion.com/angular/documentation/api/maps/highlightSettings) |\n\n### Interaction Events\n\n| Event | Description | Documentation Link |\n|-------|-------------|-------------------|\n| `click` | Fires on map click | [click](https://ej2.syncfusion.com/angular/documentation/api/maps/mapsComponent#click) |\n| `doubleClick` | Fires on double-click | [doubleClick](https://ej2.syncfusion.com/angular/documentation/api/maps/mapsComponent#doubleclick) |\n| `zoom` | Fires during zoom | [zoom](https://ej2.syncfusion.com/angular/documentation/api/maps/mapsComponent#zoom) |\n| `pan` | Fires during pan | [pan](https://ej2.syncfusion.com/angular/documentation/api/maps/mapsComponent#pan) |\n| `shapeSelected` | Fires on shape selection | [shapeSelected](https://ej2.syncfusion.com/angular/documentation/api/maps/mapsComponent#shapeselected) |\n| `tooltipRender` | Fires before tooltip | [tooltipRender](https://ej2.syncfusion.com/angular/documentation/api/maps/mapsComponent#tooltiprender) |\n\n**For complete API documentation, see:**[api-reference.md](references/api-reference.md)","content_type":"text/markdown; charset=utf-8","language":"markdown","size":33847,"content_sha256":"b54720e9b7b3fd62e1646c85d4efcfbe1022dbb0e040105145f49ae0f5bde381"}],"content_json":{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"Implementing Syncfusion Angular Maps","type":"text"}]},{"type":"paragraph","content":[{"text":"Comprehensive guide for implementing the Syncfusion Angular Maps component to visualize geographical data with interactive features, multiple layers, and rich customization options.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"When to Use This Skill","type":"text"}]},{"type":"paragraph","content":[{"text":"Use this skill when you need to:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Visualize geographical data","type":"text","marks":[{"type":"strong"}]},{"text":" - Display statistical data on world maps, country maps, regional maps, or custom geographic shapes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Create interactive maps","type":"text","marks":[{"type":"strong"}]},{"text":" - Build maps with zoom, pan, selection, highlighting, and tooltip interactions","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Plot locations","type":"text","marks":[{"type":"strong"}]},{"text":" - Add markers, bubbles, or annotations to highlight specific geographic points","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Display map layers","type":"text","marks":[{"type":"strong"}]},{"text":" - Work with multiple overlapping layers using GeoJSON data or map providers (Bing, OpenStreetMap, Azure)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Color-code regions","type":"text","marks":[{"type":"strong"}]},{"text":" - Apply color mapping based on data values for choropleth/heat map visualizations","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Custom map visualizations","type":"text","marks":[{"type":"strong"}]},{"text":" - Create non-geographic visualizations like seat layouts, floor plans, or stadium maps","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Navigation and routing","type":"text","marks":[{"type":"strong"}]},{"text":" - Draw navigation lines or routes between markers","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Export and print maps","type":"text","marks":[{"type":"strong"}]},{"text":" - Generate printable or exportable map visualizations","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Build dashboards","type":"text","marks":[{"type":"strong"}]},{"text":" - Integrate maps into Angular applications for business intelligence or analytics","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Component Overview","type":"text"}]},{"type":"paragraph","content":[{"text":"The Syncfusion Angular Maps component (","type":"text"},{"text":"@syncfusion/ej2-angular-maps","type":"text","marks":[{"type":"code_inline"}]},{"text":") is a powerful data visualization tool that renders geographical data using Scalable Vector Graphics (SVG). It supports:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Multiple layers and sublayers","type":"text","marks":[{"type":"strong"}]},{"text":" for complex visualizations","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"GeoJSON data binding","type":"text","marks":[{"type":"strong"}]},{"text":" for custom shapes and regions","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Map providers","type":"text","marks":[{"type":"strong"}]},{"text":" (Bing Maps, OpenStreetMap, Azure Maps) as base layers","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Six projection types","type":"text","marks":[{"type":"strong"}]},{"text":" (Mercator, Equirectangular, Miller, Eckert3, Eckert5, Eckert6, Winkel3, AitOff)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Rich visualization elements","type":"text","marks":[{"type":"strong"}]},{"text":" - markers, bubbles, data labels, legends, navigation lines, annotations","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Interactive features","type":"text","marks":[{"type":"strong"}]},{"text":" - zooming, panning, tooltips, selection, highlighting","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Responsive and accessible","type":"text","marks":[{"type":"strong"}]},{"text":" design with WCAG compliance","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Documentation and Navigation Guide","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Getting Started","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/getting-started.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/getting-started.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"When implementing Maps for the first time or setting up a new Angular project:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Installing dependencies (@syncfusion/ej2-angular-maps package)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Setting up Angular environment and importing MapsModule","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Creating first basic map with world map data","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Understanding module injection for features (MarkerService, BubbleService, etc.)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Adding CSS themes and styling","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Running the application","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Layers and Data Binding","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/layers-and-data.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/layers-and-data.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"For working with map layers, shape data, and data source binding:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Understanding layer structure and configuration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Loading GeoJSON shape data (shapeData property)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Binding external data sources (dataSource, shapeDataPath, shapePropertyPath)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Creating multiple layers and sublayers","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Layer types (base layer vs sublayer)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Switching between layers (baseLayerIndex)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Rendering custom shapes for non-geographic visualizations","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"GeometryType options (Geographic vs Normal)","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Markers","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/markers.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/markers.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"For adding and customizing location markers:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Adding markers with latitude/longitude data","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Marker shapes (Balloon, Circle, Cross, Diamond, Image, Rectangle, Star, Triangle)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Custom marker templates","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Marker styling (size, color, border, opacity)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Dynamic markers with data binding","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Marker clustering","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Marker animations and transitions","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Marker tooltips and events","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Creating routes between markers","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Data Visualization Features","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/data-visualization.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/data-visualization.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"For visualizing data with bubbles, colors, labels, and legends:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Bubbles","type":"text","marks":[{"type":"strong"}]},{"text":" - Size-based visualization for quantitative data","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Color mapping","type":"text","marks":[{"type":"strong"}]},{"text":" - Range color mapping, equal color mapping, desaturation color mapping","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Data labels","type":"text","marks":[{"type":"strong"}]},{"text":" - Displaying shape names or data values on the map","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Legends","type":"text","marks":[{"type":"strong"}]},{"text":" - Adding legends for color mapping and bubbles","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Navigation lines","type":"text","marks":[{"type":"strong"}]},{"text":" - Drawing lines between locations","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Annotations","type":"text","marks":[{"type":"strong"}]},{"text":" - Adding custom HTML content at specific positions","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Combining multiple visualization features","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"User Interactions","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/user-interactions.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/user-interactions.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"For implementing interactive map behaviors:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Zooming","type":"text","marks":[{"type":"strong"}]},{"text":" - Mouse wheel zoom, pinch zoom, double-click zoom, zoom toolbar","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Panning","type":"text","marks":[{"type":"strong"}]},{"text":" - Mouse drag and touch panning","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Tooltips","type":"text","marks":[{"type":"strong"}]},{"text":" - Layer tooltips, marker tooltips, bubble tooltips","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Selection","type":"text","marks":[{"type":"strong"}]},{"text":" - Shape selection, marker selection, bubble selection","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Highlighting","type":"text","marks":[{"type":"strong"}]},{"text":" - Hover highlight effects","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Interactive legend","type":"text","marks":[{"type":"strong"}]},{"text":" - Clicking legend items to show/hide shapes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Event handling (click, hover, zoom, pan events)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Touch and mobile support","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Map Providers","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/map-providers.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/map-providers.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"For integrating external map services:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Overview of map provider support","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Bing Maps","type":"text","marks":[{"type":"strong"}]},{"text":" integration and API key configuration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"OpenStreetMap","type":"text","marks":[{"type":"strong"}]},{"text":" (OSM) integration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Azure Maps","type":"text","marks":[{"type":"strong"}]},{"text":" integration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Provider-specific features and limitations","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Combining map providers with shape layers","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"URL templates and tile services","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Zoom level configuration","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Polygon Shapes","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/polygon-shapes.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/polygon-shapes.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"For drawing and customizing polygons:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Adding polygon overlays to maps","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Polygon configuration and data structure","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Styling polygons (fill, border, opacity)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Polygon events (click, hover)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Use cases (highlighting regions, boundaries, zones)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Dynamic polygon rendering","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Customization and Styling","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/customization.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/customization.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"For theming and visual customization:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Built-in themes (Material, Bootstrap, Fabric, Tailwind, etc.)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"CSS customization and theme overrides","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Shape styling (fill, border, color schemes)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Responsive design patterns","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Map projections","type":"text","marks":[{"type":"strong"}]},{"text":" - Choosing and configuring projection types","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Background customization (colors, images)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Title and subtitle styling","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Border and margin configuration","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Localization and Internationalization","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/localization.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/localization.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"For globalizing map content:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Internationalization (i18n) setup","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Localization (l10n) for different languages","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Right-to-left (RTL) support","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Number formatting for different locales","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Currency formatting in tooltips/labels","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Date and time formatting","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Culture-specific rendering","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Advanced Features","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/advanced-features.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/advanced-features.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"For advanced capabilities and APIs:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Print and Export","type":"text","marks":[{"type":"strong"}]},{"text":" - Printing maps, exporting to PNG/JPEG/SVG/PDF","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"State persistence","type":"text","marks":[{"type":"strong"}]},{"text":" - Saving and restoring map state","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Public methods","type":"text","marks":[{"type":"strong"}]},{"text":" - Programmatic control (refresh, print, export, etc.)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Events reference","type":"text","marks":[{"type":"strong"}]},{"text":" - Complete list of available events","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Creating routes","type":"text","marks":[{"type":"strong"}]},{"text":" - Drawing navigation routes between markers","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Custom path rendering","type":"text","marks":[{"type":"strong"}]},{"text":" - Advanced path and line customization","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Drilldown navigation","type":"text","marks":[{"type":"strong"}]},{"text":" - Creating hierarchical map navigation","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Accessibility","type":"text"}]},{"type":"paragraph","content":[{"text":"📄 ","type":"text"},{"text":"Read:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"references/accessibility.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/accessibility.md","title":null}}]}]},{"type":"paragraph","content":[{"text":"For accessible map implementations:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"WCAG 2.1 compliance guidelines","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Keyboard navigation support","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"ARIA attributes and roles","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Screen reader compatibility","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"High contrast theme support","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Focus indicators and management","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Alternative text for shapes and markers","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Quick Start","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Installation","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"# Install the Maps package\nnpm install @syncfusion/ej2-angular-maps --save","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Basic Implementation","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"import { Component } from '@angular/core';\nimport { MapsModule } from '@syncfusion/ej2-angular-maps';\nimport { world_map } from './world-map'; // GeoJSON data\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n template: `\n \u003cejs-maps id='maps-container'>\n \u003ce-layers>\n \u003ce-layer [shapeData]='shapeData'>\u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public shapeData: object = world_map;\n}","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"With Data Binding and Color Mapping","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"import { Component } from '@angular/core';\nimport { MapsModule } from '@syncfusion/ej2-angular-maps';\nimport { world_map } from './world-map';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n template: `\n \u003cejs-maps id='maps-container'>\n \u003ce-layers>\n \u003ce-layer \n [shapeData]='shapeData'\n [dataSource]='dataSource'\n shapeDataPath='Country'\n shapePropertyPath='name'\n [shapeSettings]='shapeSettings'>\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public shapeData: object = world_map;\n \n public dataSource: object[] = [\n { Country: 'United States', Population: 331002651, Code: 'US' },\n { Country: 'India', Population: 1380004385, Code: 'IN' },\n { Country: 'China', Population: 1439323776, Code: 'CN' }\n ];\n \n public shapeSettings: object = {\n colorValuePath: 'Population',\n colorMapping: [\n { from: 0, to: 100000000, color: '#C5E8B7' },\n { from: 100000001, to: 500000000, color: '#5BC85A' },\n { from: 500000001, to: 2000000000, color: '#238B45' }\n ]\n };\n}","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Common Patterns","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Pattern 1: Map with Markers and Tooltips","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"import { Component } from '@angular/core';\nimport { MapsModule, MarkerService, MapsTooltipService } from '@syncfusion/ej2-angular-maps';\nimport { world_map } from './world-map';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n providers: [MarkerService, MapsTooltipService],\n template: `\n \u003cejs-maps id='maps-container'>\n \u003ce-layers>\n \u003ce-layer \n [shapeData]='shapeData'\n [markerSettings]='markerSettings'>\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public shapeData: object = world_map;\n \n public markerSettings: object[] = [{\n visible: true,\n dataSource: [\n { latitude: 40.7128, longitude: -74.0060, name: 'New York' },\n { latitude: 51.5074, longitude: -0.1278, name: 'London' },\n { latitude: 35.6762, longitude: 139.6503, name: 'Tokyo' }\n ],\n shape: 'Circle',\n fill: '#FF6347',\n height: 15,\n width: 15,\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n }];\n}","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Pattern 2: Interactive Map with Zoom and Legend","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"import { Component } from '@angular/core';\nimport { MapsModule, ZoomService, LegendService } from '@syncfusion/ej2-angular-maps';\nimport { world_map } from './world-map';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n providers: [ZoomService, LegendService],\n template: `\n \u003cejs-maps \n id='maps-container'\n [zoomSettings]='zoomSettings'\n [legendSettings]='legendSettings'>\n \u003ce-layers>\n \u003ce-layer \n [shapeData]='shapeData'\n [dataSource]='dataSource'\n shapeDataPath='Country'\n shapePropertyPath='name'\n [shapeSettings]='shapeSettings'>\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public shapeData: object = world_map;\n \n public dataSource: object[] = [\n { Country: 'United States', Category: 'High' },\n { Country: 'Canada', Category: 'Medium' },\n { Country: 'Mexico', Category: 'Low' }\n ];\n \n public shapeSettings: object = {\n colorValuePath: 'Category',\n colorMapping: [\n { value: 'High', color: '#E74C3C' },\n { value: 'Medium', color: '#F39C12' },\n { value: 'Low', color: '#27AE60' }\n ]\n };\n \n public zoomSettings: object = {\n enable: true,\n toolbars: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset']\n };\n \n public legendSettings: object = {\n visible: true,\n position: 'Bottom'\n };\n}","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Pattern 3: Multi-Layer Map with Sublayers","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"import { Component } from '@angular/core';\nimport { MapsModule } from '@syncfusion/ej2-angular-maps';\nimport { world_map } from './world-map';\nimport { usa_map } from './usa-map';\nimport { california } from './california';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [MapsModule],\n template: `\n \u003cejs-maps id='maps-container'>\n \u003ce-layers>\n \u003c!-- Base layer -->\n \u003ce-layer \n [shapeData]='usaMap'\n [shapeSettings]='baseShapeSettings'>\n \u003c/e-layer>\n \n \u003c!-- Sublayer highlighting California -->\n \u003ce-layer \n type='SubLayer'\n [shapeData]='californiaMap'\n [shapeSettings]='sublayerShapeSettings'>\n \u003c/e-layer>\n \u003c/e-layers>\n \u003c/ejs-maps>\n `\n})\nexport class AppComponent {\n public usaMap: object = usa_map;\n public californiaMap: object = california;\n \n public baseShapeSettings: object = {\n fill: '#E5E5E5',\n border: { color: '#000000', width: 0.5 }\n };\n \n public sublayerShapeSettings: object = {\n fill: '#FFD700',\n border: { color: '#FF6347', width: 2 }\n };\n}","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Key Configuration Options","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Layer Settings","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"shapeData","type":"text","marks":[{"type":"code_inline"}]},{"text":" - GeoJSON data for shapes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"dataSource","type":"text","marks":[{"type":"code_inline"}]},{"text":" - External data to bind","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"shapeDataPath","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Field in dataSource identifying shape","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"shapePropertyPath","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Field in shapeData matching dataSource","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"shapeSettings","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Visual styling for shapes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"type","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Layer type ('Layer' or 'SubLayer')","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Shape Settings","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"fill","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Shape fill color","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"border","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Border configuration (color, width, opacity)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"colorValuePath","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Data field for color mapping","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"colorMapping","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Array of color ranges or values","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"autofill","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Auto-generate colors for shapes","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Marker Settings","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"visible","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Show/hide markers","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"dataSource","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Marker data with latitude/longitude","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"shape","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Marker shape type","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"height","type":"text","marks":[{"type":"code_inline"}]},{"text":" / ","type":"text"},{"text":"width","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Marker dimensions","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"template","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Custom HTML template","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"tooltipSettings","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Marker tooltip configuration","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Zoom Settings","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"enable","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Enable/disable zooming","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"zoomFactor","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Initial zoom level","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"maxZoom","type":"text","marks":[{"type":"code_inline"}]},{"text":" / ","type":"text"},{"text":"minZoom","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Zoom limits","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"toolbars","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Zoom control buttons","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"mouseWheelZoom","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Enable mouse wheel zooming","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"pinchZooming","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Enable touch pinch zoom","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Legend Settings","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"visible","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Show/hide legend","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"position","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Legend placement (Top, Bottom, Left, Right)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"mode","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Legend mode ('Default', 'Interactive')","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"type","type":"text","marks":[{"type":"code_inline"}]},{"text":" - Legend type ('Layers', 'Bubbles', 'Markers')","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Common Use Cases","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Use Case 1: Sales Dashboard by Region","type":"text"}]},{"type":"paragraph","content":[{"text":"Create choropleth maps showing sales data across countries or states with color-coded regions, interactive tooltips, and legends. Useful for business intelligence dashboards.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Use Case 2: Store Locator Map","type":"text"}]},{"type":"paragraph","content":[{"text":"Display store locations with custom marker icons, clustering for dense areas, and tooltips showing store details. Integrate with map providers for street-level detail.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Use Case 3: Election Results Visualization","type":"text"}]},{"type":"paragraph","content":[{"text":"Show election results across districts/states using color mapping, with drilldown capability to explore detailed regional data.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Use Case 4: Real-time Tracking Dashboard","type":"text"}]},{"type":"paragraph","content":[{"text":"Plot vehicle, shipment, or asset locations with animated markers, navigation lines showing routes, and real-time data updates.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Use Case 5: Weather or Environmental Data","type":"text"}]},{"type":"paragraph","content":[{"text":"Visualize temperature, rainfall, air quality, or other environmental metrics using color gradients and data labels on geographic regions.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Use Case 6: COVID-19 or Disease Spread Tracking","type":"text"}]},{"type":"paragraph","content":[{"text":"Display case counts, vaccination rates, or infection rates by region using bubble sizes and color intensity.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Use Case 7: Flight Route Visualization","type":"text"}]},{"type":"paragraph","content":[{"text":"Show flight paths between cities using navigation lines, with markers for airports and interactive selection.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Use Case 8: Custom Seating Layouts","type":"text"}]},{"type":"paragraph","content":[{"text":"Use custom GeoJSON shapes for non-geographic visualizations like seat selection in theaters, stadiums, or transportation.","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Module Injection Requirements","type":"text"}]},{"type":"paragraph","content":[{"text":"The Maps component uses feature-specific services that must be injected:","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"typescript"},"content":[{"text":"import { \n MapsModule,\n MarkerService, // For markers\n BubbleService, // For bubbles\n DataLabelService, // For data labels\n LegendService, // For legends\n MapsTooltipService, // For tooltips\n ZoomService, // For zoom and pan\n SelectionService, // For selection\n HighlightService, // For highlighting\n NavigationLineService, // For navigation lines\n AnnotationsService, // For annotations\n PolygonService // For polygons\n} from '@syncfusion/ej2-angular-maps';\n\n@Component({\n providers: [\n MarkerService,\n LegendService,\n MapsTooltipService,\n ZoomService\n // Add only the services you need\n ]\n})","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"API Reference Documentation","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Complete API Catalog","type":"text"}]},{"type":"paragraph","content":[{"text":"📘 ","type":"text"},{"text":"Full API Reference Guide","type":"text","marks":[{"type":"link","attrs":{"href":"./references/api-reference.md","title":null}},{"type":"strong"}]},{"text":" - Comprehensive documentation of all Maps APIs","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Quick API Links by Category","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Core Component","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"MapsComponent","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/mapsComponent","title":null}}]},{"text":" - Main maps component with 20+ properties and methods","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"print()","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/mapsComponent#print","title":null}}]},{"text":" - Print functionality","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"export()","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/mapsComponent#export","title":null}}]},{"text":" - Export to Image/PDF","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"refresh()","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/mapsComponent#refresh","title":null}}]},{"text":" - Refresh map","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"addLayer()","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/mapsComponent#addlayer","title":null}}]},{"text":" - Add layer dynamically","type":"text"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Layer Configuration","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"LayerSettings","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/layerSettings","title":null}}]},{"text":" - Layer configuration model","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"ShapeSettings","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/shapeSettings","title":null}}]},{"text":" - Shape styling configuration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"shapeData","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/layerSettings#shapedata","title":null}}]},{"text":" - GeoJSON shape data","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"dataSource","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/layerSettings#datasource","title":null}}]},{"text":" - External data binding","type":"text"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Markers & Bubbles","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"MarkerSettings","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettings","title":null}}]},{"text":" - Marker configuration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"BubbleSettings","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/bubbleSettings","title":null}}]},{"text":" - Bubble visualization","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"DataLabelSettings","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/dataLabelSettings","title":null}}]},{"text":" - Data labels","type":"text"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"User Interactions","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"ZoomSettings","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/zoomSettings","title":null}}]},{"text":" - Zoom and pan configuration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"TooltipSettings","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/tooltipSettings","title":null}}]},{"text":" - Tooltip configuration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"SelectionSettings","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/selectionSettings","title":null}}]},{"text":" - Selection behavior","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"HighlightSettings","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/highlightSettings","title":null}}]},{"text":" - Highlight behavior","type":"text"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Customization","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"LegendSettings","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/legendSettings","title":null}}]},{"text":" - Legend configuration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"ColorMappingSettings","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/colorMappingSettings","title":null}}]},{"text":" - Color mapping for choropleth","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"NavigationLineSettings","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/navigationLineSettings","title":null}}]},{"text":" - Navigation lines","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Annotation","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/annotation","title":null}}]},{"text":" - Custom annotations","type":"text"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Key Events (25+ Total)","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"load","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/mapsComponent#load","title":null}}]},{"text":" - Before map loads","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"loaded","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/mapsComponent#loaded","title":null}}]},{"text":" - After map loads","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"shapeSelected","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/mapsComponent#shapeselected","title":null}}]},{"text":" - Shape selection event","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"markerClick","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/mapsComponent#markerclick","title":null}}]},{"text":" - Marker click event","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"zoom","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/mapsComponent#zoom","title":null}}]},{"text":" - Zoom event","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"pan","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/mapsComponent#pan","title":null}}]},{"text":" - Pan event","type":"text"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Enumerations","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"ProjectionType","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/projectionType","title":null}}]},{"text":" - Map projection types (Mercator, Miller, Eckert, etc.)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"MarkerType","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/markerType","title":null}}]},{"text":" - Marker shapes (Balloon, Circle, Diamond, etc.)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"LayerType","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/layerType","title":null}}]},{"text":" - Layer vs SubLayer","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"GeometryType","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/geometryType","title":null}}]},{"text":" - Geographic vs Normal","type":"text"}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Event Interfaces","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"ILoadEventArgs","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/iLoadEventArgs","title":null}}]},{"text":" - Load event arguments","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"IShapeSelectedEventArgs","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/iShapeSelectedEventArgs","title":null}}]},{"text":" - Selection event args","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"IMarkerClickEventArgs","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/api/maps/iMarkerClickEventArgs","title":null}}]},{"text":" - Marker click args","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Context-Specific API References","type":"text"}]},{"type":"paragraph","content":[{"text":"Each reference guide includes relevant API tables:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"getting-started.md","type":"text","marks":[{"type":"link","attrs":{"href":"./references/getting-started.md","title":null}},{"type":"strong"}]},{"text":" - Core setup APIs","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"layers-and-data.md","type":"text","marks":[{"type":"link","attrs":{"href":"./references/layers-and-data.md","title":null}},{"type":"strong"}]},{"text":" - Layer and data binding APIs","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"markers.md","type":"text","marks":[{"type":"link","attrs":{"href":"./references/markers.md","title":null}},{"type":"strong"}]},{"text":" - Marker APIs and events","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"data-visualization.md","type":"text","marks":[{"type":"link","attrs":{"href":"./references/data-visualization.md","title":null}},{"type":"strong"}]},{"text":" - Bubble, color mapping, legend APIs","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"user-interactions.md","type":"text","marks":[{"type":"link","attrs":{"href":"./references/user-interactions.md","title":null}},{"type":"strong"}]},{"text":" - Zoom, pan, tooltip, selection APIs","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"map-providers.md","type":"text","marks":[{"type":"link","attrs":{"href":"./references/map-providers.md","title":null}},{"type":"strong"}]},{"text":" - Map provider APIs","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"customization.md","type":"text","marks":[{"type":"link","attrs":{"href":"./references/customization.md","title":null}},{"type":"strong"}]},{"text":" - Appearance and styling APIs","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"accessibility.md","type":"text","marks":[{"type":"link","attrs":{"href":"./references/accessibility.md","title":null}},{"type":"strong"}]},{"text":" - Accessibility-related APIs","type":"text"}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"Next Steps","type":"text"}]},{"type":"ordered_list","attrs":{"order":1,"listStyle":"number"},"content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Start with getting-started.md","type":"text","marks":[{"type":"strong"}]},{"text":" to set up your first map","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Explore layers-and-data.md","type":"text","marks":[{"type":"strong"}]},{"text":" to understand data binding","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Add markers.md","type":"text","marks":[{"type":"strong"}]},{"text":" to plot locations","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Implement user-interactions.md","type":"text","marks":[{"type":"strong"}]},{"text":" for zoom, pan, and tooltips","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Review customization.md","type":"text","marks":[{"type":"strong"}]},{"text":" for styling and themes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Check accessibility.md","type":"text","marks":[{"type":"strong"}]},{"text":" to ensure WCAG compliance","type":"text"}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"Package:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"@syncfusion/ej2-angular-maps","type":"text","marks":[{"type":"code_inline"}]},{"type":"br"},{"text":"Documentation:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"Syncfusion Angular Maps Documentation","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/documentation/maps/getting-started/","title":null}}]},{"type":"br"},{"text":"Demos:","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"Syncfusion Angular Maps Demos","type":"text","marks":[{"type":"link","attrs":{"href":"https://ej2.syncfusion.com/angular/demos/#/material/maps/default","title":null}}]}]}]},"metadata":{"date":"2026-06-05","name":"syncfusion-angular-maps","author":"@skillopedia","source":{"stars":0,"repo_name":"angular-ui-components-skills","origin_url":"https://github.com/syncfusion/angular-ui-components-skills/blob/HEAD/skills/syncfusion-angular-maps/SKILL.md","repo_owner":"syncfusion","body_sha256":"83a3890ba26379670d95b41f68bfdd0b2ff8046c10aa7b7b6836450579d32ab9","cluster_key":"22ce5e50e12928306423cfd477ff88e5a250ee78e727140c38d343bccaa9482c","clean_bundle":{"format":"clean-skill-bundle-v1","source":"syncfusion/angular-ui-components-skills/skills/syncfusion-angular-maps/SKILL.md","attachments":[{"id":"54286daa-5d81-506b-aa4d-53b9166dc88a","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/54286daa-5d81-506b-aa4d-53b9166dc88a/attachment.md","path":"references/accessibility.md","size":15312,"sha256":"52dca537b2568cdd74354e3cd2c5a68a7160ac2ec585333a254cce78265c0bbd","contentType":"text/markdown; charset=utf-8"},{"id":"59a2f37d-7e95-5b10-8d26-021d815e0bb6","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/59a2f37d-7e95-5b10-8d26-021d815e0bb6/attachment.md","path":"references/advanced-features.md","size":18082,"sha256":"4028a7362ff1ebbe9ad6fc94edabb5487279cace3843ed13773d050800711a13","contentType":"text/markdown; charset=utf-8"},{"id":"af25bee0-d421-5f7b-9ad6-71deff9e8a6c","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/af25bee0-d421-5f7b-9ad6-71deff9e8a6c/attachment.md","path":"references/api-reference.md","size":42487,"sha256":"e33d5fcf5d2d238044c85092f7909c727ae276370d21defad4d8d01f54d9b684","contentType":"text/markdown; charset=utf-8"},{"id":"e32c6efe-1d0a-5efa-9c38-782185fe304e","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/e32c6efe-1d0a-5efa-9c38-782185fe304e/attachment.md","path":"references/customization.md","size":20378,"sha256":"a659b15e8fdb60a98e2780d6e0cafb29b1042a5d2d0cb2b530236674e8044d1c","contentType":"text/markdown; charset=utf-8"},{"id":"fa6249d5-a96c-5f57-b678-da683fee4b68","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/fa6249d5-a96c-5f57-b678-da683fee4b68/attachment.md","path":"references/data-visualization.md","size":26446,"sha256":"cc6b42a8eab7c22ed90a43b563bae75b85469e2d458262e42ef0c034833ee592","contentType":"text/markdown; charset=utf-8"},{"id":"4fd40853-c5a1-5fa2-a873-4a013f2a9b1c","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/4fd40853-c5a1-5fa2-a873-4a013f2a9b1c/attachment.md","path":"references/getting-started.md","size":16578,"sha256":"d5f4fccfc8bb2980c473c4ce9e050df62b128520d3a7bf8ce9a8a2a0f240f4b4","contentType":"text/markdown; charset=utf-8"},{"id":"0cabef30-22f0-50e6-a7e5-9018f1471ed0","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/0cabef30-22f0-50e6-a7e5-9018f1471ed0/attachment.md","path":"references/layers-and-data.md","size":21331,"sha256":"84a4853934cbcda25f3dfb5e0aed4859d6d1fa6f5dbff83d150abed233c65e92","contentType":"text/markdown; charset=utf-8"},{"id":"5df9503d-c6d5-5d3d-9368-86183981b998","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/5df9503d-c6d5-5d3d-9368-86183981b998/attachment.md","path":"references/localization.md","size":13129,"sha256":"543c7ff94ae3dfb5a18256f722621437a220aad5733549363c045233a79d6cce","contentType":"text/markdown; charset=utf-8"},{"id":"4f03ec63-2ac0-5004-9a47-730c41898ca2","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/4f03ec63-2ac0-5004-9a47-730c41898ca2/attachment.md","path":"references/map-providers.md","size":21263,"sha256":"551319b992a87d2a1fcacee0c0009cfabeed2811f9c50eaeec3326b1bcf447bc","contentType":"text/markdown; charset=utf-8"},{"id":"00ba4620-25e6-5ffe-87e0-0253e0fd1833","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/00ba4620-25e6-5ffe-87e0-0253e0fd1833/attachment.md","path":"references/markers.md","size":21874,"sha256":"489ab79012466cf906f92784ab5bd7b862c50af40bf90b729bd57de520072b3f","contentType":"text/markdown; charset=utf-8"},{"id":"a5d95a0e-a48d-5946-b56c-2e5aea40aeac","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/a5d95a0e-a48d-5946-b56c-2e5aea40aeac/attachment.md","path":"references/polygon-shapes.md","size":16684,"sha256":"04b85ab82f72568a9e67c46c58092500d0cab24591b8f38f54edf9c35ff3fdfe","contentType":"text/markdown; charset=utf-8"},{"id":"0e7897be-f0f2-596c-a977-4039ee1899ec","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/0e7897be-f0f2-596c-a977-4039ee1899ec/attachment.md","path":"references/user-interactions.md","size":33847,"sha256":"b54720e9b7b3fd62e1646c85d4efcfbe1022dbb0e040105145f49ae0f5bde381","contentType":"text/markdown; charset=utf-8"}],"bundle_sha256":"0275ed0d3b230aa0b6ef6fd2b46b0f5268750c2a6524a21d42469c3696a897f9","attachment_count":12,"text_attachments":12,"attachment_storage":"skillopedia-attachments-v1","binary_attachments":0,"excluded_attachments":[]},"cluster_size":1,"skill_md_path":"skills/syncfusion-angular-maps/SKILL.md","import_metadata":{"date":"2026-06-05","author":"@skillopedia","version":"v1","category":"web-development","category_label":"Web"},"exact_dupes_collapsed_into_this":0},"version":"v1","category":"web-development","metadata":{"author":"Syncfusion Inc","version":"33.1.44","category":"Data Visualization"},"import_tag":"clean-skills-v1","description":"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."}},"renderedAt":1782979317007}

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.