|
| 1 | +/** |
| 2 | + * Example for Indoor Map for JSMapsApi. |
| 3 | + */ |
| 4 | + |
| 5 | +// Replace with your HERE platform app api key |
| 6 | +const yourApikey = 'ZKBUeAgkzH4JWhg93AA7cIE_kZotbMGhVI0_UYC0COY'; |
| 7 | + |
| 8 | +// Replace with your indoor map platform collection hrn |
| 9 | +const indoorMapHrn = 'hrn:here:data::org651595200:indoormap-ed6d5667-cfe0-4748-bbf5-88b00e7e3b21-collection'; |
| 10 | + |
| 11 | +const venuesProvider = null |
| 12 | +const venuesService = null |
| 13 | +// Specify the venue ID for your map. Examples of the map ID mentioned below. |
| 14 | +// For legacy maps, you can continue to use the numeric value. |
| 15 | +// Examples: |
| 16 | +// indoormap-00000000-0000-4000-a000-000000007348 for Zurich Airport (legacy id 7348) |
| 17 | +// indoormap-00000000-0000-4000-a000-000000027158 for Tiefgarage Riem Arcaden APCOA Parking garage (legacy id 27158) |
| 18 | +// indoormap-00000000-0000-4000-a000-000000022766 for Mall of Berlin (legacy id 22766) |
| 19 | +const venueId = 'indoormap-00000000-0000-4000-a000-000000007348'; |
| 20 | + |
| 21 | +// Set to false if base map is not needed to be displayed. |
| 22 | +const showBaseMap = true; |
| 23 | + |
| 24 | +// Optional, list of label text preferences to override. |
| 25 | +const labelTextPreferenceOverride = [ |
| 26 | + H.venues.Service2.LABEL_TEXT_PREFERENCE_OVERRIDE.OCCUPANT_NAMES, |
| 27 | + H.venues.Service2.LABEL_TEXT_PREFERENCE_OVERRIDE.SPACE_NAME |
| 28 | +] |
| 29 | + |
| 30 | +/** |
| 31 | + * Load and add indoor data on the map. |
| 32 | + * |
| 33 | + * @param {H.Map} map A HERE Map instance |
| 34 | + * @param {H.service.Platform} platform A HERE Platform instance |
| 35 | + */ |
| 36 | +function addVenueToMap(map, platform) { |
| 37 | + // Indoor Maps provider interacts with a tile layer to visualize and control the Indoor Map |
| 38 | + venuesProvider = new H.venues.Provider(); |
| 39 | + |
| 40 | + // Get an instance of the Indoor Maps service using a valid apikey for Indoor Maps |
| 41 | + venuesService = platform.getVenuesService({ apikey: yourApikey, hrn: indoorMapHrn }, 2); |
| 42 | + |
| 43 | + // Use venuesService.getMapInfoList to retrieve the list of Indoor maps from the given HRN |
| 44 | + venuesService.getMapInfoList().then(mapInfoList => { |
| 45 | + mapInfoList.forEach(mapInfo => { |
| 46 | + console.log("Indoor map id: " + mapInfo.mapId + ", map name: " + mapInfo.mapName); |
| 47 | + }); |
| 48 | + }); |
| 49 | + |
| 50 | + // Indoor Maps service provides a loadVenue method. Optionally, overriding the label preferences |
| 51 | + venuesService.loadVenue(venueId, { labelTextPreferenceOverride }).then((venue) => { |
| 52 | + // add Indoor Maps data to the Indoor Maps provider |
| 53 | + venuesProvider.addVenue(venue); |
| 54 | + venuesProvider.setActiveVenue(venue); |
| 55 | + |
| 56 | + // create a tile layer for the Indoor Maps provider |
| 57 | + const venueLayer = new H.map.layer.TileLayer(venuesProvider); |
| 58 | + if (showBaseMap) { |
| 59 | + // Add venueLayer to the base layer |
| 60 | + map.addLayer(venueLayer); |
| 61 | + } else { |
| 62 | + // If base map is not needed, set the venueLayer as base layer |
| 63 | + map.setBaseLayer(venueLayer); |
| 64 | + } |
| 65 | + |
| 66 | + // Set center of the map view to the center of the venue |
| 67 | + map.setCenter(venue.getCenter()); |
| 68 | + |
| 69 | + // Create a level control |
| 70 | + const levelControl = new H.venues.ui.LevelControl(venue); |
| 71 | + ui.addControl('level-control', levelControl); |
| 72 | + |
| 73 | + // Create a drawing control: |
| 74 | + const drawingControl = new H.venues.ui.DrawingControl(venue); |
| 75 | + ui.addControl('drawing-control', drawingControl); |
| 76 | + }); |
| 77 | +} |
| 78 | + |
| 79 | +/** |
| 80 | + * calculate route from a to b and load it on venue |
| 81 | + * @param {H.Map} map A HERE Map instance |
| 82 | +
|
| 83 | + * A full list of available request parameters can be found in the Indoor Routing API documentation. |
| 84 | + * see: https://www.here.com/docs/bundle/indoor-routing-api-v1-api-reference/page/index.html |
| 85 | + */ |
| 86 | +async function calculateIndoorRouteFromAtoB(map) { |
| 87 | + |
| 88 | + // Instantiate (and display) a map: |
| 89 | + const origin = { lat: 47.45146718297871, lng: 8.56116163852909, levelId: "level-9050", venueId: "indoormap-00000000-0000-4000-a000-000000007348" }; |
| 90 | + const destination = { lat: 47.45264049318705, lng: 8.562764022046945, levelId: "level-9050", venueId: "indoormap-00000000-0000-4000-a000-000000007348" }; |
| 91 | + |
| 92 | + // Create the parameters for the indoor routing request: |
| 93 | + const routingParameters = { |
| 94 | + routingMode: "fast", |
| 95 | + transportMode: "pedestrian", |
| 96 | + // The start point of the route: |
| 97 | + origin: `${origin.lat},${origin.lng},${origin.levelId},${origin.venueId}`, |
| 98 | + // The end point of the route: |
| 99 | + destination: `${destination.lat},${destination.lng},${destination.levelId},${destination.venueId}`, |
| 100 | + }; |
| 101 | + try{ |
| 102 | + const res = await venuesService.calculateRoute(routingParameters); |
| 103 | + if (res?.routes && res.routes.length > 0) { |
| 104 | + // Create route objects using route response data |
| 105 | + const route = new H.venues.Route2(res.routes[0]); |
| 106 | + // Link route map objects with venue levels for automatic visibility updates: |
| 107 | + const indoorObjects = route.getIndoorObjects(); |
| 108 | + |
| 109 | + for (let venueId in indoorObjects) { |
| 110 | + for (let levelIndex in indoorObjects[venueId]) { |
| 111 | + const venue = venuesProvider.getVenue(venueId); |
| 112 | + const objectGroup = indoorObjects[venueId][levelIndex]; |
| 113 | + map.addObject(objectGroup); |
| 114 | + venue.setMapObjects(objectGroup.getObjects(), levelIndex); |
| 115 | + } |
| 116 | + } |
| 117 | + } |
| 118 | + }catch(error){ |
| 119 | + console.log(error.message) |
| 120 | + } |
| 121 | +} |
| 122 | + |
| 123 | +/** |
| 124 | + * Boilerplate map initialization code starts below: |
| 125 | + */ |
| 126 | + |
| 127 | +// Step 1: initialize communication with the platform |
| 128 | +// In your own code, replace variable window.apikey with your own apikey |
| 129 | +var platform = new H.service.Platform({ |
| 130 | + apikey: yourApikey |
| 131 | +}); |
| 132 | +var defaultLayers = platform.createDefaultLayers(); |
| 133 | + |
| 134 | +// Step 2: initialize a map |
| 135 | +var map = new H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, { |
| 136 | + zoom: 18, |
| 137 | + center: { lat: 47.452353, lng: 8.562455 }, |
| 138 | + pixelRatio: window.devicePixelRatio || 1 |
| 139 | +}); |
| 140 | + |
| 141 | +// add a resize listener to make sure that the map occupies the whole container |
| 142 | +window.addEventListener('resize', () => map.getViewPort().resize()); |
| 143 | + |
| 144 | +// Step 3: make the map interactive |
| 145 | +// MapEvents enables the event system |
| 146 | +// Behavior implements default interactions for pan/zoom (also on mobile touch environments) |
| 147 | +var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map)); |
| 148 | + |
| 149 | +// Step 4: create the default UI component, for displaying bubbles |
| 150 | +var ui = H.ui.UI.createDefault(map, defaultLayers); |
| 151 | + |
| 152 | +// Step 5: add the Indoor Map |
| 153 | +addVenueToMap(map, platform); |
| 154 | + |
| 155 | +// Step 6: add route to indoor map |
| 156 | +calculateIndoorRouteFromAtoB(map) |
0 commit comments