UNPKG

@syncfusion/ej2-react-maps

Version:

The Maps component is used to visualize the geographical data and represent the statistical data of a particular geographical area on earth with user interactivity, and provides various customizing options for React

926 lines (924 loc) 59.4 kB
{ "name": "Maps", "description": "Maps Component", "keywords": { "common": [ "ej2", "syncfusion", "web-components", "ej2-maps", "javascript", "typescript", "maps", "geoJSON", "shapes", "custom-shapes", "OSM", "openstreetmap", "bing maps", "azure maps", "google maps", "projection", "layer", "sublayer", "bubble", "color-mapping", "marker", "cluster", "data-label", "navigation-line", "zoom", "pan", "point", "multipoint", "linestring", "multilinestring", "polygon", "multipolygon", "geometry-collection", "feature-collection" ], "angular": ["angular", "ng-maps", "ej2-ng-maps"], "react": ["react", "reactjs", "react-maps", "ej2-react-maps"], "vue": ["vue", "vuejs", "vue-maps", "ej2-vue-maps"] }, "repository": { "type": "git", "url": "https://github.com/syncfusion/ej2-maps" }, "eventInterfaces": [ "ILoadEventArgs", "IPrintEventArgs", "ILoadedEventArgs", "IMouseEventArgs", "IResizeEventArgs", "ITooltipRenderEventArgs", "IShapeSelectedEventArgs", "ISelectionEventArgs", "ILayerRenderingEventArgs", "IShapeRenderingEventArgs", "IMarkerRenderingEventArgs", "IMarkerClickEventArgs", "IMarkerMoveEventArgs", "ILabelRenderingEventArgs", "IBubbleRenderingEventArgs", "IBubbleClickEventArgs", "IBubbleMoveEventArgs", "IAnimationCompleteEventArgs","IAnnotationRenderingEventArgs", "IMapZoomEventArgs", "IMapPanEventArgs", "IMarkerClusterRenderingEventArgs", "IMarkerClusterClickEventArgs", "IMarkerClusterMoveEventArgs", "ITooltipRenderCompleteEventArgs" ], "components": [ { "baseClass": "Maps", "directoryName": "maps", "blazorPlaceholder": "maps", "isPartialClass": true, "type": "simple", "blazorType": "native", "blazorDependency": [ "ej2-base", "../blazor/sf-maps" ], "defaultTag": "<maps id='map'></maps>", "twoWays": [ "dataSource" ], "comment": [ "/**", " * Represents the Angular Maps component.", " * It is ideal for rendering maps from GeoJSON data or other map providers like OpenStreetMap, Google Maps, Bing Maps, etc that has rich feature set that includes markers, labels, bubbles and much more. ", " * ```html", " * <ej-maps></ej-maps>", " * ```", " */" ], "reactComment": [ "/**", " * Represents the React Maps component.", " * It is ideal for rendering maps from GeoJSON data or other map providers like OpenStreetMap, Google Maps, Bing Maps, etc that has rich feature set that includes markers, labels, bubbles and much more. ", " * ```tsx", " * <MapsComponent></MapsComponent>", " * ```", " */" ], "vueComment": [ "/**", " * Represents the Vue Maps component.", " * It is ideal for rendering maps from GeoJSON data or other map providers like OpenStreetMap, Google Maps, Bing Maps, etc that has rich feature set that includes markers, labels, bubbles and much more. ", " * ```vue", " * <ejs-maps></ejs-maps>", " * ```", " */" ], "dynamicModules": [ "Bubble", "Legend", "Marker", "Highlight", "Selection", "MapsTooltip", "Zoom", "DataLabel", "NavigationLine", "Annotations", "Print", "PdfExport", "ImageExport", "Polygon" ], "complexDirective": [ { "propertyName": "titleSettings", "baseClass": "TitleSettings", "complexDirective": [ { "propertyName": "subtitleSettings", "baseClass": "SubTitleSettings", "blazorClassName": "MapsSubtitleSettings", "complexDirective": [ { "propertyName": "textStyle", "baseClass": "Font", "SelectorName": "e-maps-subtitle-textstyle", "aspSelectorName": "e-maps-subtitle-textstyle", "isCommon": true, "blazorCommonClassName": "MapsFontSettings", "blazorClassName": "MapsSubtitleTextStyle" } ] }, { "propertyName": "textStyle", "baseClass": "Font", "isCommon": true, "blazorCommonClassName": "MapsFontSettings", "blazorClassName": "MapsTitleTextStyle" } ] }, { "propertyName": "zoomSettings", "baseClass": "ZoomSettings", "complexDirective": [ { "propertyName": "buttonSettings", "baseClass": "ButtonSettings" }, { "propertyName": "tooltipSettings", "baseClass": "ZoomToolbarTooltipSettings" } ] }, { "propertyName": "centerPosition", "baseClass": "CenterPosition" }, { "propertyName": "legendSettings", "baseClass": "LegendSettings", "complexDirective": [ { "propertyName": "toggleLegendSettings", "baseClass": "ToggleLegendSettings", "blazorClassName": "MapsToggleLegendSettings", "complexDirective": [ { "propertyName": "border", "baseClass": "Border", "isCommon": true, "blazorCommonClassName": "MapsBorderSettings", "blazorClassName": "MapsToggleLegendBorder" } ] }, { "propertyName": "border", "baseClass": "Border", "isCommon": true, "blazorCommonClassName": "MapsBorderSettings", "blazorClassName": "MapsLegendBorder" }, { "propertyName": "shapeBorder", "baseClass": "Border", "isCommon": true, "blazorCommonClassName": "MapsBorderSettings", "blazorClassName": "MapsLegendShapeBorder" }, { "propertyName": "textStyle", "baseClass": "Font", "isCommon": true, "blazorCommonClassName": "MapsFontSettings", "blazorClassName": "MapsLegendTextStyle" }, { "propertyName": "title", "baseClass": "CommonTitleSettings", "blazorClassName": "MapsLegendTitle" }, { "propertyName": "titleStyle", "baseClass": "Font", "isCommon": true, "blazorCommonClassName": "MapsFontSettings", "blazorClassName": "MapsLegendTitleStyle" } ] }, { "propertyName": "mapsArea", "baseClass": "MapsAreaSettings", "complexDirective": [ { "propertyName": "border", "baseClass": "Border", "isCommon": true, "blazorCommonClassName": "MapsBorderSettings", "blazorClassName": "MapsAreaBorder" } ] }, { "propertyName": "border", "baseClass": "Border" }, { "propertyName": "margin", "baseClass": "Margin" } ], "tagDirective": [ { "arrayDirectiveClassName": "Layers", "directiveClassName": "Layer", "arrayDirectiveSelector": "ej-maps>e-layers", "directiveSelector": "e-layers>e-layer", "propertyName": "layers", "directoryName": "maps", "baseClass": "LayerSettings", "blazorArrayClassName":"MapsLayers", "complexDirective": [ { "propertyName": "dataLabelSettings", "baseClass": "DataLabelSettings", "blazorTemplates": ["template:labelTemplate"], "blazorTemplateModels": { "template" : "IDataTemplate" }, "complexDirective": [ { "propertyName": "border", "baseClass": "Border", "SelectorName": "e-layers-datalabel-border", "aspSelectorName": "e-layers-datalabel-border", "isCommon": true, "blazorCommonClassName": "MapsBorderSettings", "blazorClassName": "MapsLayerDataLabelBorder" }, { "propertyName": "textStyle", "baseClass": "Font", "SelectorName": "e-layers-datasabel-textstyle", "aspSelectorName": "e-layers-datasabel-textstyle", "isCommon": true, "blazorCommonClassName": "MapsFontSettings", "blazorClassName": "MapsLayerDataLabelTextStyle" } ] }, { "propertyName": "markerClusterSettings", "baseClass": "MarkerClusterSettings", "complexDirective": [ { "propertyName": "border", "baseClass": "Border", "SelectorName": "e-layers-markerCluster-border", "aspSelectorName": "e-layers-markerCluster-border", "isCommon": true, "blazorCommonClassName": "MapsBorderSettings", "blazorClassName": "MapsLayerMarkerClusterBorder" }, { "propertyName": "labelStyle", "baseClass": "Font", "SelectorName": "e-layers-markerCluster-textstyle", "aspSelectorName": "e-layers-markerCluster-textstyle", "isCommon": true, "blazorCommonClassName": "MapsFontSettings", "blazorClassName": "MapsLayerMarkerClusterLabelStyle" }, { "propertyName": "connectorLineSettings", "baseClass": "ConnectorLineSettings", "SelectorName": "e-layers-markerCluster-connectorlinesettings", "aspSelectorName": "e-layers-markerCluster-connectorlinesettings", "blazorClassName": "MapsLayerMarkerClusterConnectorLineSettings" } ] }, { "propertyName": "highlightSettings", "baseClass": "HighlightSettings", "blazorClassName": "MapsLayerHighlightSettings", "complexDirective": [ { "propertyName": "border", "baseClass": "Border", "SelectorName": "e-layers-highlight-border", "aspSelectorName": "e-layers-highlight-border", "aspClassName":"LayersHighlightSettingsBorder", "isCommon": true, "blazorCommonClassName": "MapsBorderSettings", "blazorClassName": "MapsLayerHighlightBorder" } ] }, { "propertyName": "selectionSettings", "baseClass": "SelectionSettings", "blazorClassName": "MapsLayerSelectionSettings", "complexDirective": [ { "propertyName": "border", "baseClass": "Border", "SelectorName": "e-layers-selection-border", "aspSelectorName": "e-layers-selection-border", "aspClassName":"LayersSelectionSettingsBorder", "isCommon": true, "blazorCommonClassName": "MapsBorderSettings", "blazorClassName": "MapsLayerSelectionBorder" } ] }, { "propertyName": "polygonSettings", "baseClass": "PolygonSettings", "complexDirective": [ { "propertyName": "highlightSettings", "baseClass": "HighlightSettings", "complexDirective": [ { "propertyName": "border", "baseClass": "Border", "SelectorName": "e-polygon-highlight-border", "aspSelectorName": "e-polygon-highlight-border", "aspClassName": "PolygonHighlightSettingsBorder", "isCommon": true } ] }, { "propertyName": "selectionSettings", "baseClass": "SelectionSettings", "complexDirective": [ { "propertyName": "border", "baseClass": "Border", "SelectorName": "e-polygon-selection-border", "aspSelectorName": "e-polygon-selection-border", "aspClassName": "PolygonSelectionSettingsBorder", "isCommon": true } ] } ], "tagDirective": [ { "arrayDirectiveClassName": "Polygons", "directiveClassName": "Polygon", "arrayDirectiveSelector": "e-polygonSettings>e-polygons", "directiveSelector": "e-polygonSettings>e-polygons>e-polygon", "directoryName": "maps", "propertyName": "polygonSetting", "baseClass": "PolygonSetting", "comment": [ "/**", " * Represents the directive to define the polygon in the maps.", " * ```html", " * <e-layers>", " * <e-layer>", " * <e-polygonSettings>", " * <e-polygons>", " * <e-polygon>", " * </e-polygon>", " * </e-polygons>", " * </e-polygonSettings>", " * </e-layer>", " * </e-layers>", " * ```", " */" ], "reactComment": [ "/**", " * Represents the directive to define the polygon in the maps.", " * ```tsx", " * <MapsComponent>", " * <LayersDirective>", " * <LayerDirective>", " * <PolygonSettingsDirective>", " * <PolygonsDirective>", " * <PolygonDirective>", " * </PolygonDirective>", " * </PolygonsDirective>", " * </PolygonSettingsDirective>", " * </LayerDirective>", " * </LayersDirective>", " * </MapsComponent>", " * ```", " */" ], "vueComment": [ "/**", " * Represents the directive to define the polygon in the maps.", " * ```vue", " * <ejs-maps>", " * <e-layers>", " * <e-layer>", " * <e-polygonSettings>", " * <e-polygons>", " * <e-polygon>", " * </e-polygon>", " * </e-polygons>", " * </e-polygonSettings>", " * </e-layer>", " * </e-layers>", " * </ejs-maps>", " * ```", " */" ] } ] }, { "propertyName": "shapeSettings", "baseClass": "ShapeSettings", "complexDirective": [ { "propertyName": "border", "baseClass": "Border", "SelectorName": "e-layers-shapesettings-border", "aspSelectorName": "e-layers-shapesettings-border", "isCommon": true, "blazorCommonClassName": "MapsBorderSettings", "blazorClassName": "MapsShapeBorder" } ], "tagDirective": [ { "arrayDirectiveClassName": "ColorMappings", "directiveClassName": "ColorMapping", "arrayDirectiveSelector": "e-shapeSettings>e-colorMappings", "directiveSelector": "e-shapeSettings>e-colorMappings>e-colorMapping", "directoryName": "maps", "propertyName": "colorMapping", "baseClass": "ColorMappingSettings", "blazorClassName": "MapsShapeColorMapping", "blazorArrayClassName": "MapsShapeColorMappings", "comment": [ "/**", " * Represents the directive to define the shape color mapping in the maps.", " * ```html", " * <e-layers>", " * <e-layer>", " * <e-shapeSettings>", " * <e-colorMappings>", " * <e-colorMapping>", " * </e-colorMapping>", " * </e-colorMappings>", " * </e-shapeSettings>", " * </e-layer>", " * </e-layers>", " * ```", " */" ], "reactComment": [ "/**", " * Represents the directive to define the shape color mapping in the maps.", " * ```tsx", " * <MapsComponent>", " * <LayersDirective>", " * <LayerDirective>", " * <ShapeSettingsDirective>", " * <ColorMappingsDirective>", " * <ColorMappingDirective></ColorMappingDirective>", " * </ColorMappingsDirective>", " * </ShapeSettingsDirective>", " * </LayerDirective>", " * </LayersDirective>", " * </MapsComponent>", " * ```", " */" ], "vueComment": [ "/**", " * Represents the directive to define the shape color mapping in the maps.", " * ```vue", " * <ejs-maps>", " * <e-layers>", " * <e-layer>", " * <e-shapeSettings>", " * <e-colorMappings>", " * <e-colorMapping>", " * </e-colorMapping>", " * </e-colorMappings>", " * </e-shapeSettings>", " * </e-layer>", " * </e-layers>", " * </ejs-maps>", " * ```", " */" ] } ] }, { "propertyName": "tooltipSettings", "baseClass": "TooltipSettings", "isCommon": true, "blazorCommonClassName": "MapsTooltipSettings", "blazorClassName": "MapsLayerTooltipSettings", "blazorTemplates": ["template:layerTooltipTemplate"], "complexDirective": [ { "propertyName": "border", "baseClass": "Border", "SelectorName": "e-layers-tooltip-border", "aspSelectorName": "e-layers-tooltip-border", "aspClassName":"LayersTooltipSettingsBorder", "isCommon": true, "blazorCommonClassName": "MapsBorderSettings", "blazorClassName": "MapsLayerTooltipBorder" }, { "propertyName": "textStyle", "baseClass": "Font", "SelectorName": "e-layers-tooltip-textstyle", "aspSelectorName": "e-layers-tooltip-textstyle", "isCommon": true, "blazorCommonClassName": "MapsFontSettings", "blazorClassName": "MapsLayerTooltipTextStyle" } ] } ], "comment": [ "/**", " * Represents the directive to define the layer of the maps.", " * ```html", " * <e-layers>", " * <e-layer></e-layer>", " * </e-layers>", " * ```", " */" ], "reactComment": [ "/**", " * Represents the directive to define the layer of the maps.", " * ```tsx", " * <MapsComponent>", " * <LayersDirective>", " * <LayerDirective></LayerDirective>", " * </LayersDirective>", " * </MapsComponent>", " * ```", " */" ], "vueComment": [ "/**", " * Represents the directive to define the layer of the maps.", " * ```vue", " * <ejs-maps>", " * <e-layers>", " * <e-layer></e-layer>", " * </e-layers>", " * </ejs-maps>", " * ```", " */" ], "tagDirective": [ { "arrayDirectiveClassName": "InitialShapeSelections", "directiveClassName": "InitialShapeSelection", "arrayDirectiveSelector": "e-layer>e-initialShapeSelections", "directiveSelector": "e-layer>e-initialShapeSelections>e-initialShapeSelection", "directoryName": "maps", "propertyName": "initialShapeSelection", "baseClass": "InitialShapeSelectionSettings", "blazorArrayClassName":"MapsInitialShapeSelectionSettings", "comment": [ "/**", " * Represents the directive to configure the selection of the shapes when the maps is initially rendered.", " * ```html", " * <e-layers>", " * <e-layer>", " * <e-initialShapeSelections>", " * <e-initialShapeSelection>", " * </e-initialShapeSelection>", " * </e-initialShapeSelections>", " * </e-layer>", " * </e-layers>", " * ```", " */" ], "reactComment": [ "/**", " * Represents the directive to configure the selection of the shapes when the maps is initially rendered.", " * ```tsx", " * <MapsComponent>", " * <LayersDirective>", " * <LayerDirective>", " * <initialShapeSelectionsDirective>", " * <initialShapeSelectionDirective></initialShapeSelectionDirective>", " * </initialShapeSelectionsDirective>", " * </LayerDirective>", " * </LayersDirective>", " * </MapsComponent>", " * ```", " */" ], "vueComment": [ "/**", " * Represents the directive to configure the selection of the shapes when the maps is initially rendered.", " * ```vue", " * <ejs-maps>", " * <e-layers>", " * <e-layer>", " * <e-initialShapeSelections>", " * <e-initialShapeSelection>", " * </e-initialShapeSelection>", " * </e-initialShapeSelections>", " * </e-layer>", " * </e-layers>", " * </ejs-maps>", " * ```", " */" ] }, { "arrayDirectiveClassName": "Markers", "directiveClassName": "Marker", "arrayDirectiveSelector": "e-layer>e-markerSettings", "directiveSelector": "e-layer>e-markerSettings>e-markerSetting", "directoryName": "maps", "propertyName": "markerSettings", "baseClass": "MarkerSettings", "blazorArrayClassName":"MapsMarkerSettings", "blazorTemplates": ["template:markerTemplate"], "blazorTemplateModels": { "template" : "IDataTemplate" }, "complexDirective": [ { "propertyName": "border", "baseClass": "Border", "isCommon": true, "blazorCommonClassName": "MapsBorderSettings", "blazorClassName": "MapsMarkerBorder" }, { "propertyName": "highlightSettings", "baseClass": "HighlightSettings", "isCommon": true, "blazorCommonClassName": "MapsHighlightSettings", "blazorClassName": "MapsMarkerHighlightSettings", "complexDirective": [ { "propertyName": "border", "baseClass": "Border", "SelectorName": "e-marker-highlight-border", "aspSelectorName": "e-marker-highlight-border", "isCommon": true, "blazorCommonClassName": "MapsBorderSettings", "blazorClassName": "MapsMarkerHighlightBorder" } ] }, { "propertyName": "selectionSettings", "baseClass": "SelectionSettings", "isCommon": true, "blazorCommonClassName": "MapsSelectionSettings", "blazorClassName": "MapsMarkerSelectionSettings", "complexDirective": [ { "propertyName": "border", "baseClass": "Border", "SelectorName": "e-marker-selection-border", "aspSelectorName": "e-marker-selection-border", "isCommon": true, "blazorCommonClassName": "MapsBorderSettings", "blazorClassName": "MapsMarkerSelectionBorder" } ] }, { "propertyName": "tooltipSettings", "baseClass": "TooltipSettings", "isCommon": true, "blazorCommonClassName": "MapsTooltipSettings", "blazorClassName": "MapsMarkerTooltipSettings", "blazorTemplates": ["template:markerTooltipTemplate"], "complexDirective": [ { "propertyName": "border", "baseClass": "Border", "SelectorName": "e-marker-tooltip-border", "aspSelectorName": "e-marker-tooltip-border", "isCommon": true, "blazorCommonClassName": "MapsBorderSettings", "blazorClassName": "MapsMarkerTooltipBorder" }, { "propertyName": "textStyle", "baseClass": "Font", "SelectorName": "e-marker-tooltip-textstyle", "aspSelectorName": "e-marker-tooltip-textstyle", "isCommon": true, "blazorCommonClassName": "MapsFontSettings", "blazorClassName": "MapsMarkerTooltipTextStyle" } ] } ], "comment": [ "/**", " * Represents the directive to define the markers in the maps.", " * ```html", " * <e-layers>", " * <e-layer>", " * <e-markerSettings>", " * <e-markerSetting>", " * </e-markerSetting>", " * </e-markerSettings>", " * </e-layer>", " * </e-layers>", " * ```", " */" ], "reactComment": [ "/**", " * Represents the directive to define the markers in the maps.", " * ```tsx", " * <MapsComponent>", " * <LayersDirective>", " * <LayerDirective>", " * <MarkersDirective>", " * <MarkerDirective></MarkerDirective>", " * </MarkersDirective>", " * </LayerDirective>", " * </LayersDirective>", " * </MapsComponent>", " * ```", " */" ], "vueComment": [ "/**", " * Represents the directive to define the markers in the maps.", " * ```vue", " * <ejs-maps>", " * <e-layers>", " * <e-layer>", " * <e-markerSettings>", " * <e-markerSetting>", " * </e-markerSetting>", " * </e-markerSettings>", " * </e-layer>", " * </e-layers>", " * </ejs-maps>", " * ```", " */" ], "templateProperties": [ "template", "tooltipSettings.template" ] }, { "arrayDirectiveClassName": "Bubbles", "directiveClassName": "Bubble", "arrayDirectiveSelector": "e-layer>e-bubbleSettings", "directiveSelector": "e-layer>e-bubbleSettings>e-bubbleSetting", "directoryName": "maps", "propertyName": "bubbleSettings", "baseClass": "BubbleSettings", "blazorArrayClassName":"MapsBubbleSettings", "complexDirective": [ { "propertyName": "border", "baseClass": "Border", "isCommon": true, "blazorCommonClassName": "MapsBorderSettings", "blazorClassName": "MapsBubbleBorder" }, { "propertyName": "highlightSettings", "baseClass": "HighlightSettings", "isCommon": true, "blazorCommonClassName": "MapsHighlightSettings", "blazorClassName": "MapsBubbleHighlightSettings", "complexDirective": [ { "propertyName": "border", "baseClass": "Border", "SelectorName": "e-bubble-highlight-border", "aspSelectorName": "e-bubble-highlight-border", "aspClassName":"BubbleHighlightSettingsBorder", "isCommon": true, "blazorCommonClassName": "MapsBorderSettings", "blazorClassName": "MapsBubbleHighlightBorder" } ] }, { "propertyName": "selectionSettings", "baseClass": "SelectionSettings", "isCommon": true, "blazorCommonClassName": "MapsSelectionSettings", "blazorClassName": "MapsBubbleSelectionSettings", "complexDirective": [ { "propertyName": "border", "baseClass": "Border", "SelectorName": "e-bubble-selection-border", "aspSelectorName": "e-bubble-selection-border", "aspClassName":"BubbleSelectionSettingsBorder", "isCommon": true, "blazorCommonClassName": "MapsBorderSettings", "blazorClassName": "MapsBubbleSelectionBorder" } ] }, { "propertyName": "tooltipSettings", "baseClass": "TooltipSettings", "isCommon": true, "blazorCommonClassName": "MapsTooltipSettings", "blazorClassName": "MapsBubbleTooltipSettings", "blazorTemplates": ["template:bubbleTooltipTemplate"], "complexDirective": [ { "propertyName": "border", "baseClass": "Border", "SelectorName": "e-bubble-tooltip-border", "aspSelectorName": "e-bubble-tooltip-border", "aspClassName":"BubbleTooltipSettingsBorder", "isCommon": true, "blazorCommonClassName": "MapsBorderSettings", "blazorClassName": "MapsBubbleTooltipBorder" }, { "propertyName": "textStyle", "baseClass": "Font", "SelectorName": "e-bubble-tooltip-textstyle", "aspSelectorName": "e-bubble-tooltip-textstyle", "aspClassName":"BubbleTooltipSettingsFont", "isCommon": true, "blazorCommonClassName": "MapsFontSettings", "blazorClassName": "MapsBubbleTooltipTextStyle" } ] } ], "tagDirective": [ { "arrayDirectiveClassName": "ColorMappings", "directiveClassName": "ColorMapping", "arrayDirectiveSelector": "e-bubbleSettings>e-colorMappings", "directiveSelector": "e-bubbleSettings>e-colorMappings>e-colorMapping", "directoryName": "maps", "propertyName": "colorMapping", "baseClass": "ColorMappingSettings", "blazorClassName": "MapsBubbleColorMapping", "blazorArrayClassName": "MapsBubbleColorMappings", "comment": [ "/**", " * Represents the directive to define the bubble color mapping in the maps.", " * ```html", " * <e-layers>", " * <e-layer>", " * <e-bubbleSettings>", " * <e-colorMappings>", " * <e-colorMapping>", " * </e-colorMapping>", " * </e-colorMappings>", " * </e-bubbleSettings>", " * </e-layer>", " * </e-layers>", " * ```", " */" ], "reactComment": [ "/**", " * Represents the directive to define the bubble color mapping in the maps.", " * ```tsx", " * <MapsComponent>", " * <LayersDirective>", " * <LayerDirective>", " * <BubblesDirective>", " * <ColorMappingsDirective>", " * <ColorMappingDirective></ColorMappingDirective>", " * </ColorMappingsDirective>", " * </BubblesDirective>", " * </LayerDirective>", " * </LayersDirective>", " * </MapsComponent>", " * ```", " */" ], "vueComment": [ "/**", " * Represents the directive to define the bubble color mapping in the maps.", " * ```vue", " * <ejs-maps>", " * <e-layers>", " * <e-layer>", " * <e-bubbleSettings>", " * <e-bubbleSetting>", " * </e-bubbleSetting>", " * </e-bubbleSettings>", " * </e-layer>", " * </e-layers>",