Interactive Maps: SimpleMaps

Learn How to embed SimpleMaps configured from the website

CMS Support

February 22, 2024

Use our New and Improved embedded Map

Use the Map feature to easily add and customize interactive maps on all content types.
VIEW MORE

Use SimpleMaps in an Interactive Media block to easily configure an interactive map in energy.gov!

There are two ways to configure your map to get it ready to place in energy.gov. You can either use the SimpleMaps website and download the configuration code your map on energy.gov. You need to so back to the website and open a bookmarked map to make edits. Alternatively, you could use your own Excel document to  transform a spreadsheet into configuration code to copy and paste into energy.gov.

Configure from simpleMaps.com

  1. Go to simplemaps.com and configure your US map.
  2. Save the changes, and hold on to the link for later (In the upper right corner of configuration)
  3. Bookmark or otherwise save your link the appears at the top of the map configuration:
    1. "Your map has been saved to the unique url: https:// simplemaps.com /custom /us/abcXYZ. Bookmark this page to edit this map later."
  4. "Download the Configuration file: Select Options > Download mapdata.js File (In the upper right corner of configuration)
  5. Open the mapdata.js file in a plain text editor like Notepad
  6. Select All the text in the file, and Copy

Download the file above. Its tabs mimic the configuration tabs found on SimpleMaps' website.

Note that the SimpleMaps site contains all the  information and support, and is a best "first pass" at getting your map in shape.

Creating your Map

  1. Create an Interactive Media (Need Interactive Editor role, or contact doecms-support) for the Map Configuration
  2. Configure the Interactive Media (Need Interactive Editor role, or contact doecms-support), and edit the following fields:
    1. Markup: 
      1. <div id="map"></div>
    2. Custom JS
      1. Paste the Text from the simplemaps.com configuration markup file or the xlsx Copy into Custom JS field
    3. Replace marked portion in top of Custom JS field with content in downloaded mapdata.js File
  3. Save
  4. Edit Node Layout
  5. Add first Media block with Map Configuration Media (the one that you just made) to layout
  6. Add second Media block with base Map Code (SimpleMaps CodeBase - DO NOT EDIT)  to layout

Any Questions, Comments, or Requests?

Contact us at [email protected]