Merge branch 'V3_WEB_OSM' into V3_WEB

www/actividades/actividad.php

@@ -34,6 +34,7 @@
 <?php 
             include("../css/ui.css"); 
             include("../css/actividades.css");
+            include("../css/map.css");
 ?>
         </style>
         <!-- CSS for mobile version -->
@@ -41,6 +42,7 @@
 <?php 
             include("../css/m/ui.css"); 
             include("../css/m/actividades.css");
+            include("../css/m/map.css");
 ?>
         </style>
         <!-- Script files -->
@@ -48,8 +50,10 @@
 <?php
             include("../script/ui.js");
             include("../script/actividades.js");
+            include("../script/map.js");
 ?>
         </script>
+        <script src="<?=$server?>/script/OpenLayers/ol.js"></script>
         <!-- Meta tags -->
         <link rel="canonical" href="<?=$server?>/actividades/<?=$r["permalink"]?>"/>
         <link rel="author" href="<?=$server?>"/>
@@ -201,7 +205,7 @@
                             <br/>
                             <div class='entry'>
 <?php
-                                $q_it = mysqli_query($con, "SELECT activity_itinerary.name_$lang AS name, description_$lang AS description, place.name_$lang AS place_name, place.address_$lang AS place_address, DATE_FORMAT(start, '%H:%i') AS start, DATE_FORMAT(end, '%H:%i') AS end, DATE_FORMAT(start, '%Y-%m-%d') AS isostart, DATE_FORMAT(end, '%Y-%m-%d') AS isoend FROM activity_itinerary, place WHERE place.id = activity_itinerary.place AND activity = $r[id] ORDER BY start;");
+                                $q_it = mysqli_query($con, "SELECT activity_itinerary.name_$lang AS name, description_$lang AS description, place.name_$lang AS place_name, place.address_$lang AS place_address, place.lat, place.lon, DATE_FORMAT(start, '%H:%i') AS start, DATE_FORMAT(end, '%H:%i') AS end, DATE_FORMAT(start, '%Y-%m-%d') AS isostart, DATE_FORMAT(end, '%Y-%m-%d') AS isoend, route FROM activity_itinerary, place WHERE place.id = activity_itinerary.place AND activity = $r[id] ORDER BY start;");
                                 if (mysqli_num_rows($q_it) > 0){
 ?>
                                     <div id='activity_itinerary'>
@@ -247,15 +251,55 @@
                                                         <p class='description'><?=$r_it["description"]?></p>
                                                         <br/>
 <?php
-                                                        if ($r_it["place_name"] == $r_it["place_address"]){
+
+
+
+
+
+                                                        if ($r_it["route"] != null && strlen($r_it["route"]) != 0){
 ?>
-                                                            <?=$r_it["place_name"]?>
+                                                            <!-- TODO: Add center coordinates and zoom -->
+                                                            <span class='fake_a pointer' onClick='showMapRoute(<?=$r_it["route"]?>, "<?=$r_it["name"]?>", <?=$r_it["lat"]?>, <?=$r_it["lon"]?>);'>
+                                                                <img class='pinpoint' alt=' ' src='<?=$server?>/img/misc/pinpoint-route.png'/>
+                                                                <span class='desktop route_start'>
+                                                                    <?=$lng["activities_itinerary_start"]?>
+                                                                </span>
+<?php
+                                                                //If name and address are the same, show only name
+                                                                if ($r_it["place_name"] == $r_it["place_address"]){
+?>
+                                                                    <?=$r_it["place_name"]?>
+<?php
+                                                                }
+                                                                else{
+?>
+                                                                    <?=$r_it["place_name"]?>
+                                                                    <span class='address'>- <?=$r_it["place_address"]?></span>
+<?php
+                                                                }
+?>
+                                                            </span>
 <?php
                                                         }
                                                         else{
 ?>
-                                                            <?=$r_it["place_name"]?>
-                                                            <span class='address'>(<?=$r_it["place_address"]?>)</span>
+                                                            <span class='fake_a pointer' onClick='showMapPoint("<?=$r_it["name"]?>>", <?=$r_it["lat"]?>, <?=$r_it["lon"]?>);'>
+                                                                <img class='pinpoint'  alt=' ' src='<?=$server?>/img/misc/pinpoint.png'/>
+<?php
+                                                                //If name and address are the same, show only name
+                                                                if ($r_it["place_name"] == $r_it["place_address"]){
+?>
+                                                                    <?=$r_it["place_name"]?>
+<?php
+                                                                }
+                                                                else{
+?>
+                                                                    <?=$r_it["place_name"]?>
+                                                                    <span class='address'>- <?=$r_it["place_address"]?></span>
+<?php
+                                                                }
+?>
+                                                            </span>
 <?php
                                                         }
 ?>
@@ -270,9 +314,9 @@
                                 } // if (mysqli_num_rows($q_it) > 0)
 ?>
                             </div> <!-- .entry -->
-<?php                    
+<?php
                         } //  if ($future)
