react-azure-maps
Options
All
  • Public
  • Public/Protected
  • All
Menu

WiredSolutions React-Azure-Maps

React Azure Maps is a react wrapper for Azure Maps. The whole library is written in typescript and uses React 16.8+

Installation

Use the package manager npm or yarn

npm install react-azure-maps

or

yarn add react-azure-maps

Documentation

Documentation is available Documentation

Generated documentation from typedoc is available Documentation

Playground

React Azure Maps have a fully documented Playground Package that implements a lot of features from Azure Maps Code Samples. If you implement new usage of the map and want to be contributor just create a PR.

Library Implementation Details

For typescript integration and core functionalities, this library uses the newest version of Azure Maps Control. The library is implemented under the hood on Contexts and uses all benefits of new react features, like new context API, hooks, etc. Across the whole library, there are three main references that depend on the basic Azure Maps API

MapReference which is stored and implemented in

AzureMapsProvider

DataSourceReference which is stored and implemented in

AzureMapDataSourceProvider

LayerReference which is stored and implemented in

AzureMapLayerProvider

If you want to directly make some changes in the above refs just use one of these contexts and feel free to use it any way you want. The library implements a lot of ready to use components like AzureMapFeature, AzureMapHTMLMarker, AzureMapPopup

Basic Usage

 
import React from 'react'
import {AzureMap, AzureMapsProvider, IAzureMapOptions} from 'react-azure-maps'
import {AuthenticationType} from 'azure-maps-control'

const option: IAzureMapOptions = {
    authOptions: {
        authType: AuthenticationType.subscriptionKey,
        subscriptionKey: // Your subscription key
    },
}

const DefaultMap: React.FC = () => (
    <div style={{height: '300px'}}>
        <AzureMapsProvider>
            <AzureMap options={option}>
            </AzureMap>
        </AzureMapsProvider>
    </div>
)
export default DefaultMap

Local development with Playground Package

If you want to do some local development using Playground Package with local link to the package, you need to make the following steps:

- run yarn watch in `react-azure-maps` package
- run yarn link in `react-azure-maps` package
- go to the `azure-maps-playground` or any other folder or repository and run `yarn link "react-azure-maps"`

Contributing

Pull requests are welcomed. For major changes, please open an issue first to discuss what you would like to change.

License

MIT

Index

Classes

Type aliases

Variables

Functions

Type aliases

AzureDataLineString

AzureDataLineString: LineString

AzureDataPosition

AzureDataPosition: Position

AzureSetCameraOptions

AzureSetCameraOptions: ((CameraOptions & AnimationOptions) | (CameraBoundsOptions & AnimationOptions)) | any

ControlOptions

ControlOptions: ControlOptions

DataSourceType

DataSourceType: DataSource

FeatureType

FeatureType: Feature<atlas.data.Geometry, Object>

GeometryType

GeometryType: atlas.data.Geometry

IAzureCustomControls

IAzureCustomControls: { control: Control; controlOptions?: ControlOptions }

Type declaration

IAzureDataSourceChildren

IAzureDataSourceChildren: ReactElement<IAzureMapFeature> | ReactElement<IAzureLayerStatefulProviderProps>

IAzureDataSourceStatefulProviderProps

IAzureDataSourceStatefulProviderProps: { children?: Array<IAzureDataSourceChildren> | IAzureDataSourceChildren; dataFromUrl?: undefined | string; events?: IAzureMapDataSourceEvent | any; id: string; options?: DataSourceOptions }

Type declaration

IAzureLayerStatefulProviderProps

IAzureLayerStatefulProviderProps: { events?: IAzureMapLayerEvent | any; id?: undefined | string; lifecycleEvents?: IAzureMapLifecycleEvent | any; options: (SymbolLayerOptions & HeatMapLayerOptions & ImageLayerOptions & LineLayerOptions & PolygonExtrusionLayerOptions & PolygonLayerOptions & TileLayerOptions & BubbleLayerOptions & LayerOptions) | Options; type: IAzureMapLayerType }

Type declaration

  • Optional events?: IAzureMapLayerEvent | any
  • Optional id?: undefined | string
  • Optional lifecycleEvents?: IAzureMapLifecycleEvent | any
  • options: (SymbolLayerOptions & HeatMapLayerOptions & ImageLayerOptions & LineLayerOptions & PolygonExtrusionLayerOptions & PolygonLayerOptions & TileLayerOptions & BubbleLayerOptions & LayerOptions) | Options
  • type: IAzureMapLayerType

