The following tutorial has two parts and it will use the UNL SDK to:
- Import a particular venue that was uploaded in studio;
- Upload a zip archive that contains a valid IMDF venue;
The indoor mapping data format (IMDF) documentation can be found here.
Add a new option in the action sheet component (
ActionSheet.js) inside the
<div> element, that will trigger this flow.
unlApi.js file, add a new function that calls the UNL SDK method to retrieve the imdf features of the venue.
The function above accepts three parameters: the id of the project where the venue was uploaded, id of the venue and the array of requested feature types.
This tutorial, exemplifies the rendering of the following feature types of the IMDF venue:
So the next step is to implement the functions that will add these features to the map. We will include the
venueId in the ids of the sources and layers so that we can reuse these functions to render multiple venues.
- First, implement the function that will render a venue marker at the venue coordinates:
- Next, implement the function that will add the level source and layers to the map. There are two layers defined: one for rendering the border and the other one to render the fill of the level:
- In case of the units, apart from the border and fill, we will also add a symbol layer responsible for rendering the marker of the unit:
- Finally, add the opening source and layer. Basically, an opening represents a line that marks the entrance point of a unit:
Now is the time to call the functions implemented above. It gets the map as a parameter and is also responsible to call the map animation in order to move the map to the newly imported venue.
renderVenue also gets a parameter named
imdfFeature which is the object returned by the sdk. We can add a function named
getVenueRenderedFeatures that will return the venue, level, unit and opening feature collections from
To wrap things up, add the function which calls the
getImdfFeatures function from
unlApi.js and, once the venue is fetched, trigger the rendering of the IMDF features:
This function will be triggered by clicking the button that was added in the menu at the beginning of the tutorial:
To complete this part, we have to add the venue id in the
config.js file. It will be used to call the UNL SDK method to retrieve the venue features. You can copy this id from the properties panel of a venue, in studio
YOUR-IMPORTED-VENUE-ID with valid a value:
By this time, we should have the venue rendered:
As you can see, the map looks rather messy and the reason behind this is that all the levels, along with the containing units, are render simultaneously. In order to filter the components and show one level at time, we have to continue with the implementation of the level selector.
In order to implement the level selector, lets add a div in the
index.html and style it in the
Next, we have the
LevelSelector component which basically render a fab to display the name of each level, and use a different style to distinguish the selected one:
Whenever the map moves, detect the rendered venue and re-initialize the level selector with the new level names.
Next, lets write the
handleLevelSelected function to filter the layers based on newly the selected level:
And call the
updateLevelSelector function when the
moveend event of map:
Next, we will add the option to upload a zip archive which contains a valid IMDF venue.
First, add the button to trigger this flow in the
In order to make the file selection possible, we also need to add an
input element in the index.html file. We can restrict the accepted files to zip archives:
unlApi.js file, add the call to the sdk for uploading the imdf archive:
Write the function which opens the file selector and calls the
uploadImdfArchvie function to upload the zip file. Once the file is selected, simply call the
renderVenue that was implemented in the first part of the tutorial to display the venue and animate the map to that location.
Finally, add the event listener to trigger the upload: