Getting Started

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 and /doc.essential folders.
This delivery is full featured and contains 2 example applications (see below) to help you getting started.

Requirements

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.

VisioWeb is supported on all modern browsers that have WebGL support, including:

Google Chrome
Mozilla Firefox
MacOS, iOS Safari
Microsoft Edge, IE11

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, CHANGELOG ESSENTIAL 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.

`/build/visioweb.essential.js`

This is the library file for VisioWeb Essential: the simplified API for VisioWeb.
If you are using VisioWeb Essential, make sure to update both libraries at the same time.

`/doc`

`/doc.essential`

These folders contain the documentation for VisioWeb and VisioWeb Essential SDKs.

`/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.

Integrate the map to your code

Here is a code sample that shows how you can integrate the map.

For VisioWeb Essential

essential = new VisioWebEssential({
	element: document.getElementById('container'), 
	imagePath: '../media'
});

// loading a local bundle: application/data.bundles/com.visioglobe.sdk/visio.island
// essential.setParameters({parameters: {baseURL: '../data.bundles/com.visioglobe.sdk/visio.island', hash: ''}});

// loading a remote bundle: com.visioglobe.sdk/visio.island hosted on mapserver.visioglobe.com
essential.setParameters({parameters: {baseURL: 'https://mapserver.visioglobe.com/', hash: 'kd9426d8cb3f1c532f22b5bcbd325c280bd351feb'}});

// loading your own map using a web hash. NB: default baseURL is 'https://mapserver.visioglobe.com/' so no need to set it unless your map is hosted somewhere else
// essential.setParameters({parameters: {hash: 'your_map_hash'}});

// or you could refer to your own domain if you want to host your own maps 
// essential.setParameters({parameters: {baseURL: 'https://your.domain.com/', hash: 'your_map_hash'}});
// VisioWeb will then try to download your map's bundle from https://your.domain.com/your_map_hash/

essential.setParameters({parameters: {locale: {language: navigator.language}}});

essential.createMapviewer()
	.then(() => {
		// YOUR CODE HERE
	})
	.catch(e => { // eslint-disable-line
		console.log(e);
		console.log('Could not load map. Check your config or get in touch with Visioglobe team.'); // eslint-disable-line
	});

UIkit example: `/application/mapviewer-uikit/`

This example is a very basic approach one can have at integrating VisioWeb Essential in a web page or web application.
The UI components use UIkit's css framework for a very light and straight-forward integration.
We also use lodash library for efficient data transformation.
For both dependencies we use the CDN versions to make this sample code as simple and easy as possible. It can be used "as is" or as an inspiration to build 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.
A search panel enables the user to search places by category or by name

`js/mapviewer.js`

This javascript file is loaded by mapviewer.html and contains the application code that uses VisioWeb Essential'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 Essential, powered by a recent framework: Vue.js.
The UI components use Vuetify.
It can be used "as is" or can give insights on how to integrate VisioWeb Essential 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/`

Manages the state of the application and provides some bindings to VisioWeb Essential.

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:

visioweb.Mapviewer#destroy (see our sample code)
visioweb.Route#remove

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

Getting Started

Requirements

What's inside ?

/build/visioweb.js

/build/visioweb.essential.js

/doc

/doc.essential

/application

/application/data.bundles