MAPS

The Maps extension will render interactive maps directly in your graph!

Installation

You could use the Copy Extension button below to individually install this extension. To install, just paste anywhere in your Roam graph and click "Yes, I Know What I'm Doing".

Manual Installation

If the extension doesn't work after using the copy extension button above, try installing manually using the instructions below.

First create a block with the text {{[[roam/js]]}} on any page in your Roam DB. Then, create a single child of this block type three back ticks. A code block should appear. Copy this code and paste it into the child code block in your graph:

var existing = document.getElementById("roamjs-maps");
if (!existing) {
  var extension = document.createElement("script");
  extension.src = "https://roamjs.com/maps.js";
  extension.id = "roamjs-maps";
  extension.async = true;
  extension.type = "text/javascript";
  document.getElementsByTagName("head")[0].appendChild(extension);
}

Finally, click "Yes, I Know What I'm Doing".

Usage

This script is not configurable

Type {{maps}} in a block. When the block renders, an interactive map will render in its place!

To position the map at a particular center, create a child block with text "Center". Under that block, put in the latitude and longitude coordinates of the center delimited by a comma.

To start the map at a particular zoom level, create a child block with text "Zoom". Under that block, put in the zoom level value which should be a number. A minimum value of 0 is zoomed all the way out and a maximum value of 18 is zoomed all the way in.

To add Markers to the map, create a child block with text "Markers". Under that block, add one child for every marker you want to include. In the block, write the text you'd like as the label of the block. As a child of that block, put the latitude and longitude coordinates of the marker.

For example, the following configuration will have to be set as the child of the block to produce the map below:

  • Center
    • 32.715736, -117.161087
  • Zoom
    • 12
  • Markers
    • David Vargas
      • 32.7, -117.2
    • RoamJS
      • 32.72, -117.1

If the Marker text is already a tag in your graph, clicking on the marker pin will take you to that page. Shift clicking the marker will open the tag in the sidebar.

You could also filter the markers that are displayed on your map. Clicking the wrench icon on the top right will open the settings overlay, where you could specify a tag to filter by. All markers that are pages that have a block with the entered tag will remain on the map while the rest get filtered out.

Demo

Contributors

This extension is brought to you by RoamJS! If you are facing any issues reach out to support@roamjs.com or click on the chat button on the bottom right. If you get value from using this extension, consider sponsoring RoamJS by clicking on the button below!

A special thanks to those who's contributions also helped make this extension possible:

ROAMJS DIGEST

Add your email below to stay up to date on all RoamJS features, fixes, and news!

Other Extensions