> ## Documentation Index
> Fetch the complete documentation index at: https://docs.radar.com/llms.txt
> Use this file to discover all available pages before exploring further.
# 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](https://dashboard.radar.com/maps/maps-explorer/maps) in the dashboard, or check out a full-page [maps demo](https://radar.com/demo/maps) and [store locator demo](https://radar.com/demo/locator).
## 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](https://maplibre.org) library. See their [docs](https://maplibre.org/maplibre-gl-js/docs/API/) for more customization info.
## Getting Started
First, [sign up](https://radar.com/signup) for Radar and get an API key.
Then add the Radar SDK to your application.
### With npm or yarn
Install the core SDK along with the maps plugin and MapLibre GL JS:
```sh theme={null}
npm install radar-sdk-js @radarlabs/plugin-maps maplibre-gl
```
Then import and register the maps plugin in your project:
```javascript theme={null}
import Radar from 'radar-sdk-js';
import { createMapsPlugin } from '@radarlabs/plugin-maps';
import '@radarlabs/plugin-maps/dist/radar-maps.css';
Radar.registerPlugin(createMapsPlugin());
// initialize with your test or live publishable key
Radar.initialize('prj_test_pk_...', { /* map config options */ });
```
Note: The maps plugin has a peer dependency on [maplibre-gl](https://github.com/maplibre/maplibre-gl-js).
### With HTML
Add the core SDK and maps plugin scripts to your `html` file:
```html theme={null}
```
The maps plugin CDN bundle auto-registers with the core SDK when loaded.
Then initialize the Radar SDK:
```html theme={null}
```
### 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 HTML theme={null}
```
```javascript React theme={null}
import React from 'react';
import Radar from 'radar-sdk-js';
import { createMapsPlugin } from '@radarlabs/plugin-maps';
import '@radarlabs/plugin-maps/dist/radar-maps.css';
Radar.registerPlugin(createMapsPlugin());
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({ popup: { text: 'Radar HQ' } })
.setLngLat([-73.9910078, 40.7342465])
.addTo(map);
}
render() {
return (
);
}
};
export default RadarMap;
```
## Configuration
### Map
You can configure a map with any MapLibre [MapOptions](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/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](/maps/maps#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](/api#ip-geocode). |
| `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) | The display language for map. Can be any 2-letter [ISO Code](https://en.wikipedia.org/wiki/List_of_ISO_639_language_codes), or `local` to use the device's specified language. Defaults to `en-US` if none is provided. |
```javascript theme={null}
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](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapEventType/) | 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\ Feature, polygonOptions | RadarMapFeature | Add a new polygon [Feature](/maps/maps#polygon-and-multipolygon) to the map. |
| `addLine` | GeoJSON\ Feature, lineOptions | RadarMapFeature | Add a new line [Feature](/maps/maps#line-and-polyline) to the map. |
| `addPolyline` | encodedPolyline, polylineOptions | RadarMapFeature | Accepts an encoded polyline and converts it to a line feature. Defaults to six decimals precision. |
```javascript theme={null}
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](/tutorials/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](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MarkerOptions/), 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](/tutorials/create-a-custom-map-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. |
```javascript theme={null}
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](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/PopupOptions/), 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. |
```javascript theme={null}
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](https://datatracker.ietf.org/doc/html/rfc7946#section-3.2) (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) |
```javascript theme={null}
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 = map.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](https://maplibre.org/maplibre-gl-js/docs/examples/line-gradient/) |
| `border-width` | number (px) |
| `border-color` | string (CSS color) |
| `border-opacity` | number (0 - 1) |
```javascript theme={null}
const feature = map.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](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/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 HTML theme={null}
```
```javascript React theme={null}
import React from 'react';
import Radar from 'radar-sdk-js';
import { createMapsPlugin } from '@radarlabs/plugin-maps';
import '@radarlabs/plugin-maps/dist/radar-maps.css';
Radar.registerPlugin(createMapsPlugin());
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 (
);
}
};
export default RadarMap;
```
### Add a custom icon
Add a `Marker` with a custom image to the map by specifying the image URL.
```html HTML theme={null}
```
```javascript React theme={null}
import React from 'react';
import Radar from 'radar-sdk-js';
import { createMapsPlugin } from '@radarlabs/plugin-maps';
import '@radarlabs/plugin-maps/dist/radar-maps.css';
Radar.registerPlugin(createMapsPlugin());
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://static.radar.com/images/logo.png',
width: '48px',
height: '48px',
popup: {
text: 'Radar HQ',
},
})
.setLngLat([lng, lat])
.addTo(map);
});
}
render() {
return (
);
}
};
export default RadarMap;
```
### Display a custom popup
Display a popup with customized HTML.
```html HTML theme={null}
Union Square
```
```javascript React theme={null}
import React from 'react';
import Radar from 'radar-sdk-js';
import { createMapsPlugin } from '@radarlabs/plugin-maps';
import '@radarlabs/plugin-maps/dist/radar-maps.css';
Radar.registerPlugin(createMapsPlugin());
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: `
The Roosevelt Building
`,
},
})
.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 (
Union Square
);
}
};
export default RadarMap;
```
### 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](/maps/routing).
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](https://maplibre.org/maplibre-style-spec/layers/#line).
```html HTML theme={null}
```
```javascript React theme={null}
import React from 'react';
import Radar from 'radar-sdk-js';
import { createMapsPlugin } from '@radarlabs/plugin-maps';
import '@radarlabs/plugin-maps/dist/radar-maps.css';
Radar.registerPlugin(createMapsPlugin());
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 (
);
}
};
export default RadarMap;
```
### 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.
```html HTML theme={null}
```
```javascript React theme={null}
import React from 'react';
import Radar from 'radar-sdk-js';
import { createMapsPlugin } from '@radarlabs/plugin-maps';
import '@radarlabs/plugin-maps/dist/radar-maps.css';
Radar.registerPlugin(createMapsPlugin());
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 (
);
}
};
export default RadarMap;
```
### Display a globe
Display a Radar Map with an interactive globe projection.
Only available on MapLibre v5 and above.
```html HTML theme={null}
| 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](/tutorials/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](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MarkerOptions/), 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](/tutorials/create-a-custom-map-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. |
```javascript theme={null}
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](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/PopupOptions/), 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. |
```javascript theme={null}
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](https://datatracker.ietf.org/doc/html/rfc7946#section-3.2) (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) |
```javascript theme={null}
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 = map.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](https://maplibre.org/maplibre-gl-js/docs/examples/line-gradient/) |
| `border-width` | number (px) |
| `border-color` | string (CSS color) |
| `border-opacity` | number (0 - 1) |
```javascript theme={null}
const feature = map.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](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/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.
