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.

Configuration#

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 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).

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.

Quickstart#

First, sign up for Radar and get an API key.

Then, get started with the sample code below.

Happy mapping!

JavaScript#

To create a simple web page with a map:

<!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.1.11/radar.css" rel="stylesheet">    <script src="https://js.radar.com/v4.1.11/radar.min.js"></script>  </head>
  <body>    <div id="map" style="width: 100%; height: 500px;" />
    <script type="text/javascript">      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: 11      });
      // add a marker to the map      const marker = Radar.ui.marker({ text: 'Radar HQ' })        .setLngLat([-73.9910078, 40.7342465])        .addTo(map);    </script>  </body></html>

React#

To create a React component with a map:

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

The SDK has a dependency on maplibre-gl.

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 = new 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={{ height: '100%', position: 'absolute', width: '100%' }}>        <div id="map" style={{ height: '100%', position: 'absolute', width: '100%' }} />      </div>    );  }};
export default RadarMap;

Vue#

To create a Vue component with a map:

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

The SDK has a dependency on maplibre-gl.

<template>  <div id="map-container">    <div id="map" ref="mapRef" />  </div></template>
<script>import Radar from 'radar-sdk-js';import { shallowRef, onMounted, onUnmounted, markRaw } from 'vue';
export default {  name: 'RadarMap',  setup () {    const mapRef = shallowRef(null);    const map = shallowRef(null);
    onMounted(() => {      Radar.initialize('prj_live_pk_...');
      // create a map      map.value = markRaw(Radar.ui.map({        container: mapRef.value,        style: 'radar-default-v1',        center: [-73.9911, 40.7342], // NYC        zoom: 11      }));
      // add a marker to the map      Radar.ui.Marker({ color: '#007aff' })        .setLngLat([-73.9911, 40.7342]) // Radar HQ        .addTo(map.value);    }),
    onUnmounted(() => {      map.value?.remove();    })
    return {      map, mapRef    };  }};</script>
<style>@import 'radar-sdk-js/dist/radar.css';
body {  margin: 0;  padding: 0;}
#map-container {  height: 100%;  position: absolute;  width: 100%;}
#map {  height: 100%;  position: absolute;  width: 100%;}</style>

React Native#

To create a React Native component with a map:

npm install --save react-native-radar @maplibre/maplibre-react-native

The SDK has a dependency on maplibre-react-native.

Next, complete any required platform-specific installation steps.

Finally, initialize the Radar SDK and add a <Map> component:

import { View } from 'react-native';import Radar, { Map } from 'react-native-radar';import MapLibreGL from '@maplibre/maplibre-react-native';
// NOTE: MapLibre requires setting their deprecated access token to nullMapLibreGL.setAccessToken(null);
Radar.initialize('prj_live_pk_...');
export const App = () => (  <View style={{ width: '100%', height: '95%' }}>    <Map />  </View>);

Optionally, add assets for a marker. You can download assets here.

To add a marker to the map and control the camera:

  const [cameraConfig, setCameraConfig] = useState({    triggerKey: Date.now(),    centerCoordinate: [-73.9911, 40.7342],    animationMode: 'flyTo',    animationDuration: 600,    zoomLevel: 12,  });
  const onRegionDidChange = (event) => {    // do something on region change  }
  const onSelect = (address) => {    // do something with selected address  }
  const pointsCollection = {    type: 'FeatureCollection',    features: [      {        type: 'Feature',        properties: {          _id: '123',        },        geometry: {          type: 'Point',          coordinates: [-73.9911, 40.7342]        }      }    ]  };     const onPress = (event) => {    // do something on press  }      return (    <View style={{ width: '100%', marginTop: '10%', height: '90%' }}>      <Map mapOptions={{        onRegionDidChange,      }}>        <MapLibreGL.Camera          {...cameraConfig}        />        <MapLibreGL.Images          images={{            icon: require('./assets/marker.png'),          }}        />        <MapLibreGL.ShapeSource          id="points"          shape={pointsCollection}          onPress={onPress}        >        <MapLibreGL.SymbolLayer            id="symbol"            style={{              iconImage: 'icon',              iconSize: [                'interpolate',                ['linear'],                ['zoom'],                0, 0.2, // adjust the icon size for zoom level 0                12, 0.4, // adjust the icon size for zoom level 12                22, 0.8, // adjust the icon size for zoom level 22              ],              iconAllowOverlap: true,            }}          />        </MapLibreGL.ShapeSource>      </Map>    </View>  );

iOS#

To create a map on iOS, add MapLibre Native to your Xcode project.

Then, add assets for the Radar logo and optionally for a marker. You can download assets here.

Finally, add a MapView to a ViewController with a Radar style URL that includes your publishable key:

import SwiftUIimport Mapbox // NOTE: MapLibre is imported as Mapbox
struct MapView: UIViewRepresentable {        func makeCoordinator() -> MapView.Coordinator {        Coordinator(self)    }        func makeUIView(context: Context) -> MGLMapView {        // create a map
        let style = "radar-default-v1"        let publishableKey = "prj_live_pk..."        let styleURL = URL(string: "https://api.radar.io/maps/styles/\(style)?publishableKey=\(publishableKey)")
        let mapView = MGLMapView(frame: .zero, styleURL: styleURL)        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]        mapView.logoView.isHidden = true
        mapView.setCenter(          CLLocationCoordinate2D(latitude: 40.7342, longitude: -73.9911),          zoomLevel: 11,          animated: false        )                // add the Radar logo
        let logoImageView = UIImageView(image: UIImage(named: "radar-logo"))        logoImageView.translatesAutoresizingMaskIntoConstraints = false        mapView.addSubview(logoImageView)
        NSLayoutConstraint.activate([            logoImageView.bottomAnchor.constraint(equalTo: mapView.safeAreaLayoutGuide.bottomAnchor, constant: -10),            logoImageView.leadingAnchor.constraint(equalTo: mapView.safeAreaLayoutGuide.leadingAnchor, constant: 10),            logoImageView.widthAnchor.constraint(equalToConstant: 74),            logoImageView.heightAnchor.constraint(equalToConstant: 26)        ])
        mapView.delegate = context.coordinator
        return mapView    }        func updateUIView(_ uiView: MGLMapView, context: Context) {
    }        // add a marker on map load
    class Coordinator: NSObject, MGLMapViewDelegate {        var control: MapView
        init(_ control: MapView) {            self.control = control        }
        func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {            addMarker(style: style, coordinate: CLLocationCoordinate2D(latitude: 40.7342, longitude: -73.9911))        }
        func addMarker(style: MGLStyle, coordinate: CLLocationCoordinate2D) {            let point = MGLPointAnnotation()            point.coordinate = coordinate
            let shapeSource = MGLShapeSource(identifier: "marker-source", shape: point, options: nil)
            let shapeLayer = MGLSymbolStyleLayer(identifier: "marker-style", source: shapeSource)
            if let image = UIImage(named: "default-marker") {                style.setImage(image, forName: "marker")            }
            shapeLayer.iconImageName = NSExpression(forConstantValue: "marker")
            style.addSource(shapeSource)            style.addLayer(shapeLayer)        }    }}

Android#

To create a map on Android, add MapLibre Native to the dependencies section of your app's build.gradle file:

dependencies {    implementation 'org.maplibre.gl:android-sdk:10.2.0'}

Import assets for the Radar logo and optionally for a marker. You can download assets here.

Then, add a MapView with the Radar logo to your layout:

<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity">
    <com.mapbox.mapboxsdk.maps.MapView        android:id="@+id/mapView"        android:layout_width="match_parent"        android:layout_height="match_parent"        />
    <ImageView        android:id="@+id/overlayImageView"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/radar_logo"        app:layout_constraintBottom_toBottomOf="@id/mapView"        app:layout_constraintStart_toStartOf="@id/mapView"        android:layout_marginBottom="10dp"        android:layout_marginStart="10dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

Finally, add a MapView in your Activity with a Radar style URL that includes your publishable key:

import android.os.Bundleimport android.view.Gravityimport android.view.LayoutInflaterimport androidx.appcompat.app.AppCompatActivityimport androidx.core.content.res.ResourcesCompatimport androidx.core.graphics.drawable.toBitmap
// NOTE: MapLibre is imported as Mapboximport com.mapbox.mapboxsdk.Mapboximport com.mapbox.mapboxsdk.annotations.IconFactoryimport com.mapbox.mapboxsdk.annotations.MarkerOptionsimport com.mapbox.mapboxsdk.camera.CameraPositionimport com.mapbox.mapboxsdk.geometry.LatLngimport com.mapbox.mapboxsdk.maps.MapViewimport com.mapbox.mapboxsdk.maps.MapboxMap
class MainActivity : AppCompatActivity() {
    private lateinit var mapView: MapView    private lateinit var mapboxMap: MapboxMap
    override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)
        // create a map
        val style = "radar-default-v1"        val publishableKey = "prj_live_pk_..."        val styleURL = "https://api.radar.io/maps/styles/$style?publishableKey=$publishableKey"
        Mapbox.getInstance(this)
        val inflater = LayoutInflater.from(this)        val rootView = inflater.inflate(R.layout.activity_main, null)        setContentView(rootView)
        mapView = rootView.findViewById(R.id.mapView)
        mapView.getMapAsync { map ->            mapboxMap = map
            // add the Radar logo
            map.uiSettings.isLogoEnabled = false
            map.uiSettings.attributionGravity = Gravity.RIGHT + Gravity.BOTTOM            map.uiSettings.setAttributionMargins(0, 0, 24, 24)
            map.setStyle(styleURL)
            // add a marker on map load
            addMarker(LatLng(40.7342, -73.9911))            map.cameraPosition = CameraPosition.Builder().target(LatLng(40.7342, -73.9911)).zoom(11.0).build()        }
    }
    private fun addMarker(coordinate: LatLng) {        val infoIconDrawable = ResourcesCompat.getDrawable(            this.resources,            R.drawable.default_marker,            null        )!!
        val bitmapMarker = infoIconDrawable.toBitmap()        val icon = IconFactory.getInstance(this)            .fromBitmap(bitmapMarker)
        val markerOptions = MarkerOptions()            .position(coordinate)            .icon(icon)        mapboxMap.addMarker(markerOptions)    }
    override fun onStart() {        super.onStart()        mapView.onStart()    }
    override fun onResume() {        super.onResume()        mapView.onResume()    }
    override fun onPause() {        super.onPause()        mapView.onPause()    }
    override fun onStop() {        super.onStop()        mapView.onStop()    }
    override fun onLowMemory() {        super.onLowMemory()        mapView.onLowMemory()    }
    override fun onDestroy() {        super.onDestroy()        mapView.onDestroy()    }
    override fun onSaveInstanceState(outState: Bundle) {        super.onSaveInstanceState(outState)        mapView.onSaveInstanceState(outState)    }}

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! Email us at support@radar.com.