Web SDK Wayfinding and version Questions

[ParSR]

Hello,
My company is in process of obtaining MappedIn license and it is something work in progress. However, I am playing around with SDK.

Currently I am rendering the map inside an iframe.

For trial purposes , during development phase, our application’s package.json referred to version “@mappedin/mappedin-js”: “6.0.1-alpha.25”

I found that the most recent version 6.0.1-alpha.30 seems to have changed significantly within a few months.

Eg: import {TCollisionRankingTier} from “@mappedin/mappedin-js/maker/src/map-view-interface”; worked in 6.0.1-alpha.25 but does not in 6.0.1-alpha.30

Also is the BlueDot feature not available anymore with v6?

Last but not the least, below is the sample data from the trial demo map - 660c0c3aae0596d87766f2da

The data set denotes the from space and to space.

Arrival Space object {“id”:“s_dcfc349a72e1f75d”,“name”:“Mechanical”,“type”:“room”,“floor”:“m_ea9b3472bb780823”,“center”:{“latitude”:42.986379259279005,“longitude”:-81.28561163055646,“floor”:“m_ea9b3472bb780823”}}

Destination space object
{“id”:“s_31e9348fcc74e999”,“name”:“Conference Room”,“type”:“room”,“floor”:“m_ea9b3472bb780823”,“center”:{“latitude”:42.98655780492979,“longitude”:-81.28489653391765,“floor”:“m_ea9b3472bb780823”}}

However, the below line of code always seem to render as undefined when using trial demo maps.

const directions = mapView.getDirections(space, arrive);

directions always comes as undefined and subsequent action of drawing a path fails.

    if(directions){
        mapView.Navigation.draw(directions, {
            pathOptions: {
                nearRadius: 1,
                farRadius: 1,
            }});

    } else {
        console.log('No directions found');
    }

What seems to be the issue since that the data object has the necessary data ?

Any pointers will be appreaciated greatly.

[Zach]

Hi ParSR, welcome to the community!

We are rapidly improving our SDK in the alpha stages. This may unfortunately introduce breaking changes to our API. We try our best to document these and I appreciate you reaching out when something has changed.

Eg: import {TCollisionRankingTier} from “@mappedin/mappedin-js/maker/src/map-view-interface”; worked in 6.0.1-alpha.25 but does not in 6.0.1-alpha.30

TCollisionRankingTier and many other exports have moved to the top level. You can import them directly from @mappedin/mappedin-js like so:

import { TCollisionRankingTier } from "@mappedin/mappedin-js”

Let me know if any others you relied on cannot be imported in this way.

Also is the BlueDot feature not available anymore with v6?

BlueDot is not yet available in V6. We’re working on releasing a much improved version for V6 later this year.

directions always comes as undefined and subsequent action of drawing a path fails.

Can you console.log your locations and check if either of your locations undefined before getting directions?

In my testing, I was able to generate directions by getting the locations by name. When I logged the locations to the console, I noticed that the IDs had changed since your post. Keep in mind that the IDs are not static and can change if the map has been edited.

Here’s my code:

const start = mapData
  .getByType("space")
  .find((space) => space.name === "Mechanical");
const end = mapData
  .getByType("space")
  .find((space) => space.name === "Conference Room");
const directions = mapView.getDirections(start, end);
if (directions) {
  mapView.Navigation.draw(directions, {
    pathOptions: {
      nearRadius: 1,
      farRadius: 1,
    },
  });
} else {
  console.log("No directions found");
}

Let me know if you’re still encountering any issues. I’m happy to help out

[ParSR]

Thank you for taking the time out to answer all the questions.
Based on this, I was able to overcome the undefined directions object scenario.

On the same lines, I have another question, unsure whether this needs to be posted separately because the Navigation.draw still doesn’t seem to work for me

The map seems to render only with the markers(person icon at start point and flag at desitnation) but the graphic path is not laid out.

I am attaching the image where the start and end markers are available but the wayfinding path is missing. Again would appreciate any help.

The code I am using is this

    const directions = mapView.getDirections(depart, arrive);
    if(directions){
        console.log('Directions:', JSON.stringify(directions, null, 2));
        // Does not draw th path
        mapView.Navigation.draw(directions);
        console.log(`Direction co-ordinates ${JSON.stringify(directions.coordinates)}`);

    } else {
        console.log('No directions found');
    }

Here is sample console log output

