tonio/image.png

## image.png

      
    Raw
  

              image.png
            
          
## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">  <!-- Use Chrome Frame in IE -->
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>Cesium Demo</title>
    <script src="http://cesiumjs.org/Cesium/Build/CesiumUnminified/Cesium.js"></script>
    <script src="http://ol3js.org/en/master/build/ol.js"></script>
    <link rel="stylesheet" href="http://cesiumjs.org/Cesium/Apps/Sandcastle/templates/bucket.css">
    <link rel="stylesheet" href="http://ol3js.org/en/master/css/ol.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <div id="cesiumContainer"></div>
    <div id="map"></div>
    <div id=ctoggle>
      <span id=indicator></span>
      <button id=toggle>
        <span class=d2>2D</span>
        <span class=d3>3D</span>
      </button>
    </div>
    <div class="rosace">
      <a href="#" id="north">&#8593;</a>
      <a href="#" id="east">&#8594;</a>
      <a href="#" id="south">&#8595;</a>
      <a href="#" id="west">&#8592;</a>
    </div>
    <div class="rosace" id=pan>
      <a href="#" id="p_north">&#8593;</a>
      <a href="#" id="p_east">&#8594;</a>
      <a href="#" id="p_south">&#8595;</a>
      <a href="#" id="p_west">&#8592;</a>
    </div>
    <script>
      var widget = new Cesium.Viewer('cesiumContainer', {
        baseLayerPicker: false,
        fullscreenButton: false,
        homeButton: false,
        sceneModePicker: false,
        selectionIndicator: false,
        timeline: false,
        animation: false,
        geocoder: false
      });
      var scene = widget.scene;
      var camera = scene.camera;

      // Add terrain
      var terrainProvider = new Cesium.CesiumTerrainProvider({
        url : '//cesiumjs.org/stk-terrain/tilesets/world/tiles'
      });
      widget.scene.terrainProvider = terrainProvider;
      // var terrainProvider = new Cesium.EllipsoidTerrainProvider();

      // Disable Cesium interactions
      var controller = widget.scene.screenSpaceCameraController;
      controller.enableInputs = false;

      var vectorSource = new ol.source.GeoJSON({
        url: 'trucks.json',
        projection: 'EPSG:3857'
      });

      var iconStyle = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
          anchor: [0.5, 37],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: 'image.png'
        }))
      });