IAzureMap

IAzureMap: { LoaderComponent?: ComponentClass<any> | StatelessComponent<any>; cameraOptions?: AzureSetCameraOptions; children?: Array<IAzureMapChildren> | IAzureMapChildren; containerClassName?: undefined | string; controls?: [IAzureMapControls]; customControls?: [IAzureCustomControls]; events?: IAzureMapEvent | any; imageSprites?: [IAzureMapImageSprite]; options?: IAzureMapOptions; providedMapId?: undefined | string; styles?: CSSProperties; trafficOptions?: TrafficOptions; userInteraction?: UserInteractionOptions }

Type declaration

IAzureMapAddEventsType

IAzureMapAddEventsType: "boxzoomstart" | "boxzoomend" | "dragstart" | "drag" | "dragend" | "idle" | "load" | "movestart" | "move" | "moveend" | "pitchstart" | "pitch" | "pitchend" | "ready" | "render" | "resize" | "rotatestart" | "rotate" | "rotateend" | "tokenacquired" | "zoomstart" | "zoom" | "zoomend"

IAzureMapChildren

IAzureMapChildren: ReactElement<IAzureMapHtmlMarker> | ReactElement<IAzureMapPopup> | ReactElement<IAzureMapDataSourceProps>

IAzureMapContextState

IAzureMapContextState: { isMapReady: boolean | false; mapRef: Map | null; removeMapRef: any; setMapReady: any; setMapRef: any }

Type declaration

  • isMapReady: boolean | false
  • mapRef: Map | null
  • removeMapRef: function
    • removeMapRef(): void
  • setMapReady: function
    • setMapReady(isMapReady: boolean): void
  • setMapRef: function
    • setMapRef(mapRef: Map): void

IAzureMapControls

IAzureMapControls: { controlName: string; controlOptions?: Options; options?: ControlOptions | undefined }

Type declaration

  • controlName: string
  • Optional controlOptions?: Options
  • Optional options?: ControlOptions | undefined

IAzureMapDataSourceContextState

IAzureMapDataSourceContextState: { dataSourceRef: DataSource | null }

Type declaration

  • dataSourceRef: DataSource | null

IAzureMapDataSourceEvent

IAzureMapDataSourceEvent: {}

Type declaration

IAzureMapDataSourceEventType

IAzureMapDataSourceEventType: "dataadded" | "dataremoved"

IAzureMapDataSourceProps

IAzureMapDataSourceProps: IAzureMapDataSourceContextState

IAzureMapEvent

IAzureMapEvent: {}

Type declaration

IAzureMapEventsType

IAzureMapEventsType: IAzureMapLayerEventType | IAzureMapLayerLifecycleEvents | IAzureMapDataSourceEventType | IAzureMapAddEventsType | IAzureMapSourceEventType | "data" | "sourcedata" | "styledata" | "error" | "styleimagemissing"

IAzureMapFeature

IAzureMapFeature: { bbox?: atlas.data.BoundingBox; coordinate?: atlas.data.Position; coordinates?: Array<Position>; id?: undefined | string; multipleCoordinates?: Array<Array<Position>>; multipleDimensionCoordinates?: Array<Array<Array<Position>>>; properties?: Object; type: IAzureMapFeatureType }

Type declaration

  • Optional bbox?: atlas.data.BoundingBox
  • Optional coordinate?: atlas.data.Position
  • Optional coordinates?: Array<Position>
  • Optional id?: undefined | string
  • Optional multipleCoordinates?: Array<Array<Position>>
  • Optional multipleDimensionCoordinates?: Array<Array<Array<Position>>>
  • Optional properties?: Object
  • type: IAzureMapFeatureType

IAzureMapFeatureType

IAzureMapFeatureType: "Point" | "MultiPoint" | "LineString" | "MultiLineString" | "Polygon" | "MultiPolygon"

IAzureMapHtmlMarker

IAzureMapHtmlMarker: { events?: Array<IAzureMapHtmlMarkerEvent>; id?: undefined | string; isPopupVisible?: undefined | false | true; markerContent?: ReactElement; options?: HtmlMarkerOptions }

Type declaration

  • Optional events?: Array<IAzureMapHtmlMarkerEvent>
  • Optional id?: undefined | string
  • Optional isPopupVisible?: undefined | false | true
  • Optional markerContent?: ReactElement
  • Optional options?: HtmlMarkerOptions

