Mapedin iframe issues

Hi there.

Currently we are using iframe.
i want to ask you how we can :

1. Change colors of the buttons
2. Hide map background, as you can see there are buildings on background that’s are different from our current mall plan.

thanks

Hi Barys,

When using Mappedin Viewer, it’s not possible to change the elements you have listed.

If you create your own app using Mappedin JS the outdoor map can be hidden by disabling outdoorView in TShow3DMapOptions passed into show3dMap.

Hello Msohm,

Thank you for your answer. I understand that we can’t do anything custom with an iframe. That’s fine, we can use your API. But for example, how can we create a widget like the one shown here, with the option to select “from” and “to” points for a route? If I’m not mistaken, there’s no information about this in your API documentation.

Regards,

There are a couple of Mappedin APIs being used there. Here are some links to guides for reference.

The actual UI of this widget is just regular HTML and nothing specific to a Mappedin API.

Thank you. Just one last question: how can we add custom objects on the map? For example, we have an antenna in our outlet village that is very high and could help users orient themselves on the map. In the map constructor I couldn’t find anything like this. Thank you.

You could add a 3D model of the antenna to the map. Have a look at the 3D Models Guide for more information.

Mappedin also provides a tool to help place 3D models that you can find here: 3D Model Mapper

Awesome, thank you. I want to ask you a couple of other questions:

  1. How can we remove the Mapedin logo from the map?

  2. How can we zoom in on a specific store? For example, if I am inside a brand store in our mall, I want the map to zoom in on that store.

Thank you!

No problem.

  1. This is a feature of Mappedin Pro. If you’ve upgraded, you can reach out to help@mappedin.com to request this.
  2. You can deep link to a location using a URL query parameter. Have a look at this guide for details: Linking to a Location

Hi,

could you please explain me how we can use multilanguage ?
Like for english version it will be Elevator, in italian- Ascensore.

How i can do it?
Thank you

Multi-language support is available in Mappedin Enterprise Tier solutions. It is not currently available in Mappedin Pro or the Mappedin Viewer you are embedding into an iframe.

Thank you.
I have some empty buildings on our map and we have black points. How i can remove them?
so there are no location on map, but there are black dots.

How are you adding labels to the map? If you are adding them to every space, filter this so that you’re only adding to spaces with a name.

I am just using your locations manager. so i am clicking on space and than on Add location.
But empty spaces has always dots.
How i can turn off them?
Thank you

How are you displaying the map when you see the dots, using Mappedin JS or Mappedin Viewer? Do they change if you zoom in? Text can be hidden if it doesn’t fit at various zoom levels?

We are using your js api.
You can see our map here Torino Outlet Village

Thank you

Thanks, that helps. It looks like you are doing this:

mapData.getByType('space').map(space => {
    mapView.Labels.add(space, space.name);
});

That will add a label to every space. If there is no text for the space name (no location added to it) then it would just show the dot of the label. Instead, do this:

mapData.getByType('space').map(space => {
	if (space.name) {
		mapView.Labels.add(space, space.name);
	}
});

That will only add a label to the space if the space has a name, resulting in no dot on spaces without a name/location.

Thank you! That works for me.

I found a bug:
As you can see here, I see the IDs instead of the names of the locations. Yesterday it was showing only the brand names. Could you please help me fix this? We really need to go live with this map.

What fields are being used to populate that list? Can you share a code snippet of how it’s being populated?

also as you can see… we don’t do names like “54” never…

useEffect(() => {
    let alive = true;

    (async () => {
      if (!mapData) return;

      if (!query.trim()) {
        setSuggestions([]);
        if (isMobile) {
          setMode("all");
        } else {
          setMode((m) => (m === "search" ? "all" : m));
        }

        return;
      }
      const id = ++reqIdRef.current;
      const s = await mapData.Search.suggest(query);

      if (alive && id === reqIdRef.current) {
        const decorated = (s || []).map(decorateSuggestion);

        setSuggestions(decorated);
        if (!isMobile) {
          setMode("search");
        }
      }
    })();

    return () => {
      alive = false;
    };
  }, [mapData, query, decorateSuggestion, isMobile]);