Place markers now open place page when tapped

platforms/android/assets/www/css/main.css

@@ -218,10 +218,10 @@ body {
 
 #buttons .circlebutton img {
     position: absolute;
-    top: 5px;
-    left: 5px;
-    width: 50px;
-    height: 50px;
+    top: 15px;
+    left: 15px;
+    width: 30px;
+    height: 30px;
 }
 
 .scrollable-box {

platforms/android/assets/www/js/home.js

@@ -99,7 +99,7 @@ function mapPos(lat, lon) {
 
 function onPlaceTap(feature, layer) {
     layer.on('click', function (e) {
-
+        openPlace(feature);
     });
 }
 
@@ -117,8 +117,11 @@ function loadPlaces(lat, long) {
             });
 }
 
-function openplace(osmid) {
-    alert(osmid);
+function openPlace(feature) {
+    $('#main-content').load("screens/place.html", null, function () {
+        loadPlace(feature);
+        $('#overlay-main').css('display', 'block');
+    });
 }
 
 /**

platforms/android/assets/www/screens/place.html

@@ -0,0 +1,9 @@
+<div class="scrollable-box">
+    <div class="h4" id="place-name"></div>
+</div>
+
+<script>
+    function loadPlace(feature) {
+        $("#place-name").text(feature.properties.name);
+    }
+</script>

www/js/home.js

@@ -99,7 +99,7 @@ function mapPos(lat, lon) {
 
 function onPlaceTap(feature, layer) {
     layer.on('click', function (e) {
-
+        openPlace(feature);
     });
 }
 
@@ -117,8 +117,11 @@ function loadPlaces(lat, long) {
             });
 }
 
-function openplace(osmid) {
-    alert(osmid);
+function openPlace(feature) {
+    $('#main-content').load("screens/place.html", null, function () {
+        loadPlace(feature);
+        $('#overlay-main').css('display', 'block');
+    });
 }
 
 /**

www/screens/place.html

@@ -0,0 +1,9 @@
+<div class="scrollable-box">
+    <div class="h4" id="place-name"></div>
+</div>
+
+<script>
+    function loadPlace(feature) {
+        $("#place-name").text(feature.properties.name);
+    }
+</script>