//      var iconStyle = new ol.style.Style({
//        image: new ol.style.Circle({
//          radius: 5.5,
//          fill: new ol.style.Fill({
//            color: '#FF0'
//          }),
//          stroke: new ol.style.Stroke({
//            color: '#000',
//            width: 1.2
//          })
//        })
//      });
      var lineStyle = new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: '#FF0',
          width: 2.5
        })
      });

      var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: [ iconStyle, lineStyle]
      });

      // Workaround for https://github.com/AnalyticalGraphicsInc/cesium/issues/1603
      Cesium.GeoJsonDataSource.prototype.getIsTimeVarying = function() {
          return true;
      };

      var gjds = new Cesium.GeoJsonDataSource();
      var defaultPoint = gjds.defaultPoint;
      defaultPoint.point = undefined;
      var billboard = new Cesium.DynamicBillboard();
      billboard.getValue = function() { return 'image.png' };
      billboard.image = new Cesium.ConstantProperty('image.png');
      billboard.horizontalOrigin = new Cesium.ConstantProperty(Cesium.HorizontalOrigin.CENTER);
      billboard.verticalOrigin = new Cesium.ConstantProperty(Cesium.VerticalOrigin.BOTTOM);
      billboard.scaleByDistance = undefined;
      defaultPoint.billboard = billboard;
      gjds.loadUrl('trucks.json').then(function() {
          widget.dataSources.add(gjds);
      });

      var map = new ol.Map({
        renderer: 'canvas',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.BingMaps({
              key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
              imagerySet: 'Aerial'
            })
          }),
          vectorLayer
        ],
        target: 'map',
        interactions: ol.interaction.defaults({
          //altShiftDragRotate: false
        }),
        view: new ol.View2D({
          center: [0, 0],
          zoom: 2
        })
      });

      var cext;
      var rotation = 0;
      var tilted = false;
      var view = map.getView().getView2D();
      map.on('postcompose', function(event) {
        var framestate = event.frameState;
        var extent = framestate.extent;
        rotation = framestate.view2DState.rotation;
        extent = ol.proj.transform(extent, 'EPSG:3857', 'EPSG:4326');
        var west = Cesium.Math.toRadians(extent[0]);
        var south = Cesium.Math.toRadians(extent[1]);
        var east = Cesium.Math.toRadians(extent[2]);
        var north = Cesium.Math.toRadians(extent[3]);
        cext = new Cesium.Rectangle(west, south, east, north);
        camera.viewRectangle(cext);
        camera.twistLeft(rotation);
        if (tilted) {
          setTiltedView(true);
        }
      });
      view.setZoom(11);
      view.setCenter([653667.1370353698, 5673479.418388908]);

      var setTiltedView = function(down, animate) {
        var magicNumber = (down) ? 2.2 : 2.95;
        if (down) {
          camera.viewRectangle(cext);
          camera.twistLeft(rotation);
        }
        var ellipsoid = Cesium.Ellipsoid.WGS84;
        var cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height;
        var moveRate = magicNumber * cameraHeight / 100.0;
        var rotateRate = .02;
        if (!down) {
          moveRate = -moveRate;
          rotateRate = -rotateRate;
        }
        var count = 0;
        var iterations = 35;
        if (animate) {
          var id = setInterval(function(){
            camera.lookUp(rotateRate);
            camera.moveDown(moveRate);
            count++;
            if (count==iterations) {
              clearInterval(id);
            }
          }, 28);
          return;
        }
        camera.lookUp(iterations*rotateRate);
        camera.moveDown(iterations*moveRate);
      };

      var toggleMapOpacity = function() {
        var style = document.getElementById('map').style;
        style.opacity = style.opacity || 1;
        style.opacity = (style.opacity == 0) ? 1 : 0;
      };
      document.getElementById('toggle').onclick = function() {
        var delay = 1000;
        if (tilted) {
          setTimeout(toggleMapOpacity, 800);
        } else {
          toggleMapOpacity();
        }
        setTiltedView(!tilted, true);
        tilted = ! tilted;
        var styles = document.getElementById('indicator').style;
        styles.left = (tilted) ? '1.5em' : 0;
        styles.borderRadius = (tilted) ? '0 4px 4px 0' : '4px 0 0 4px';
        document.querySelector('.d2').style.color = (tilted) ? 'black' : 'white';
        document.querySelector('.d3').style.color = (!tilted) ? 'black' : 'white';
      }

      var rotate = function(angle) {
        var current = normalize(view.getRotation());
        var className;
        view.setRotation(current);
        var rotate = ol.animation.rotate({
          duration: 300,
          rotation: view.getRotation()
        });
        map.beforeRender(rotate);
        if ((angle - current) > Math.PI) {
          angle -= 2*Math.PI;
        }
        if ((angle - current) < -Math.PI) {
          angle += 2*Math.PI;
        }
        view.setRotation(angle);
        switch(normalize(angle)) {
          case 0:
            className = '';
            break;
          case Math.PI:
            className = 'south';
            break;
          case Math.PI/2:
            className = 'east';
            break;
          case Math.PI*1.5:
            className = 'west';
            break;
        }
        document.querySelector('.rosace').className = 'rosace ' + className;
      };
      document.getElementById('north').onclick = function() {
        rotate(0);
      }
      document.getElementById('south').onclick = function() {
        rotate(Math.PI);
      }
      document.getElementById('east').onclick = function() {
        rotate(Math.PI/2);
      }
      document.getElementById('west').onclick = function() {
        rotate(Math.PI*1.5);
      }

      var pan = function(angle) {
        var view = map.getView().getView2D();
        var resolution = view.getResolution();
        var center = view.getCenter();
        var rotation = view.getRotation();
        var delta = 50 * resolution;
        switch(normalize(angle - rotation)) {
          case 0:
            center = [ center[0], center[1] + delta ];
            break;
          case Math.PI:
            center = [ center[0], center[1] - delta ];
            break;
          case Math.PI/2:
            center = [ center[0] + delta, center[1] ];
            break;
          case Math.PI*1.5:
            center = [ center[0] - delta, center[1] ];
            break;
        }
        var pan = ol.animation.pan({
          duration: 300,
          source: view.getCenter()
        });
        map.beforeRender(pan);
        view.setCenter(center);
      };
      var normalize = function(angle) {
        if (angle > Math.PI*1.5) {
          return angle - Math.PI*2;
        }
        if (angle < 0) {
          return angle + Math.PI*2;
        }
        return angle;
      };
      document.getElementById('p_north').onclick = function() {
        pan(0);
      }
      document.getElementById('p_south').onclick = function() {
        pan(Math.PI);
      }
      document.getElementById('p_east').onclick = function() {
        pan(Math.PI/2);
      }
      document.getElementById('p_west').onclick = function() {
        pan(Math.PI*1.5);
      }
      var zoom = document.querySelector('.ol-zoom');
      document.body.appendChild(zoom);
      zoom.style.top = '6%';
      zoom.style.left = '6%';
    </script>
  </body>
