add default attribution (#109)

radarlabs · Jul 25, 2023 · 3d38293 · 3d38293
1 parent 5bbcca2
commit 3d38293
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -57,7 +57,7 @@ Radar.initialize('prj_test_pk_...', { /* options */ });
 
 Add the following script in your `html` file
 ```html
-<script src="https://js.radar.com/v4.0.0/radar.min.js"></script>
+<script src="https://js.radar.com/v4.0.1-beta.1/radar.min.js"></script>
 ```
 
 Then initialize the Radar SDK
@@ -74,8 +74,8 @@ To create a map, first initialize the Radar SDK with your publishable key. Then
 ```html
 <html>
   <head>
-    <link href="https://js.radar.com/v4.0.0/radar.css" rel="stylesheet">
-    <script src="https://js.radar.com/v4.0.0/radar.min.js"></script>
+    <link href="https://js.radar.com/v4.0.1-beta.1/radar.css" rel="stylesheet">
+    <script src="https://js.radar.com/v4.0.1-beta.1/radar.min.js"></script>
   </head>
 
   <body>
@@ -99,8 +99,8 @@ To create an autocomplete input, first initialize the Radar SDK with your publis
 ```html
 <html>
   <head>
-    <link href="https://js.radar.com/v4.0.0/radar.css" rel="stylesheet">
-    <script src="https://js.radar.com/v4.0.0/radar.min.js"></script>
+    <link href="https://js.radar.com/v4.0.1-beta.1/radar.css" rel="stylesheet">
+    <script src="https://js.radar.com/v4.0.1-beta.1/radar.min.js"></script>
   </head>
 
   <body>
@@ -131,8 +131,8 @@ To power [geofencing](https://radar.com/documentation/geofencing/overview) exper
 ```html
 <html>
   <head>
-    <link href="https://js.radar.com/v4.0.0/radar.css" rel="stylesheet">
-    <script src="https://js.radar.com/v4.0.0/radar.min.js"></script>
+    <link href="https://js.radar.com/v4.0.1-beta.1/radar.css" rel="stylesheet">
+    <script src="https://js.radar.com/v4.0.1-beta.1/radar.min.js"></script>
   </head>
 
   <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "radar-sdk-js",
-  "version": "4.0.0",
+  "version": "4.0.1-beta.1",
   "description": "",
   "type": "module",
   "module": "dist/radar.js",

diff --git a/src/ui/map.ts b/src/ui/map.ts
@@ -53,7 +53,6 @@ class MapUI {
       { style },
       mapOptions,
     );
-    console.log('PASSED OPTIONS', mapOptions);
     Logger.debug(`initialize map with options: ${JSON.stringify(maplibreOptions)}`);
 
     // set container
@@ -63,6 +62,10 @@ class MapUI {
     const map = new maplibregl.Map(maplibreOptions);
     const container = map.getContainer();
 
+    if (!container.style.width && !container.style.height) {
+      Logger.warn('map container does not have a set "width" or "height"');
+    }
+
     // add radar logo
     const img = document.createElement('img');
     img.src = RADAR_LOGO_URL;
@@ -79,16 +82,28 @@ class MapUI {
     link.appendChild(img)
     map.getContainer().appendChild(link);
 
+    // add attribution
+    const attribution = new maplibregl.AttributionControl({ compact: false });
+    map.addControl(attribution, 'bottom-right');
+
     // add zoom controls
     const nav = new maplibregl.NavigationControl({ showCompass: false });
     map.addControl(nav, 'bottom-right');
 
-    if (!container.style.width && !container.style.height) {
-      Logger.warn('map container does not have a set "width" or "height"');
-    }
-
-    // TODO
-    // add location button
+    // handle map resize actions
+    const onResize = () => {
+      const attrib = document.querySelector('.maplibregl-ctrl-attrib');
+      if (attrib) {
+        const width = map.getContainer().clientWidth;
+        if (width < 380) {
+          attrib.classList.add('hidden');
+        } else {
+          attrib.classList.remove('hidden');
+        }
+      }
+    };
+    map.on('resize', onResize);
+    map.on('load', onResize);
 
     return map;
   }

diff --git a/src/version.ts b/src/version.ts
@@ -1 +1 @@
-export default '4.0.0';
+export default '4.0.1-beta.1';
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,10 @@
 .radar-no-results {
   padding: 8px 16px;
 }
+
+.maplibregl-marker:hover {
+  cursor: pointer;
+}
+.maplibregl-ctrl-attrib.hidden {
+  display: none !important;
+}