Merge branch 'combine-map-binding'

pme123 · pme123 · commit 1134210d1a09 · 2017-09-13T08:15:10.000+02:00
diff --git a/client/src/main/scala/example/ScalaJSExample.scala b/client/src/main/scala/example/ScalaJSExample.scala
@@ -1,9 +1,10 @@
 package example
 
+import com.thoughtworks.binding.Binding.Var
 import com.thoughtworks.binding.{Binding, dom}
-import google.maps.LatLng
+import google.maps._
 import org.scalajs.dom.raw.HTMLElement
-import org.scalajs.dom.{document, window}
+import org.scalajs.dom.{Event, document, window}
 
 import scala.language.implicitConversions
 import scala.scalajs.js
@@ -16,27 +17,51 @@ object ScalaJSExample extends js.JSApp {
 
     dom.render(document.getElementById("map-control"), render)
 
-    val initialize = js.Function {
-      val opts = google.maps.MapOptions(
-        center = new LatLng(51.201203, -1.724370),
-        zoom = 8,
-        panControl = false,
-        streetViewControl = false,
-        mapTypeControl = false)
-      new google.maps.Map(document.getElementById("map-canvas"), opts)
-      "" // this function needs a String as return type?!
-    }
-
     google.maps.event.addDomListener(window, "load", initialize)
+
   }
 
-  @dom lazy val render: Binding[HTMLElement] = {
+  @dom private lazy val render: Binding[HTMLElement] = {
+    val search: Var[String] = Var("")
+
     <div>
-      <input class="prompt" type="text" placeholder="Address..." />
-      <button class="ui primary button">
+      <input id="searchInput" class="prompt" type="text" placeholder="Address..." oninput={event: Event => search.value = searchInput.value}/>
+      <button class="ui primary button" onclick={event: Event =>
+        geocodeAddress(search.value)}>
         Search Address
       </button>
+      <div>Your input is {search.bind}</div>
     </div>
   }
 
+  private lazy val opts = google.maps.MapOptions(
+    center = new LatLng(51.201203, -1.724370),
+    zoom = 8,
+    panControl = false,
+    streetViewControl = false,
+    mapTypeControl = false)
+
+  private lazy val gmap = new google.maps.Map(document.getElementById("map-canvas"), opts)
+
+  private lazy val initialize = js.Function {
+    gmap // the map must be initialized in this function
+    "" // this function needs a String as return type?!
+  }
+
+  private def geocodeAddress(address: String) {
+    val geocoder = new Geocoder()
+    val callback = (results: js.Array[GeocoderResult], status: GeocoderStatus) =>
+      if (status == GeocoderStatus.OK) {
+        gmap.setCenter(results(0).geometry.location)
+        val marker = new google.maps.Marker(
+          google.maps.MarkerOptions(map = gmap
+            , position = results(0).geometry.location))
+      } else {
+        window.alert("Geocode was not successful for the following reason: " + status)
+      }
+
+    geocoder.geocode(GeocoderRequest(address), callback)
+  }
+
+
 }