Arrival Space: {
“id”: “s_cd484873cb602b60”,
“name”: “Office”,
“type”: “room”,
“floor”: “m_f62f718116360827”,
“center”: {
“latitude”: 43.51460432467349,
“longitude”: -79.68623030938704,
“floor”: “m_f62f718116360827”
}
}
Depart Space: {
“id”: “s_26ed76d41fbe1ad6”,
“name”: “Loading Dock”,
“type”: “room”,
“floor”: “m_f62f718116360827”,
“center”: {
“latitude”: 43.514821045698795,
“longitude”: -79.68534744942127,
“floor”: “m_f62f718116360827”
}
}
Directions: {}
Direction co-ordinates [{“latitude”:43.514846597347905,“longitude”:-79.6852122633624,“floor”:“m_f62f718116360827”},{“latitude”:43.51481494165109,“longitude”:-79.68515607126817,“floor”:“m_f62f718116360827”},{“latitude”:43.51494210698224,“longitude”:-79.68518842852455,“floor”:“m_f62f718116360827”},{“latitude”:43.515236467638445,“longitude”:-79.68584944508223,“floor”:“m_f62f718116360827”},{“latitude”:43.515194080774876,“longitude”:-79.68596659915482,“floor”:“m_f62f718116360827”},{“latitude”:43.51514405107648,“longitude”:-79.68587829619437,“floor”:“m_f62f718116360827”},{“latitude”:43.515117307902905,“longitude”:-79.68583289048843,“floor”:“m_f62f718116360827”},{“latitude”:43.51510220798964,“longitude”:-79.68580604844546,“floor”:“m_f62f718116360827”},{“latitude”:43.514859160194845,“longitude”:-79.68601928620359,“floor”:“m_f62f718116360827”},{“latitude”:43.51462138721201,“longitude”:-79.6862864573018,“floor”:“m_f62f718116360827”},{“latitude”:43.51459537166218,“longitude”:-79.68624029921543,“floor”:“m_f62f718116360827”}]

[Zach]

Hi again Feel free to keep replying to this thread!

It appears that Navigation.draw was successful since the person and flag appeared, but the path is not rendering.

To help me reproduce the issue on my machine, do you mind sharing with me your:

• OS
• Browser
• SDK version

Additionally, I see that you’ve added some labels. Is there any other custom configuration for the map? Is the outdoor map turned off or is this unexpected as well?

[ParSR]

Hello,

Here are the requested details.

OS - macOS 13.3
Browser - Chrome Version 126.0.6478.127 (Official Build) (x86_64)
SDK Version - 6.0.1-alpha.25

Custom map elements - Additional label added like below. The labels on the map are fixed/static and do not move when the map is panned or zoomed as well.

let coOrdinateObj = new Coordinate(Number(lat), Number(lng), floor);
const RANKS: TCollisionRankingTier = [“medium”, “high”, “always-visible”];
let currentRank = 2;
mapView.Labels.removeAll();
mapView.Labels.add(
coOrdinateObj,
locName, {
rank: RANKS[currentRank],
appearance: {
marker: {
foregroundColor: {
active: “blue”,
inactive: “blue”,
},
icon: icon image svg,
iconFit: ‘contain’,

                    },
                    text: {
                        foregroundColor: "red",
                    },

                },
            }
        );

I have not tampered with any configuration related to outdoor map so that should have the default value set.

[Zach]

Hi,

Thanks for sharing the info, I’m still trying to narrow down the issue. I’ve got a couple more questions:

Is your application built with React or vanilla JavaScript? With React you may need to add some extra guards so the map doesn’t render to the canvas more than once.

Can you open this sandbox and tell me if you see the same issues? demo-grocery-no-path - CodeSandbox

It should appear like this, and clicking on the map should add a custom label.

[ParSR]

Hello,
We are using an iFrame so that we do not clutter our own application.
So we have an iframe in which we are embedding our own mappedIn html page that’s again embedded/sandboxed in another iframe. So they communicate through window messaging API’s.

The sandbox code for the navigation to draw the path is how I have used it as well. However the path is not drawn in my scenario.
The sandbox code however renders the start point/destination flag along with the image.

EDITED TO ADD: I see the same behavior for Camera focusOn too! The map is unable to zoom in but for a second the map flickers.

Is there any special configuration when it comes to embedding a map in an iframe ?

[Zach]

Hi ParSR!

I’ve tried replicating your double iframe setup using Vite but my map still functioned as expected. This is a head-scratcher.

As an experiment, I was able to get the map into an unresponsive state by running the show3dMap function multiple times to the same element.

await show3dMap(mapContainerEl, mapData);
const mapView = await show3dMap(mapContainerEl, mapData);

Once I did this, I ended up with the markers on one map and the path geometry on the other. The labels wouldn’t move and the camera would not focus on the top map.

Is it possible that this is happening in your app as well? If your container is position: absolute the second map could be hidden underneath.

Additionally, is there any attributes added to your iframe, and is there any more code you’re comfortable sharing?

[ParSR]

Thank you so much Zach !!!

That solved the issue. I did not have a second map rendered in my screen like the screenshot attached. So it was perplexing to understand why only the markers appeared but not the wayfinding path itself.

As you pointed out the fundamental issue was running the show3dMap function multiple times to the same element.

The functionalities are spread across and hence the show3dMap was run twice.

Appreciate the timely response.

[Zach]

Great! I’m so glad we were able to resolve the issue

Best of luck with your app, reach out if you have any more questions!