</html>

## style.css
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
#map, #cesiumContainer {
  position: absolute;
  top: 5%;
  left: 5%;
  height: 90%;
  width: 90%;
}
#map {
  opacity: 1;
  transition: opacity .2s;
}
#ctoggle {
  position: absolute;
  left: 50%;
  margin-left: -1em;
  bottom: 10%;
  background-color: rgba(255,255,255,0.4);
  border-radius: 4px;
  width: 3em;
  height: 1em;
  font-size: 2em;
  border: 3px solid rgba(255,255,255,0);
}
#ctoggle span {
  width: 50%;
  text-align:center;
  float:left;
  height: 100%;
  line-height: 2em;
}
.d2 {
  color: white;
}
#indicator {
  width: 1.5em;
  height: 1em;
  background-color: rgba(0,60,136,0.5);
  position: absolute;
  top: 0;
  left: 0;
  transition: left 1s;
  border-radius: 4px 0 0 4px;
}
#ctoggle button {
  padding: 0;
  position: absolute;
  border: none;
  height: 100%;
  width: 100%;
  background: transparent;
  outline: none;
}
.rosace {
  position: absolute;
  top: calc(6% + 1.325em);
  right: calc(6% + 1.325em);
  width: 1em;
  height: 1em;
  font-size: 1.6em;
  background-color: rgba(50,110,186,0.5);
}
#pan {
  top: calc(6% + 6em);
}
.rosace:after {
  content: '➢';
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  font-size: .8em;
  color: white;
  display: block;
  transition: all .3s;
}
.rosace.west:after {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
}
.rosace.east:after {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
}
.rosace.south:after {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
}
#pan:after {
  content: '';
}
.rosace a {
  box-sizing: border-box;
  padding: .2em;
  position: absolute;
  background-color: rgba(50,110,186,0.5);
  color: #fff;
  font-weight: bold;
  font-family: Arial;
  text-decoration: none;
  text-align: center;
  line-height: .8em;
}
.rosace a:hover {
  background-color: rgba(0,60,136,0.7);
  color: white;
}
a[id*=north], a[id*=south] {
  width: 1em;
  height: 1.3em;
  left: 0;
}
a[id*=north] {
  top: -1.3em;
  box-shadow: 0 -3px 0 rgba(255,255,255,0.4), 3px 0 0 rgba(255,255,255,0.4), -3px 0 0 rgba(255,255,255,0.4);
  border-radius: 4px 4px 0 0;
}
a[id*=south] {
  bottom: -1.3em;
  outline-top-width: 0;
  box-shadow: 0 3px 0 rgba(255,255,255,0.4), 3px 0 0 rgba(255,255,255,0.4), -3px 0 0 rgba(255,255,255,0.4);
  border-radius: 0 0 4px 4px;
}
.rosace [id*=west], .rosace [id*=east] {
  width: 1.3em;
  height: 1em;
  top: 0;
  line-height: .5em;
}
a[id*=west] {
  left: -1.3em;
  box-shadow: 0 3px 0 rgba(255,255,255,0.4), 0 -3px 0 rgba(255,255,255,0.4), -3px 0 0 rgba(255,255,255,0.4);
  border-radius: 4px 0 0 4px;
}
a[id*=east] {
  right: -1.3em;
  outline-left-width: 0;
  box-shadow: 0 3px 0 rgba(255,255,255,0.4), 0 -3px 0 0 rgba(255,255,255,0.4), 3px 0 0 rgba(255,255,255,0.4);
  border-radius: 0 4px 4px 0;
}

