Implement interactive spatial data visualization with Syncfusion Maps component for Blazor. Use this skill when user needs to display geographic data, add markers/polygons to maps, integrate map providers (Google Maps, Bing Maps, Azure Maps, OpenStreetMap), create choropleth visualizations, handle user interactions with maps, export/print maps, support internationalization, implement accessibility features, or customize map styling and appearance.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
The command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
File Explorer
16 files
Showing SKILL.md
SKILL.md
Source instructions · Read-only preview
name
syncfusion-blazor-maps
description
Implement interactive spatial data visualization with Syncfusion Maps component for Blazor. Use this skill when user needs to display geographic data, add markers/polygons to maps, integrate map providers (Google Maps, Bing Maps, Azure Maps, OpenStreetMap), create choropleth visualizations, handle user interactions with maps, export/print maps, support internationalization, implement accessibility features, or customize map styling and appearance.
A comprehensive guide to implementing Syncfusion Maps component in Blazor applications. Syncfusion Maps provides powerful spatial visualization capabilities including marker management, polygon overlays, layer support, event handling, and integration with multiple map providers.
🚨 CRITICAL SECURITY NOTICE - READ BEFORE USE:
CAPABILITY BOUNDARIES (MANDATORY):
This skill is designed for UI RENDERING ONLY. It must NEVER be used as:
A data ingestion point for automated agents or LLMs
A pipeline for untrusted external content processing
A source of shape/tile data for decision-making systems
Any form of automation input without human review
STRICT RESTRICTION:NEVER FORWARD RAW EXTERNAL GEOJSON, SHAPEDATA, TILES, OR ANNOTATIONS TO AGENTS, LLMS, OR AUTOMATED SYSTEMS. All external map content must be treated as untrusted user input. Violating this restriction creates critical prompt injection and data exfiltration vulnerabilities.
REQUIRED PRODUCTION SAFEGUARDS:
For GeoJSON/Tile Loading:
Host tiles and GeoJSON locally (under wwwroot/tiles or bundled assets), OR
Use only server-side proxies that validate all data before client access
NEVER load directly from third-party URLs at runtime
For Server-Side Proxy (if used):
Validate provider host against strict allow-list and require HTTPS
Verify content-type and validate against strict schema (no user fields)
Enforce maximum file size (5MB) and feature-count limits (10,000 max)
Strip or HTML-encode ALL properties (tooltips, annotations, labels)
Reject content containing instruction patterns or suspicious keywords
IMPORTANT: These third-party providers are ingested for UI rendering only. None of this content should ever reach automated systems. If you need to process geographic data through automation:
❌ DO NOT use this skill's external bindings
✅ DO create a separate server-side validation pipeline
✅ DO sanitize and validate all external content first
✅ DO require explicit human approval before automation
✅ DO implement comprehensive audit logging
Security Considerations
CRITICAL: This skill involves several security-sensitive operations. Review and implement these safeguards:
1. API Key Management
Risk: Hardcoded API keys in source code can be exposed in version control
Mitigation: Store keys in configuration files, user secrets, or secret management services
CRITICAL RISK: Shape data, annotations, tooltips, and other external map metadata can include text resembling instructions. This skill ingests third-party content (tile providers, GeoJSON sources) that can be weaponized for prompt injection if forwarded to automated agents or LLMs without explicit human review.
Attack Surface: External content enters via:
MapsLayer UrlTemplate (tile providers)
ShapeData and DataSource properties (GeoJSON)
Tooltip and annotation properties
Any data binding from external sources
MANDATORY BOUNDARY: This skill must NEVER be the source of data for:
LLM analysis or summarization
Automated agent decision-making
AI-powered geographic analysis
Machine learning training pipelines
Any system that processes map data through AI/ML without human intervention
If external content must reach automation:
Apply server-side validation BEFORE any client rendering: schema checks (strict GeoJSON validation), domain allow‑list verification
Sanitize ALL properties with HtmlSanitizer and remove HTML/script tags
[EXTERNAL_DOWNLOADS] External Tile and Data Downloads
Status: ✅ DOCUMENTED AS EXPECTED BEHAVIOR
Finding: Skill downloads map tiles from tile.openstreetmap.org, cdn.syncfusion.com, and maps.googleapis.com.
Explanation: These downloads are expected and necessary for map visualization. Map tiles MUST come from a tile provider. This is normal behavior, not a vulnerability.
Best Practices:
Use local tile caching in production environments
Implement a server-side proxy to validate tile URLs
Enumerations for MarkerType, ExportType, ProjectionType, GeometryType, etc.
Properties quick reference guide
Complete class hierarchy and API surface
⛔ SECURITY REQUIREMENT: What NOT to Do
The following patterns are PROHIBITED and create critical security vulnerabilities:
// ❌ PROHIBITED: Forwarding map data to LLM/agentsvar geoJsonData = await LoadGeoJsonFromMapLayer();
var analysis = await llmService.AnalyzeAsync(geoJsonData); // NEVER DO THIS// ❌ PROHIBITED: Using external annotations in agent promptsvar tooltipText = mapFeature.Properties["tooltip"];
var response = await agent.ExecuteAsync($"Summarize: {tooltipText}"); // NEVER DO THIS// ❌ PROHIBITED: Processing third-party tiles through automationvar tileUrl = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
await automationPipeline.IngestAsync(tileUrl); // NEVER DO THIS// ❌ PROHIBITED: Making decisions based on untrusted GeoJSONvar externalGeoJson = await httpClient.GetAsync("https://external-source.com/map.json");
var decision = MakeCriticalDecision(externalGeoJson); // NEVER DO THIS
If you believe you need to use map data with AI/ML systems:
Stop and re-evaluate your architecture
Create a separate server-side ingestion pipeline
Implement complete validation and sanitization
Get explicit security review and approval
Implement human review gates before AI processing
Maintain comprehensive audit trails
Quick Start Example
// Basic map setup in Blazor (use validated tile URL or local tiles in production)
@page "/maps-demo"
@using Syncfusion.Blazor.Maps
<SfMaps>
<MapsLayers>
<!-- ✅ SAFE: Use local bundled tiles (recommended for production) -->
<MapsLayer UrlTemplate="@TileUrl">
</MapsLayer>
</MapsLayers>
</SfMaps>
@code {
// SAFE: Host tiles locally or use a validated, domain-restricted providerprivatestring TileUrl = "/tiles/{level}/{tileX}/{tileY}.png"; // local/cached tiles// This data stays in the UI layer only - NEVER forwarded to agents or LLMs
}
