add search address

public/js/globe.js

@@ -9,14 +9,48 @@ var viewer = new Cesium.Viewer('cesiumContainer', {
     animation: false,
     sceneModePicker: false,
     geocoder: false,
-
+    sceneMode : Cesium.SceneMode.SCENE3D
 });
 
 viewer.scene.globe.depthTestAgainstTerrain = true;
 //--------------------hover over surfaces--------------------
 var singleChart = document.getElementById('singleChartContainer');
 
-//console.log(viewer.ShadowMap);
+
+//load address
+var request = new XMLHttpRequest();
+request.onreadystatechange = function(){
+    if(this.readyState == 4 && this.status == 200){
+
+var coordinate = JSON.parse(request.responseText);
+var lat = coordinate.results[0].geometry.lat;
+var lng = coordinate.results[0].geometry.lng;
+console.log(lat + "  " + lng);
+fly(lat, lng);
+    }
+}
+function searchaddress(){
+    var query = document.getElementById('SearchAddress').value;
+    request.open("GET",'https://api.opencagedata.com/geocode/v1/json?key=c73da14969e6408ab4535b3ad6dc43ea&pretty=1&no_annotations=1&q=' + query, true);
+  request.send();
+}
+
+function fly( lat,  lng){
+    var pinBuilder = new Cesium.PinBuilder();
+
+var bluePin = viewer.entities.add({
+  name: "Blank blue pin",
+  position: Cesium.Cartesian3.fromDegrees(lng, lat),
+  billboard: {
+    image: pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48).toDataURL(),
+    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+  },
+});
+    viewer.zoomTo(bluePin);
+
+    viewer.flyTo(bluePin);
+
+}
 
 // HTML overlay for showing feature name on mouseover
 var nameOverlay = document.createElement("div");

public/main.html

@@ -236,6 +236,13 @@
 				<br><br>
 				<input id="submitID" type="button" class="btn btn-primary" value="Submit">
 			</div>
+<!--SELECT Adresse-->
+<div class="item">
+	<label class="lang" key="chooseaarea" id="arealabel" for="SearchAddress">Search Address:</label>
+	<input id="SearchAddress" type="text" name="SearchAddress" >
+	<br><br>
+	<input id="SerachID" type="button" onclick="searchaddress()" class="btn btn-primary" value="Search">
+</div>
 				<!--SELECT VIEW-->
 				<div class="item">
 					<div id="radio-group" class="cc-selector">