Cambiando mapa por OpenStreetMap

_config.yml

@@ -89,6 +89,8 @@ rockstarSpeakersButtonText: "Ver todos los ponentes"
 rockstarSpeakersButtonLink: "/ponentes/"
 
 # Location Block
+locationBlockImage: "mapa-medialab-prado.png"
+
 locationBlockTitle: "Lugar"
 eventLocationName: "Medialab-Prado"
 eventLocationLink: "http://medialab-prado.es"
@@ -102,7 +104,7 @@ eventDoorTime: "09:00"
 eventEndTime: "2017-10-22T20:00"
 eventPlaceCoordinates: "40.41063,-3.69366"
 mapCenterCoordinates: "40.41063,-3.69366"
-mapMobileCenterCoordinates: "40.41063,-3.69366"
+mapMobileCenterCoordinates: "40.4108497,-3.6938703"
 
 # Venue Block
 venueBlockTitle: "Instalaciones"

_includes/head.html

@@ -43,6 +43,15 @@
     
     <meta name="theme-color" content="#2b5797">
     
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
+   integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
+   crossorigin=""/>
+
+    <!-- Make sure you put this AFTER Leaflet's CSS -->
+    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
+   integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
+   crossorigin=""></script>
+
     <link href="{{ "/css/main.css" | prepend: site.baseurl }}" rel="stylesheet"> 
 
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

_includes/location-map.html

@@ -1,6 +1,6 @@
 <!-- Begin Location Section -->
-<section id="location-map" class="location-map">
-    <div id="canvas-map" class="canvas-map"></div>
+<section id="location-map" class="location-map" style="background-image: url({{ site.baseurl }}/img/sections-background/{{ site.locationBlockImage }});background-repeat: no-repeat;background-size: cover;">
+    <div id="canvas-map-osm" class="canvas-map-osm"></div>
     <div class="content-wrapper">
         <div class="col-lg-3 col-md-4 col-sm-6 col-md-offset-1 animated hiding location-description text-left" data-animation="fadeInLeft" data-delay="0">
             <div class="row">
@@ -18,11 +18,6 @@
                         </li>
                     </ul>
                 </div>
-                <a href="{{ site.baseurl | append: '/logistics/#find-way' }}" class="pull-right">
-                    <svg class="icon icon-direction" viewBox="0 0 32 32">
-                        <use xlink:href="{{ site.baseurl }}/img/sprites/sprites.svg#icon-direction"></use>
-                    </svg>
-                </a>
             </div>
         </div>
     </div>

_sass/partials/_location-map.scss

@@ -4,6 +4,12 @@
     h3 {
         margin-bottom: 0;
     }
+    .content-wrapper{
+        z-index: 20;
+    }
+    .col-lg-3 {
+        z-index: 20
+    }
 }
 .location-description {
     min-width: 400px;
@@ -27,7 +33,12 @@
         display: inline-block;
     }
 }
-.canvas-map {
+
+#mapid {
+    
+    }
+.canvas-map-osm {
+    height: 180px;
     position: absolute;
     top: 0;
     right: 0;
@@ -35,4 +46,5 @@
     left: 0;
     width: 100%;
     height: 700px;
+    z-index: 10;
 }

js/scripts.js

@@ -266,6 +266,26 @@
         }
     });
 
+    //Openstreetmap with leaflet
+
+    var map = L.map('canvas-map-osm', {
+        center: [40.41161,-3.69406],
+        zoomControl: false,
+        scrollWheelZoom: false,
+        zoom: 18,
+        minZoom: 18,
+        maxZoom: 18,
+        dragging: false 
+    });  
+
+    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        }).addTo(map);
+
+        L.marker([40.41082,-3.69366]).addTo(map)
+            .bindPopup('Medialb-Prado')
+                .openPopup();
+
     //Google plus
     function initGooglePlus() {
         var po = document.createElement('script');
@@ -283,7 +303,7 @@
 
     //Google maps
     if (typeof googleMaps !== 'undefined') {
-        var map, autocomplete, directionsDisplay, geocoder, polyline, origin;
+        var trap, autocomplete, directionsDisplay, geocoder, polyline, origin;
         var markers = [];
         var directionsService = new google.maps.DirectionsService();
         var MY_MAPTYPE_ID = 'custom_style';