Understanding ArcGIS Online Code

1973
2
Jump to solution
07-30-2016 01:52 PM
deleted-user-W17i9rKaOdiH
Occasional Contributor

Hi,

Can someone point me to a good resource to better understand the code that drives ArcGIS Online's ability to embed a map and use a template so I can gain more control of the output?

For example, when I select embed in website option, I get a little paragraph of text that looks something like this:

<style>.embed-container {position: relative; padding-bottom: 80%; height: 0; max-width: 100%;} .embed-container iframe, .embed-container object, .embed-container iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;} small{position: absolute; z-index: 40; bottom: 0; margin-bottom: -15px;}</style><div class="embed-container"><iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" title="Manna Food Center Distribution Sites" src="//www.arcgis.com/apps/Embed/index.html?webmap=be3a73df6f354d388acd8ab0252ff8e1&amp;extent=-78.2349,38.6246,-75.5432,39.5752&amp;zoom=true&amp;scale=true&amp;disable_scroll=true&amp;theme=light"></iframe></div>

I understand the width = "500" height = "400" is the canvass size because there is an option to adjust this in the Embed Map Dialogue box. However, I would like to better understand all the other code so I can manipulate it better. Is this JavaScript?

0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor

You can modify the Embedded map URL using URL parameters as described here.

Use URL parameters to modify embedded maps—ArcGIS Online Help | ArcGIS

Everything else has to do with styling the iFrame used to embed the map and you can learn more CSS and iFrame properties here.

<iframe> - HTML | MDN

Hope that helps!

View solution in original post

2 Replies
ReneRubalcava
Frequent Contributor

You can modify the Embedded map URL using URL parameters as described here.

Use URL parameters to modify embedded maps—ArcGIS Online Help | ArcGIS

Everything else has to do with styling the iFrame used to embed the map and you can learn more CSS and iFrame properties here.

<iframe> - HTML | MDN

Hope that helps!

RebeccaStrauch__GISP
MVP Emeritus

Have you looked at the Web AppBuilder develop edition? 

Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

This is based on JavaScript, and similar to the ArcGIS Online but allows you to work with and customize the code. There are many user supplied custom widgets too that can help you extend you application.The link above will also take you to the Guild, Samples, and the Javacript API

Additional resources for the WAB develope edition can be found

also tagging ArcGIS API for JavaScriptWeb AppBuilder for ArcGISWeb AppBuilder Custom Widgets