Maps - Radar

Radar Maps is a cost-effective alternative to Google Maps Platform and Mapbox. For example, here’s a Radar Map displaying a marker for Radar HQ: You can also check out the maps explorer in the dashboard, or check out a full-page maps demo and store locator demo.

How it works

To use Radar Maps, simply initialize the Radar SDK with your publishable key and specify the container to render the map into. Radar Maps is an extension of the MapLibre GL JS library. See their docs for more customization info.

Getting Started

First, sign up for Radar and get an API key. Then add the Radar SDK to your application.

With npm or yarn

Add the radar-sdk-js and maplibre-gl packages

npm install --save radar-sdk-js maplibre-gl

Then import as an ES Module in your project

import Radar from 'radar-sdk-js';
import 'radar-sdk-js/dist/radar.css'

// initialize with your test or live publishable key
Radar.initialize('prj_test_pk_...', { /* map config options */ });

Note: The Radar SDK has a dependency on maplibre-gl.

With HTML

Add the following script in your html file

<script src="https://js.radar.com/v4.5.3/radar.min.js"></script>

Then initialize the Radar SDK

<script type="text/javascript">
  Radar.initialize('prj_test_pk_...', { /* map config options */ });
</script>

Create a map

Specify the HTML element where you want to render the map, by providing the element’s ID, or the element object itself.

<html>
  <head>
    <link href="https://js.radar.com/v4.5.3/radar.css" rel="stylesheet"></link>
    <script src="https://js.radar.com/v4.5.3/radar.min.js"></script>
  </head>

  <body>
    <div id="map" style="width: 100%; height: 500px;" />

    <script type="text/javascript">
      Radar.initialize('prj_live_pk_...');

      const map = Radar.ui.map({
        container: 'map', // OR document.getElementById('map')
        style: 'radar-default-v1',
        center: [-73.9911, 40.7342], // NYC
        zoom: 14,
      });
    </script>
  </body>
</html>

Configuration

Map

You can configure a map with any MapLibre MapOptions. The minimum recommended options are the following:

Name	Default	Possible values	Description
`container`	none (required)	string \| HTMLElement	The container to render the map into. You can specify an `id` of an HTML element or a DOM element. The width and height of this element will determine the size of the map.
`style`	`radar-default-v1`	`radar-default-v1`, `radar-light-v1`, `radar-dark-v1`, `radar-satellite-v1`, `radar-hybrid-v1`	The style of the map. See the Styles section below for more details.
`center`	none (IP geolocation)	`[longitude, latitude]`	The center of the map. If not specified, the map will automatically be centered based on the client’s IP geolocation.
`zoom`	11	number	The zoom level of the map, a number between 0 (fully zoomed out) and 23 (fully zoomed in).
`language`	none	string (ISO code)	This display language for map. Can be any 2-letter ISO Code, or `local` to use the device’s specified language. Defaults to `en-US` if none is provided.

const map = Radar.ui.map({
  container: 'map',
  style: 'radar-default-v1',
  center: [-73.990550, 40.735225],
  zoom: 10,
  langauge: 'en-US',
});

Functions

The Radar map class also includes some additional functions for handling common map interactions

Function	Arguments	Return value	Description
`on`	MapLibre event	void	Register a callback to fire on a map event.
`getMarkers`	none	RadarMarker[]	Returns an array of all markers currently associated with the map.
`fitToMarkers`	fitBoundsOptions, RadarMarker[] (optional)	void	Fit the map zoom and bounds to all markers on the map. Optionally takes a list of markers to fit (defaults to all markers).
`clearMarkers`	none	void	Remove all markers from the map.
`getFeatures`	none	RadarMapFeature[]	Returns an array of all features currently associated with the map.
`fitToFeatures`	fitBoundsOptions	void	Fit the map zoom and bounds to all features on the map.
`clearFeatures`	none	void	Remove all features from the map.
`addPolygon`	GeoJSON<Polygon \| MultiPolygon> Feature, polygonOptions	RadarMapFeature	Add a new polygon Feature to the map.
`addLine`	GeoJSON<LineString> Feature, lineOptions	RadarMapFeature	Add a new line Feature to the map.
`addPolyline`	encodedPolyline, polylineOptions	RadarMapFeature	Accepts an encoded polyline and converts it to a line feature. Defaults to six decimals precision.

map.on('load', (event) => {
 // map loaded
});

map.on('click', (event) => {
  // handle click on map
});

map.fitToMarkers({ padding: 20 }); // fit map view to markers

map.fitToFeatures({ padding: 20 }); // fit map view to features

Styles

Radar provides several out-of-the box map styles:

Style	Preview	Description
`radar-default-v1`		Radar’s default map style, showcasing detailed street-level information about roads and nearby places. A general purpose map suitable for most use cases.
`radar-light-v1`		A light monochrome map style, useful for highlighting your own information or visualizations.
`radar-dark-v1`		A dark monochrome map style, useful for highlighting your own information or visualizations in dark mode.
`radar-satellite-v1`		A map style featuring detailed satellite imagery. Available on Enterprise plans.
`radar-hybrid-v1`		A map style showcasing both satellite imagery and features such as roads. Available on Enterprise plans.

Custom styles

You can also create a custom map style with Radar Maps Studio. Maps Studio is a visual maps editor available in the Radar dashboard, and supports advanced maps customizations, custom fonts, and custom markers.

Style	Preview	Description
`CUSTOM_STYLE_ID`		Custom map style that can be tailored to your brand, or support more advanced map visualizations and features. The custom style ID can be found in the share modal when viewing or editing a map style in the Radar dashboard.

Marker

Markers can be used to denote places on the map. Radar Maps support custom marker images, and easily attaching popup’s when a marker is clicked. Radar Marker’s support all options in the MapLibre GL marker options, as well as the following options for the most common scenarios:

Name	Default	Possible values	Description
`color`	#000257	string	Color of the default marker image.
`marker`	none	string	ID of a marker uploaded as part of a custom style
`url`	none	string	URL of image to use for the marker.
`element`	none	HTMLElement	DOM element to be used as the marker.
`width`	none	number	Size for marker width in pixels.
`height`	none	number	Size for marker height in pixels.
`scale`	1	number	Scale used for marker size (if element is not provided).
`popup`	none	Popup	Config for the popup associated with the marker to be shown on click. See the Popup config for more info.

const marker = Radar.ui.marker({
  color: '#000257',
  width: 40,
  height: 80,
  popup: {
    text: 'My popup.',
  }
})
.setLngLat([-73.990550, 40.735225])
.addTo(map);

Popups can be used to display text or custom HTML at a point on the map, usually upon some user interaction. Radar Popup’s support all options in the MapLibre GL popup options, as well as the following options for the most common scenarios:

Name	Default	Possible values	Description
`text`	none	string	Text to display inside popup.
`html`	none	string	The HTML string to be displayed inside the popup.
`element`	none	HTMLElement	The DOM element to be used as the popup content.

const popup = Radar.ui.popup({
  text: 'My popup.',
})
.setLngLat([-73.990550, 40.735225])
.addTo(map);

Features

Radar Map Features are custom lines and geometries that can be styled and interacted with on the map. The primary format for a map feature is a GeoJSON Feature (Polygon, MultiPolygon, and LineString are supported). Feature ids should be unique, and properties can be used for attaching additional metadata to the features.

Polygon and MultiPolygon

Polygons and MultiPolygons can be added to the map through the map.addPolygon(feature, options) function. The following paint properties for styling.

Property	Possible values
`fill-color`	string (CSS color)
`fill-opacity`	number (0 - 1)
`border-width`	number (px)
`border-color`	string (CSS color)
`border-opacity`	number (0 - 1)

const geojson = {
  type: 'Feature',
  id: `feature-id-1`,
  properties: {
    name: 'Central Park',
  },
  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 feature = Radar.ui.addPolygon(geojson, {
  paint: {
    'fill-color': 'blue',
    'fill-opacity': 0.4,
  },
});

feature.on('click', ({ feature, event }) => {
  // handle click on feature
});

Line and PolyLine

Lines can be added to the map through the map.addLine(feature, options) function for GeoJSON LineStrings, or map.addPolyline(polyline, options) for encoded polylines. The following paint properties for styling.

Property	Possible values
`line-color`	string (CSS color)
`line-width`	number (px)
`line-opacity`	number (0 - 1)
`line-cap`	’butt’ \| ‘round’ \| ‘square’
`line-offset`	number (px)
`line-blur`	number (px)
`line-dasharray`	number[]
`line-gap-width`	number (px)
`line-gradient`	expression
`border-width`	number (px)
`border-color`	string (CSS color)
`border-opacity`	number (0 - 1)

const feature = Radar.ui.addPolyline('iyeulAveaclCuVfw...', {
  precision: 6, /* encoded polyline precision */
  id: 'line-id-1',
  properties: {
    name: 'My line',
  },
  paint: {
    'line-color': 'blue',
    'line-opacity': 0.4,
    'line-width': 6,
    'border-width': 2,
    'border-color': '#FFFFFF',
  },
});

Examples

Fit map to markers

Use the map.fitToMarkers() function to center and zoom the map to encompass all the markers on the map. It accepts FlyToOptions as an optional argument. In the example below, clicking the map will place a new marker, and refit the map so all markers are visible. Clicking a marker will remove it.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="https://js.radar.com/v4.5.3/radar.css" rel="stylesheet">
    <script src="https://js.radar.com/v4.5.3/radar.min.js"></script>
  </head>

  <body>
    <div id="map" style="width: 100%; height: 400px;" />

    <script type="text/javascript">
      Radar.initialize('prj_live_pk_...');

      // create map
      const map = Radar.ui.map({
        container: 'map',
      });

      // add marker on map click
      map.on('click', (e) => {
        const { lng, lat } = e.lngLat;

        // create marker from click location
        const marker = Radar.ui.marker()
          .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) => {
          marker.remove();
          map.fitToMarkers({ maxZoom: 14, padding: 80 }); // refit after marker removed
        });
      });
    </script>
  </body>