-?>                    
+?>
                     </div> <!-- .section -->
                 </div> <!-- .entry -->
             </div> <!-- #middle_column -->
@@ -319,6 +363,18 @@
                     </div> <!-- .entry -->
                 </div> <!-- #archive -->
             </div> <!-- #right_column -->
+            <div id='map_container'>
+                <div class='section'>
+                    <h3 class='section_title'>
+                        <span id='map_title'>MAP</span>
+                        <div id='map_close_container'>
+                            <img id='map_close' class='pointer' alt=' ' src='<?=$server?>/img/misc/close.png' onClick='hideMap();'/>
+                        </div>
+                    </h3>
+                    <div id='map' class='entry'>
+                    </div> <!-- map -->
+                </div> <!-- .section -->
+            </div> <!-- .map_container -->
         </div> <!-- #content -->
 <?php
         include("../footer.php");

www/css/actividades.css

@@ -132,6 +132,12 @@ div#activity_itinerary table#activity_itinerary td span.address, p.description{
     font-size:    80%;
 }
 
+div#activity_itinerary table#activity_itinerary td span.route_start{
+    opacity: 0.7;
+    font-size: 90%;
+    font-style: italic;
+}
+
 
 /* /actividades/index.php */
 

www/css/lablanca.css

@@ -154,54 +154,16 @@ table.schedule div.location{
     margin-left:        2em;
 }
 
-table.schedule div.location img{
-    max-height:        1.3em;
-    vertical-align:    middle;
+table.schedule div.location span.route_start{
+    opacity: 0.7;
+    font-size: 90%;
+    font-style: italic;
 }
 
 table.schedule div.location span.address{
     font-style:    italic;
 }
 
-div#map_container{
-    display: none;
-    opacity: 0;
-    position: fixed;
-    top:0;
-    bottom:0;
-    left:0;
-    right:0;
-    width: 100%;
-    height: 100%;
-    background-color: #33333377;    
-    transition: all .5s ease-in-out;
-}
-
-div#map_container div.section{
-    width: 70%;
-    height: 70%;
-    margin: 4em 15% auto 15%;
-}
-
-div#map_container div.section h3.section_title div#map_close_container{
-    height:            1.5em;
-    float:            right;
-    margin-top:        -0.3em;
-    margin-right:    -0.4em;
-}
-
-div#map_container div.section h3.section_title div#map_close_container img#map_close{
-    height:    100%;
-}
-
-
-div#map_container div.section div#map{
-    width: 90%;
-    height: 80%;
-    margin: 1em 5% 1em 5% !important;
-    background-color: #ffffff;
-}
-
 
 /* fiestas.php */
 div#prices{

www/css/m/lablanca.css

@@ -4,7 +4,6 @@ div#content_table{
 
 div#content_table div.content_tr{
     display:    inline;
-    
 }
 
 div#content_table div.content_tr div.content_td{
@@ -37,21 +36,3 @@ div#prices{
     display:        block;
 }
 
