VisioWeb 1.9.5

VisioWeb allows you to load and explore 3D maps built from VisioMapEditor.

For support and online documentation, please refer to our developer website.
For offline documentation see the /doc directory.
This delivery is full featured and contains 2 example applications (see below) to help you getting started.

requirements

  1. To view the included example, you will need to load the page from a webserver because VisioWeb uses xmlHttpRequest.
  • For development, we suggest installing a local webserver (for example WAMP) for loading the mapviewer page.
    We recommend creating an alias (e.g. "visioweb") pointing to the SDK root directory.
  • For production, you can use your current webserver.
    There is no specifc requirement other than being able to serve html and javascript files.
  1. VisioWeb is supported on all modern browsers that have WebGL support, including:
  • Google Chrome
  • Mozilla Firefox
  • MacOS, iOS Safari
  • Microsoft Edge, IE11
  1. Although mobile apps are not its primary target, VisioWeb can be used to provide 3D map visualization on mobile platforms.
    Please read the below note about VisioWeb integrations in mobile apps.

See CHANGELOG SAMPLE and CHANGELOG SDK for more information.


**what's inside ? **


/build/visioweb.js

This is the main library file.
When upgrading to a new version of VisioWeb, the first action is to update that file.

/doc

This directory contains the documentation for VisioWeb SDK.

/application

This directory contains some examples of how to create applications including a VisioWeb-based map component.

/application/data.bundles

Local bundles. Mainly used for testing.
When integrating your client's map you will most likely connect your app to our hosting server using a hash code.


jQuery-based example: /application/mapviewer/

This example is a very basic approach one can have at integrating VisioWeb in a web page or web application.
It can be used "as is" or can be used as an inspiration for your own application.

mapviewer.html

This file shows an example of VisioWeb's most popular features. It brings useful features to enable the user to explore a complex 3D map composed of several buildings.

  • User can manipulate the camera point of view and interact with the map.
  • Clicking on a shop on the map will highlight the surface and show a bubble allowing to request a route.
  • When selecting a building, the user can explore its different floors but the other buildings and the outside area remains visible.

js/mapviewer.js

This javascript file is loaded by mapviewer.html and contains the application code that uses VisioWeb's API to enable the features mentioned above.
You can base your own application on this file or only extract some functions of it.


Vue.js-based example: /application/mapviewer-vue/

This is a more modern take at integrating VisioWeb powered by a recent framework: Vue.js.
It can be used "as is" or can give insights on how to integrate VisioWeb in a similar context (e.g. React).

src/main.js

The app's entry point, loading the root component App.vue

src/components/

The different components defining the UI/UX behavior.

src/store/

Several modules (venue, route, places) managing the shared information and the interactions with VisioWeb SDK.

installation

cd ./application/mapviewer-vue/
yarn install

Compile and hot-reload for development

yarn serve

Then your application will be available at: http://localhost:7080

Compile and minify for production

yarn build

Then your minified application will be available at: http://localhost/visioweb/application/mapviewer-vue/dist/

(provided that you have set up an alias for your visioweb directory in your local webserver)


Integration in mobile apps

VisioWeb is Visioglobe's solution of choice for displaying 3D maps on websites and interactive kiosks. It's built on a WebGL-based 3D engine and it comes in two forms:

  • VisioWeb: a full-featured SDK enabling developers to design their own user experience
  • VisioWeb Remote: a no-integration required solution for developers with simple needs. The library is served by our CDN, same as our maps.

Although mobile apps are not its primary target, VisioWeb can be used to provide 3D map visualization on mobile platforms.
There are plenty of new Javascript frameworks offering the ability to "develop once, deploy everywhere", so it's becoming the logical move for many integrators. However, being a web-based technology, VisioWeb was built to rely on web browsers and the lifecycle of web pages. More precisely, the memory footprint of VisioWeb is not as well-optimized as its native counterpart VisioMove Essential. VisioWeb relies on the garbage collector and it can occur too late for some limited platforms (1GB RAM or less).
Note that in this context, we recommend using VisioWeb rather than VisioWeb Remote, to be able to tune the SDK's settings.

More importantly, when using VisioWeb within a mobile app, developers should pay particular attention to unloading/destroying objects coming from VisioWeb.
Some key APIs:

A common pitfall is to store some instances coming from VisioWeb (visioweb.POI, visioweb.Place, visioweb.Route) in global variables and to forget to remove/nullify them.

The map data should also be mentioned here: a complex venue with a big number of POIs will always be a challenge for mobile platforms, especially so with VisioWeb.
When dealing with such a map, we strongly recommend using VisioMove Essential for mobile applications.

Recap:
To consider using VisioWeb within Javascript frameworks for mobile apps, here is the checklist:

  • map data is manageable (e.g. total number of identified places and POIs < 1000)
  • target devices feature at least 2GB RAM
  • VisioWeb rather than VisioWeb Remote
  • release the memory ! destroy VisioWeb objects when they are not used or when leaving the map view