react-azure-maps

react-azure-maps copied to clipboard

Based on previous #73 and #75, adds support for drawing manager, with the following details:

• DrawingManagerProvider also contains DataSourceProvider for its manager datasource as a child
• each customizable drawing manager layer is available as a context provider: AzureMapDrawingLayerProvider which allows customizing layer options and events.
• fixes https://github.com/WiredSolutions/react-azure-maps/issues/70#issuecomment-784916971 by making sure there are no multiple versions of azure-maps-control in target generated bundle.
• fixes cannot read children of undefined in _updateMode issue mentioned in https://github.com/WiredSolutions/react-azure-maps/pull/75#issue-513610137 by instantiating toolbar control in map ready handler and letting users pass toolbar params rather then toolbarControl instances
• Additionally yarn peerDependency warnings are fixed.

Sample usage: NOTE: features added directly into AzureMapDrawingManagerProvider are editable.

const option = {
  center: [-122.33, 47.6],
  zoom: 12,
  authOptions: {
    authType: "subscriptionKey",
    subscriptionKey: key,
  },
};

const drawingOptions = {
  toolbar: {
    position: 'top-right',
    style: 'dark',
  }
};

const DefaultMap= () => (
  <AzureMapsProvider>
    <div style={{ height: '100vh' }}>
      <AzureMap options={option}>
        <AzureMapDrawingManagerProvider options={drawingOptions}>
          <AzureMapFeature
            id={'DrawingTool MapFeature'}
            type="Polygon"
            coordinates={[
              [-122.33, 47.6],
              [-122.43, 47.6],
              [-122.43, 47.7],
              [-122.33, 47.6],
            ]}
          />

          <AzureMapDrawingLayerProvider type="lineLayer" options={{strokeColor: 'red', strokeWidth: 4}}/>
          <AzureMapDrawingLayerProvider type="pointLayer" options={{iconOptions: { image: 'marker-blue' }}}/>
          <AzureMapDrawingLayerProvider type="polygonLayer" options={{fillColor: 'green'}}/>
          <AzureMapDrawingLayerProvider type="polygonOutlineLayer" options={{strokeColor: 'orange'}}/>
        </AzureMapDrawingManagerProvider>
      </AzureMap>
    </div>
  </AzureMapsProvider>
);

export default DefaultMap;

Coverage after added unit tests:

Playground example is at https://github.com/WiredSolutions/react-azure-maps-playground/pull/49