IAzureMapHtmlMarkerEvent

IAzureMapHtmlMarkerEvent: { callback: (e: TargetedEvent) => void; eventName: keyof HtmlMarkerEvents }

Type declaration

  • callback: (e: TargetedEvent) => void
      • (e: TargetedEvent): void

      • Parameters

        • e: TargetedEvent

        Returns void

  • eventName: keyof HtmlMarkerEvents

IAzureMapImageSprite

IAzureMapImageSprite: { color?: undefined | string; id: string; scale?: undefined | number; secondaryColor?: undefined | string; templateName: string }

Type declaration

  • Optional color?: undefined | string
  • id: string
  • Optional scale?: undefined | number
  • Optional secondaryColor?: undefined | string
  • templateName: string

IAzureMapLayerContextState

IAzureMapLayerContextState: { layerRef: SymbolLayer | ImageLayer | TileLayer | null }

Type declaration

  • layerRef: SymbolLayer | ImageLayer | TileLayer | null

IAzureMapLayerEvent

IAzureMapLayerEvent: {}

Type declaration

IAzureMapLayerEventType

IAzureMapLayerEventType: "mousedown" | "mouseup" | "mouseover" | "mousemove" | "click" | "dblclick" | "mouseout" | "mouseenter" | "mouseleave" | "contextmenu" | "wheel" | "touchstart" | "touchend" | "touchmove" | "touchcancel"

IAzureMapLayerLifecycleEvents

IAzureMapLayerLifecycleEvents: "layeradded" | "layerremoved"

IAzureMapLayerProps

IAzureMapLayerProps: IAzureMapLayerContextState

IAzureMapLayerType

IAzureMapLayerType: "SymbolLayer" | "HeatLayer" | "ImageLayer" | "LineLayer" | "PolygonExtrusionLayer" | "PolygonLayer" | "TitleLayer" | "BubbleLayer"

IAzureMapLifecycleEvent

IAzureMapLifecycleEvent: {}

Type declaration

IAzureMapMouseEventRef

IAzureMapMouseEventRef: HtmlMarker

IAzureMapMouseEvents

IAzureMapMouseEvents: {}

Type declaration

IAzureMapOptions

IAzureMapOptions: ServiceOptions & StyleOptions & UserInteractionOptions & CameraOptions | CameraBoundsOptions

IAzureMapPopup

IAzureMapPopup: { events?: Array<IAzureMapPopupEvent>; isVisible?: undefined | false | true; options?: PopupOptions; popupContent: ReactElement }

Type declaration

  • Optional events?: Array<IAzureMapPopupEvent>
  • Optional isVisible?: undefined | false | true
  • Optional options?: PopupOptions
  • popupContent: ReactElement

IAzureMapPopupEvent

IAzureMapPopupEvent: { callback: (e: TargetedEvent) => void; eventName: keyof PopupEvents }

Type declaration

  • callback: (e: TargetedEvent) => void
      • (e: TargetedEvent): void

      • Parameters

        • e: TargetedEvent

        Returns void

  • eventName: keyof PopupEvents

IAzureMapSourceEventType

IAzureMapSourceEventType: "sourceadded" | "sourceremoved"

IAzureMapsContextProps

IAzureMapsContextProps: IAzureMapContextState

IAzureMapsStatefulProviderProps

IAzureMapsStatefulProviderProps: { children?: ReactElement<IAzureMap> }

Type declaration

  • Optional children?: ReactElement<IAzureMap>

LayerType

LayerType: SymbolLayer | ImageLayer | TileLayer

MapType

MapType: Map

Variables

Const AzureMap

