MAPS

The Maps extension will render interactive maps directly in your graph! The name of the script is maps.

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 instead you prefer to manually install, first create a block with the text {{[[roam/js]]}} on any page in your Roam DB. Then, copy and paste this code block as a child of the block.

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

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 you set the Marker text as a tag, clicking on the marker pin will take you to that page.

Playground

Demo

Contributors

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

  • Russell Schutte 💵
Emoji Key

Other Extensions