HERE Venues provides a wealth of hyperlocal information about indoor spaces, including building geometry and points of interest, spanning across multiple floors. HERE has mapped thousands of buildings globally, including, shopping malls, airports, train stations, parking garages, corporate campuses, factories, warehouses and many other types of buildings. If you are a venue owner and are interested in leveraging HERE Venues with the Maps API for Javascript, contact us at venues.support@here.com.
The Venues module provides access to given venues including full JSON models with polygons/geometry, areas and POI information.
All these features can be accessed through the venues module (mapsjs-venues.js) in the Maps API for JavaScript for easy integration into a map application.
Setting up venues
To be able to use Venues in the Maps API, requires
Access to venue data In order the load venue data, the app credentials should have access to the requested venue data.
Including the venues module script in the <head> section of the HTML page:
To create the map, make sure to follow the Get Started guide.
Loading the venue data
Than use the platform object to get the instance of H.venues.Service to load Venue data and create a H.venues.Provider to enable control of the loaded venues on the map:
// Get instance of venues service using valid apikey for venuesconst venuesService = platform.getVenuesService({ apikey:'API KEY'});// Venues provider interacts with tile layer to visualize and control the venue mapconst venuesProvider =newH.venues.Provider();// Venues service provides a loadVenue method
venuesService.loadVenue(VENUE_ID).then((venue)=>{// add venue data to venues provider
venuesProvider.addVenue(venue);
venuesProvider.setActiveVenue(venue);// create a tile layer for the venues provider
map.addLayer(newH.map.layer.TileLayer(venuesProvider));// center map on venue
map.setCenter(venue.getCenter());
map.setZoom(15);});
Example map
Figure 1.
The example above shows a venue map loaded on the map.
Changing levels
The Provider facilitates control of the venue map. To get information about the current level or change the level:
// Get active venueconst venue = venuesProvider.getActiveVenue();// get current level index
venue.getActiveLevelIndex();// and change level
venue.setActiveLevelIndex(1);
Search
The H.venues.Venue object also provides a search functionality through the search method. It is performed on geometry data where names and address are taken into account. The search string is not case sensitive and also looks for close matches:
// Get active venueconst venue = venuesProvider.getActiveVenue();// Search for bathrooms
venue.search('Bathroom');
Venue UI
Default UI elements give control over Drawings and Levels using H.venues.ui.DrawingControl and H.venues.ui.LevelControl:
The venue data is encapsulated in a hierarchy of objects. These objects perform as other MapObjects and are represented by the following classes:
H.venues.Venue
H.venues.Drawing
H.venues.Level
H.venues.Geometry
The root is Venue, which contains one or more Drawings, which contains one or more Levels. And the Level object holds the relevant collection Geometry objects.
The row data associated with each of the objects is accessible through the getData() method.
The classes extend H.map.Feature.
Indoor Routing
With the help of H.venues.Service and H.venues.Route classes, it is possible to calculate a route between points and visualize it on the map in a few simple steps.
Calculating a route
To calculate a route to or from a venue it is required to provide a point as well as the venue id and the level id for the point. Let's replace the origin and destination in the example below with one point inside the venue and one outside:
// Calculate the routeconst result =await venuesService.calculateRoute({// Provide lat and lon for a point outside venue
origin:{
coordinates:[52.15,5.38]},// Provide lat and lon and venue information for a point inside venue
destination:{
coordinates:[VENUE_LATITUDE,VENUE_LONGITUDE],
venueId:VENUE_ID,
levelId:LEVEL_ID},
transportMode:'pedestrian',});
Visualizing the route
The result route data can be visualized with the help of H.venues.Route class:
// Create a route object using the data for the routeconst route =newH.venues.Route(result.routes[0]);// Get map objects representing indoor segmentsconst indoorObjects = route.getIndoorObjects();// Link map objects with venue levels for automatic visibility updates and add to mapfor(let venueId in indoorObjects){for(let levelIndex in indoorObjects[venueId]){const venue = venuesProvider.getVenue(venueId);const objectGroup = indoorObjects[venueId][levelIndex];// Add objects to map
map.addObject(objectGroup);// Link to venue level
venue.setMapObjects(objectGroup.getObjects(), levelIndex);}}// Get map objects representing outdoor segmentsconst outdoorObjects = route.getOutdoorObjects();// Add objects to the map
map.addObject(outdoorObjects);
Customizing route style
By using the H.venues.Route's optional styleCallback parameter, it is possible to customize the route style. It requires 3 parameters:
The index of the current route section
All route sections
Segment object type
Based on the given input, the callback should return style (H.map.Icon or H.map.SpatialStyle) or undefined. If it returns undefined then map object won't be created.
// Define line and marker styles for segmentsconst indoorRouteSegmentStyle =newH.map.SpatialStyle({strokeColor:'#1ab4bf', lineWidth:3});const outdoorRouteSegmentStyle =newH.map.SpatialStyle({strokeColor:'#1ab4bf', lineWidth:3});const exampleSvgIcon =newH.map.Icon('<svg width="18" height="18" '+'xmlns="http://www.w3.org/2000/svg">'+'<circle cx="8" cy="8" r="8" '+'fill="#1ab4bf" stroke="white" stroke-width="2" />'+'</svg>');const routeStartIcon = exampleSvgIcon;const routeEndIcon = exampleSvgIcon;const sectionStartIcon = exampleSvgIcon;const sectionEndIcon = exampleSvgIcon;// Define attribution logic based on segments and objects of the routeconststyleCallback=(index, sections, objectType)=>{if(objectType ===H.venues.Route.ObjectType.SEGMENT_START_MARKER){if(index ===0){return routeStartIcon;}return sectionStartIcon;}elseif(objectType ===H.venues.Route.ObjectType.SEGMENT_FINISH_MARKER){if(sections.length ===1|| index === sections.length -1){return routeEndIcon;}return sectionEndIcon;}return sections[index].departure.place.type ==='indoor'?
indoorRouteSegmentStyle : outdoorRouteSegmentStyle;};// Create route by specifying the styleCallbackconst route =newH.venues.Route(result.routes[0], styleCallback);// Add route to map using the previous steps...
Figure 2.
The example above shows an example route within a venue map.