Some more openlayers improvments as well as initial work for projection support

src/styles/_map.scss

@@ -1,7 +1,13 @@
 //OPENLAYERS
 .maputnik-layout {
   .ol-zoom {
-    top: 10px;
+    top: 40px;
+    right: 10px;
+    left: auto;
+  }
+
+  .ol-rotate {
+    top: 94px;
     right: 10px;
     left: auto;
   }
@@ -20,3 +26,57 @@
     }
   }
 }
+
+
+.maputnik-ol {
+  width: 100%;
+  height: 100%;
+}
+
+.maputnik-ol-popup {
+  background: $color-black;
+
+}
+
+.maputnik-coords {
+  font-family: monospace;
+  &:before {
+    content: '[';
+    color: #888;
+  }
+  &:after {
+    content: ']';
+    color: #888;
+  }
+}
+
+.maputnik-ol-debug {
+  font-family: monospace;
+  font-size: smaller;
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  background: rgb(28, 31, 36);
+  padding: 6px 8px;
+  border-radius: 2px;
+  z-indeX: 9999;
+}
+
+.maputnik-ol-zoom {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  background: #1c1f24;
+  border-radius: 2px;
+  padding: 6px 8px;
+  color: $color-lowgray;
+  z-indeX: 9999;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.maputnik-ol-container {
+  display: flex;
+  flex: 1;
+  position: relative;
+}

src/styles/_popup.scss

@@ -22,7 +22,7 @@
 
 .maputnik-popup-layer-id {
   padding-left: $margin-2;
-  padding-right: $margin-2;
+  padding-right: 1.6em;
   background-color: $color-midgray;
   color: $color-white;
 }