Guide: Put a State Map on Your Page

Note

Please note that the following instructions assume a level of understanding with "Code View" in the CMS' Ephox editor, as well as a basic knowledge of HTML. If you have no experience with either of these subjects, please contact EWM for support.

Creating A Map

Step 1: Open Your Page in the CMS

Visit publish.gsa.gov and sign in using your SSO credentials. Search for your page in the CMS either by using the page's name or Content ID (usually the last six numbers in your page's URL). Click on the radio button to the left of the page's title and then click the "Edit" button.

Step 2: Insert the HTML for the Map

Once you have your page open in the CMS, scroll down to the editor window and click the "Code" tab found at the bottom. This will pull up the HTML for your page.

Copy the code below and paste it into your page in Code View. You may pick where best to place the map based on your content needs, but do not paste the code inside an existing set of tags (e.g. in between a <p></p> tag).

<div class="well search-option">
<svg id="map-canvas" preserveAspectRatio="xMidYMin slice" style="width: 100%; padding-bottom: 70%; height: 1px; overflow: visible; box-sizing: content-box; enable-background:new 0 0 381.1 381.1;" width="100%" height="100%" viewBox="0 0 870 900"></svg>
</div>

Step 3: Insert the Javascript for the Map

Scroll to the bottom of the editor window in the CMS and, still in Code view, paste the following after the last line of code that you see.

<div>
<script src="/resources/js/asto_1.1/map-plugin.js" type="text/javascript"></script>
<script type="text/javascript">
$(‘#map-canvas’).usaMap( {

 

});
</script>
</div>

Step 4: Optional Settings

If your map only has to display the 50 United States and the District of Columbia, please proceed to the How to Add Links tutorial.

In cases where the map must include a U.S. territory, you'll have to instruct the Javascript code to show them by putting stuff in between the red curly braces shown in Step 3 above. (Note: The braces will not appear red in Code View on the CMS. They are highlighted here for purely illustrative purposes.)

Here's an example of what you would put into the curly braces to add Puerto rico to your map.

'puertoRico': true,

See? Simple.

Of course, you may not have to add Puerto Rico, or you may need to add Puerto Rico and Guam, or Puerto Rico and Guam and the U.S. Virgin Islands, or...

You get the idea. Each territory you want to add will be its own text line (so press the Enter Key every time you add a new territory), and you can mix and match as many or as few as you need of the following: Puerto Rico, Guam, the U.S. Virgin Islands, American Samoa, East Asia (granted, not a territory) and Europe (also not a territory, but you can still put it on the map).

Here are examples for every option above. You don't need to include them all in your map.

'puertoRico': true,
'guam': true,
'virginIslands': true,
'amSamoa': true,
'europe': true,
'eastAsia': true

PLEASE NOTE: In order to make American Samoa or Europe or East Asia appear on your map, you'll need to include an additional line of code, shown below. This line will need to be added even if you only include one of them, so unless you don't need any of them, you will have to add this code.

'topBoxes': true,

Mix and match any of the above according to your needs, but just make sure to put each snippet on its own and, most importantly, SEPARATE SNIPPETS WITH A COMMA!

Step 5: Do NOT Click Save!

You're not done yet, so do not save your page in the CMS once you've completed Step 4. Instead, please proceed to the How to Add Links to Your Map guide.

If you would like for your map to submit a query to a database, please proceed to the How to Integrate Your Map into a Form. If you're not sure if your content will be making a database query, it probably won't be. In that case you can head over to the How to Add Links to Your Map guide instead.

Last Reviewed 2017-06-07