OpenStreetMaps used in the festivals schedules.

www/.htaccess

@@ -24,6 +24,9 @@ RewriteRule ^rss.xml$ /rss.php [NC]
 RewriteRule ^blog/buscar/([A-Za-z0-9]+)/([A-Za-z0-9]+)[\/]?$ /blog/buscar.php?where=$1&query=$2 [NC]
 RewriteRule ^blog/([A-Z\-a-z0-9]{3,}+)[\/]?$ /blog/post.php?perm=$1 [NC]
 
+RewriteRule ^osm/([A-Z\-a-z0-9]+)[\/]?.xml$ /osm/index.php?route=$1 [NC]
+RewriteRule ^gpx/([A-Z\-a-z0-9]+)[\/]?.gpx$ /gpx/index.php?route=$1 [NC]
+
 RewriteRule ^lablanca/([0-9]+)[\/]?$ /lablanca/index.php?year=$1 [NC]
 RewriteRule ^lablanca/programa[\/]?$ /lablanca/programa.php?gm=1 [NC]
 RewriteRule ^lablanca/programa/([A-Za-z]+)[\/]?$ /lablanca/programa.php?gm=$1 [NC]

www/css/lablanca.css

@@ -173,14 +173,33 @@ div#map_container{
     right:0;
     width: 100%;
     height: 100%;
-    background-color: #33333333;    
+    background-color: #33333377;    
+    transition: all .5s ease-in-out;
 }
 
-div#map_container div#map{
-   background-color: #ffffff;
-   width: 70%;
-   height: 50%;
-   margin: 15% 15% 25% 15%;
+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;
 }
 
 

www/css/m/lablanca.css

@@ -36,3 +36,22 @@ div#schedule{
 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/gpx/index.php

@@ -0,0 +1,92 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<gpx xmlns="http://www.topografix.com/GPX/1/1" xmlns:gpxx="http://www.garmin.com/xmlschemas/GpxExtensions/v3" xmlns:gpxtpx="http://www.garmin.com/xmlschemas/TrackPointExtension/v1" creator="Gasteizko Margolariak" version="2" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd http://www.garmin.com/xmlschemas/GpxExtensions/v3 http://www.garmin.com/xmlschemas/GpxExtensionsv3.xsd http://www.garmin.com/xmlschemas/TrackPointExtension/v1 http://www.garmin.com/xmlschemas/TrackPointExtensionv1.xsd">
+<?php
+    session_start();
+    include("../functions.php");
+    $con = startdb();
+    $proto = getProtocol();
+    $http_host = $_SERVER["HTTP_HOST"];
+    $server = "$proto$http_host";
+
+    // Get path identifier
+    $route = mysqli_real_escape_string($con, $_GET["route"]);
+    if (intval($route) != 0){
+        $q = mysqli_query($con, "SELECT id, name FROM route WHERE id = $route LIMIT 1;");
+    }
+    else{
+        $q = mysqli_query($con, "SELECT id, name FROM route WHERE upper(name) = upper('$route');");
+    }
+    if (mysqli_num_rows($q) == 0){
+        http_response_code(404);
+        exit(404);
+    }
+    $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;");
+    if (mysqli_num_rows($q) == 0){
+        http_response_code(404);
+        exit(404);
+    }
+?>
+    <metadata>
+        <link href='<?=$server?>/gpx/<?=$route?>.gpx'>
+            <text><?=$r["name"]?> - Gasteizko Margolariak</text>
+        </link>
+    </metadata>
+    <trk>
+        <name><?=$r["name"]?> - Gasteizko Margolariak</name>
+        <trkseg>
+<?php
+    $points = array();
+    $t_points = 0;
+    while ($r_point = mysqli_fetch_array($q_point)){
+
+        // Origin point
+        if ((strlen($r_point["lat_o"]) == 0 || strlen($r_point["lon_o"]) == 0) && strlen($r_point["place_o"]) != 0){
+            $q_place = mysqli_query($con, "SELECT lat, lon FROM place WHERE id = $r_point[place_o];");
+            if (mysqli_num_rows($q_place) == 0){
+                http_response_code(501);
+                exit(501);
+            }
+            else{
+                $r_place = mysqli_fetch_array($q_place);
+                $lat_o = $r_place["lat"];
+                $lon_o = $r_place["lon"];
+            }
+        }
+        else{
+            $lat_o = $r_point["lat_o"];
+            $lon_o = $r_point["lon_o"];
+        }
+
+        // Destination point
+        if ((strlen($r_point["lat_d"]) == 0 || strlen($r_point["lon_d"]) == 0) && strlen($r_point["place_d"]) != 0){
+            $q_place = mysqli_query($con, "SELECT lat, lon FROM place WHERE id = $r_point[place_d];");
+            if (mysqli_num_rows($q_place) == 0){
+                http_response_code(501);
+                exit(501);
+            }
+            else{
+                $r_place = mysqli_fetch_array($q_place);
+                $lat_d = $r_place["lat"];
+                $lon_d = $r_place["lon"];
+            }
+        }
+        else{
+            $lat_d = $r_point["lat_d"];
+            $lon_d = $r_point["lon_d"];
+        }
+
+        $points[$t_points] = "$r_point[id]$route$r_point[part]0";
+        $points[$t_points + 1] = "$r_point[id]$route$r_point[part]1";
+        $t_points = $t_points + 2;
+?>
+            <trkpt lat='<?=$lat_o?>' lon='<?=$lon_o?>' />
+            <trkpt lat='<?=$lat_d?>' lon='<?=$lon_d?>' />
+<?php
+    } // while ($r_point = mysqli_fetch_array($q_point))
+?>
+        </trkseg>
+    </trk>
+</gpx>