-
-/* programa.php */
-
-div#map_container div.section{
-    width: 90%;
-    height: 90%;
-    margin: 5%;
-}
-
-div#map_container div.section h3.section_title div#map_close_container{
-    height: 2em;
-    margin-top: 0;
-    margin-right: 0;
-}
-
-div#map_container div.section h3.section_title{
-    height: 2.5em;
-}

www/css/m/map.css

@@ -0,0 +1,15 @@
+div#map_container div.section{
+    width: 90%;
+    height: 90%;
+    margin: 5%;
+}
+
+div#map_container div.section h3.section_title div#map_close_container{
+    height: 2em;
+    margin-top: 0;
+    margin-right: 0;
+}
+
+div#map_container div.section h3.section_title{
+    height: 2.5em;
+}

www/css/map.css

@@ -0,0 +1,42 @@
+div#map_container{
+    display: none;
+    opacity: 0;
+    position: fixed;
+    top:0;
+    bottom:0;
+    left:0;
+    right:0;
+    width: 100%;
+    height: 100%;
+    background-color: #33333377;
+    transition: all .5s ease-in-out;
+}
+
+div#map_container div.section{
+    width: 70%;
+    height: 70%;
+    margin: 4em 15% auto 15%;
+}
+
+div#map_container div.section h3.section_title div#map_close_container{
+    height: 1.5em;
+    float: right;
+    margin-top: -0.3em;
+    margin-right: -0.4em;
+}
+
+div#map_container div.section h3.section_title div#map_close_container img#map_close{
+    height:    100%;
+}
+
+div#map_container div.section div#map{
+    width: 90%;
+    height: 80%;
+    margin: 1em 5% 1em 5% !important;
+    background-color: #000000;
+}
+
+img.pinpoint{
+    max-height: 1.3em;
+    vertical-align: middle;
+}

www/gpx/index.php

@@ -23,7 +23,7 @@
     $r = mysqli_fetch_array($q);
     $route = $r["id"];
 
-    $q_point = mysqli_query($con, "SELECT id, part, lat_o, lon_o, place_o, lat_d, lon_d, place_d FROM route_point WHERE route = $route ORDER by part;");
+    $q_point = mysqli_query($con, "SELECT id, part, lat_o, lon_o, lat_d, lon_d FROM route_point WHERE route = $route ORDER by part;");
     if (mysqli_num_rows($q) == 0){
         http_response_code(404);
         exit(404);

www/lablanca/programa.php

@@ -50,6 +50,7 @@
 <?php
             include("../css/ui.css");
             include("../css/lablanca.css");
+            include("../css/map.css");
 ?>
         </style>
         <!-- CSS for mobile version -->
@@ -57,6 +58,7 @@
 <?php
             include("../css/m/ui.css");
             include("../css/m/lablanca.css");
+            include("../css/m/map.css");
 ?>
         </style>
         <!-- Script files -->
@@ -64,9 +66,10 @@
 <?php
             include("../script/ui.js");
             include("../script/lablanca.js");
+            include("../script/map.js");
 ?>
         </script>
-        <script src="<?=$server?>/script/OpenLayers.js"></script>
+        <script src="<?=$server?>/script/OpenLayers/ol.js"></script>
 
         <!-- Meta tags -->
         <link rel="canonical" href="<?=$server?>/lablanca/programa/<?=$url?>/<?=$year?>"/>
@@ -104,12 +107,12 @@
 <?php
                                 if($gm == 1 && $r_days['name'] != null){
 ?>
-                                    <?=formatFestivalDate($r_days['date'])?> - <?=$r_days['name']?>
+                                    <?=formatFestivalDate($r_days['date'], $lang)?> - <?=$r_days['name']?>
 <?php
                                 }
                                 else{
 ?>
-                                    <?=formatFestivalDate($r_days['date'])?>
+                                    <?=formatFestivalDate($r_days['date'], $lang)?>
 <?php
                                 }
 ?>
@@ -142,35 +145,53 @@
                                             }
 ?>
                                             <div class='location'>
