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:
},
}
const DefaultMap: React.FC = () => (
<div style={{height: '300px'}}>
<AzureMapsProvider>
<AzureMap options={option}>
</AzureMap>
</AzureMapsProvider>
</div>
)
export default DefaultMap
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
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
IAzure
CustomControls: { control: Control; controlOptions?: ControlOptions }
IAzureDataSourceStatefulProviderProps
Type declaration
-
-
Optional dataFromUrl?: undefined | string
-
-
id: string
-
Optional options?: DataSourceOptions
IAzureLayerStatefulProviderProps
IAzure
LayerStatefulProviderProps: { 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 id?: undefined | string
-
-
options: (SymbolLayerOptions & HeatMapLayerOptions & ImageLayerOptions & LineLayerOptions & PolygonExtrusionLayerOptions & PolygonLayerOptions & TileLayerOptions & BubbleLayerOptions & LayerOptions) | Options
-
IAzureMap
Type declaration
-
Optional LoaderComponent?: ComponentClass<any> | StatelessComponent<any>
-
-
-
Optional containerClassName?: undefined | string
-
-
-
-
-
-
Optional providedMapId?: undefined | string
-
Optional styles?: CSSProperties
-
Optional trafficOptions?: TrafficOptions
-
Optional userInteraction?: UserInteractionOptions
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"
IAzureMapContextState
IAzureMapContextState: { isMapReady: boolean | false; mapRef: Map | null; removeMapRef: any; setMapReady: any; setMapRef: any }
Type declaration
-
isMapReady: boolean | false
-
mapRef: Map | null
-
removeMapRef: function
-
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: {}
IAzureMapDataSourceEventType
IAzureMapDataSourceEventType: "dataadded" | "dataremoved"
IAzureMapEvent
IAzureMapEvent: {}
IAzureMapFeature
IAzure
MapFeature: { 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
-
IAzureMapFeatureType
IAzureMapFeatureType: "Point" | "MultiPoint" | "LineString" | "MultiLineString" | "Polygon" | "MultiPolygon"
IAzureMapHtmlMarker
IAzure
MapHtmlMarker: { events?: Array<IAzureMapHtmlMarkerEvent>; id?: undefined | string; isPopupVisible?: undefined | false | true; markerContent?: ReactElement; options?: HtmlMarkerOptions }
Type declaration
-
-
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
-
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: {}
IAzureMapLayerEventType
IAzureMapLayerEventType: "mousedown" | "mouseup" | "mouseover" | "mousemove" | "click" | "dblclick" | "mouseout" | "mouseenter" | "mouseleave" | "contextmenu" | "wheel" | "touchstart" | "touchend" | "touchmove" | "touchcancel"
IAzureMapLayerLifecycleEvents
IAzureMapLayerLifecycleEvents: "layeradded" | "layerremoved"
IAzureMapLayerType
IAzureMapLayerType: "SymbolLayer" | "HeatLayer" | "ImageLayer" | "LineLayer" | "PolygonExtrusionLayer" | "PolygonLayer" | "TitleLayer" | "BubbleLayer"
IAzureMapLifecycleEvent
IAzureMapLifecycleEvent: {}
IAzureMapMouseEventRef
IAzureMapMouseEventRef: HtmlMarker
IAzureMapMouseEvents
IAzureMapMouseEvents: {}
IAzureMapOptions
IAzureMapOptions: ServiceOptions & StyleOptions & UserInteractionOptions & CameraOptions | CameraBoundsOptions
IAzureMapPopup
IAzure
MapPopup: { events?: Array<IAzureMapPopupEvent>; isVisible?: undefined | false | true; options?: PopupOptions; popupContent: ReactElement }
Type declaration
-
-
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
-
eventName: keyof PopupEvents
IAzureMapSourceEventType
IAzureMapSourceEventType: "sourceadded" | "sourceremoved"
IAzureMapsStatefulProviderProps
IAzure
MapsStatefulProviderProps: { children?: ReactElement<IAzureMap> }
LayerType
LayerType: SymbolLayer | ImageLayer | TileLayer