From 3b04f881e765e57c9e956c896dcd755afac00542 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sen=C3=A9n=20Rodero=20Rodr=C3=ADguez?=
 <senenrodero@gmail.com>
Date: Tue, 8 Aug 2017 11:37:00 +0200
Subject: [PATCH] Fix map marker positioning.

---
 app/assets/javascripts/map.js.coffee |  6 +++--
 app/assets/stylesheets/admin.scss    | 33 +++++++++++++++-------------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/app/assets/javascripts/map.js.coffee b/app/assets/javascripts/map.js.coffee
index 33f13d25c..493de07cc 100644
--- a/app/assets/javascripts/map.js.coffee
+++ b/app/assets/javascripts/map.js.coffee
@@ -24,8 +24,10 @@ App.Map =
     editable                 = $(element).data('marker-editable')
     marker                   = null;
     markerIcon               = L.divIcon(
-                                  iconSize: null
-                                  html: '<div class="map-marker"></div>')
+                                  className: 'map-marker'
+                                  iconSize:     [30, 30]
+                                  iconAnchor:   [15, 40]
+                                  html: '<div class="map-icon"></div>')
 
     createMarker = (latitude, longitude) ->
       markerLatLng  = new (L.LatLng)(latitude, longitude)
diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index aec72b35b..c025944f6 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -977,24 +977,27 @@ table {
   height: 350px;
   .map-marker {
     visibility: visible;
-    width: 30px;
-    height: 30px;
-    border-radius: 50% 50% 50% 0;
-    background: #00cae9;
     position: absolute;
-    transform: rotate(-45deg);
     left: 50%;
     top: 50%;
-    margin: -45px 0 0 -15px;
-  }
-  .map-marker:after {
-    content: "";
-    width: 14px;
-    height: 14px;
-    margin: 8px 0 0 8px;
-    background: white;
-    position: absolute;
-    border-radius: 50%;
+    margin-top: -5px;
+    .map-icon{
+      transform: rotate(-45deg);
+      width: 30px;
+      height: 30px;
+      border-radius: 50% 50% 50% 0;
+      background: #00cae9;
+      transform: rotate(-45deg);
+    }
+    .map-icon:after {
+      content: "";
+      width: 14px;
+      height: 14px;
+      margin: 8px 0 0 8px;
+      background: white;
+      position: absolute;
+      border-radius: 50%;
+    }
   }
   .map-attributtion{
     visibility: visible;