Skip to main content
Attention customers within hurricane impacted areas:
Due to widespread impacts resulting from hurricanes, CivicPlus is committed to enhancing our resources to manage the anticipated increase in traffic and mitigate any potential disruptions. We will prioritize all assistance requests from affected areas to ensure we provide the highest level of support possible. Please be assured that we are here to assist you in any way we can during this challenging time. Your safety and satisfaction are our top priorities.

Search

Add an Esri Map to Your Page

  • Updated:

This article will show you how to display an Esri map to your page using the Esri Widget! The Esri Widget is page-responsive, meaning it will adjust with your page and with the screen type (desktop, mobile, tablet, and so on).

 

Who can use this feature?
System Administrators | Owners | Publishers | Authors

 

Article Navigation

Not finding what you are looking for? View some additional resources.

 

New UI Instructions

 

  1. Sign in to your website solution
  2. Ensure that you are using the New UI (click the Try New UI button if you are not) and navigate to your desired page:
    Web Evolve Old UI User Menu Try New UI Button.
  3. Click the Widgets tab on the Administrative User toolbar:
    Web Evolve New UI Administrative User Toolbar Widgets Tab.
  4. Drag and drop the Esri widget onto your page:
    Web Evolve New UI Widgets Tab Drag and Drop Esri Widget.
  5. In the Widget Options, customize the width and height of your widget, as needed, and click Next:
    Web Evolve New UI Esri Widget Appearance Options Next Button.
  6. In the Esri Options, enter your Esri Map ID:
    Web Evolve New UI Esri Widget Options Esri Map ID Field.
  7. If desired, you may check boxes to Include Esri Searchbar and/or to Include Esri Legend:
    Web Evolve New UI Esri Widget Options Include Search and Legend Checkboxes.
  8. Click the Done button:
    Web Evolve New UI Esri Widget Options Done Button.
  9. View your map on the page:
    Web Evolve New UI Esri Widget Displaying Map on a Page.
  10. Click the Save Changes button to save the page:
    Web Evolve New UI Page Save Button.

 

Go to Article Navigation

 

Old UI Instructions

  1. Sign in to your website solution
  2. Ensure that the Live Edit state is toggled to ON and navigate to your page:
    Web Evolve Old UI Live Edit State Toggled to On.
  3. Click the View all widgets button in the Content tab:
    Web Evolve Old UI Content Tab View All Widgets Button.
  4. Drag and drop the Esri widget to your page:
    Web Evolve Old UI Drag and Drop Esri Widget.
  5. Complete the fields and checkboxes of the Widget Options:
    Web Evolve Old UI Esri Widget Options.
    • Esri Map ID: Add your Esri Map ID to configure the type of map you want to display
      Note: If you need your Esri Map ID, contact your city's GIS (Geographic Information System) department and request your ArcGIS information.
    • Include Search: Click to include a search bar with your map
    • Include Legend: Click to include an Esri legend for an explanation of colors, terrains, and so on to your map
    • Width and Height: Configure container measurements
      Note: Width and height are only for the container, not the page. So for example, if you set the width at 50%, the Esri map will occupy 50% of the container, not the page.
  6. View your map:
    Web Evolve Old UI Esri Widget Displaying Map.
  7. Click the Save button:
    Web Evolve Old UI Save Page Button.

 

Go to Article Navigation

 

Additional Resources

 

Go to Article Navigation

Comments

Let us know what was helpful or not helpful about the article.

0 comments

Please sign in to leave a comment.