Venues

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

  1. Access to venue data In order the load venue data, the app credentials should have access to the requested venue data.

  2. Including the venues module script in the <head> section of the HTML page:

<!DOCTYPE html>
  <html>
  <head>
  ...
  <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"
     type="text/javascript"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"
     type="text/javascript"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"
     type="text/javascript"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"
     type="text/javascript"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-venues.js"
     type="text/javascript"></script>
  ...
  </head>

Displaying data on map

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 venues
const venuesService = platform.getVenuesService({ apikey: 'API KEY' });

// Venues provider interacts with tile layer to visualize and control the venue map
const venuesProvider = new H.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(new H.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 venue
const venue = venuesProvider.getActiveVenue();

// get current level index
venue.getActiveLevelIndex();

// and change level
venue.setActiveLevelIndex(1);

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 venue
const 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:

// Get active venue
const venue = venuesProvider.getActiveVenue();

// Create level control
const levelControl = new H.venues.ui.LevelControl(venue);
ui.addControl('level-control', levelControl);

// Create drawing control:
const drawingControl = new H.venues.ui.DrawingControl(venue);
ui.addControl('drawing-control', drawingControl);

Map Objects

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 route
const 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 route
const route = new H.venues.Route(result.routes[0]);

// Get map objects representing indoor segments
const indoorObjects = route.getIndoorObjects();

// Link map objects with venue levels for automatic visibility updates and add to map
for (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 segments
const 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 segments
const indoorRouteSegmentStyle = new H.map.SpatialStyle({strokeColor: '#1ab4bf', lineWidth: 3});
const outdoorRouteSegmentStyle = new H.map.SpatialStyle({strokeColor: '#1ab4bf', lineWidth: 3});

const exampleSvgIcon = new H.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 route
const styleCallback = (index, sections, objectType) => {
  if (objectType === H.venues.Route.ObjectType.SEGMENT_START_MARKER) {
    if (index === 0) {
      return routeStartIcon;
    }
    return sectionStartIcon;
  } else if(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 styleCallback
const route = new H.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.

results matching ""

    No results matching ""