Ever get lost within the complexities of large venues like airports, stadiums, malls or convention centers? Luckily, HERE Venue Maps provides a one-stop solution for indoor mapping and indoor routing in over 14,400 venues across the globe.
In this guide, I'll teach you how to get an indoor map of the Istanbul Atatürk Airport up and running in under 10 minutes.
You'll need an active HERE Developer account, so if you don't have one already, head on over to the HERE Developer Portal and sign up for one--don't worry, it won't cost you anything!
Setting up the HTML skeleton
- mapsjs-service.js: in order to display Venue Maps
- here.js (local file): where we'll be writing our code
I've also included some internal CSS to help us with the look and feel of the interactive map.
Creating a basic HERE map
platform initializes our blank map. Make sure to paste your own app_id and app_code credentials from the developer portal to make sure everything runs smoothly. Additionally, make sure useCIT is set to false--this makes sure all available venues are shown.
I've centered the map directly on top of the Atatürk Airport with a nice zoom level so we can see all shops, restaurants and rooms within the airport, although they are not yet available with the code we've written so far.
The variables behavior and ui are controls that provide additional functionality such as zooming, panning, etc.
And now you should have a basic HERE map visible. Now onto the fun part... adding venues!
Appending venues onto the map
Let's initialize some objects:
- venueService: the venues service containing all the data regarding venues
- customVenueLayer: the custom layer we'll append to the map with venues
- venueProvider: the object of the particular venue we'll be dealing with
After that, we'll add the custom venue layer to the map. Give your page a refresh and you'll be able to see an indoor map of the airport! I've also changed the current floor level to 2 to show the level with the most detail.
Changing levels within the venue
Now that we have our venue map up and running, let's add some additional functionality: changing levels. Wouldn't it helpful to visitors to see what else is available within the airport outside level 2?
I've included a quick function to embed some HTML into our venues.html page. The function, renderControls():
- creates a div container containing a title (current level indicator) and two control buttons (floor up, floor down)
- enables switching between floors using the setCurrentLevel() function
- updates the title to show the current level after a change to the view
To find additional functions like setCurrentLevel(), be sure to give the API reference a visit.
There you go! Give the controls a try and see how the floors change right in front of you. At this point, you'll basically know the inside of the Atatürk Airport like the back of your hand. See if you can find the Italian restaurant Sbarro :)
But don't stop there! This tutorial walked you through how to complete the most basic step of the Venue Maps API functionality: displaying a map. The HERE Venue Maps service provides rich functionality such as:
- indoor routing: calculate routes inside and outside venues
- venue discovery: explore venues (+ what's inside) around the world
- display 3D venues (Android SDK)
- customize venue experience: change display, highlight certain venues
Depending on what platform you're using, you can find Venue Maps API documentation, guides and examples that fit your exact needs:
For those of you participating in the Turkish Airlines Travel Hackathon: happy hacking!