add polyline rendering support

addPolyline function use feature class handle fitting map to features add event handling to RadarMapFeature add support for polygon drawing fix label bump beta version prevent marker propagation to map add popup support bump beta version support nested merging of line and polygon options dont modify target object im mergeDeep bump beta version manually handle close marker popups bump version use map data event instead of interval when waiting for map to be ready
radarlabs · Aug 14, 2024 · 78d32e6 · 78d32e6
1 parent 33a68b4
commit 78d32e6
Show file tree

Hide file tree

Showing 17 changed files with 793 additions and 32 deletions.
diff --git a/demo/views/add-a-marker.hbs b/demo/views/add-a-marker.hbs
@@ -39,46 +39,35 @@
               container: 'map',
             });
 
+            let url;
             let marker;
             map.on('load', () => {
               const { lat, lng } = map.getCenter();
 
-              marker = Radar.ui.marker({
-                popup: {
-                  text: `${lat}, ${lng}`,
-                  },
-                })
-                .setLngLat([lng, lat])
-                .addTo(map);
-
-              marker.on('click', (e) => {
-                console.log('MARKER CLICK', e);
-              });
+              map.on('click', (e) => {
+              console.log('MAP CLICK', e);
+                const { lng, lat } = e.lngLat;
 
-              // use custom marker from URL
-              $('#imageUrl').on('change', (e) => {
-                const url = e.target.value;
-                if (marker) {
-                  marker.remove();
-                }
-                const { lat, lng } = map.getCenter();
-                marker = Radar.ui.marker({
-                  url,
-                  popup: {
-                    text: `${lat}, ${lng}`,
-                  },
-                })
+                // create marker from click location
+                const marker = Radar.ui.marker({ url })
                   .setLngLat([lng, lat])
                   .addTo(map);
 
+                // fit map to markers
+                map.fitToMarkers({ maxZoom: 14, padding: 80 });
+
+                // add listener to remove marker on click
                 marker.on('click', (e) => {
                   console.log('MARKER CLICK', e);
+                  marker.remove();
+                  map.fitToMarkers({ maxZoom: 14, padding: 80 }); // refit after marker removed
                 });
               });
-            });
 
-            map.on('click', (e) => {
-              console.log('MAP CLICK', e);
+              // use custom marker from URL
+              $('#imageUrl').on('change', (e) => {
+                url = e.target.value;
+              });
             });
 
             map.on('error', (err) => {

diff --git a/demo/views/add-a-polyline.hbs b/demo/views/add-a-polyline.hbs
@@ -0,0 +1,112 @@
+        <div class="content flex-grow-1 p-4">
+          <h1 class="mb-4">Add a polyline</h1>
+          <div id="error-alert" class="alert alert-danger fade show" role="alert" style="display: none;">
+            <strong>Error</strong> Something went wrong. Check the developer console for details.
+          </div>
+
+          <p>Initialize a new map with the Radar SDK and add a polyline to the map.</p>
+
+          <div class="callout">
+            Radar map objects are MapLibre GL JS references.
+            See their <a href="https://maplibre.org/maplibre-gl-js-docs/api/">documentation</a> for additional functionality.
+          </div>
+
+          <div>
+            <div style="display: flex; justify-content: space-between;">
+              <input id="route" class="form-control form-control-sm mb-3" style="height: 34px;" data-bs-placement="bottom" data-bs-title="Add your route polyline" type="text" placeholder="Add polyline here" />
+
+              <select id="format" class="form-select form-control form-control-sm" style="width: 400px; height: 30px; margin-left: 16px;">
+                <option name="type" value="polyline6">polyline6</option>
+                <option name="type" value="polyline5">polyline5</option>
+              </select>
+            </div>
+
+            <div id="map" style="width: 100%; height: 500px; display: none;"></div>
+            <div id="map-warning" style="width: 100%; height: 500px; background: #f7fafc;">
+              <p style="color: #697386; font-weight: bold; text-align: center; padding-top: 220px;">Add publishable key to see map</p>
+            </div>
+          </div>
+        </div>
+
+        <script>
+          const DEFAULT_POLYLINE = 'iyeulAveaclCuVfw@aA|CuAlEgj@teBm@jBs@|BbBjA~XzRdFnDfBlA`A{C`@mA~h@icBfAmD`A{Cff@c|A|A{E|BZfJrAh[lEhC^dBThMdBnTtCd@LzBx@|BjA^RhZnUzBdB`BtAl\\zWvAjAlBzA|UjRfEhD`ClBhRfOlCxBjBxAhBxAxKzItNhL|BhBnB|Af]rXnB~A|AnAn[fWbAv@~ArAzBfBxStPbInGtB`BlBzA~b@l]bAx@d@\\jBxAjMdKTPxGlFnJvH|StPnCxBhFbEr@{EfEeYvCyRf@kD\\{BBUtC}RfAoFbAcFpDsNl@_Cl@aCfLcd@r@sCn@cC`Lsc@p@kCl@aCjE}P`E}Od@iBz@{DrD`A|JxCxWdFxc@fLzIzBzL~C~Bj@dAXlg@rM~Ab@pA^|`@pLp@RtBl@bBf@xEpAjQ`FtBl@xF~AjEjAtIbCxGMzWjIhCv@jBl@ju@pUnCz@pCdAvRnIfUpJlV~KtBbAlB~@l`@|SvBhAXNjCvApLnGxBlAnFtCnGeEbZyQ~G}E`B}AhBsBfByBnFkH|AiBzAeBzAcB|A{AdB}ApBwAhCyAfCkApVwKbh\\qjOjBKhBWdCu@zDgBvAi@xAi@dBc@`BQpAGrAFvAVtAp@lAz@lAvA~@hBj@|BXdCFtBIhCWtBe@`By@|AeArAm@`@e@Rs@PyANoB@yAL}AT_BXyBQ}IW_Um@aQUqAHcBTyBf@_Dt@{Ad@uAj@}CrAuR|IoCnA\\gUBiBmCBoDGaIOkL[yNWeB@gBBcC?ao@iBwBEyBGkYs@}HQoAEeBEua@aAyAEyGQ';
+
+          let feature;
+          const addPolyline = (map, route, format) => {
+            let precision = 6;
+            if (format === 'polyline6') {
+              precision = 6;
+            } else if (format === 'polyline5') {
+              precision = 5;
+            }
+
+            // clear existing data
+            map.clearFeatures();
+            map.clearMarkers();
+
+            const feature = map.addPolyline(route, { id: 'route', precision });
+            console.log(feature);
+            map.fitToFeatures({ padding: 20 });
+
+            feature.on('click', ({ feature, originalEvent: event }) => {
+              console.log('CLICKED!', feature, event);
+              Radar.ui.popup({
+                text: `Polyline: ${route.slice(0, 12)}...`,
+              })
+              .setLngLat([event.lngLat.lng, event.lngLat.lat])
+              .addTo(map);
+            });
+          };
+
+          let map;
+          let route = DEFAULT_POLYLINE;
+          let format = 'polyline6';
+
+          const init = (publishableKey) => {
+            $('#error-alert').hide();
+            $('#map-warning').hide();
+            $('#map').show();
+            $('#route').val(DEFAULT_POLYLINE);
+
+
+            Radar.initialize(publishableKey, { debug: true });
+
+            // prevent duplicate maps
+            if (map) {
+              map.remove();
+            }
+
+            map = Radar.ui.map({
+              container: 'map',
+            });
+
+            // initial load
+            map.on('load', () => {
+              addPolyline(map, route, format);
+            });
+
+            map.on('error', (err) => {
+              console.error(err);
+              $('#error-alert').show();
+            });
+          };
+
+
+          $('#route').on('change', () => {
+            route = $('#route').val();
+            addPolyline(map, route, format);
+          });
+          $('#format').on('change', () => {
+            format = $('#format').val();
+            addPolyline(map, route, format);
+          });
+
+          // initalize map on api key changes
+          $('#publishableKey').on('change', () => {
+            const publishableKey = $('#publishableKey').val();
+            if (publishableKey) {
+              init(publishableKey);
+            }
+          });
+
+        </script>
diff --git a/demo/views/add-geojson.hbs b/demo/views/add-geojson.hbs
@@ -0,0 +1,113 @@
+        <div class="content flex-grow-1 p-4">
+          <h1 class="mb-4">Add a GeoJSON feature</h1>
+          <div id="error-alert" class="alert alert-danger fade show" role="alert" style="display: none;">
+            <strong>Error</strong> Something went wrong. Check the developer console for details.
+          </div>
+
+          <p>Initialize a new map with the Radar SDK and add a GeoJSON feature to the map.</p>
+
+          <div class="callout">
+            Radar map objects are MapLibre GL JS references.
+            See their <a href="https://maplibre.org/maplibre-gl-js-docs/api/">documentation</a> for additional functionality.
+          </div>
+
+          <div>
+            <textarea id="geojson" class="form-control form-control-sm mb-3" style="height: 130px;" data-bs-placement="bottom" data-bs-title="Add your geojson" type="text" placeholder="Add GeoJSON feature here"></textarea>
+
+            <div id="map" style="width: 100%; height: 500px; display: none;"></div>
+            <div id="map-warning" style="width: 100%; height: 500px; background: #f7fafc;">
+              <p style="color: #697386; font-weight: bold; text-align: center; padding-top: 220px;">Add publishable key to see map</p>
+            </div>
+          </div>
+        </div>
+
+        <script>
+          const DEFAULT_GEOJSON_FEATURE = '{"type":"Feature","id": 1, "properties":{},"geometry":{"type":"Polygon","coordinates":[[[-73.95820498349376,40.80026256420331],[-73.9816545434309,40.76824212209061],[-73.97283590550576,40.764244806438285],[-73.94918592197929,40.79677293396304],[-73.95820498349376,40.80026256420331]]]}}';
+          // const DEFAULT_GEOJSON_FEATURE = '{"type":"Feature","properties":{},"geometry":{"coordinates":[[-73.95809049027652,40.80019010945142],[-73.95792650156356,40.79956941510278],[-73.95841846770163,40.79903147530655],[-73.95825447898942,40.798369389572],[-73.95727054671187,40.79799696344418],[-73.95694256928675,40.797003816888946],[-73.95672391766904,40.79630032908929],[-73.95737987252073,40.79576236280053],[-73.95841846770163,40.795265774665125],[-73.95901975964925,40.79485194838119],[-73.96000369192606,40.79410705456934],[-73.96082363548994,40.7936104540523],[-73.96180756776752,40.79340353607347],[-73.96208088228856,40.79212063021319],[-73.96251818552328,40.79166539959459],[-73.96393942103406,40.79034107459367],[-73.96399408393889,40.789099495916076],[-73.96530599364154,40.788561471279564],[-73.96721919529108,40.78765095811761],[-73.96754717271693,40.7859954476576],[-73.96705520657817,40.78504351045504],[-73.96803913885499,40.78363627394418],[-73.96880441951555,40.78305681494962],[-73.96924172274952,40.782477350899484],[-73.96940571146246,40.78177370918479],[-73.96989767760049,40.78069753684963],[-73.97088160987803,40.77991109219337],[-73.97350542928336,40.77796563646018],[-73.97432537284725,40.77614430711532],[-73.97410672123029,40.77560617752587],[-73.97476267608198,40.77428153227217],[-73.97591059707172,40.77390897103635],[-73.97651188901861,40.77279127479261],[-73.97683986644446,40.77200473653497],[-73.9788623939029,40.770514427986484],[-73.97995565198858,40.76923107995185],[-73.97973700037159,40.768320301794176],[-73.97705851806147,40.767119711512834],[-73.97536396802887,40.76794770713141],[-73.9749266647949,40.76935527600628],[-73.97372408090035,40.769810659552775],[-73.97230284538882,40.76964506589704],[-73.97099093568616,40.77063862164226],[-73.96940571146246,40.77150797073264],[-73.96902307113255,40.772625688564375],[-73.96896840822774,40.774074554065805],[-73.96842177918488,40.77490246302358],[-73.96754717271693,40.77564757226432],[-73.96727385819516,40.77651685581657],[-73.96650857753534,40.77755170235744],[-73.96579795977956,40.779166030772416],[-73.96481402750277,40.78007666026306],[-73.96383009522593,40.78127701642737],[-73.96257284842733,40.78173231826318],[-73.9611516129158,40.78164953634368],[-73.9589104338404,40.78396739109968],[-73.95694256928675,40.786740432471845],[-73.95688790638195,40.788395924360685],[-73.95699723219082,40.79017553211082],[-73.95530268215823,40.79216201466048],[-73.9547013902106,40.7939415214764],[-73.95404543535965,40.79505886184529],[-73.95322549179501,40.79580374497792]],"type":"LineString"}}';
+
+          let feature;
+          const addGeoJSON = (map, geojsonText) => {
+
+            // clear existing data
+            map.clearFeatures();
+            map.clearMarkers();
+
+            try {
+              const geojson = JSON.parse(geojsonText);
+
+              let feature;
+              switch (geojson.geometry.type) {
+                case 'LineString':
+                  feature = map.addLine(geojson);
+                  break;
+                case 'Polygon':
+                case 'MultiPolygon':
+                  feature = map.addPolygon(geojson);
+                  break;
+                default:
+                  throw new Error(`Uknown geometry type: ${geojson.geometry.type}`);
+              }
+
+              console.log(feature);
+              map.fitToFeatures({ padding: 20 });
+
+              feature.on('click', ({ feature, originalEvent: event }) => {
+                  console.log('CLICKED!', feature, event);
+                  Radar.ui.marker({
+                    text: JSON.stringify(feature.properties, null, 2),
+                  })
+                  .setLngLat([event.lngLat.lng, event.lngLat.lat])
+                  .addTo(map);
+              });
+
+            } catch (err) {
+              console.error(err);
+              $('#error-alert').show();
+            }
+          };
+
+          let map;
+          let geojsonText = DEFAULT_GEOJSON_FEATURE;
+
+          const init = (publishableKey) => {
+            $('#error-alert').hide();
+            $('#map-warning').hide();
+            $('#map').show();
+            $('#geojson').val(geojsonText);
+
+            Radar.initialize(publishableKey, { debug: true });
+
+            // prevent duplicate maps
+            if (map) {
+              map.remove();
+            }
+
+            map = Radar.ui.map({
+              container: 'map',
+            });
+
+            // initial load
+            map.on('load', () => {
+              addGeoJSON(map, geojsonText);
+            });
+
+            map.on('error', (err) => {
+              console.error(err);
+              $('#error-alert').show();
+            });
+          };
+
+          $('#geojson').on('change', () => {
+            geojsonText = $('#geojson').val();
+            addGeoJSON(map, geojsonText);
+          });
+
+          // initalize map on api key changes
+          $('#publishableKey').on('change', () => {
+            const publishableKey = $('#publishableKey').val();
+            if (publishableKey) {
+              init(publishableKey);
+            }
+          });
+
+        </script>
diff --git a/demo/views/display-a-map.hbs b/demo/views/display-a-map.hbs
@@ -63,6 +63,17 @@
         $('#customStyleID').val(styleId);
         $('#customStyleID').trigger('change');
       }
+
+      const center = map.getCenter();
+      console.log(center);
+      Radar.ui.marker({
+        popup: {
+          text: "Hello world!",
+        }
+      })
+        .setLngLat([center.lng, center.lat])
+        .addTo(map);
+
     });
 
     map.on('error', (err) => {

diff --git a/demo/views/layouts/main.hbs b/demo/views/layouts/main.hbs
@@ -33,6 +33,8 @@
                 <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                   <li><a href="./display-a-map" class="link-dark rounded">Display a map</a></li>
                   <li><a href="./add-a-marker" class="link-dark rounded">Add a marker</a></li>
+                  <li><a href="./add-a-polyline" class="link-dark rounded">Add a polyline</a></li>
+                  <li><a href="./add-geojson" class="link-dark rounded">Add geojson</a></li>
                   <li><a href="./create-autocomplete" class="link-dark rounded">Address autocomplete</a></li>
                   <li><a href="./custom-autocomplete" class="link-dark rounded">Custom autocomplete input</a></li>
                   <li><a href="./search-near-location" class="link-dark rounded">Search near location</a></li>

diff --git a/src/index.ts b/src/index.ts
@@ -61,6 +61,7 @@ class Radar {
       maplibregl: MapUI.getMapLibre(),
       map: MapUI.createMap,
       marker: MapUI.createMarker,
+      popup: MapUI.createPopup,
       autocomplete: AutocompleteUI.createAutocomplete,
     };
   }

diff --git a/src/types.ts b/src/types.ts
@@ -470,7 +470,7 @@ export interface RadarMapOptions extends Omit<maplibregl.MapOptions, 'transformR
   showZoomControls?: boolean;
 }
 
-export interface RadarMarkerPopupOptions extends maplibregl.PopupOptions {
+export interface RadarPopupOptions extends maplibregl.PopupOptions {
   text?: string;
   html?: string;
   element?: HTMLElement;
@@ -494,9 +494,43 @@ export interface RadarMarkerOptions extends maplibregl.MarkerOptions {
   height?: number | string;
 
   // popup configs
-  popup?: RadarMarkerPopupOptions;
-}
+  popup?: RadarPopupOptions;
+}
+
+export interface RadarLineOptions {
+  id?: string;
+  properties?: any;
+  paint?: {
+    'line-color'?: string;
+    'line-width'?: number;
+    'line-opacity'?: number;
+    'line-cap'?: 'butt' | 'round' | 'square';
+    'line-offset'?: number;
+    'line-blur'?: number;
+    'line-dasharray'?: Array<number>;
+    'line-gap-width'?: number;
+    'line-gradient'?: any;
+    'border-width'?: number;
+    'border-color'?: string;
+    'border-opacity'?: number;
+  },
+}
+
+export interface RadarPolylineOptions extends RadarLineOptions {
+  precision?: number;
+};
 
+export interface RadarPolygonOptions {
+  id?: string;
+  properties?: any;
+  paint?: {
+    'fill-color'?: string;
+    'fill-opacity'?: number;
+    'border-width'?: number;
+    'border-color'?: string;
+    'border-opacity'?: number;
+  },
+}
 export interface RadarAutocompleteUIOptions {
   container: string | HTMLElement;
   near?: string | Location; // bias for location results