react-azure-maps

react-azure-maps copied to clipboard

Adds support for Azure Map Creator Indoor Manager plugin.

Sample usage:

const tilesetId = "YOUR_TILESET_ID"

const options = {
  authOptions: {
    authType: "subscriptionKey",
    subscriptionKey: "YOUR_PRIMARY_SUB_KEY",
  },

  center: [-122.13203, 47.63645],
  zoom: 19,
  style: 'Grayscale_light',
  view: 'Auto'
};

const DefaultMap = () => (
  <AzureMapsProvider>
    <div style={{ height: '100vh', margin: 0 }}>
      <AzureMap options={options}>
        <AzureMapIndoorManagerProvider 
          options={{ 
            tilesetId, 
            theme: 'dark',
            levelControl: { position: 'top-right' }}}
          events={{
            facilitychanged: eventData => console.log(eventData),
            levelchanged: eventData => console.log(eventData)
          }}
        />
      </AzureMap>
    </div>
  </AzureMapsProvider>
);

export default DefaultMap;

Unit tests and example in examples repo are pending.

Additional notes: Since the conversion of cad file (.dwg) to tileset consists of multiple REST api calls (described at tutorial-creator-indoor-maps), I have added a shell script to simplify this for the simple usecase: upload_indoor.sh , example .dwg .zip bundle can be found at Azure-Samples/am-creator-indoor-data-samples