Add ability to display markers on the map

frontend/interchange.iml

@@ -12,6 +12,7 @@
     <orderEntry type="library" name="kotlin-react" level="project" />
     <orderEntry type="library" name="kotlin-react-dom" level="project" />
     <orderEntry type="library" name="kotlinx-html-js" level="project" />
+    <orderEntry type="library" name="kotlinx-coroutines-core" level="project" />
   </component>
 </module>
 

frontend/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "kotlinx-coroutines-core": "^1.3.2",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
     "react-map-gl": "^5.1.2"

frontend/src/app/App.css

@@ -0,0 +1,5 @@
+.Marker {
+    transform: translate(-50%, -50%);
+    font-size: 25px;
+    color: #f08300;
+}

frontend/src/app/App.kt

@@ -1,29 +1,72 @@
 package app
 
+import Marker
 import logo.logo
 import react.*
 import react.dom.*
 import search.search
 import ReactMapGL
+import kotlinx.coroutines.MainScope
+import kotlinx.coroutines.await
+import kotlinx.coroutines.launch
+import kotlin.browser.window
 
 interface ViewportState: RState {
     var width: String
     var height: String 
     var latitude: Number 
     var longitude: Number 
     var zoom: Number
+    var waypointsResult: WaypointsResult
+}
+
+typealias Location = Array<Number>
+
+interface Waypoint {
+    val name: String
+    val location: Location
+}
+
+interface Intersection {
+    val name: String
+    val classifications: Array<String>
+    val location: Location
+}
+
+interface Route {
+    val duration: Number
+    val distance: Number
+    val intersections: Array<Intersection>
+}
+
+interface WaypointsResult {
+    val waypoints: Array<Waypoint>
+    val routes: Array<Route>
+}
+
+class EmptyWaypointsResult : WaypointsResult {
+    override val waypoints: Array<Waypoint> = emptyArray()
+    override val routes: Array<Route> = emptyArray()
 }
 
 
 class App : RComponent<RProps, ViewportState>() {
-    init {
-        state.width = "100vw"
-        state.height = "100vh"
-        state.latitude = 52.132633
-        state.longitude = 5.291266
-        state.zoom = 7
-    }
+    override fun ViewportState.init() {
+        width = "100vw"
+        height = "100vh"
+        latitude = 52.132633
+        longitude = 5.291266
+        zoom = 11
+        waypointsResult = EmptyWaypointsResult()
 
+        val mainScope = MainScope()
+        mainScope.launch {
+            val result = fetchWaypointsResult()
+            setState {
+                waypointsResult = result
+            }
+        }
+    }
 
     override fun RBuilder.render() {
         div {
@@ -39,6 +82,7 @@ class App : RComponent<RProps, ViewportState>() {
                 longitude = state.longitude
                 zoom = state.zoom
                 onViewportChange = { viewport ->
+                    console.log(viewport)
                     setState {
                         width = viewport.width
                         height = viewport.height
@@ -48,9 +92,31 @@ class App : RComponent<RProps, ViewportState>() {
                     }
                 }
             }
+
+            for (route in state.waypointsResult.routes) {
+                for (intersection in route.intersections) {
+                    Marker {
+                        attrs {
+                            longitude = intersection.location[0]
+                            latitude = intersection.location[1]
+                        }
+
+                        div("Marker") {
+                            +"🍿"
+                        }
+                    }
+                }
+            }
         }
     }
 
+    suspend fun fetchWaypointsResult(): WaypointsResult {
+        val responsePromise = window.fetch("https://api.myjson.com/bins/19rdz4")
+        val response = responsePromise.await()
+        val jsonPromise = response.json()
+        val json = jsonPromise.await()
+        return json.unsafeCast<WaypointsResult>()
+    }
 }
 
 fun RBuilder.app() = child(App::class) {}

frontend/src/logo/Logo.css

@@ -8,6 +8,7 @@
     font-size: 80px;
     text-align: right;
     line-height: 55px;
+    text-shadow: 0 0 10px rgba(0,0,0,.2);
 }
 
 .Small {

frontend/src/map/react-map-gl.kt

@@ -21,3 +21,11 @@ external interface ReactMapGLProps : RProps {
     var zoom: Number
     var onViewportChange: (ReactMapGLViewport) -> Unit
 }
+
+@JsName("Marker")
+external val Marker : RClass<MarkerProps>
+
+external interface MarkerProps : RProps {
+    var longitude: Number
+    var latitude: Number
+}

frontend/src/search/Search.kt

@@ -20,8 +20,8 @@ interface SearchState: RState {
 
 class Search(props: SearchProps): RComponent<SearchProps, SearchState>(props) {
     init {
-        state.from = ""
-        state.to = ""
+        state.from = "Codestar"
+        state.to = "Codestarwars"
     }
 
     override fun RBuilder.render() {