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:

How it works#

Radar Maps works with any renderer capable of rendering Mapbox Vector Tiles. We recommend MapLibre GL JS, originally forked Mapbox GL JS v1 and now sponsored by companies including Amazon Web Services and Meta.

To use Radar Maps, you simply use MapLibre with Radar's tile server and map style, passing your Radar publishable key.

Quickstart#

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

Then, get started with the sample code below. Note that you must pass your Radar publishable API key to the style URL.

From there, you can add map markers, controls, and much, much more. See the MapLibre GL JS docs.

Happy mapping!

JavaScript#

To create a simple web page with a map:

<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <title>Radar Map</title>    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />    <script type="text/javascript" src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>    <link href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" rel="stylesheet" />    <style type="text/css">      body {        margin: 0;        padding: 0;      }
      #map-container {        height: 100%;        position: absolute;        width: 100%;      }
      #map {        height: 100%;        position: absolute;        width: 100%;      }
      /* required */      #map-watermark {        bottom: 0;        height: 38px;        left: 10px;        position: absolute;        width: 80px;        z-index: 999;      }    </style>  </head>  <body>    <div id="map-container">      <div id="map" />      <a id="map-watermark" href="https://radar.com" target="_blank">        <img alt="Radar" src="https://api.radar.io/maps/static/images/logo.svg" height="38" width="80" />      </a>    </div>    <script type="text/javascript">      var map = new maplibregl.Map({        container: 'map',        style: 'https://api.radar.io/maps/styles/radar-default-v1?publishableKey=' + PUBLISHABLE_KEY,        center: [-73.9911, 40.7342], // NYC        zoom: 11      });
      map.addControl(new maplibregl.NavigationControl());
      new maplibregl.Marker({ color: '#007aff' }).setLngLat([-73.9911, 40.7342]).addTo(map); // Radar HQ    </script>  </body></html>

React#

To create a React component with a map:

npm install --save maplibre-gl

import React from 'react';import maplibregl from 'maplibre-gl';
class RadarMap extends React.Component {  componentDidMount() {    const map = new maplibregl.Map({      container: 'map',      style: `https://api.radar.io/maps/styles/radar-default-v1?publishableKey=${PUBLISHABLE_KEY}`,      center: [-73.9911, 40.7342], // NYC      zoom: 11    });
    map.addControl(new maplibregl.NavigationControl());
    new maplibregl.Marker({ color: '#007aff' }).setLngLat([-73.9911, 40.7342]).addTo(map); // Radar HQ  }
  render() {    return (      <div id="map-container" style={{ height: '100%', position: 'absolute', width: '100%' }}>        <div id="map" style={{ height: '100%', position: 'absolute', width: '100%' }} />        <a id="map-watermark" href="https://radar.com" target="_blank" style={{ bottom: 0, height: '38px', left: '10px', position: 'absolute', width: '80px' }}>          <img alt="Radar" src="https://api.radar.io/maps/static/images/logo.svg" height="38" width="80" />        </a>      </div>    );  }};
export default RadarMap;

@import '~maplibre-gl/dist/maplibre-gl.css';

Vue#

To create a Vue component with a map:

npm install --save maplibre-gl

<template>  <div id="map-container">    <div id="map" ref="mapRef" />    <a id="map-watermark" href="https://radar.com" target="_blank">      <img alt="Radar" src="https://api.radar.io/maps/static/images/logo.svg" height="38" width="80" />    </a>  </div></template>
<script>import maplibregl from 'maplibre-gl';import { shallowRef, onMounted, onUnmounted, markRaw } from 'vue';
export default {  name: 'RadarMap',  setup () {    const mapRef = shallowRef(null);    const map = shallowRef(null);
    onMounted(() => {      map.value = markRaw(new maplibregl.Map({        container: mapRef.value,        style: `https://api.radar.io/maps/styles/radar-default-v1?publishableKey=${PUBLISHABLE_KEY}`,        center: [-73.9911, 40.7342], // NYC        zoom: 11      }));
      map.value?.addControl(new maplibregl.NavigationControl());
      new maplibregl.Marker({ color: '#007aff' }).setLngLat([-73.9911, 40.7342]).addTo(map.value); // Radar HQ    }),    onUnmounted(() => {      map.value?.remove();    })
    return {      map, mapRef    };  }};</script>
<style>@import '~maplibre-gl/dist/maplibre-gl.css';
body {  margin: 0;  padding: 0;}
#map-container {  height: 100%;  position: absolute;  width: 100%;}
#map {  height: 100%;  position: absolute;  width: 100%;}
/* required */#map-watermark {  bottom: 0;  height: 38px;  position: absolute;  left: 10px;  width: 80px;  z-index: 999;}</style>

Coverage#

Radar map data comes from OpenStreetMap.

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

Legend#

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

Coverage#

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

Support#

Have questions? We're here to help! Email us at support@radar.com.