-                                                <!--<a target='_blank' href='http://maps.google.com/maps?q=<?=$r_sch['lat']?>,<?=$r_sch['lon']?>+(My+Point)&z=14&ll=<?=$r_sch['lat']?>,<?=$r_sch['lon']?>'>-->
 <?php
                                                 if ($r_sch["route"] != null && strlen($r_sch["route"]) != 0){
 ?>
-                                                    <span class='fake_a pointer' onClick='showMapRoute(<?=$r_sch["route"]?>, "<?=$r_sch["title"]?>", "gpx");'>
+                                                    <!-- TODO: Add center coordinates and zoom -->
+                                                    <span class='fake_a pointer' onClick='showMapRoute(<?=$r_sch["route"]?>, "<?=$r_sch["title"]?>", <?=$r_sch["lat"]?>, <?=$r_sch["lon"]?>);'>
+                                                        <img class='pinpoint' alt=' ' src='<?=$server?>/img/misc/pinpoint-route.png'/>
+<?php
+                                                        //If name and address are the same, show only name
+                                                        if ($r_sch["place"] == $r_sch["address"]){
+?>
+                                                            <?=$r_sch["place"]?>
+<?php
+                                                        }
+                                                        else{
+?>
+                                                            <span class='desktop route_start'>
+                                                                <?=$lng["lablanca_schedule_start"]?>
+                                                            </span>
+                                                            <span class='address'> - <?=$r_sch["address"]?></span>
+<?php
+                                                        }
+?>
+                                                    </span>
 <?php
                                                 }
                                                 else{
 ?>
-                                                    <span class='fake_a pointer' onClick='showMapPoint(<?=$r_sch["lat"]?>, <?=$r_sch["lon"]?>, "<?=$r_sch["title"]?>");'>
+                                                    <span class='fake_a pointer' onClick='showMapPoint("<?=$r_sch["title"]?>", <?=$r_sch["lat"]?>, <?=$r_sch["lon"]?>);'>
+                                                        <img class='pinpoint' alt=' ' src='<?=$server?>/img/misc/pinpoint.png'/>
 <?php
-                                                }
+                                                        //If name and address are the same, show only name
+                                                        if ($r_sch["place"] == $r_sch["address"]){
 ?>
-                                                    <img alt=' ' src='<?=$server?>/img/misc/pinpoint.png'/>
+                                                            <?=$r_sch["place"]?>
 <?php
-                                                    //If name and address are the same, show only name
-                                                    if ($r_sch["place"] == $r_sch["address"]){
+                                                        }
+                                                        else{
 ?>
-                                                        <?=$r_sch["place"]?>
+                                                            <?=$r_sch["place"]?>
+                                                            <span class='address'> - <?=$r_sch["address"]?></span>
 <?php
-                                                    }
-                                                    else{
+                                                        }
 ?>
-                                                        <?=$r_sch["place"]?>
-                                                        <span class='address'> - <?=$r_sch["address"]?></span>
+                                                    </span>
 <?php
-                                                    }
+                                                }
 ?>
-                                                </span>
                                             </div>
                                         </td>
                                     </tr>
@@ -198,7 +219,7 @@
                     </h3>
                     <div id='map' class='entry'>
                     </div> <!-- map -->
-                </div> <!-- .section -->>
+                </div> <!-- .section -->
             </div> <!-- .map_container -->
         </div> <!-- #content -->
 <?php

www/lang/lang_en.php

@@ -97,6 +97,7 @@
     $lng['lablanca_schedule_year_citi'] = 'Festivals Schedule #';
     $lng['lablanca_schedule_year_gm_description'] = 'Programa de Fiestas para los miembros de la cuadrilla Gasteizko Margolariak para las Fiestas de La Blanca de #';
     $lng['lablanca_schedule_year_city_description'] = 'Programa de Fiestas municipal para las Fiestas de La Blanca de #';
+    $lng['lablanca_schedule_start'] = 'Origin:';
 
     // /actividades/index.php
     $lng['activities_title'] = 'Activities - Gasteizko Margolariak';