www/lablanca/programa.php

@@ -66,6 +66,8 @@
             include("../script/lablanca.js");
 ?>
         </script>
+        <script src="<?=$server?>/script/OpenLayers.js"></script>
+
         <!-- Meta tags -->
         <link rel="canonical" href="<?=$server?>/lablanca/programa/<?=$url?>/<?=$year?>"/>
         <link rel="author" href="<?=$server?>"/>
@@ -115,9 +117,11 @@
                         </div>
                         <div class='day_schedule' id='day_schedule_<?=$i?>'>
 <?php
-                            $q_sch = mysqli_query($con, "SELECT festival_event_$schi.id AS id, title_$lang AS title, description_$lang AS description, host, place, date_format(start, '%H:%i') AS st, date_format(end, '%H:%i') AS end, place.name_$lang AS place, address_$lang AS address, lat, lon FROM festival_event_$schi, place WHERE place.id = festival_event_$schi.place AND date(DATE_SUB(start, INTERVAL 6 HOUR)) = str_to_date('$r_days[date]', '%Y-%m-%d') ORDER BY start");
+                            $q_sch = mysqli_query($con, "SELECT festival_event_$schi.id AS id, title_$lang AS title, description_$lang AS description, host, place, date_format(start, '%H:%i') AS st, date_format(end, '%H:%i') AS end, place.name_$lang AS place, address_$lang AS address, lat, lon, route FROM festival_event_$schi, place WHERE place.id = festival_event_$schi.place AND date(DATE_SUB(start, INTERVAL 6 HOUR)) = str_to_date('$r_days[date]', '%Y-%m-%d') ORDER BY start");
                             if (mysqli_num_rows($q_sch) > 0){
-                                echo("<table class='schedule'>\n");
+?>
+                                <table class='schedule'>
+<?php
                                 while ($r_sch = mysqli_fetch_array($q_sch)){
 ?>
                                     <tr>
@@ -139,8 +143,18 @@
 ?>
                                             <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']?>'>-->
-                                                <!-- TODO Routes -->
-                                                <span class='fake_a pointer' onClick='showMapPoint(<?=$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");'>
+<?php
+                                                }
+                                                else{
+?>
+                                                    <span class='fake_a pointer' onClick='showMapPoint(<?=$r_sch["lat"]?>, <?=$r_sch["lon"]?>, "<?=$r_sch["title"]?>");'>
+<?php
+                                                }
+?>
                                                     <img alt=' ' src='<?=$server?>/img/misc/pinpoint.png'/>
 <?php
                                                     //If name and address are the same, show only name
@@ -175,9 +189,16 @@
 ?>
             </div>
             <div id='map_container'>
-                <div id='map'>
-                    <!-- TODO: OSM -->
-                </div> <!-- map -->
+                <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

www/osm/index.php

@@ -0,0 +1,94 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<?php
+    session_start();
+    include("../functions.php");
+    $con = startdb();
+    $proto = getProtocol();
+    $http_host = $_SERVER["HTTP_HOST"];
+    $server = "$proto$http_host";
+
+    // Get path identifier
+    $route = mysqli_real_escape_string($con, $_GET["route"]);
+    if (intval($route) != 0){
+        $q = mysqli_query($con, "SELECT id, name FROM route WHERE id = $route LIMIT 1;");
+    }
+    else{
+        $q = mysqli_query($con, "SELECT id, name FROM route WHERE upper(name) = upper('$route');");
+    }
+    if (mysqli_num_rows($q) == 0){
+        http_response_code(404);
+        exit(404);
+    }
+    $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;");
+    if (mysqli_num_rows($q) == 0){
+        http_response_code(404);
+        exit(404);
+    }
+?>
+<osm version='0.6' generator='Gasteizko Margolariak V3'>
+<?php
+    $points = array();
+    $t_points = 0;
+    while ($r_point = mysqli_fetch_array($q_point)){
+
+        // Origin point
+        if ((strlen($r_point["lat_o"]) == 0 || strlen($r_point["lon_o"]) == 0) && strlen($r_point["place_o"]) != 0){
+            $q_place = mysqli_query($con, "SELECT lat, lon FROM place WHERE id = $r_point[place_o];");
+            if (mysqli_num_rows($q_place) == 0){
+                http_response_code(501);
+                exit(501);
+            }
+            else{
+                $r_place = mysqli_fetch_array($q_place);
+                $lat_o = $r_place["lat"];
+                $lon_o = $r_place["lon"];
+            }
+        }
+        else{
+            $lat_o = $r_point["lat_o"];
+            $lon_o = $r_point["lon_o"];
+        }
+
+        // Destination point
+        if ((strlen($r_point["lat_d"]) == 0 || strlen($r_point["lon_d"]) == 0) && strlen($r_point["place_d"]) != 0){
+            $q_place = mysqli_query($con, "SELECT lat, lon FROM place WHERE id = $r_point[place_d];");
+            if (mysqli_num_rows($q_place) == 0){
+                http_response_code(501);
+                exit(501);
+            }
+            else{
+                $r_place = mysqli_fetch_array($q_place);
+                $lat_d = $r_place["lat"];
+                $lon_d = $r_place["lon"];
+            }
+        }
+        else{
+            $lat_d = $r_point["lat_d"];
+            $lon_d = $r_point["lon_d"];
+        }
+
+        $points[$t_points] = "$r_point[id]$route$r_point[part]0";
+        $points[$t_points + 1] = "$r_point[id]$route$r_point[part]1";
+        $t_points = $t_points + 2;
+?>
+    <node id='<?=$r_point["id"]?><?=$route?><?=$r_point["part"]?>0' lat='<?=$lat_o?>' lon='<?=$lon_o?>' visible='true' version='1' />
+    <node id='<?=$r_point["id"]?><?=$route?><?=$r_point["part"]?>1' lat='<?=$lat_d?>' lon='<?=$lon_d?>' visible='true' version='1' />
+<?php
+    } // while ($r_point = mysqli_fetch_array($q_point))
+?>
+    <way id='<?=$route?>' visible='true' version='1'>
+<?php
+
+    $i = 0;
+    while($i < $t_points){
+?>
+        <nd ref='<?=$points[$i]?>' />
+<?php
+        $i = $i + 1;
+    } // while($i <= $t_points)
+?>
+    </way>
+</osm>

www/script/lablanca.js

@@ -12,26 +12,84 @@ function expandDay(id){
         setTimeout(function(){document.getElementById('slid_day_' + id).src = '/img/misc/slid-down.png';}, 500);
     }
     document.getElementById('slid_day_' + id).style.opacity = '0';
-    setTimeout(function(){document.getElementById('slid_day_' + id).style.opacity = '1';}, 500); 
+    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(){
+function showMap(title){
     document.getElementById('map_container').style.display = 'block';
     document.getElementById('map_container').style.opacity = 1;
-    return document.getElementById('map');
+    document.getElementById('map_title').innerHTML = title;
 }
 
-function showMapRoute(route){
-    map = showMap();
-    //TODO: OSM
+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){
-    map = showMap();
-    //TODO: OSM
+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);
 }