## trucks.json
{
  "type": "FeatureCollection",
  "crs" : {
    "type" : "name",
    "properties" : {
      "name" : "EPSG:4326"
    }
  },
  "features": [
    {
      "type": "Feature",
      "properties": {
          "name": "Belledonne"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          6.0376739501953125,
          45.2405691017678,
          2400
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
          "name": "Grenoble"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          5.73211669921875,
          45.17719676486024,
          210
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
          "name": "Chartreuse Nord"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          5.9456634521484375,
          45.45916739594383,
          800
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
          "name": "Saint Pierre de Chartreuse"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          5.8124542236328125,
          45.343941498218996,
          900
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            5.73211669921875,
            45.17719676486024,
            210
          ],
          [
            5.75958251953125,
            45.20332826663052,
            213
          ],
          [
            5.810394287109375,
            45.213003555993964,
            216
          ],
          [
            5.83099365234375,
            45.236217535866025,
            219
          ],
          [
            5.881805419921875,
            45.25458854713424,
            222
          ],
          [
            5.91339111328125,
            45.289380486433295,
            225
          ],
          [
            5.92437744140625,
            45.30870012566985,
            228
          ],
          [
            5.955963134765625,
            45.333805815475024,
            231
          ],
          [
            5.997161865234375,
            45.41291242895992,
            234
          ],
          [
            6.002655029296875,
            45.454350939222046,
            237
          ],
          [
            6.02325439453125,
            45.487094732298374,
            240
          ],
          [
            6.013641357421874,
            45.508271755944975,
            243
          ],
          [
            5.988922119140625,
            45.51500822962093,
            246
          ],
          [
            5.964202880859375,
            45.53521281284293,
            249
          ],
          [
            5.9490966796875,
            45.56214096905606,
            252
          ],
          [
            5.907897949218749,
            45.57656146038471,
            255
          ]
        ]
      }
    }
  ]
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <!-- Use Chrome Frame in IE -->
	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<title>Cesium Demo</title>
	<script src="http://cesiumjs.org/Cesium/Build/CesiumUnminified/Cesium.js"></script>
	<script src="http://ol3js.org/en/master/build/ol.js"></script>
	<link rel="stylesheet" href="http://cesiumjs.org/Cesium/Apps/Sandcastle/templates/bucket.css">
	<link rel="stylesheet" href="http://ol3js.org/en/master/css/ol.css" type="text/css">
	<link rel="stylesheet" href="style.css" type="text/css">
	</head>
	<body>
	<div id="cesiumContainer"></div>
	<div id="map"></div>
	<div id=ctoggle>
	<span id=indicator></span>
	<button id=toggle>
	<span class=d2>2D</span>
	<span class=d3>3D</span>
	</button>
	</div>
	<div class="rosace">
	<a href="#" id="north">↑</a>
	<a href="#" id="east">→</a>
	<a href="#" id="south">↓</a>
	<a href="#" id="west">←</a>
	</div>
	<div class="rosace" id=pan>
	<a href="#" id="p_north">↑</a>
	<a href="#" id="p_east">→</a>
	<a href="#" id="p_south">↓</a>
	<a href="#" id="p_west">←</a>
	</div>
	<script>
	var widget = new Cesium.Viewer('cesiumContainer', {
	baseLayerPicker: false,
	fullscreenButton: false,
	homeButton: false,
	sceneModePicker: false,
	selectionIndicator: false,
	timeline: false,
	animation: false,
	geocoder: false
	});
	var scene = widget.scene;
	var camera = scene.camera;

	// Add terrain
	var terrainProvider = new Cesium.CesiumTerrainProvider({
	url : '//cesiumjs.org/stk-terrain/tilesets/world/tiles'
	});
	widget.scene.terrainProvider = terrainProvider;
	// var terrainProvider = new Cesium.EllipsoidTerrainProvider();

	// Disable Cesium interactions
	var controller = widget.scene.screenSpaceCameraController;
	controller.enableInputs = false;

	var vectorSource = new ol.source.GeoJSON({
	url: 'trucks.json',
	projection: 'EPSG:3857'
	});

	var iconStyle = new ol.style.Style({
	image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
	anchor: [0.5, 37],
	anchorXUnits: 'fraction',
	anchorYUnits: 'pixels',
	src: 'image.png'
	}))
	});
	// var iconStyle = new ol.style.Style({
	// image: new ol.style.Circle({
	// radius: 5.5,
	// fill: new ol.style.Fill({
	// color: '#FF0'
	// }),
	// stroke: new ol.style.Stroke({
	// color: '#000',
	// width: 1.2
	// })
	// })
	// });
	var lineStyle = new ol.style.Style({
	stroke: new ol.style.Stroke({
	color: '#FF0',
	width: 2.5
	})
	});

	var vectorLayer = new ol.layer.Vector({
	source: vectorSource,
	style: [ iconStyle, lineStyle]
	});

	// Workaround for https://github.com/AnalyticalGraphicsInc/cesium/issues/1603
	Cesium.GeoJsonDataSource.prototype.getIsTimeVarying = function() {
	return true;
	};

	var gjds = new Cesium.GeoJsonDataSource();
	var defaultPoint = gjds.defaultPoint;
	defaultPoint.point = undefined;
	var billboard = new Cesium.DynamicBillboard();
	billboard.getValue = function() { return 'image.png' };
	billboard.image = new Cesium.ConstantProperty('image.png');
	billboard.horizontalOrigin = new Cesium.ConstantProperty(Cesium.HorizontalOrigin.CENTER);
	billboard.verticalOrigin = new Cesium.ConstantProperty(Cesium.VerticalOrigin.BOTTOM);
	billboard.scaleByDistance = undefined;
	defaultPoint.billboard = billboard;
	gjds.loadUrl('trucks.json').then(function() {
	widget.dataSources.add(gjds);
	});

	var map = new ol.Map({
	renderer: 'canvas',
	layers: [
	new ol.layer.Tile({
	source: new ol.source.BingMaps({
	key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
	imagerySet: 'Aerial'
	})
	}),
	vectorLayer
	],
	target: 'map',
	interactions: ol.interaction.defaults({
	//altShiftDragRotate: false
	}),
	view: new ol.View2D({
	center: [0, 0],
	zoom: 2
	})
	});

	var cext;
	var rotation = 0;
	var tilted = false;
	var view = map.getView().getView2D();
	map.on('postcompose', function(event) {
	var framestate = event.frameState;
	var extent = framestate.extent;
	rotation = framestate.view2DState.rotation;
	extent = ol.proj.transform(extent, 'EPSG:3857', 'EPSG:4326');
	var west = Cesium.Math.toRadians(extent[0]);
	var south = Cesium.Math.toRadians(extent[1]);
	var east = Cesium.Math.toRadians(extent[2]);
	var north = Cesium.Math.toRadians(extent[3]);
	cext = new Cesium.Rectangle(west, south, east, north);
	camera.viewRectangle(cext);
	camera.twistLeft(rotation);
	if (tilted) {
	setTiltedView(true);
	}
	});
	view.setZoom(11);
	view.setCenter([653667.1370353698, 5673479.418388908]);

	var setTiltedView = function(down, animate) {
	var magicNumber = (down) ? 2.2 : 2.95;
	if (down) {
	camera.viewRectangle(cext);
	camera.twistLeft(rotation);
	}
	var ellipsoid = Cesium.Ellipsoid.WGS84;
	var cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height;
	var moveRate = magicNumber * cameraHeight / 100.0;
	var rotateRate = .02;
	if (!down) {
	moveRate = -moveRate;
	rotateRate = -rotateRate;
	}
	var count = 0;
	var iterations = 35;
	if (animate) {
	var id = setInterval(function(){
	camera.lookUp(rotateRate);
	camera.moveDown(moveRate);
	count++;
	if (count==iterations) {
	clearInterval(id);
	}
	}, 28);
	return;
	}
	camera.lookUp(iterations*rotateRate);
	camera.moveDown(iterations*moveRate);
	};

	var toggleMapOpacity = function() {
	var style = document.getElementById('map').style;
	style.opacity = style.opacity \|\| 1;
	style.opacity = (style.opacity == 0) ? 1 : 0;
	};
	document.getElementById('toggle').onclick = function() {
	var delay = 1000;
	if (tilted) {
	setTimeout(toggleMapOpacity, 800);
	} else {
	toggleMapOpacity();
	}
	setTiltedView(!tilted, true);
	tilted = ! tilted;
	var styles = document.getElementById('indicator').style;
	styles.left = (tilted) ? '1.5em' : 0;
	styles.borderRadius = (tilted) ? '0 4px 4px 0' : '4px 0 0 4px';
	document.querySelector('.d2').style.color = (tilted) ? 'black' : 'white';
	document.querySelector('.d3').style.color = (!tilted) ? 'black' : 'white';
	}

	var rotate = function(angle) {
	var current = normalize(view.getRotation());
	var className;
	view.setRotation(current);
	var rotate = ol.animation.rotate({
	duration: 300,
	rotation: view.getRotation()
	});
	map.beforeRender(rotate);
	if ((angle - current) > Math.PI) {
	angle -= 2*Math.PI;
	}
	if ((angle - current) < -Math.PI) {
	angle += 2*Math.PI;
	}
	view.setRotation(angle);
	switch(normalize(angle)) {
	case 0:
	className = '';
	break;
	case Math.PI:
	className = 'south';
	break;
	case Math.PI/2:
	className = 'east';
	break;
	case Math.PI*1.5:
	className = 'west';
	break;
	}
	document.querySelector('.rosace').className = 'rosace ' + className;
	};
	document.getElementById('north').onclick = function() {
	rotate(0);
	}
	document.getElementById('south').onclick = function() {
	rotate(Math.PI);
	}
	document.getElementById('east').onclick = function() {
	rotate(Math.PI/2);
	}
	document.getElementById('west').onclick = function() {
	rotate(Math.PI*1.5);
	}

	var pan = function(angle) {
	var view = map.getView().getView2D();
	var resolution = view.getResolution();
	var center = view.getCenter();
	var rotation = view.getRotation();
	var delta = 50 * resolution;
	switch(normalize(angle - rotation)) {
	case 0:
	center = [ center[0], center[1] + delta ];
	break;
	case Math.PI:
	center = [ center[0], center[1] - delta ];
	break;
	case Math.PI/2:
	center = [ center[0] + delta, center[1] ];
	break;
	case Math.PI*1.5:
	center = [ center[0] - delta, center[1] ];
	break;
	}
	var pan = ol.animation.pan({
	duration: 300,
	source: view.getCenter()
	});
	map.beforeRender(pan);
	view.setCenter(center);
	};
	var normalize = function(angle) {
	if (angle > Math.PI*1.5) {
	return angle - Math.PI*2;
	}
	if (angle < 0) {
	return angle + Math.PI*2;
	}
	return angle;
	};
	document.getElementById('p_north').onclick = function() {
	pan(0);
	}
	document.getElementById('p_south').onclick = function() {
	pan(Math.PI);
	}
	document.getElementById('p_east').onclick = function() {
	pan(Math.PI/2);
	}
	document.getElementById('p_west').onclick = function() {
	pan(Math.PI*1.5);
	}
	var zoom = document.querySelector('.ol-zoom');
	document.body.appendChild(zoom);
	zoom.style.top = '6%';
	zoom.style.left = '6%';
	</script>
	</body>
	</html>
	html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	}
	#map, #cesiumContainer {
	position: absolute;
	top: 5%;
	left: 5%;
	height: 90%;
	width: 90%;
	}
	#map {
	opacity: 1;
	transition: opacity .2s;
	}
	#ctoggle {
	position: absolute;
	left: 50%;
	margin-left: -1em;
	bottom: 10%;
	background-color: rgba(255,255,255,0.4);
	border-radius: 4px;
	width: 3em;
	height: 1em;
	font-size: 2em;
	border: 3px solid rgba(255,255,255,0);
	}
	#ctoggle span {
	width: 50%;
	text-align:center;
	float:left;
	height: 100%;
	line-height: 2em;
	}
	.d2 {
	color: white;
	}
	#indicator {
	width: 1.5em;
	height: 1em;
	background-color: rgba(0,60,136,0.5);
	position: absolute;
	top: 0;
	left: 0;
	transition: left 1s;
	border-radius: 4px 0 0 4px;
	}
	#ctoggle button {
	padding: 0;
	position: absolute;
	border: none;
	height: 100%;
	width: 100%;
	background: transparent;
	outline: none;
	}
	.rosace {
	position: absolute;
	top: calc(6% + 1.325em);
	right: calc(6% + 1.325em);
	width: 1em;
	height: 1em;
	font-size: 1.6em;
	background-color: rgba(50,110,186,0.5);
	}
	#pan {
	top: calc(6% + 6em);
	}
	.rosace:after {
	content: '➢';
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	font-size: .8em;
	color: white;
	display: block;
	transition: all .3s;
	}
	.rosace.west:after {
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	}
	.rosace.east:after {
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	}
	.rosace.south:after {
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	}
	#pan:after {
	content: '';
	}
	.rosace a {
	box-sizing: border-box;
	padding: .2em;
	position: absolute;
	background-color: rgba(50,110,186,0.5);
	color: #fff;
	font-weight: bold;
	font-family: Arial;
	text-decoration: none;
	text-align: center;
	line-height: .8em;
	}
	.rosace a:hover {
	background-color: rgba(0,60,136,0.7);
	color: white;
	}
	a[id=north], a[id=south] {
	width: 1em;
	height: 1.3em;
	left: 0;
	}
	a[id*=north] {
	top: -1.3em;
	box-shadow: 0 -3px 0 rgba(255,255,255,0.4), 3px 0 0 rgba(255,255,255,0.4), -3px 0 0 rgba(255,255,255,0.4);
	border-radius: 4px 4px 0 0;
	}
	a[id*=south] {
	bottom: -1.3em;
	outline-top-width: 0;
	box-shadow: 0 3px 0 rgba(255,255,255,0.4), 3px 0 0 rgba(255,255,255,0.4), -3px 0 0 rgba(255,255,255,0.4);
	border-radius: 0 0 4px 4px;
	}
	.rosace [id=west], .rosace [id=east] {
	width: 1.3em;
	height: 1em;
	top: 0;
	line-height: .5em;
	}
	a[id*=west] {
	left: -1.3em;
	box-shadow: 0 3px 0 rgba(255,255,255,0.4), 0 -3px 0 rgba(255,255,255,0.4), -3px 0 0 rgba(255,255,255,0.4);
	border-radius: 4px 0 0 4px;
	}
	a[id*=east] {
	right: -1.3em;
	outline-left-width: 0;
	box-shadow: 0 3px 0 rgba(255,255,255,0.4), 0 -3px 0 0 rgba(255,255,255,0.4), 3px 0 0 rgba(255,255,255,0.4);
	border-radius: 0 4px 4px 0;
	}
	{
	"type": "FeatureCollection",
	"crs" : {
	"type" : "name",
	"properties" : {
	"name" : "EPSG:4326"
	}
	},
	"features": [
	{
	"type": "Feature",
	"properties": {
	"name": "Belledonne"
	},
	"geometry": {
	"type": "Point",
	"coordinates": [
	6.0376739501953125,
	45.2405691017678,
	2400
	]
	}
	},
	{
	"type": "Feature",
	"properties": {
	"name": "Grenoble"
	},
	"geometry": {
	"type": "Point",
	"coordinates": [
	5.73211669921875,
	45.17719676486024,
	210
	]
	}
	},
	{
	"type": "Feature",
	"properties": {
	"name": "Chartreuse Nord"
	},
	"geometry": {
	"type": "Point",
	"coordinates": [
	5.9456634521484375,
	45.45916739594383,
	800
	]
	}
	},
	{
	"type": "Feature",
	"properties": {
	"name": "Saint Pierre de Chartreuse"
	},
	"geometry": {
	"type": "Point",
	"coordinates": [
	5.8124542236328125,
	45.343941498218996,
	900
	]
	}
	},
	{
	"type": "Feature",
	"properties": {},
	"geometry": {
	"type": "LineString",
	"coordinates": [
	[
	5.73211669921875,
	45.17719676486024,
	210
	],
	[
	5.75958251953125,
	45.20332826663052,
	213
	],
	[
	5.810394287109375,
	45.213003555993964,
	216
	],
	[
	5.83099365234375,
	45.236217535866025,
	219
	],
	[
	5.881805419921875,
	45.25458854713424,
	222
	],
	[
	5.91339111328125,
	45.289380486433295,
	225
	],
	[
	5.92437744140625,
	45.30870012566985,
	228
	],
	[
	5.955963134765625,
	45.333805815475024,
	231
	],
	[
	5.997161865234375,
	45.41291242895992,
	234
	],
	[
	6.002655029296875,
	45.454350939222046,
	237
	],
	[
	6.02325439453125,
	45.487094732298374,
	240
	],
	[
	6.013641357421874,
	45.508271755944975,
	243
	],
	[
	5.988922119140625,
	45.51500822962093,
	246
	],
	[
	5.964202880859375,
	45.53521281284293,
	249
	],
	[
	5.9490966796875,
	45.56214096905606,
	252
	],
	[
	5.907897949218749,
	45.57656146038471,
	255
	]
	]
	}
	}
	]
	}