@@ -114,6 +115,7 @@
     $lng['activities_inscription'] = 'Inscription requiered';
     $lng['activities_see_itinerary'] = 'Check out the itinerary';
     $lng['activities_itinerary'] = 'Itinerary';
+    $lng['activities_itinerary_start'] = 'Inicio:';
     $lng['activities_'] = '';
 
     

www/lang/lang_es.php

@@ -97,6 +97,7 @@
     $lng['lablanca_schedule_year_city'] = 'Programa de Fiestas de Vitoria #';
     $lng['lablanca_schedule_year_gm_description'] = 'Programa de Fiestas para los miembros de la cuadrilla Gasteizko Margolariak para las Fiestas de La Blanca de #';
     $lng['lablanca_schedule_year_city_description'] = 'Programa de Fiestas municipal para las Fiestas de La Blanca de #';
+    $lng['lablanca_schedule_start'] = 'Inicio:';
 
     // /actividades/index.php
     $lng['activities_title'] = 'Actividades - Gasteizko Margolariak';
@@ -114,6 +115,7 @@
     $lng['activities_inscription'] = 'Requiere inscripción';
     $lng['activities_see_itinerary'] = 'Ver el itinerario';
     $lng['activities_itinerary'] = 'Itinerario';
+    $lng['activities_itinerary_start'] = 'Inicio:';
     $lng['activities_'] = '';
 
 

www/lang/lang_eu.php

@@ -108,6 +108,7 @@
     $lng['activities_inscription'] = 'Izen ematea beharrezkoa';
     $lng['activities_see_itinerary'] = 'Programazioa ikusi';
     $lng['activities_itinerary'] = 'Itinerario';
+    $lng['activities_itinerary_start'] = 'Inicio:';
     $lng['activities_'] = '';
 
     // /lablanca/programa.php
@@ -115,6 +116,7 @@
     $lng['lablanca_schedule_year_citi'] = 'Programa de Fiestas de Vitoria #';
     $lng['lablanca_schedule_year_gm_description'] = 'Programa de Fiestas para los miembros de la cuadrilla Gasteizko Margolariak para las Fiestas de La Blanca de #';
     $lng['lablanca_schedule_year_city_description'] = 'Programa de Fiestas municipal para las Fiestas de La Blanca de #';
+    $lng['lablanca_schedule_start'] = 'Hasiera:';
 
     // /actividades/actividad.php
     $lng['activities_when'] = 'Noiz';

www/script/lablanca.js

@@ -14,82 +14,3 @@ function expandDay(id){
     document.getElementById('slid_day_' + id).style.opacity = '0';
     setTimeout(function(){document.getElementById('slid_day_' + id).style.opacity = '1';}, 500);
 }
