Contact page OpenStreetMap

_sass/contact.scss

@@ -52,9 +52,36 @@
     }
   }
 
+  #main-wrapper {
+    width           : 100%;
+    margin-top      : 40px;
+    display         : flex;
+    flex-direction  : row;
+    flex-wrap       : wrap;
+  }
+
+  #maparea {
+    margin        : 0 20px 0px auto;
+    min-width     : 50%;
+    flex          : 1;
+
+    #map {
+      width      : 100%;
+      margin     : 0px auto;
+      height     : 60vh;
+      max-height : 300px;
+    }
+  }
+
   #main {
     margin            : 2rem 0;
+    padding-right     : 40px;
+
+    p{
+      padding-bottom  : 5px;
     }
+  }
+
   * {
     margin            : 0.2rem 0;
   }

contact.html

@@ -17,6 +17,7 @@ title: Kontakt - Lapikud
     </div>
   </div>
 
+  <div id="main-wrapper">
     <div id="main">
       <h2>MTÜ Lapikud</h2>
       <p>Aadress: Akadeemia tee 5, Tallinn, Eesti</p>
@@ -25,6 +26,11 @@ title: Kontakt - Lapikud
       <p>Reg. kood: 801 67 145</p>
       <p>Swedbank EE812200221019551756</p>
       </div>
+    <div id="maparea">
+      <div id="map"></div>
+    </div>
+  </div>
+
 
   <div id="management">
     <h2>Juhatus</h2>
@@ -44,3 +50,20 @@ title: Kontakt - Lapikud
     </div>
   </div>
 </div>
+
+
+<!-- leafletjs map styles -->
+<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"
+        integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
+        crossorigin=""></script>
+
+<script>
+    var map = L.map('map').setView([59.396342, 24.668718], 16);
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(map);
+
+    L.marker([59.396342, 24.668718]).addTo(map)
+        .openPopup();
+</script>