</html>

Add a custom icon

Add a Marker with a custom image to the map by specifying the image URL.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="https://js.radar.com/v4.5.3/radar.css" rel="stylesheet">
    <script src="https://js.radar.com/v4.5.3/radar.min.js"></script>
  </head>

  <body>
    <div id="map" style="width: 100%; height: 400px;" />

    <script type="text/javascript">
      Radar.initialize('prj_live_pk_...');

      // create map
      const map = Radar.ui.map({
        container: 'map',
      });

      map.on('load', () => {
        const { lng, lat } = map.getCenter();

        // add marker to map at map center
        Radar.ui.marker({
          url: 'https://static.radar.com/images/logo.png',
          width: '48px',
          height: '48px',
          popup: {
            text: 'Radar HQ',
          },
        })
        .setLngLat([lng, lat])
        .addTo(map);
      });
    </script>
  </body>
</html>

Display a popup with customized HTML.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="https://js.radar.com/v4.5.3/radar.css" rel="stylesheet">
    <script src="https://js.radar.com/v4.5.3/radar.min.js"></script>
  </head>

  <body>
    <div id="map" style="width: 100%; height: 400px;" />

    <div id="custom-popup" style="visibility: hidden; text-align: center;">
      <h3>Union Square</h3>
      <img width="100" src="https://images.ctfassets.net/f2vbu16fzuly/7BUSW7MAtT2abUQY8U3Ri6/11fb8b92fd24c326bfd5da3064d67666/union_square.jpg?w=600" />
    </div>

    <script type="text/javascript">
      Radar.initialize('prj_live_pk_');

      // create map
      const map = Radar.ui.map({
        container: 'map',
        center: [-73.990550, 40.735225],
        zoom: 16,
      });

      map.on('load', () => {

        // Create a marker with a custom popup using HTML
        Radar.ui.marker({
          popup: {
            html: `
              <div style="text-align: center;">
                <h3>The Roosevelt Building</h3>
                <img width="100" src="https://images.ctfassets.net/f2vbu16fzuly/5VZ6BEW5Ju6kL4OeooR2YG/4e694ad24b8d57c6b9958de79976d89e/Screenshot_2024-07-15_at_9.43.45_AM.png?w=400" />
              </div>
            `,
          },
        })
        .setLngLat([-73.9910078, 40.7342465])
        .addTo(map);

        // Create a marker with a custom popup using a DOM element
        const element = document.getElementById('custom-popup').cloneNode(true /* deep */);
        element.style.visibility = 'visible';
        element.id = 'custom-popup-1';

        Radar.ui.marker({
          popup: {
            element,
          },
        })
        .setLngLat([-73.990389, 40.735862])
        .addTo(map);
      });
    </script>
  </body>
</html>

Display a route