AzureMap: NamedExoticComponent<{ LoaderComponent?: ComponentClass<any> | StatelessComponent<any>; cameraOptions?: AzureSetCameraOptions; children?: Array<IAzureMapChildren> | IAzureMapChildren; containerClassName?: undefined | string; controls?: [IAzureMapControls]; customControls?: [IAzureCustomControls]; events?: IAzureMapEvent | any; imageSprites?: [IAzureMapImageSprite]; options?: IAzureMapOptions; providedMapId?: undefined | string; styles?: CSSProperties; trafficOptions?: TrafficOptions; userInteraction?: UserInteractionOptions }> & { type: T } = memo(({children, // @TODO We need to cover and type all possible childrens that we can pass to this component as child for. ex. Markers etcLoaderComponent = () => <div>Loading ...</div>,providedMapId,containerClassName,styles,options = {},imageSprites,controls,customControls,events,cameraOptions,trafficOptions,userInteraction}: IAzureMap) => {const { setMapRef, removeMapRef, mapRef, setMapReady, isMapReady } = useContext<IAzureMapsContextProps>(AzureMapsContext)const [mapId] = useState(providedMapId || Guid.create().toString())useEffect(() => {if (mapRef) {mapRef.setTraffic(trafficOptions)}}, [trafficOptions])useEffect(() => {if (mapRef) {mapRef.setUserInteraction(userInteraction)}}, [userInteraction])useEffect(() => {if (mapRef) {mapRef.setCamera(cameraOptions)}}, [cameraOptions])useCheckRef<MapType, MapType>(mapRef, mapRef, mref => {mref.events.add('ready', () => {if (imageSprites) {useCreateImageSprites(mref, imageSprites)}if (controls) {useCreateMapControls(mref, controls)}if (customControls) {useCreateMapCustomControls(mref, customControls)}setMapReady(true)})for (const eventType in events) {mref.events.add(eventType as any, events[eventType])}})useEffect(() => {setMapRef(new atlas.Map(mapId, options))return () => {removeMapRef()}}, [])return (<>{!isMapReady && LoaderComponent && <LoaderComponent />}<div className={containerClassName} id={mapId} style={{ ...styles, height: '100%' }}>{isMapReady && children}</div></>)})

AzureMapDataSourceConsumer

AzureMapDataSourceConsumer: ExoticComponent<ConsumerProps<{ dataSourceRef: DataSource | null }>>

Const AzureMapDataSourceContext

AzureMapDataSourceContext: Context<{ dataSourceRef: DataSource | null }> = createContext<IAzureMapDataSourceProps>({dataSourceRef: null})

Const AzureMapFeature

AzureMapFeature: NamedExoticComponent<{ bbox?: atlas.data.BoundingBox; coordinate?: atlas.data.Position; coordinates?: Array<Position>; id?: undefined | string; multipleCoordinates?: Array<Array<Position>>; multipleDimensionCoordinates?: Array<Array<Array<Position>>>; properties?: Object; type: IAzureMapFeatureType }> & { type: T } = memo((props: IAzureMapFeature) => {const { properties, id } = propsconst { dataSourceRef } = useContext<IAzureMapDataSourceProps>(AzureMapDataSourceContext)const [featureRef, setFeatureRef] = useState<FeatureType | null>(null)useEffect(() => {const featureSource: atlas.data.Geometry | undefined = useCreateAzureMapFeatureFeature(props)if (!featureRef && featureSource) {setFeatureRef(new atlas.data.Feature(featureSource, properties, id))}}, [])useCheckRef<DataSourceType, FeatureType>(dataSourceRef, featureRef, (dref, fref) => {dref.add(fref)return () => {dref.remove(fref)}})return null})

Const AzureMapHtmlMarker

AzureMapHtmlMarker: NamedExoticComponent<{ events?: Array<IAzureMapHtmlMarkerEvent>; id?: undefined | string; isPopupVisible?: undefined | false | true; markerContent?: ReactElement; options?: HtmlMarkerOptions }> & { type: T } = memo(({ markerContent, options, events, isPopupVisible }: IAzureMapHtmlMarker) => {const [markerRef] = useState<atlas.HtmlMarker>(new atlas.HtmlMarker({...options,htmlContent: markerContent && renderToStaticMarkup(markerContent)}))const { mapRef } = useContext<IAzureMapsContextProps>(AzureMapsContext)useCheckRefMount<MapType, boolean>(mapRef, true, mref => {mref.markers.add(markerRef)events &&events.forEach(({ eventName, callback }) => {mref.events.add(eventName, markerRef, callback)})return () => {mref.markers.remove(markerRef)}})useEffect(() => {if (markerRef && markerRef.getOptions().popup && mapRef) {const isMarkerPopupOpen = markerRef.getOptions().popup?.isOpen()if (isMarkerPopupOpen && isPopupVisible) {markerRef.getOptions().popup?.close()} else if (isMarkerPopupOpen !== undefined) {markerRef.getOptions().popup?.open()} else if ((isPopupVisible && isMarkerPopupOpen) || isPopupVisible) {markerRef.togglePopup()}}}, [isPopupVisible, options, mapRef])return null})

AzureMapLayerConsumer

AzureMapLayerConsumer: ExoticComponent<ConsumerProps<{ layerRef: SymbolLayer | ImageLayer | TileLayer | null }>>

Const AzureMapLayerContext

AzureMapLayerContext: Context<{ layerRef: SymbolLayer | ImageLayer | TileLayer | null }> = createContext<IAzureMapLayerProps>({layerRef: null})

Const AzureMapPopup

AzureMapPopup: NamedExoticComponent<{ events?: Array<IAzureMapPopupEvent>; isVisible?: undefined | false | true; options?: PopupOptions; popupContent: ReactElement }> & { type: T } = memo(({ isVisible, popupContent, options, events }: IAzureMapPopup) => {const popupRef = useCreatePopup({ options, popupContent })const { mapRef } = useContext<IAzureMapsContextProps>(AzureMapsContext)useCheckRefMount<MapType, boolean>(mapRef, true, mref => {events &&events.forEach(({ eventName, callback }) => {mref.events.add(eventName, popupRef, callback)})return () => {mref.popups.remove(popupRef)}})useEffect(() => {if (mapRef) {if (isVisible) {popupRef.open(mapRef)} else if (mapRef.popups.getPopups().length && !isVisible) {popupRef.close()}}}, [isVisible])return null})

AzureMapsConsumer

AzureMapsConsumer: ExoticComponent<ConsumerProps<{ isMapReady: boolean | false; mapRef: Map | null; removeMapRef: any; setMapReady: any; setMapRef: any }>>

Const AzureMapsContext

AzureMapsContext: Context<{ isMapReady: boolean | false; mapRef: Map | null; removeMapRef: any; setMapReady: any; setMapRef: any }> = createContext<IAzureMapsContextProps>({mapRef: null,isMapReady: false,setMapRef: (mapRef: Map) => {},removeMapRef: () => {},setMapReady: () => {}})

LineString

LineString: LineString

Pixel

Pixel: Pixel

Position

Position: Position

Provider

Provider: ProviderExoticComponent<ProviderProps<{ layerRef: SymbolLayer | ImageLayer | TileLayer | null }>>

Functions

Const AzureMapDataSourceStatefulProvider

  • AzureMapDataSourceStatefulProvider(__namedParameters: { children: undefined | ReactElement<{ bbox?: atlas.data.BoundingBox; coordinate?: atlas.data.Position; coordinates?: Array<Position>; id?: undefined | string; multipleCoordinates?: Array<Array<Position>>; multipleDimensionCoordinates?: Array<Array<Array<Position>>>; properties?: Object; type: IAzureMapFeatureType }, string | ((props: P) => ReactElement | null) | {}> | ReactElement<{ events?: IAzureMapLayerEvent | any; id?: undefined | string; lifecycleEvents?: IAzureMapLifecycleEvent | any; options: (SymbolLayerOptions & HeatMapLayerOptions & ImageLayerOptions & LineLayerOptions & PolygonExtrusionLayerOptions & PolygonLayerOptions & TileLayerOptions & BubbleLayerOptions & LayerOptions) | Options; type: IAzureMapLayerType }, string | ((props: P) => ReactElement | null) | {}> | (ReactElement<{ bbox?: atlas.data.BoundingBox; coordinate?: atlas.data.Position; coordinates?: Array<Position>; id?: undefined | string; multipleCoordinates?: Array<Array<Position>>; multipleDimensionCoordinates?: Array<Array<Array<Position>>>; properties?: Object; type: IAzureMapFeatureType }, string | ((props: P) => ReactElement | null) | {}> | ReactElement<{ events?: IAzureMapLayerEvent | any; id?: undefined | string; lifecycleEvents?: IAzureMapLifecycleEvent | any; options: (SymbolLayerOptions & HeatMapLayerOptions & ImageLayerOptions & LineLayerOptions & PolygonExtrusionLayerOptions & PolygonLayerOptions & TileLayerOptions & BubbleLayerOptions & LayerOptions) | Options; type: IAzureMapLayerType }, string | ((props: P) => ReactElement | null) | {}>)[]; dataFromUrl: undefined | string; events: any; id: string; options: undefined | DataSourceOptions }): Element

  • Parameters

    • __namedParameters: { children: undefined | ReactElement<{ bbox?: atlas.data.BoundingBox; coordinate?: atlas.data.Position; coordinates?: Array<Position>; id?: undefined | string; multipleCoordinates?: Array<Array<Position>>; multipleDimensionCoordinates?: Array<Array<Array<Position>>>; properties?: Object; type: IAzureMapFeatureType }, string | ((props: P) => ReactElement | null) | {}> | ReactElement<{ events?: IAzureMapLayerEvent | any; id?: undefined | string; lifecycleEvents?: IAzureMapLifecycleEvent | any; options: (SymbolLayerOptions & HeatMapLayerOptions & ImageLayerOptions & LineLayerOptions & PolygonExtrusionLayerOptions & PolygonLayerOptions & TileLayerOptions & BubbleLayerOptions & LayerOptions) | Options; type: IAzureMapLayerType }, string | ((props: P) => ReactElement | null) | {}> | (ReactElement<{ bbox?: atlas.data.BoundingBox; coordinate?: atlas.data.Position; coordinates?: Array<Position>; id?: undefined | string; multipleCoordinates?: Array<Array<Position>>; multipleDimensionCoordinates?: Array<Array<Array<Position>>>; properties?: Object; type: IAzureMapFeatureType }, string | ((props: P) => ReactElement | null) | {}> | ReactElement<{ events?: IAzureMapLayerEvent | any; id?: undefined | string; lifecycleEvents?: IAzureMapLifecycleEvent | any; options: (SymbolLayerOptions & HeatMapLayerOptions & ImageLayerOptions & LineLayerOptions & PolygonExtrusionLayerOptions & PolygonLayerOptions & TileLayerOptions & BubbleLayerOptions & LayerOptions) | Options; type: IAzureMapLayerType }, string | ((props: P) => ReactElement | null) | {}>)[]; dataFromUrl: undefined | string; events: any; id: string; options: undefined | DataSourceOptions }
      • children: undefined | ReactElement<{ bbox?: atlas.data.BoundingBox; coordinate?: atlas.data.Position; coordinates?: Array<Position>; id?: undefined | string; multipleCoordinates?: Array<Array<Position>>; multipleDimensionCoordinates?: Array<Array<Array<Position>>>; properties?: Object; type: IAzureMapFeatureType }, string | ((props: P) => ReactElement | null) | {}> | ReactElement<{ events?: IAzureMapLayerEvent | any; id?: undefined | string; lifecycleEvents?: IAzureMapLifecycleEvent | any; options: (SymbolLayerOptions & HeatMapLayerOptions & ImageLayerOptions & LineLayerOptions & PolygonExtrusionLayerOptions & PolygonLayerOptions & TileLayerOptions & BubbleLayerOptions & LayerOptions) | Options; type: IAzureMapLayerType }, string | ((props: P) => ReactElement | null) | {}> | (ReactElement<{ bbox?: atlas.data.BoundingBox; coordinate?: atlas.data.Position; coordinates?: Array<Position>; id?: undefined | string; multipleCoordinates?: Array<Array<Position>>; multipleDimensionCoordinates?: Array<Array<Array<Position>>>; properties?: Object; type: IAzureMapFeatureType }, string | ((props: P) => ReactElement | null) | {}> | ReactElement<{ events?: IAzureMapLayerEvent | any; id?: undefined | string; lifecycleEvents?: IAzureMapLifecycleEvent | any; options: (SymbolLayerOptions & HeatMapLayerOptions & ImageLayerOptions & LineLayerOptions & PolygonExtrusionLayerOptions & PolygonLayerOptions & TileLayerOptions & BubbleLayerOptions & LayerOptions) | Options; type: IAzureMapLayerType }, string | ((props: P) => ReactElement | null) | {}>)[]
      • dataFromUrl: undefined | string
      • events: any
      • id: string
      • options: undefined | DataSourceOptions

    Returns Element

Const AzureMapLayerStatefulProvider

  • AzureMapLayerStatefulProvider(__namedParameters: { events: any; id: undefined | string; lifecycleEvents: any; options: Options | (SymbolLayerOptions & HeatMapLayerOptions & ImageLayerOptions & LineLayerOptions & PolygonExtrusionLayerOptions & PolygonLayerOptions & TileLayerOptions & BubbleLayerOptions & LayerOptions); type: "SymbolLayer" | "HeatLayer" | "ImageLayer" | "LineLayer" | "PolygonExtrusionLayer" | "PolygonLayer" | "TitleLayer" | "BubbleLayer" }): Element

  • Parameters

    • __namedParameters: { events: any; id: undefined | string; lifecycleEvents: any; options: Options | (SymbolLayerOptions & HeatMapLayerOptions & ImageLayerOptions & LineLayerOptions & PolygonExtrusionLayerOptions & PolygonLayerOptions & TileLayerOptions & BubbleLayerOptions & LayerOptions); type: "SymbolLayer" | "HeatLayer" | "ImageLayer" | "LineLayer" | "PolygonExtrusionLayer" | "PolygonLayer" | "TitleLayer" | "BubbleLayer" }
      • events: any
      • id: undefined | string
      • lifecycleEvents: any
      • options: Options | (SymbolLayerOptions & HeatMapLayerOptions & ImageLayerOptions & LineLayerOptions & PolygonExtrusionLayerOptions & PolygonLayerOptions & TileLayerOptions & BubbleLayerOptions & LayerOptions)
      • type: "SymbolLayer" | "HeatLayer" | "ImageLayer" | "LineLayer" | "PolygonExtrusionLayer" | "PolygonLayer" | "TitleLayer" | "BubbleLayer"

    Returns Element

Const constructLayer

  • constructLayer(__namedParameters: { id: undefined | string; options: Options | (SymbolLayerOptions & HeatMapLayerOptions & ImageLayerOptions & LineLayerOptions & PolygonExtrusionLayerOptions & PolygonLayerOptions & TileLayerOptions & BubbleLayerOptions & LayerOptions); type: "SymbolLayer" | "HeatLayer" | "ImageLayer" | "LineLayer" | "PolygonExtrusionLayer" | "PolygonLayer" | "TitleLayer" | "BubbleLayer" }, dataSourceRef: DataSource): null | SymbolLayer | ImageLayer | TileLayer | HeatMapLayer | LineLayer | PolygonExtrusionLayer | PolygonLayer | BubbleLayer

  • Parameters

    • __namedParameters: { id: undefined | string; options: Options | (SymbolLayerOptions & HeatMapLayerOptions & ImageLayerOptions & LineLayerOptions & PolygonExtrusionLayerOptions & PolygonLayerOptions & TileLayerOptions & BubbleLayerOptions & LayerOptions); type: "SymbolLayer" | "HeatLayer" | "ImageLayer" | "LineLayer" | "PolygonExtrusionLayer" | "PolygonLayer" | "TitleLayer" | "BubbleLayer" }
      • id: undefined | string
      • options: Options | (SymbolLayerOptions & HeatMapLayerOptions & ImageLayerOptions & LineLayerOptions & PolygonExtrusionLayerOptions & PolygonLayerOptions & TileLayerOptions & BubbleLayerOptions & LayerOptions)
      • type: "SymbolLayer" | "HeatLayer" | "ImageLayer" | "LineLayer" | "PolygonExtrusionLayer" | "PolygonLayer" | "TitleLayer" | "BubbleLayer"
    • dataSourceRef: DataSource

    Returns null | SymbolLayer | ImageLayer | TileLayer | HeatMapLayer | LineLayer | PolygonExtrusionLayer | PolygonLayer | BubbleLayer

Const createControl

  • createControl(type: string, options?: ControlOptions): ControlBase | undefined

Const generateLinesFromArrayOfPosition

  • generateLinesFromArrayOfPosition(coordinates: Position[]): LineString

Const generatePixelHeading

  • generatePixelHeading(origin: Pixel, destination: Pixel): number

Const useAzureMapLayer

  • useAzureMapLayer(__namedParameters: { events: any; id: undefined | string; lifecycleEvents: any; options: Options | (SymbolLayerOptions & HeatMapLayerOptions & ImageLayerOptions & LineLayerOptions & PolygonExtrusionLayerOptions & PolygonLayerOptions & TileLayerOptions & BubbleLayerOptions & LayerOptions); type: "SymbolLayer" | "HeatLayer" | "ImageLayer" | "LineLayer" | "PolygonExtrusionLayer" | "PolygonLayer" | "TitleLayer" | "BubbleLayer" }): { layerRef: null | SymbolLayer | ImageLayer | TileLayer }

  • Parameters

    • __namedParameters: { events: any; id: undefined | string; lifecycleEvents: any; options: Options | (SymbolLayerOptions & HeatMapLayerOptions & ImageLayerOptions & LineLayerOptions & PolygonExtrusionLayerOptions & PolygonLayerOptions & TileLayerOptions & BubbleLayerOptions & LayerOptions); type: "SymbolLayer" | "HeatLayer" | "ImageLayer" | "LineLayer" | "PolygonExtrusionLayer" | "PolygonLayer" | "TitleLayer" | "BubbleLayer" }
      • events: any
      • id: undefined | string
      • lifecycleEvents: any
      • options: Options | (SymbolLayerOptions & HeatMapLayerOptions & ImageLayerOptions & LineLayerOptions & PolygonExtrusionLayerOptions & PolygonLayerOptions & TileLayerOptions & BubbleLayerOptions & LayerOptions)
      • type: "SymbolLayer" | "HeatLayer" | "ImageLayer" | "LineLayer" | "PolygonExtrusionLayer" | "PolygonLayer" | "TitleLayer" | "BubbleLayer"

    Returns { layerRef: null | SymbolLayer | ImageLayer | TileLayer }

    • layerRef: null | SymbolLayer | ImageLayer | TileLayer

useCheckRef

  • useCheckRef<T, T1>(dep: T | null, on: T1 | null, callback: (dep: T, on: T1) => void): void

  • Type parameters

    • T

    • T1

    Parameters

    • dep: T | null
    • on: T1 | null
    • callback: (dep: T, on: T1) => void
        • (dep: T, on: T1): void

        • Parameters

          • dep: T
          • on: T1

          Returns void

    Returns void

useCheckRefMount

  • useCheckRefMount<T, T1>(dep: T | null, on: T1 | null, callback: (dep: T, on: T1) => void): void

  • Type parameters

    • T

    • T1

    Parameters

    • dep: T | null
    • on: T1 | null
    • callback: (dep: T, on: T1) => void
        • (dep: T, on: T1): void

        • Parameters

          • dep: T
          • on: T1

          Returns void

    Returns void

Const useCreateAzureMapFeatureFeature

  • useCreateAzureMapFeatureFeature(__namedParameters: { bbox: undefined | BoundingBox; coordinate: undefined | Position; coordinates: undefined | Position[]; multipleCoordinates: undefined | Position[][]; multipleDimensionCoordinates: undefined | Position[][][]; type: "Point" | "MultiPoint" | "LineString" | "MultiLineString" | "Polygon" | "MultiPolygon" }): atlas.data.Geometry | undefined

  • Parameters

    • __namedParameters: { bbox: undefined | BoundingBox; coordinate: undefined | Position; coordinates: undefined | Position[]; multipleCoordinates: undefined | Position[][]; multipleDimensionCoordinates: undefined | Position[][][]; type: "Point" | "MultiPoint" | "LineString" | "MultiLineString" | "Polygon" | "MultiPolygon" }
      • bbox: undefined | BoundingBox
      • coordinate: undefined | Position
      • coordinates: undefined | Position[]
      • multipleCoordinates: undefined | Position[][]
      • multipleDimensionCoordinates: undefined | Position[][][]
      • type: "Point" | "MultiPoint" | "LineString" | "MultiLineString" | "Polygon" | "MultiPolygon"

    Returns atlas.data.Geometry | undefined

Const useCreateImageSprites

Const useCreateMapControls

Const useCreateMapCustomControls

Const useCreatePopup

  • useCreatePopup(__namedParameters: { options: undefined | PopupOptions; popupContent: ReactElement<any, string | ((props: P) => ReactElement | null) | {}> }): Popup

  • Parameters

    • __namedParameters: { options: undefined | PopupOptions; popupContent: ReactElement<any, string | ((props: P) => ReactElement | null) | {}> }
      • options: undefined | PopupOptions
      • popupContent: ReactElement<any, string | ((props: P) => ReactElement | null) | {}>

    Returns Popup

Legend

  • Module
  • Object literal
  • Variable
  • Function
  • Function with type parameter
  • Index signature
  • Type alias
  • Type alias with type parameter
  • Enumeration
  • Enumeration member
  • Property
  • Method
  • Interface
  • Interface with type parameter
  • Constructor
  • Property
  • Method
  • Index signature
  • Class
  • Class with type parameter
  • Constructor
  • Property
  • Method
  • Accessor
  • Index signature
  • Inherited constructor
  • Inherited property
  • Inherited method
  • Inherited accessor
  • Protected property
  • Protected method
  • Protected accessor
  • Private property
  • Private method
  • Private accessor
  • Static property
  • Static method

Generated using TypeDoc