react-azure-maps
react-azure-maps copied to clipboard
How to add circles using Point and Polygon with JSX syntax
Ask: Specifically I want to do this: https://docs.microsoft.com/en-us/azure/azure-maps/map-add-shape#add-a-circle-to-the-map
I want a geospatially correct circle as the user zooms in and out.
Alternatives I've tried: Bubble layer gets me a circle but the radius is pixel fixed which is why I discarded this approach and want to get the above point/shape + Polygon layer combo working.
Question:
It is not clear to me where to apply properties subType
and radius
when using the JSX components offered by this library.
I tried something like this where I specify type as a point
and variant as shape
. Then I add subType and radius to properties. This did not work and nothing from this layer shows up on the map.
Is this on the right track and if so, what is missing in order to render a point as a geospatially correct circle?
myPoints
<AzureMapFeature
key={id}
id={id}
variant="shape"
type="point"
coordinates={[new Position(0, 0)]}
properties={{
subType: 'Circle',
radius: 10000 //meters
}}
/>
Later I create a PolygonLayer like this myPolygonLayer
<AzureMapLayerProvider
id={`${layerId}-polygonLayer-circles`}
options={{
fillOpacity: 0.75,
fillColor: 'red',
}}
type="PolygonLayer"
events={eventsHandlers}
/>
Finally I create a DataSource provider like this with the above two JSX components DataSource
<AzureMapDataSourceProvider id={layerId}>
{myPolygonLayer}
{myPoints}
</AzureMapDataSourceProvider>
Thanks!