Routes can be plotted on a Radar Map as a GeoJSON LineString, or an encoded polyline, both of which are formats provided by Radar’s routing APIs. Polylines can be added to the map with the map.addPolyline function, and accepts an optional precision value (defaults to 6). LineString’s use the map.addLine function. Lines can be styled according to the MapLibre Line Layer properties.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="https://js.radar.com/v4.5.3/radar.css" rel="stylesheet">
    <script src="https://js.radar.com/v4.5.3/radar.min.js"></script>
  </head>

  <body>
    <div id="map" style="width: 100%; height: 400px;" />

    <script type="text/javascript">
      Radar.initialize('prj_live_pk_');

      // create map
      const map = Radar.ui.map({
        container: 'map',
      });

      map.on('load', () => {

        // create new feature from polyline
        const 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';
        const polylineFeature = map.addPolyline(polyline, {
          id: 'polyline',
          precision: 6,
          properties: {
            name: 'Polyline Feature',
          },
          paint: {
            'line-color': 'red',
          },
        });

        // create new feature from GeoJSON LineString
        const lineString = {
          type: 'Feature',
          id: 'line-string',
          properties: {
            name: 'LineString Feature',
          },
          geometry: {
            type: 'LineString',
            coordinates: [[-73.953506,40.721755],[-73.951791,40.723347],[-73.951716,40.723417],[-73.951643,40.723488],[-73.951603,40.723411],[-73.950675,40.721777],[-73.950651,40.721704],[-73.95074,40.721652],[-73.952666,40.720491],[-73.952775,40.720422],[-73.952855,40.720376],[-73.953253,40.720001],[-73.953414,40.719851],[-73.953469,40.719798],[-73.953515,40.719755],[-73.954007,40.719296],[-73.954061,40.719246],[-73.954116,40.719195],[-73.954598,40.718747],[-73.954655,40.718694],[-73.954708,40.718645],[-73.955193,40.718194],[-73.955251,40.71814],[-73.955301,40.718094],[-73.955461,40.717945],[-73.955788,40.717641],[-73.955844,40.717589],[-73.955895,40.717541],[-73.956384,40.717083],[-73.956439,40.717032],[-73.956489,40.716986],[-73.956978,40.716532],[-73.957031,40.716483],[-73.957081,40.716436],[-73.957573,40.715977],[-73.957626,40.715927],[-73.957679,40.715878],[-73.958176,40.715433],[-73.958241,40.715374],[-73.958285,40.715332],[-73.958466,40.715155],[-73.958728,40.7149],[-73.958802,40.714833],[-73.958882,40.714764],[-73.959293,40.714395],[-73.959493,40.714211],[-73.959743,40.713963],[-73.959808,40.713891],[-73.959863,40.71383],[-73.960131,40.713397],[-73.960163,40.713345],[-73.960192,40.713299],[-73.960282,40.713157],[-73.96052,40.712779],[-73.960561,40.712714],[-73.960597,40.712658],[-73.96099,40.712031],[-73.961029,40.711969],[-73.961062,40.711916],[-73.96138,40.711414],[-73.961414,40.71136],[-73.961452,40.7113],[-73.961758,40.71082],[-73.961792,40.710767],[-73.961821,40.710718],[-73.961824,40.710714],[-73.961765,40.710703],[-73.961111,40.710502],[-73.961079,40.710494],[-73.961061,40.710491],[-73.961039,40.710488],[-73.96102,40.710486],[-73.961,40.710487],[-73.960989,40.710488],[-73.960978,40.710488],[-73.960968,40.710486],[-73.960961,40.71048],[-73.960937,40.710466],[-73.96094,40.710453],[-73.960946,40.710441],[-73.960954,40.710431],[-73.960964,40.710423],[-73.960975,40.710419],[-73.960988,40.710418],[-73.961001,40.71042],[-73.96106,40.710434],[-73.961115,40.71045],[-73.961611,40.710603],[-73.963514,40.711182],[-73.96506,40.711654],[-73.966925,40.712193],[-73.967125,40.712135],[-73.967169,40.712149],[-73.972137,40.713651],[-73.976941,40.715098],[-73.978385,40.715543],[-73.978471,40.7155],[-73.984214,40.71723],[-73.985504,40.717633],[-73.985582,40.717658],[-73.985774,40.717726],[-73.985792,40.717685],[-73.985824,40.717616],[-73.985842,40.717574],[-73.985868,40.717522],[-73.985894,40.717468],[-73.986194,40.716898],[-73.986627,40.716045],[-73.986633,40.716038],[-73.986666,40.716002],[-73.986694,40.715975],[-73.986731,40.715929],[-73.986782,40.715857],[-73.986829,40.715771],[-73.986932,40.71557],[-73.987005,40.715414],[-73.987074,40.715241],[-73.987085,40.715188],[-73.987103,40.715105],[-73.987125,40.715017],[-73.987148,40.714837],[-73.987165,40.714622],[-73.987167,40.714467],[-73.987168,40.714397],[-73.98717,40.714317],[-73.987169,40.714234],[-73.987167,40.714169],[-73.987154,40.714088],[-73.987093,40.713709],[-73.987081,40.713634],[-73.987071,40.713574],[-73.986981,40.712999],[-73.986967,40.712909],[-73.986952,40.712813],[-73.986942,40.71275],[-73.986878,40.712347],[-73.986858,40.712217],[-73.98684,40.712107],[-73.986765,40.71163],[-73.98675,40.711533],[-73.986737,40.71145],[-73.986673,40.711044],[-73.986666,40.710997],[-73.986618,40.710698],[-73.986627,40.710656],[-73.98664,40.710618],[-73.986655,40.710585],[-73.986658,40.710579],[-73.986666,40.710565],[-73.986674,40.710549],[-73.986708,40.710482],[-73.986733,40.710435],[-73.986746,40.710409],[-73.986804,40.710402],[-73.987234,40.710354],[-73.987287,40.710349],[-73.987561,40.710319],[-73.987612,40.710313],[-73.987813,40.710291],[-73.988185,40.710248],[-73.988264,40.710239],[-73.988354,40.710228],[-73.988706,40.710188],[-73.989152,40.710138],[-73.989714,40.710071],[-73.989831,40.710054],[-73.990709,40.709927],[-73.991667,40.709783],[-73.991848,40.709756],[-73.992033,40.70973],[-73.992299,40.709691],[-73.99364,40.70949],[-73.993857,40.709467],[-73.99388,40.709464],[-73.994156,40.709431],[-73.994406,40.709398],[-73.995021,40.709314],[-73.99588,40.709189],[-73.995992,40.709138],[-73.996245,40.709099],[-73.996487,40.709064],[-73.996754,40.709027],[-73.997374,40.708951],[-73.997825,40.708859],[-73.998223,40.708741],[-73.998523,40.70864],[-73.998925,40.708485],[-73.999061,40.708409],[-73.999288,40.708282],[-73.999604,40.708037],[-73.999725,40.707965],[-73.999766,40.707942],[-73.999888,40.707874],[-73.999994,40.707817],[-74.000044,40.707791],[-74.000102,40.707762],[-74.000136,40.707745],[-74.000832,40.707382],[-74.000891,40.707352],[-74.001298,40.70714],[-74.001326,40.707125],[-74.002165,40.706675],[-74.002182,40.706665],[-74.002212,40.706648],[-74.00224,40.706632],[-74.002268,40.706615],[-74.002311,40.706591],[-74.002553,40.706451],[-74.002939,40.706223],[-74.002983,40.706197],[-74.003016,40.706177],[-74.00305,40.706157],[-74.003105,40.706125],[-74.00312,40.706116],[-74.003395,40.705944],[-74.003459,40.705908],[-74.003521,40.705878],[-74.003601,40.705854],[-74.003691,40.705823],[-74.003755,40.705791],[-74.003873,40.705717],[-74.004418,40.705367],[-74.004599,40.70525],[-74.004773,40.705138],[-74.006118,40.704274],[-74.006291,40.704161],[-74.006921,40.703763],[-74.006938,40.703752],[-74.00719,40.703598],[-74.007215,40.703583],[-74.007244,40.703565],[-74.007408,40.703468],[-74.00747,40.703431],[-74.007499,40.703414],[-74.007529,40.703396],[-74.007624,40.70334],[-74.007653,40.703313],[-74.007665,40.703294],[-74.007679,40.70326],[-74.007686,40.703232],[-74.007698,40.703159],[-74.007702,40.70314],[-74.007717,40.703076],[-74.007722,40.703042],[-74.007725,40.703025],[-74.007733,40.702983],[-74.007751,40.702948],[-74.007771,40.70292],[-74.007794,40.702898],[-74.007825,40.702878],[-74.008149,40.702681],[-74.009182,40.70206],[-74.009223,40.702037],[-74.009259,40.702021],[-74.009297,40.702005],[-74.009393,40.70197],[-74.009569,40.701907],[-74.009599,40.701898],[-74.009648,40.701887],[-74.009716,40.701874],[-74.00976,40.701863],[-74.010014,40.701792],[-74.010073,40.701776],[-74.010233,40.701727],[-74.010275,40.701716],[-74.010482,40.701664],[-74.011082,40.701527],[-74.011111,40.701519],[-74.011172,40.7015],[-74.011211,40.70149],[-74.011472,40.701429],[-74.011638,40.70139],[-74.011826,40.701346],[-74.012132,40.701275],[-74.012268,40.701246],[-74.012284,40.701242],[-74.012302,40.701239],[-74.012318,40.701238],[-74.012338,40.701241],[-74.012352,40.70125],[-74.01236,40.70126],[-74.012377,40.7013],[-74.012394,40.701341],[-74.012401,40.701359],[-74.012407,40.701372],[-74.012413,40.701383],[-74.01242,40.701393],[-74.012428,40.701403],[-74.012437,40.701411],[-74.012446,40.701417],[-74.012456,40.701422],[-74.012466,40.701426],[-74.01248,40.70143],[-74.012499,40.701432],[-74.012545,40.701439],[-74.012562,40.701444],[-74.012578,40.70145],[-74.012594,40.701457],[-74.012609,40.701465],[-74.012622,40.701473],[-74.012633,40.701483],[-74.012647,40.701498],[-74.012657,40.701518],[-74.012668,40.701543],[-74.012682,40.701578],[-74.01271,40.701658],[-74.012722,40.701684],[-74.012739,40.701702],[-74.012772,40.701725],[-74.0128,40.701755],[-74.012819,40.70179],[-74.012885,40.702055],[-74.012906,40.702153],[-74.012919,40.702189],[-74.012926,40.702207],[-74.012937,40.702225],[-74.012951,40.702242],[-74.012969,40.702256],[-74.012989,40.702267],[-74.013021,40.702277],[-74.013051,40.70228],[-74.013593,40.702258],[-74.013676,40.70225],[-74.013745,40.702243],[-74.013804,40.702239],[-74.013877,40.702234],[-74.013899,40.702235],[-74.013922,40.702238],[-74.013941,40.702245],[-74.013959,40.702252],[-74.013975,40.702261],[-74.01399,40.702272],[-74.014011,40.70229],[-74.014045,40.702331],[-74.014078,40.702361],[-74.01412,40.70239],[-74.014171,40.702422],[-74.014233,40.702453],[-74.014262,40.702466],[-74.014306,40.702487],[-74.014365,40.702518],[-74.014424,40.702552],[-74.014488,40.702598],[-74.014546,40.702644],[-74.014604,40.702699],[-74.014649,40.702744],[-74.014682,40.702783],[-74.014704,40.702816],[-74.014723,40.70285],[-74.014737,40.702882],[-74.014751,40.702924],[-74.014762,40.70297],[-74.01477,40.703027],[-74.014776,40.703089],[-74.014778,40.703141],[-74.01477,40.703192],[-74.014762,40.703238],[-74.014754,40.703271],[-74.014744,40.703313],[-74.014733,40.703353],[-74.014717,40.703411],[-74.014699,40.703466],[-74.014682,40.703512],[-74.014668,40.703556],[-74.014659,40.70359],[-74.014653,40.703623],[-74.014652,40.703654],[-74.014651,40.703682],[-74.014655,40.703707],[-74.014661,40.703731],[-74.014675,40.703762],[-74.014686,40.70379],[-74.014694,40.703813],[-74.014698,40.703835],[-74.014698,40.703863],[-74.014691,40.703892],[-74.014686,40.703917],[-74.014675,40.703947],[-74.014659,40.703979],[-74.014652,40.704008],[-74.014651,40.704028],[-74.014663,40.704105],[-74.014673,40.704136],[-74.014688,40.704183],[-74.014712,40.704245],[-74.014736,40.704289],[-74.014765,40.704335],[-74.014794,40.70437],[-74.014839,40.704409],[-74.014889,40.704443],[-74.014937,40.70447],[-74.014984,40.704494],[-74.015046,40.704524],[-74.015141,40.704558],[-74.015196,40.704572],[-74.015262,40.704586],[-74.01532,40.704596],[-74.015384,40.704602],[-74.015463,40.704606],[-74.015543,40.704607],[-74.015616,40.70461],[-74.015665,40.704613],[-74.015751,40.704629],[-74.015836,40.70464],[-74.015892,40.704646],[-74.015934,40.704648],[-74.015974,40.704646],[-74.016019,40.704641],[-74.016087,40.704627],[-74.016148,40.704617],[-74.016196,40.704612],[-74.016245,40.70461],[-74.016288,40.704612],[-74.016326,40.704616],[-74.016364,40.704624],[-74.016403,40.70463],[-74.016449,40.704633],[-74.016502,40.704634],[-74.016577,40.704633],[-74.01678,40.704629],[-74.016812,40.70463],[-74.016848,40.704631],[-74.017007,40.704641],[-74.017029,40.704647],[-74.01705,40.704655],[-74.017068,40.704668],[-74.017081,40.704684],[-74.017087,40.704699],[-74.017086,40.704715],[-74.017079,40.704737],[-74.01706,40.704785],[-74.017036,40.704843],[-74.017013,40.7049],[-74.017,40.704954],[-74.016995,40.704975],[-74.016989,40.704993],[-74.016907,40.705196],[-74.016741,40.705627],[-74.016725,40.705667],[-74.016658,40.705837],[-74.016614,40.705947],[-74.016467,40.70633],[-74.016463,40.706345],[-74.016459,40.706359],[-74.016427,40.706488],[-74.01642,40.706517],[-74.016407,40.706569],[-74.016389,40.706632],[-74.016372,40.70668],[-74.01636,40.706716],[-74.016257,40.706988],[-74.016224,40.70706],[-74.016177,40.707146],[-74.016104,40.707272],[-74.016071,40.707341],[-74.015976,40.707593],[-74.015944,40.707674],[-74.015941,40.707682],[-74.015933,40.707704],[-74.015922,40.70773],[-74.01592,40.707734],[-74.015897,40.707797],[-74.015873,40.707859],[-74.015865,40.70788],[-74.015861,40.70789],[-74.01584,40.707947],[-74.015436,40.709038],[-74.015357,40.709272],[-74.015322,40.709406],[-74.015258,40.709668],[-74.015242,40.709731],[-74.015238,40.709752],[-74.015229,40.709787],[-74.015209,40.709839],[-74.015281,40.709849],[-74.015342,40.70986],[-74.015803,40.709961],[-74.015821,40.709965],[-74.016244,40.710061],[-74.016374,40.71009],[-74.016512,40.710121],[-74.016953,40.71022],[-74.017489,40.710341],[-74.017525,40.71035],[-74.017538,40.710355],[-74.017561,40.710364],[-74.017544,40.710384],[-74.017537,40.710406],[-74.017541,40.710429],[-74.017554,40.71045],[-74.017576,40.710466],[-74.017604,40.710475],[-74.017634,40.710476],[-74.017663,40.71047],[-74.017687,40.710457],[-74.017704,40.710439],[-74.017706,40.710434]],
          },
        };
        const lineStringFeature = map.addLine(lineString);

        // create popup when clicking on line
        [polylineFeature, lineStringFeature].forEach((radarFeature) => {
          radarFeature.on('click', ({ feature, originalEvent: event }) => {
            Radar.ui.popup({
              text: feature.properties.name, // popup text from feature.properties
            })
            .setLngLat([event.lngLat.lng, event.lngLat.lat])
            .addTo(map);
          });
        });

        // fit the map bounds to the features
        map.fitToFeatures({ padding: 40 });
      });
    </script>
  </body>