-
-function hideMap(){
-    document.getElementById('map').innerHTML = "";
-    document.getElementById('map_container').style.opacity = 0;
-    document.getElementById('map_container').style.display = 'none';
-}
-
-function showMap(title){
-    document.getElementById('map_container').style.display = 'block';
-    document.getElementById('map_container').style.opacity = 1;
-    document.getElementById('map_title').innerHTML = title;
-}
-
-function showMapRoute(route, title, format, lat = 42.846484, lon = -2.673625, zoom = 15){
-
-    showMap(title);
-
-    var map;
-
-    map = new OpenLayers.Map ("map", {
-      //controls:[
-        //new OpenLayers.Control.Navigation(),
-        //new OpenLayers.Control.PanZoomBar(),
-        //new OpenLayers.Control.LayerSwitcher(),
-        //new OpenLayers.Control.Attribution()],
-      maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
-      maxResolution: 156543.0399,
-      numZoomLevels: 19,
-      units: 'm',
-      projection: new OpenLayers.Projection("EPSG:900913"),
-        displayProjection: new OpenLayers.Projection("EPSG:4326")
-    });
-
-    map.addLayer(new OpenLayers.Layer.OSM());
-    var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
-    map.setCenter (lonLat, zoom);
-
-    if (format == "osm"){
-        // Add the layer with the osm route.
-        var layer = new OpenLayers.Layer.Vector(title, {
-            strategies: [new OpenLayers.Strategy.Fixed()],
-            protocol: new OpenLayers.Protocol.HTTP({
-                url: "/osm/" + route + ".xml",
-                format: new OpenLayers.Format.OSM()
-            }),
-            style: {strokeColor: "green", strokeWidth: 10, strokeOpacity: 0.8},
-            projection: new OpenLayers.Projection("EPSG:4326")
-        });
-        map.addLayers([layer]);
-    }
-    else if (format == "gpx"){
-        // Add the Layer with the GPX Track
-        var layer = new OpenLayers.Layer.Vector(title, {
-            strategies: [new OpenLayers.Strategy.Fixed()],
-            protocol: new OpenLayers.Protocol.HTTP({
-                url: "/gpx/" + route + ".gpx",
-                format: new OpenLayers.Format.GPX()
-            }),
-            style: {strokeColor: "green", strokeWidth: 10, strokeOpacity: 0.8},
-            projection: new OpenLayers.Projection("EPSG:4326")
-        });
-        map.addLayer(layer);
-    }
-}
-
-function showMapPoint(lat, lon, title){
-    showMap(title);
-
-    var map = new OpenLayers.Map("map");
-    map.addLayer(new OpenLayers.Layer.OSM());
-
-    var lonLat = new OpenLayers.LonLat(lon ,lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
-    var zoom = 16;
-
-    var markers = new OpenLayers.Layer.Markers(title);
-    map.addLayer(markers);
-    markers.addMarker(new OpenLayers.Marker(lonLat));
-    map.setCenter (lonLat, zoom);
-}

www/script/map.js

@@ -0,0 +1,197 @@
+/**
+ * Closes the floating map.
+ */
+function hideMap(){
+    document.getElementById('map').innerHTML = "";
+    document.getElementById('map_container').style.opacity = 0;
+    document.getElementById('map_container').style.display = 'none';
+}
+
+/**
+ * Opens the floating map.
+ * Called from {@link #showMapRoute(route, title, format, lat, lon, zoom)} and {@link #showMapPoint(title, lat, lon)}.
+ * @param title The title of the map window.
+ */
+function showMap(title){
+    document.getElementById('map_container').style.display = 'block';
+    document.getElementById('map_container').style.opacity = 1;
+    document.getElementById('map_title').innerHTML = title;
+}
+
+/**
+ * Draws a route on the map.
+ * Calls {@link #showMap(title)}.
+ * @param route Route identifier.
+ * @param title The title of the map window.
+ * @param lat Map center latitude coordinate (default: Downtown Vitoria).
+ * @param lon Mat center longitude coordinate (default: Downtown Vitoria).
+ * @param zoom Map initial zoom level (default: 15);
+ */
+function showMapRoute(route, title, lat = 42.846484, lon = -2.673625, zoom = 15){
+
+    // Show the map window.
+    showMap(title);
+
+    // Styles for the route.
+    var style = {
+        'Point': new ol.style.Style({
+            image: new ol.style.Circle({
+            fill: new ol.style.Fill({
+              color: 'rgba(255,255,0,0.4)'
+            }),
+            radius: 25,
+            stroke: new ol.style.Stroke({
+                color: '#ff0',
+                width: 1
+            })
+          })
+        }),
+        'LineString': new ol.style.Style({
+          stroke: new ol.style.Stroke({
+                color: '#f00',
+                width: 3
+          })
+        }),
+        'MultiLineString': new ol.style.Style({
+            stroke: new ol.style.Stroke({
+                color: '#00008f',
+                width: 8
+            })
+        })
+      };
+
+    // Generate vector from gpx file.
+    var vectorSrc = new ol.source.Vector({
+        url: "/gpx/" + route + ".gpx",
+        format: new ol.format.GPX()
+    })
+    var vector = new ol.layer.Vector({
+        source: vectorSrc,
+        style: function(feature) {
+            return style[feature.getGeometry().getType()];
+        }
+    });
+
+    // Initialize map, with background and route.
+    var map = new ol.Map({
+        layers: [
+            new ol.layer.Tile({
+                source: new ol.source.OSM()
+            }),
+            vector
+        ],
+        target: 'map',
+        controls: ol.control.defaults({
+            attributionOptions: {
+                collapsible: false
+            }
+        }),
+        view: new ol.View({
+            center: ol.proj.fromLonLat([lon, lat]),
+            zoom: zoom
+        })
+    });
+
+    // Manually read file to get first and last point.
+    var first = [lat, lon];
+    var last = [lat, lon];
+    var href = "/gpx/" + route + ".gpx";
+    xmlhttp = new XMLHttpRequest();
+    xmlhttp.onreadystatechange = function(){
+        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
+
+            // Get first and last point.
+            out = xmlhttp.responseText;
+            out = out.substring(out.indexOf("<trkpt"));
+            firstL = out.substring(out.indexOf("<trkpt") + 7, out.indexOf("/>") - 1);
+            lastL = out.substring(out.lastIndexOf("<trkpt") + 7, out.lastIndexOf("/>") - 1);
+            first = firstL.split(" ");
+            first[0] = parseFloat(first[0].substring(5, first[0].length - 1));
+            first[1] = parseFloat(first[1].substring(5, first[1].length - 1));
+            last = lastL.split(" ");
+            last[0] = parseFloat(last[0].substring(5, last[0].length - 1));
+            last[1] = parseFloat(last[1].substring(5, last[1].length - 1));
+
+            // Add start and end marker
+            var startIcon = new ol.Feature({
+                geometry: new ol.geom.Point(ol.proj.fromLonLat([first[1], first[0]])),
+                name: title,
+            });
+            startIcon.setStyle(new ol.style.Style({
+               image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
+                   src: '/img/misc/pinpoint-start.png',
+                   scale: 0.25
+               }))
+            }));
+            var endIcon = new ol.Feature({
+                geometry: new ol.geom.Point(ol.proj.fromLonLat([last[1], last[0]])),
+                name: title,
+            });
+            endIcon.setStyle(new ol.style.Style({
+               image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
+                   src: '/img/misc/pinpoint-end.png',
+                   scale: 0.25
+               }))
+            }));
+            iconLayer = new ol.layer.Vector({
+                source: new ol.source.Vector({
+                     features: [startIcon, endIcon]
+                })
+            });
+            map.addLayer(iconLayer);
+        }
+    }
+    xmlhttp.open("GET", href, true);
+    xmlhttp.send();
+
+}
+
+/**
+ * Puts a marker on the map.
+ * Calls {@link #showMap(title)}.
+ * @param title The title of the map window.
+ * @param lat Marker latitude coordinate.
+ * @param lon Marker longitude coordinate.
+ */
+function showMapPoint(title, lat, lon){
+
+    // Show the map window.
+    showMap(title);
+
+    // Set marker icon.
+    var icon = new ol.Feature({
+        geometry: new ol.geom.Point(ol.proj.fromLonLat([lon, lat])),
+        name: title,
+    });
+    icon.setStyle(new ol.style.Style({
+        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
+            src: '/img/misc/pinpoint.png',
+            scale: 0.28
+        }))
+      }));
+    iconLayer = new ol.layer.Vector({
+        source: new ol.source.Vector({
+            features: [icon]
+        })
+    });
+
+    // Configure the map.
+    var map = new ol.Map({
+        layers: [
+            new ol.layer.Tile({
+                source: new ol.source.OSM()
+            }),
+            iconLayer
+        ],
+        target: 'map',
+        controls: ol.control.defaults({
+            attributionOptions: {
+                collapsible: false
+            }
+        }),
+        view: new ol.View({
+            center: ol.proj.fromLonLat([lon, lat]),
+            zoom: 15
+        })
+    });
+}