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;