</html>

Display a polygon

Polygons or complex shapes can be drawn on a Radar Map by providing a GeoJSON Polygon or MultiPolygon feature to the map.addPolygon function. Polygon features can be styled according to the polygon options highlighted above.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="https://js.radar.com/v4.5.3/radar.css" rel="stylesheet">
    <script src="https://js.radar.com/v4.5.3/radar.min.js"></script>
  </head>

  <body>
    <div id="map" style="width: 100%; height: 400px;" />

    <script type="text/javascript">
      Radar.initialize('prj_live_pk_');

      // create map
      const map = Radar.ui.map({
        container: 'map',
      });

      map.on('load', () => {

        // create new feature from GeoJSON Feature
        const geojson = {
          type: 'Feature',
          id: 1,
          properties: {
            name: 'Central Park',
          },
          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 feature = map.addPolygon(geojson)

        feature.on('click', ({ feature, originalEvent: event }) => {
          Radar.ui.popup({
            text: feature.properties.name,
          })
          .setLngLat([event.lngLat.lng, event.lngLat.lat])
          .addTo(map);
        });

        // fit the map bounds to the features
        map.fitToFeatures({ padding: 40 });
      });
    </script>
  </body>
</html>

Display a globe

Display a Radar Map with an interactive globe projection. Only available on MapLibre v5 and above.

<!DOCTYPE html>
<head>
  <meta charset='utf-8'>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://js.radar.com/v4.5.3/radar.css" rel="stylesheet">
  <script src="https://js.radar.com/v4.5.3/radar.min.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    html,
    body,
    #map {
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>

    // create map
    const map = new Radar.ui.map({
      container: 'map',
      style: 'radar-default-v1',
      zoom: 2,
      minZoom: 0, // allow globe to zoom out
      center: [-73.9910078, 40.7342465],
    });

    // set projection on load
    map.on('style.load', () => {
      map.setProjection({
        type: 'globe', // set projection to globe
      });
    });
  </script>
</body>
</html>

Change map language

The map display language can be changed by setting the language option to the ISO language code (en), or the browser’s current setting from navigator.language. You can also set language: "local" to use the device language by default.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="https://js.radar.com/v4.5.3/radar.css" rel="stylesheet">
    <script src="https://js.radar.com/v4.5.3/radar.min.js"></script>
  </head>

  <body>
    <div id="map" style="width: 100%; height: 400px;" />

    <script type="text/javascript">
      Radar.initialize('prj_live_pk_...');

      // create map
      const map = Radar.ui.map({
        container: 'map',
        language: 'local',
      });

    </script>
  </body>
</html>

Compatibility

Radar Maps are built using the Mapbox Vector Tile (MVT) and TileJSON standards, which means they can be used with any SDK that supports these protocols. Below are some alternative libraries that can be used to display Radar Maps.

MapLibre GL JS

The Radar SDK uses the MapLibre GL JS library, which offers some usability enhancements when creating maps. If you want more low-level control over the map behavior, or are migrating from a Mapbox GL JS implementation, you can use the MapLibre library directly. To use a Radar Map with MapLibre, you can use the following Radar URL as the style URL.

https://api.radar.io/maps/styles/radar-default-v1?publishableKey=prj_live_pk_...

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel='stylesheet' href='https://unpkg.com/maplibre-gl@4.5.1/dist/maplibre-gl.css' />
    <script src='https://unpkg.com/maplibre-gl@4.5.1/dist/maplibre-gl.js'></script>
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      const map = new maplibregl.Map({
        container: 'map',
        style: 'https://api.radar.io/maps/styles/radar-default-v1?publishableKey=prj_live_pk_...', // Radar style URL
        center: [-122.65, 45.52],
        zoom: 9,
      });
    </script>
  </body>
</html>

Leaflet

Radar Maps can be used as a base map for Leaflet through the maplibre-gl-leaflet library. It uses the same style URL format as in the MapLibre example above.

<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body, #map {
        width: 100%;
        height: 100%;
        margin: 0;
      }
    </style>

    <!-- Leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>

    <!-- Maplibre GL -->
    <link href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" rel='stylesheet' />
    <script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>

    <!-- Leaflet-Maplibre-GL -->
    <script src="https://unpkg.com/@maplibre/maplibre-gl-leaflet@0.0.20/leaflet-maplibre-gl.js"></script>
  </head>

  <body>
    <div id="map"></div>
    <script>
      var map = L.map('map').setView([38.912753, -77.032194], 15);

      L.marker([38.912753, -77.032194])
        .bindPopup("Hello from <b>Leaflet GL</b>!")
        .addTo(map)
        .openPopup();

      var gl = L.maplibreGL({
        style: 'https://api.radar.io/maps/styles/radar-default-v1?publishableKey=prj_live_pk_...', // Radar style URL
      }).addTo(map);
    </script>
  </body>
