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 worksTo 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 StartedFirst, sign up for Radar and get an API key.
Then add the Radar SDK to your application.
#
With npm or yarnAdd 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 HTMLAdd 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 mapSpecify the HTML element where you want to render the map, by providing the element's ID, or the element object itself.
- HTML
- React
<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>
import React from 'react';import Radar from 'radar-sdk-js';
import 'radar-sdk-js/dist/radar.css';
class RadarMap extends React.Component { componentDidMount() { Radar.initialize('prj_live_pk_...');
// create a map const map = Radar.ui.map({ container: 'map', style: 'radar-default-v1', center: [-73.9911, 40.7342], // NYC zoom: 14, });
// add a marker to the map Radar.ui.marker({ text: 'Radar HQ' }) .setLngLat([-73.9910078, 40.7342465]) .addTo(map); }
render() { return ( <div id="map-container" style={{ width:' 100%', height: '100vh', position: 'absolute' }}> <div id="map" style={{ height: '100%', position: 'absolute', width: '100%' }} /> </div> ); }};
export default RadarMap;
#
Configuration#
MapYou 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 | 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',});
#
FunctionsThe 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
#
StylesRadar 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. |
#
Custom stylesYou 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. |
#
MarkerMarkers 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);
#
PopupPopups 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);
#
FeatureRadar 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 MultiPolygonPolygons 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 PolylineLines 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 markersUse 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.
- HTML
- React
<!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>
import React from 'react';import Radar from 'radar-sdk-js';
import 'radar-sdk-js/dist/radar.css';
class RadarMap extends React.Component { componentDidMount() { Radar.initialize('prj_live_pk_...');
// create a 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 }); }); }
render() { return ( <div id="map-container" style={{ width:' 100%', height: '100vh', position: 'absolute' }}> <div id="map" style={{ height: '100%', position: 'absolute', width: '100%' }} /> </div> ); }};
export default RadarMap;
#
Add a custom iconAdd a Marker
with a custom image to the map by specifying the image URL.
- HTML
- React
<!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>
import React from 'react';import Radar from 'radar-sdk-js';
import 'radar-sdk-js/dist/radar.css';
class RadarMap extends React.Component { componentDidMount() { 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); }); }
render() { return ( <div id="map-container" style={{ width:' 100%', height: '100vh', position: 'absolute' }}> <div id="map" style={{ height: '100%', position: 'absolute', width: '100%' }} /> </div> ); }};
export default RadarMap;
#
Display a custom popupDisplay a popup with customized HTML.
Union Square
- HTML
- React
<!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>
import React from 'react';import Radar from 'radar-sdk-js';
import 'radar-sdk-js/dist/radar.css';
class RadarMap extends React.Component { componentDidMount() { 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); }); }
render() { return ( <div id="map-container" style={{ width:' 100%', height: '100vh', position: 'absolute' }}> <div id="map" style={{ height: '100%', position: 'absolute', width: '100%' }} />
<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> </div> ); }};
export default RadarMap;
#
Display a routeRoutes 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.
- HTML
- React
<!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>
import React from 'react';import Radar from 'radar-sdk-js';
import 'radar-sdk-js/dist/radar.css';
class RadarMap extends React.Component { componentDidMount() { 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 }); }); }
render() { return ( <div id="map-container" style={{ width:' 100%', height: '100vh', position: 'absolute' }}> <div id="map" style={{ height: '100%', position: 'absolute', width: '100%' }} /> </div> ); }};
export default RadarMap;
#
Display a PolygonPolygons 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.
- HTML
- React
<!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>
import React from 'react';import Radar from 'radar-sdk-js';
import 'radar-sdk-js/dist/radar.css';
class RadarMap extends React.Component { componentDidMount() { 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 }); }); }
render() { return ( <div id="map-container" style={{ width:' 100%', height: '100vh', position: 'absolute' }}> <div id="map" style={{ height: '100%', position: 'absolute', width: '100%' }} /> </div> ); }};
export default RadarMap;
#
Change map languageThe 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>
#
CompatibilityRadar 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 JSThe 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>
#
LeafletRadar 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>
#
iOSRadar Maps are compatible with MapLibre Native for iOS.
For more info, see the displaying Radar Maps on iOS tutorial.
#
AndroidRadar Maps are compatible with MapLibre Native for Android.
For more info, see the displaying Radar Maps on Android tutorial.
#
React NativeRadar's React Native SDK has built-in support for displaying Radar Maps.
See the displaying Radar Maps with React Native tutorial for more info.
#
FlutterRadar 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.
#
CoverageRadar 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).
#
LegendIcon | Description |
---|---|
⬤ | Great data quality and availability |
◐ | Good data quality and availability |
◯ | Approximate data quality and availability |
#
CoverageMaps | |
---|---|
🇺🇸 US (consumer) | ⬤ |
🇺🇸 US (logistics) | ⬤ |
🇨🇦 CA (consumer) | ⬤ |
🇨🇦 CA (logistics) | ⬤ |
🇬🇧 UK (consumer) | ⬤ |
🇬🇧 UK (logistics) | ⬤ |
🌎 Other (consumer) | ⬤ |
🌎 Other (logistics) | ◐ |
#
SupportHave questions? We're here to help! Contact us at radar.com/support.