Viewer with map & controls

Creation of a viewer that shows a map with controls

This is a basic example to create a viewer that shows a 2D map and have controls. 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.

Related API documentation:

Copy Edit

// Uncomment next line and set userkey to make code work
// Mapspace.USERKEY = 'userkey_here';

var mapViewer, mapViewerControls;
var streetViewer, streetViewerControls;
var workspace;

mapViewerControls = [
    Mapspace.controldef.noAction(new Mapspace.control.StatusBar({
        controls: [
            Mapspace.global.controldef.ViewerInfo(),
            Mapspace.global.controldef.ScaleLine()
        ]
    })),
    Mapspace.controldef.Zoom(undefined, {duration: 1000}),
    Mapspace.controldef.Attribution()
];

mapViewer = new Mapspace.global.Viewer({
    center: [10.743704, 59.911299],
    resolution: 2.38,
    layers: [
        new Mapspace.layer.Tile({
            name: 'Ortho WMTS',
            source: new Mapspace.ortho.source.WMTS({
                userLayerName : "-Default-"
            })
        })
    ]
});

workspace = new Mapspace.Workspace({
    layout: {
        name: 'Map layout',
        views: [
            {
                column: 0,
                viewer: mapViewer,
                controls: mapViewerControls
            }
        ]
    },
    target: 'viewer'
});


<!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>Viewer with map & controls</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>
	<style>
	      .mapspace-zoom {
          top: .75em;
      }
	</style>
</head>
<body>
    <div id="viewer" class="viewer"></div>
	<script>
      // Uncomment next line and set userkey to make code work
      // Mapspace.USERKEY = 'userkey_here';

      var mapViewer, mapViewerControls;
      var streetViewer, streetViewerControls;
      var workspace;

      mapViewerControls = [
          Mapspace.controldef.noAction(new Mapspace.control.StatusBar({
              controls: [
                  Mapspace.global.controldef.ViewerInfo(),
                  Mapspace.global.controldef.ScaleLine()
              ]
          })),
          Mapspace.controldef.Zoom(undefined, {duration: 1000}),
          Mapspace.controldef.Attribution()
      ];

      mapViewer = new Mapspace.global.Viewer({
          center: [10.743704, 59.911299],
          resolution: 2.38,
          layers: [
              new Mapspace.layer.Tile({
                  name: 'Ortho WMTS',
                  source: new Mapspace.ortho.source.WMTS({
                      userLayerName : "-Default-"
                  })
              })
          ]
      });

      workspace = new Mapspace.Workspace({
          layout: {
              name: 'Map layout',
              views: [
                  {
                      column: 0,
                      viewer: mapViewer,
                      controls: mapViewerControls
                  }
              ]
          },
          target: 'viewer'
      });
	</script>
</body>
</html>