</html>

iOS

Radar Maps are compatible with MapLibre Native for iOS. For more info, see the displaying Radar Maps on iOS tutorial.

Android

Radar Maps are compatible with MapLibre Native for Android. For more info, see the displaying Radar Maps on Android tutorial.

React Native

Radar’s React Native SDK has built-in support for displaying Radar Maps. See the displaying Radar Maps with React Native tutorial for more info.

Flutter

Radar Maps can be used in a flutter application with flutter-maplibre-gl or flutter_map. See the displaying Radar Maps with Flutter tutorial for more info.

Google Maps

To use Radar Maps with your existing Google Maps implementation, see our Migration SDK for more details.

Coverage

Radar map data comes from OpenStreetMap. The following table describes data coverage for maps, by country, for consumer use cases (e.g., store locators) and logistics use cases (e.g., ride sharing, delivery).

Legend

Icon	Description
⬤	Great data quality and availability
◐	Good data quality and availability
◯	Approximate data quality and availability

Coverage

	Maps
🇺🇸 US (consumer)	⬤
🇺🇸 US (logistics)	⬤
🇨🇦 CA (consumer)	⬤
🇨🇦 CA (logistics)	⬤
🇬🇧 UK (consumer)	⬤
🇬🇧 UK (logistics)	⬤
🌎 Other (consumer)	⬤
🌎 Other (logistics)	◐

Support

Have questions? We’re here to help! Contact us at radar.com/support.

Home

Geofencing Platform

Maps Platform

SDK Reference

API

Tutorials

Waypoint

FAQs

​How it works

​Getting Started

​With npm or yarn

​With HTML

​Create a map

​Configuration

​Map

​Functions

​Styles

​Custom styles

​Marker

​Popup

​Features

​Polygon and MultiPolygon

​Line and PolyLine

​Examples

​Fit map to markers

​Add a custom icon

​Display a custom popup

​Display a route

​Display a polygon

​Display a globe

​Change map language

​Compatibility

​MapLibre GL JS

​Leaflet

​iOS

​Android

​React Native

​Flutter

​Google Maps

​Coverage

​Legend

​Coverage

​Support

How it works

Getting Started

With npm or yarn

With HTML

Create a map

Configuration

Map

Functions

Styles

Custom styles

Marker

Popup

Features

Polygon and MultiPolygon

Line and PolyLine

Examples

Fit map to markers

Add a custom icon

Display a custom popup

Display a route

Display a polygon

Display a globe

Change map language

Compatibility

MapLibre GL JS

Leaflet

iOS

Android

React Native

Flutter

Google Maps

Coverage

Legend

Coverage

Support