🚀 Installation and Usage

With npm

# with npm
npm install @radarlabs/plugin-maps radar-sdk-js maplibre-gl

# with yarn
yarn add @radarlabs/plugin-maps radar-sdk-js maplibre-gl

Then import and initialize:

import Radar from 'radar-sdk-js';
import { createMapsPlugin } from '@radarlabs/plugin-maps';
import '@radarlabs/plugin-maps/dist/radar-maps.css';

Radar.registerPlugin(createMapsPlugin());
Radar.initialize({ publishableKey: 'prj_test_pk_...' });

With a script tag

Include after the core SDK:

<link href="https://js.radar.com/maps/v1.0.0/radar-maps.css" rel="stylesheet" />
<script src="https://js.radar.com/v5.0.0/radar.min.js"></script>
<script src="https://js.radar.com/maps/v1.0.0/radar-maps.min.js"></script>

The CDN bundle auto-registers with the core SDK when loaded.

Quickstart

Create a map

Radar.ui.map() returns a RadarMap instance, which extends maplibregl.Map.

const map = Radar.ui.map({
  container: 'map',
  style: 'radar-default-v1', // radar-default-v1 | radar-light-v1 | radar-dark-v1
  center: [-73.991, 40.735],
  zoom: 14,
});

Built-in Radar styles (radar-default-v1, radar-light-v1, radar-dark-v1) are resolved automatically. You can also pass a custom style id.

Add markers

Radar.ui.marker() returns a RadarMarker instance, which extends maplibregl.Marker.

const marker = Radar.ui
  .marker({
    color: '#000257',
    popup: {
      text: 'Radar HQ',
    },
  })
  .setLngLat([-73.991, 40.735])
  .addTo(map);

Create a popup

Radar.ui.popup() returns a maplibregl.Popup instance:

const popup = Radar.ui
  .popup({
    text: 'Hello world',
  })
  .setLngLat([-73.991, 40.735])
  .addTo(map);

API

Map options

RadarMapOptions extends maplibregl.MapOptions with these additions:

| Option | Type | Default | Description | | ------------------ | --------- | ------- | ---------------------------- | | language | string | — | Language code for map labels | | showZoomControls | boolean | true | Show zoom in/out buttons |

Marker options

| Option | Type | Default | Description | | -------- | ------------------- | ----------- | ------------------------------ | | color | string | '#000257' | Marker fill color | | marker | string | — | Radar-hosted marker image name | | url | string | — | Custom marker image URL | | width | number \| string | — | Marker image width | | height | number \| string | — | Marker image height | | popup | RadarPopupOptions | — | Popup to display on click |

All standard maplibregl.MarkerOptions are also supported (for example, element, scale, draggable).

Map helpers

RadarMap provides helpers for working with markers and GeoJSON features:

// markers
map.getMarkers();
map.fitToMarkers();
map.clearMarkers();

// GeoJSON features
map.addPolygon(geojsonFeature, { paint: { 'fill-color': '#000257', 'fill-opacity': 0.3 } });
map.addLine(lineFeature, { paint: { 'line-color': '#000257', 'line-width': 2 } });
map.addPolyline(encodedPolyline, { precision: 6 });
map.fitToFeatures();
map.clearFeatures();

Access MapLibre GL JS directly

The underlying MapLibre GL JS module is available at Radar.ui.maplibregl:

const bounds = new Radar.ui.maplibregl.LngLatBounds(sw, ne);

Peer dependencies

| Package | Version | | -------------- | -------------------------------------------- | | radar-sdk-js | ^5.0.0 | | maplibre-gl | ^2.4.0 \|\| ^3.0.0 \|\| ^4.0.0 \|\| ^5.0.1 |

📫 Support

Have questions? We're here to help! Email us at [email protected].