The Mappedin Web SDK offers callback functions that developers can use to react to various loading events. These methods are useful for the implementation of UI such as loading screens. You can assign these callback functions as properties of the mapview configuration object passed as part of options to Mappedin.inititalize(). These functions are called after the promise is resolved from Mappedin.initialize().
onDataLoaded
A callback executed with the 3D files have been downloaded for the first Map, and are starting to load into memory. The MapView is fully functional at this point, but some things will still be popping in.
At this point you can interact with the MapView, Venue Data, call helper functions, and setup your application. For example, you can use the addInteractivePolygonsForAllLocations() method to make your location polygons clickable. Note that the polygons automatically change colour when hovered.
Sample Code
<html> <head> <script src="https://d1p5cqqchvbqmy.cloudfront.net/websdk/v1.71.12/mappedin.js"></script> </head> <body> <div id="mapView" /> </body></html>const div = document.getElementById("mapView")
let mapview, venue
const handleDataLoaded = () => { mapview.addInteractivePolygonsForAllLocations()}
const options = { mapview: { antialias: "AUTO", mode: Mappedin.modes.TEST, onDataLoaded: handleDataLoaded, }, venue: { clientId: "<MAPPEDIN_CLIENT_ID>", clientSecret: "<MAPPEDIN_CLIENT_SECRET>", perspective: "Website", //pick the perspective you would like to load things: { //fetch some data venue: ["slug", "name"], maps: ["name", "elevation", "shortName"], }, venue: "mappedin-demo-mall", },}
Mappedin.initialize(options, div).then(data => { mapview = data.mapview venue = data.venue})The Result
onFirstMapLoaded
A callback executed when the first map is fully loaded. This means onDataLoaded has already been fired (if specified) and then all the textures and other resources have finished popping in.
This function is useful to display a loading screen while the map loads.
Sample Code
<html> <head> <script src="https://d1p5cqqchvbqmy.cloudfront.net/websdk/v1.71.12/mappedin.js"></script> </head> <body> <div id="loading"><p>Loading...</p></div> <div id="mapView" /> </body></html>body { margin: 0; padding: 0;}
#mapView { position: absolute; width: 100%; height: 100%;}
#loading { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 100; background-color: #cc6c18; color: #fff; font-family: sans-serif;}
#loading.hidden { display: none;}const div = document.getElementById("mapView")
let mapview, venue
const handleDataLoaded = () => { mapview.addInteractivePolygonsForAllLocations()}
const handleMapLoaded = () => { const element = document.getElementById("loading") element.classList.add("hidden")}
const options = { mapview: { antialias: "AUTO", mode: Mappedin.modes.TEST, onFirstMapLoaded: handleMapLoaded, }, venue: { clientId: "<MAPPEDIN_CLIENT_ID>", clientSecret: "<MAPPEDIN_CLIENT_SECRET>", perspective: "Website", //pick the perspective you would like to load things: { //fetch some data venue: ["slug", "name"], maps: ["name", "elevation", "shortName"], }, venue: "mappedin-demo-mall", },}
Mappedin.initialize(options, div).then(data => { mapview = data.mapview venue = data.venue})