Setting up a dual viewer workspace through deserialization.

Creation of two viewers, a 2D Map and a 360 viewer, but using deserialization

This is a basic example to create a two viewers, one with a 2D map and other with a 360 viewer. Along with the controls the basic interaction is there, so click & drag to pan, Ctrl + click & drag to rotate and use the mouse wheel or two fingers to zoom in or out. Synchronization between both viewers is set in a way that center & FOV is updated in 2D viewer each time they change in 360 viewer.

Observe how initialization of the workspace is done through deserialization and how the workspace is customized by default with some controls when it is deserialized. Also be aware that one of the default controls added in the shorcut bar, the 'Select features by click' do not works when added by the workspace because it is mainly used in combination with the Feature Panel control, that is not added by default. The code includes a trick to make the button work. This code must not be used if a Feature Panel is present.

Deserialization works both passing a string or an object as param. Here a string is used. 


<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
	<title>Setting up a dual viewer workspace through deserialization.</title>
	<link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css">
	<link rel="stylesheet" href="../css/ol.css" type="text/css">
	<link rel="stylesheet" href="../css/widgets.css" type="text/css" />
	<link rel="stylesheet" href="../css/mapspace.css" type="text/css" />
	<link rel="stylesheet" href="../css/animate.min.css" type="text/css"/>
	<script src="../js/mapspace.js"></script>
</head>
<body>
    <div id="viewer" class="viewer"></div>
	<script>
      // Uncomment next line and set userkey to make code work
      // Mapspace.USERKEY = 'userkey_here';

      var workspace, workspaceOptions;
      var workspaceOptionsSerialized = `{
          "name": "Getting Started workspace",
          "description": "A serialization of the Getting Started workspace",
          "modificationdate": "21/06/2018 9:46:30",
          "layout": {
              "name": "Map & 360 layout",
              "views": [
                  {
                      "column": 0,
                      "viewer": {
                              "center": [10.743704, 59.911299],
                              "resolution": 2.38,
                              "layers": [
                                  {
                                      "name": "Ortho WMTS",
                                      "source": {
                                          "userLayerName" : "-Default-",
                                          "classType": "Mapspace.ortho.source.WMTS"
                                      },
                                      "classType": "Mapspace.layer.Tile"
                                  }
                              ],
                              "classType": "Mapspace.global.Viewer"
                      }
                  },
                  {
                      "column": 1,
                      "viewer": {
                          "center": [10.743704, 59.911299],
                          "classType": "Mapspace.street.Viewer"
                      },
                      "syncOptions": [
                          {
                              "syncedViewIndex": 0,
                              "center": true,
                              "FOV": true
                          }
                      ]
                  }
              ]
          }
      }`;

      //Create a login action with a callback function
      var loginAction = new Mapspace.action.Login({
          loginSuccessFn: function() {
              var shortcutBar2D, shortcutBar360;
              workspaceOptions = Mapspace.serialization.deserializeWorkspace(workspaceOptionsSerialized);
              workspaceOptions.target = 'viewer';
              workspace = new Mapspace.Workspace(workspaceOptions);
              //Trick to make 'Select features by click' button work
              shortcutBar2D = workspace.actions.find(a => {
                  return (a.viewer instanceof Mapspace.global.Viewer &&
                      a.control instanceof Mapspace.control.ShortcutBar);
              }).control;
              shortcutBar360 = workspace.actions.find(a => {
                  return (a.viewer instanceof Mapspace.street.Viewer &&
                      a.control instanceof Mapspace.control.ShortcutBar);
              }).control;
              workspace.setupControls(workspace.viewers[0], [{
                  control: shortcutBar2D,
                  actions: [new Mapspace.action.FeatureSelection()]
              }]);
              workspace.setupControls(workspace.viewers[1], [{
                  control: shortcutBar360,
                  actions: [new Mapspace.street.action.FeatureSelection()]
              }]);
          }
      });

      //Do log in
      loginAction.doLogin(null, null, false, Mapspace.USERKEY);


	</script>
</body>
</html>