This is a guest blog post by Miroslav Nedyalkov (@miro_nedyalkov) from our London-based partner OfficeRnD (@officernd).
Data visualization is key component of every modern mobile app. Floorplans are no exception. With good floorplanning platform you could easily make your app stand out. For example you may:
OfficeRnD is a software company that provide web and mobile floorplanning APIs. The OfficeRnD and the Telerik teams worked together to deliver floorplans for the official TelerikNEXT conference application. The application is built on top of NativeScript. You can check it out here - https://github.com/NativeScript/sample-TelerikNEXT.
I’ll walk you through a slightly simpler example how you can embed a floorplan inside your application. You can see the whole project at https://github.com/officernd/NativeScript-floor.
Let’s start with existing floorplan made with OfficeRnD - https://www.officernd.com/rooms/55468128ebfbd6b660588733. You may create your own for free - just go to https://www.officernd.com/ and start over.
First you need to make sure you have the tns command line tool installed (described here https://github.com/NativeScript/nativescript-cli).
To check out if you have it, just type in the console:
Once you have it installed you should prepare the boilerplate project:
We need just a blank view with title and image placeholder. It is good to show the user indication that floorplan is loading so we will also add an ActivityIndicator as well. Your main-page.xml should look like this:
Basically we need to populate the floor plan title and the floor plan image to the title and image properties of the view-model of the page. We will start with just initializing the view model. Change its code to:
OfficeRnD enables the Managers of offices, including serviced and shared, to manage and improve their space.
To integrate with OfficeRnD you need to know the ID of the floorplan and the details (layers) you need to visualize- basic floorplan, furniture, availability, zones legend, etc. I’ll not go in much details here. If you need more information about the API please contact me at [email protected] - I’ll be glad to help you get started.
The endpoint we will use looks like this:
and returns a json with the uri of the exported image:
We will use the http module to make this request:
Оnce we have the uri of the image, we can just display it in our application. We will use the image-source module and more specifically the fromUrl function like this:
We are almost done. We just need to put all the things together. Let’s put this code in a separate module called officerndApi:
And call the getPlanImage from the view-model:
Thanks to the tns command line tool this is fairly easy - just type
See the source code of the full example at https://github.com/officernd/NativeScript-floor.