scss + makefile

src/index.js

@@ -6,6 +6,8 @@ import RJSON from 'relaxed-json';
 import { RulerControl, StylesControl } from 'mapbox-gl-controls';
 import MiniMap from "./mapbox/mapbox-minimap"
 
+import './scss/app.scss';
+
 mapboxgl.accessToken = 'pk.eyJ1IjoiYXNzYWRhIiwiYSI6ImNrbTkzd2RlOTBrMmwyb3BoZGZ5bXpyZXIifQ.qPyi1nxJHcc4Z1xL1EKuuA';
 const map = new mapboxgl.Map({
     container: 'map', // container ID

src/scss/app.scss

@@ -0,0 +1,93 @@
+@import '/node_modules/flight-indicators-js/css/flight-indicators.css';
+
+body { margin: 0; padding: 0; font-family: sans-serif;}
+#map { position: absolute; top: 0; bottom: 0; width: 100%; }
+#ui {
+z-index: 99999;
+    position: absolute;
+    bottom: 0;
+}
+
+.instrument .hidden {
+    display: none;
+}
+
+.context-menu {
+  position: absolute;
+   z-index: 10000;
+}
+.menu {
+  display: flex;
+  flex-direction: column;
+  background-color: #edece1;
+  padding: 10px 0;
+  margin: 0;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.mapboxgl-ctrl button .mapboxgl-ctrl-icon {
+  background-color: #232323;
+}
+
+.mapboxgl-ctrl-group button {
+    background-color: #232323;
+    color: #fff;
+    font-weight: bold;
+}
+
+.menu > li > a {
+
+  font: inherit;
+  border: 0;
+  padding: 10px 30px 10px 15px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  text-decoration: unset;
+  color: #000;
+  font-weight: 500;
+}
+.menu > li > a:hover {
+  background:#f1f3f7;
+  color: #013b01;
+}
+.menu > li {
+  text-decoration: none;
+  list-style-type: none; /* Remove bullets */
+  padding: 0; /* Remove padding */
+  margin: 0; /* Remove margins */
+}
+.menu > li > a > i {
+  padding-right: 10px;
+}
+.menu > li.trash > a:hover {
+  color: red;
+}
+
+.mapboxgl-popup {
+max-width: 400px;
+font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+}
+
+#data {
+    display: block;
+    position: fixed;
+    width: 50%;
+    border-radius: 25px;
+    height: 25px;
+    line-height: 25px;
+    padding: 10px 25px;
+    top: 0;
+    left: 0;
+    margin: 10px;
+    background-color: #232323;
+    color: #fff;
+    border: #838383 solid 1px;
+}
+
+#data > .data_el {
+  padding-right: 10%;
+  display: inline;
+}