add attribution to map by default

radarlabs · Jul 25, 2023 · 935846c · 935846c
1 parent 5bbcca2
commit 935846c
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 6 deletions.
diff --git a/src/ui/map.ts b/src/ui/map.ts
@@ -12,7 +12,7 @@ const RADAR_LOGO_URL = 'https://api.radar.io/maps/static/images/logo.svg';
 const defaultMaplibreOptions: Partial<maplibregl.MapOptions> = {
   minZoom: 1,
   maxZoom: 20,
-  attributionControl: false,
+  attributionControl: true,
   dragRotate: false,
   touchPitch: false,
   maplibreLogo: false,
@@ -53,7 +53,6 @@ class MapUI {
       { style },
       mapOptions,
     );
-    console.log('PASSED OPTIONS', mapOptions);
     Logger.debug(`initialize map with options: ${JSON.stringify(maplibreOptions)}`);
 
     // set container
@@ -87,6 +86,16 @@ class MapUI {
       Logger.warn('map container does not have a set "width" or "height"');
     }
 
+    // dont expand on mobile view by default
+    map.on('load', () => {
+      const attrib = document.querySelector('.maplibregl-ctrl-attrib')
+      if (attrib) {
+        attrib.classList.remove('maplibregl-compact-show');
+        attrib.classList.remove('mapboxgl-compact-show');
+        attrib.classList.add('loaded');
+      }
+    });
+
     // TODO
     // add location button
 

diff --git a/styles/radar.css b/styles/radar.css
@@ -22,10 +22,6 @@
   height: 38px;
 }
 
-.maplibregl-marker:hover {
-  cursor: pointer;
-}
-
 @font-face {
   font-family: 'Graphik';
   font-weight: 400;
@@ -210,3 +206,29 @@
 .radar-no-results {
   padding: 8px 16px;
 }
+
+.maplibregl-marker:hover {
+  cursor: pointer;
+}
+
+.maplibregl-ctrl-attrib.maplibregl-compact {
+  padding: 2px 24px 2px 0 !important;
+}
+.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button {
+  background-color: #FFFFFF !important;
+}
+.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner {
+  display: none !important;
+}
+
+
+.maplibregl-ctrl-attrib.maplibregl-compact.maplibregl-compact-show.loaded {
+  padding: 2px 28px 2px 8px !important;
+}
+.maplibregl-ctrl-attrib.maplibregl-compact.maplibregl-compact-show.loaded .maplibregl-ctrl-attrib-inner {
+  display: block !important;
+}
+.maplibregl-ctrl-attrib.maplibregl-compact.maplibregl-compact-show.loaded .maplibregl-ctrl-attrib-button {
+  display: block !important;
+  background-color: rgb(0, 0, 0/5%) !important;
+}