Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 8 additions & 16 deletions maps/maps.mdx
Original file line number Diff line number Diff line change
@@ -1,20 +1,12 @@
---
title: "Maps"
---
import Map from '/snippets/components/Map.mdx'
import FitBoundsMap from '/snippets/components/examples/FitBoundsMap.mdx'
import CustomImageMarkerMap from '/snippets/components/examples/CustomImageMarkerMap.mdx'
import CustomLanguageMap from '/snippets/components/examples/CustomLanguageMap.mdx'
import CustomPopupMap from '/snippets/components/examples/CustomPopupMap.mdx'
import RouteMap from '/snippets/components/examples/RouteMap.mdx'
import PolygonMap from '/snippets/components/examples/PolygonMap.mdx'
import GlobeMap from '/snippets/components/examples/GlobeMap.mdx'

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:

<Map />
<iframe src="https://cd1ab3f1-0e7e-4e88-82a5-f03c38f8ea79-00-etyxqyxe8qo8.janeway.replit.dev/" width="100%" height="500" frameBorder="0" allowFullScreen />
Copy link

Copilot AI Jul 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The iframe src uses a development/temporary Replit URL that contains random identifiers. This URL will likely become invalid when the development session ends, breaking the embedded maps in production documentation.

Suggested change
<iframe src="https://cd1ab3f1-0e7e-4e88-82a5-f03c38f8ea79-00-etyxqyxe8qo8.janeway.replit.dev/" width="100%" height="500" frameBorder="0" allowFullScreen />
<iframe src="https://radar.com/demo/maps" width="100%" height="500" frameBorder="0" allowFullScreen />

Copilot uses AI. Check for mistakes.

You can also check out the [maps explorer](https://radar.com/dashboard/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).

Expand Down Expand Up @@ -359,7 +351,7 @@ Use the `map.fitToMarkers()` function to center and zoom the map to encompass al

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.

<FitBoundsMap />
<iframe src="https://cd1ab3f1-0e7e-4e88-82a5-f03c38f8ea79-00-etyxqyxe8qo8.janeway.replit.dev?type=fitBounds" width="100%" height="500" frameBorder="0" allowFullScreen />
Copy link

Copilot AI Jul 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The frameBorder attribute is deprecated in HTML5. Use CSS border styling instead: style="border: none;"

Suggested change
<iframe src="https://cd1ab3f1-0e7e-4e88-82a5-f03c38f8ea79-00-etyxqyxe8qo8.janeway.replit.dev?type=fitBounds" width="100%" height="500" frameBorder="0" allowFullScreen />
<iframe src="https://cd1ab3f1-0e7e-4e88-82a5-f03c38f8ea79-00-etyxqyxe8qo8.janeway.replit.dev?type=fitBounds" width="100%" height="500" style="border: none;" allowFullScreen />

Copilot uses AI. Check for mistakes.

<CodeGroup>

Expand Down Expand Up @@ -461,7 +453,7 @@ export default RadarMap;

Add a `Marker` with a custom image to the map by specifying the image URL.

<CustomImageMarkerMap />
<iframe src="https://cd1ab3f1-0e7e-4e88-82a5-f03c38f8ea79-00-etyxqyxe8qo8.janeway.replit.dev?type=customImageMarker" width="100%" height="500" frameBorder="0" allowFullScreen />
Copy link

Copilot AI Jul 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider adding sandbox and referrerpolicy attributes to the iframe for better security when embedding external content.

Suggested change
<iframe src="https://cd1ab3f1-0e7e-4e88-82a5-f03c38f8ea79-00-etyxqyxe8qo8.janeway.replit.dev?type=customImageMarker" width="100%" height="500" frameBorder="0" allowFullScreen />
<iframe src="https://cd1ab3f1-0e7e-4e88-82a5-f03c38f8ea79-00-etyxqyxe8qo8.janeway.replit.dev?type=customImageMarker" width="100%" height="500" frameBorder="0" allowFullScreen sandbox="allow-scripts allow-same-origin" referrerpolicy="no-referrer" />

Copilot uses AI. Check for mistakes.

<CodeGroup>

Expand Down Expand Up @@ -557,7 +549,7 @@ export default RadarMap;

Display a popup with customized HTML.

<CustomPopupMap />
<iframe src="https://cd1ab3f1-0e7e-4e88-82a5-f03c38f8ea79-00-etyxqyxe8qo8.janeway.replit.dev?type=customPopup" width="100%" height="500" frameBorder="0" allowFullScreen />

### Union Square

Expand Down Expand Up @@ -703,7 +695,7 @@ Polylines can be added to the map with the `map.addPolyline` function, and accep

Lines can be styled according to the MapLibre [Line Layer properties](https://maplibre.org/maplibre-style-spec/layers/#line).

<RouteMap />
<iframe src="https://cd1ab3f1-0e7e-4e88-82a5-f03c38f8ea79-00-etyxqyxe8qo8.janeway.replit.dev?type=route" width="100%" height="500" frameBorder="0" allowFullScreen />

<CodeGroup>

Expand Down Expand Up @@ -857,7 +849,7 @@ Polygons or complex shapes can be drawn on a Radar Map by providing a GeoJSON Po

Polygon features can be styled according to the polygon options highlighted above.

<PolygonMap />
<iframe src="https://cd1ab3f1-0e7e-4e88-82a5-f03c38f8ea79-00-etyxqyxe8qo8.janeway.replit.dev?type=polygon" width="100%" height="500" frameBorder="0" allowFullScreen />

<CodeGroup>

Expand Down Expand Up @@ -981,7 +973,7 @@ Display a Radar Map with an interactive globe projection.

Only available on MapLibre v5 and above.

<GlobeMap />
<iframe src="https://cd1ab3f1-0e7e-4e88-82a5-f03c38f8ea79-00-etyxqyxe8qo8.janeway.replit.dev?type=globe" width="100%" height="500" frameBorder="0" allowFullScreen />

<CodeGroup>

Expand Down Expand Up @@ -1079,7 +1071,7 @@ The map display language can be changed by setting the `language` option to the

You can also set `language: "local"` to use the device language by default.

<CustomLanguageMap />
<iframe src="https://cd1ab3f1-0e7e-4e88-82a5-f03c38f8ea79-00-etyxqyxe8qo8.janeway.replit.dev?type=customLanguage" width="100%" height="500" frameBorder="0" allowFullScreen />

Local (local)

Expand Down