syncfusion-react-maps

Bind your data source to a layer using shapeDataPath and shapePropertyPath to match GeoJSON properties, then set colorValuePath and colorMapping in shapeSettings. Inject the Legend service and enable legendSettings to display the color scale.

Inject the Marker service, then add a MarkersDirective with MarkerDirective inside your LayerDirective. Provide a dataSource containing latitude and longitude values, set visible to true, and customize shape, size, fill, and tooltips as needed.

Use GeoJSON for custom boundaries, region-based choropleth data, and offline rendering. Use a map provider via urlTemplate when you need satellite imagery or street-level detail. You can also combine both by overlaying GeoJSON sublayers on provider tiles.

Colors fail when colorValuePath does not match a field in your data, or when shapeDataPath and shapePropertyPath do not correctly link your data to GeoJSON properties. Also verify color mapping values match your data exactly, since matching is case-sensitive.

Maps features are modular, so you must inject the corresponding service. Add Zoom to the Inject services array and set zoomSettings.enable to true for zooming, or inject Legend and set legendSettings.visible to true for legends.

Yes, set allowImageExport or allowPdfExport to true, inject the ImageExport or PdfExport service, and call the export method via a component ref with a format like PNG, JPEG, SVG, or PDF. PDF export also supports portrait or landscape orientation.