Skip to main content

Maps

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 keyRadar.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.4.8/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.4.8/radar.css" rel="stylesheet"></link>    <script src="https://js.radar.com/v4.4.8/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:

NameDefaultPossible valuesDescription
containernone (required)string | HTMLElementThe 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.
styleradar-default-v1radar-default-v1, radar-light-v1, radar-dark-v1The style of the map. See the Styles section below for more details.
centernone (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.
zoom11numberThe zoom level of the map, a number between 0 (fully zoomed out) and 23 (fully zoomed in).
languagenonestring (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

FunctionArgumentsReturn valueDescription
onMapLibre eventvoidRegister a callback to fire on a map event.
getMarkersnoneRadarMarker[]Returns an array of all markers currently associated with the map.
fitToMarkersfitBoundsOptions, RadarMarker[] (optional)voidFit the map zoom and bounds to all markers on the map. Optionally takes a list of markers to fit (defaults to all markers).
clearMarkersnonevoidRemove all markers from the map.
getFeaturesnoneRadarMapFeature[]Returns an array of all features currently associated with the map.
fitToFeaturesfitBoundsOptionsvoidFit the map zoom and bounds to all features on the map.
clearFeaturesnonevoidRemove all features from the map.
addPolygonGeoJSON<Polygon | MultiPolygon> Feature, polygonOptionsRadarMapFeatureAdd a new polygon Feature to the map.
addLineGeoJSON<LineString> Feature, lineOptionsRadarMapFeatureAdd a new line Feature to the map.
addPolylineencodedPolyline, polylineOptionsRadarMapFeatureAccepts 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:

StylePreviewDescription
radar-default-v1Radar'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-v1A light monochrome map style, useful for highlighting your own information or visualizations.
radar-dark-v1A dark monochrome map style, useful for highlighting your own information or visualizations in dark mode.

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.

StylePreviewDescription
CUSTOM_STYLE_IDCustom 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:

NameDefaultPossible valuesDescription
color#000257stringColor of the default marker image.
markernonestringID of a marker uploaded as part of a custom style
urlnonestringURL of image to use for the marker.
elementnoneHTMLElementDOM element to be used as the marker.
widthnonenumberSize for marker width in pixels.
heightnonenumberSize for marker height in pixels.
scale1numberScale used for marker size (if element is not provided).
popupnonePopupConfig 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);

Popup#

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:

NameDefaultPossible valuesDescription
textnonestringText to display inside popup.
htmlnonestringThe HTML string to be displayed inside the popup.
elementnoneHTMLElementThe DOM element to be used as the popup content.
const popup = Radar.ui.popup({  text: 'My popup.',}).setLngLat([-73.990550, 40.735225]).addTo(map);

Feature#

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.

PropertyPossible values
fill-colorstring (CSS color)
fill-opacitynumber (0 - 1)
border-widthnumber (px)
border-colorstring (CSS color)
border-opacitynumber (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.

PropertyPossible values
line-colorstring (CSS color)
line-widthnumber (px)
line-opacitynumber (0 - 1)
line-cap'butt' | 'round' | 'square'
line-offsetnumber (px)
line-blurnumber (px)
line-dasharraynumber[]
line-gap-widthnumber (px)
line-gradientexpression
border-widthnumber (px)
border-colorstring (CSS color)
border-opacitynumber (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.4.8/radar.css" rel="stylesheet">    <script src="https://js.radar.com/v4.4.8/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.4.8/radar.css" rel="stylesheet">    <script src="https://js.radar.com/v4.4.8/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://radar.com/static/image/logo.png',          width: '48px',          height: '48px',          popup: {            text: 'Radar HQ',          },        })        .setLngLat([lng, lat])        .addTo(map);      });    </script>  </body></html>

Display a custom popup#

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.4.8/radar.css" rel="stylesheet">    <script src="https://js.radar.com/v4.4.8/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.4.8/radar.css" rel="stylesheet">    <script src="https://js.radar.com/v4.4.8/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.4.8/radar.css" rel="stylesheet">    <script src="https://js.radar.com/v4.4.8/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>

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.4.8/radar.css" rel="stylesheet">    <script src="https://js.radar.com/v4.4.8/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.

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#

IconDescription
⬤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.