Hide Table of Contents
View Embedding web maps into existing pages sample in sandbox
Embedding web maps into existing pages

Description

Demonstrates how to share a web map by embedding a map into an existing website.

  1. Open an existing web map or create a new one.
  2. Click Share, Embed in Website.
  3. Choose the size of your map.
  4. Modify the Map Options, or use the defaults.
  5. Optionally, add a symbol to your map.
  6. Copy the HTML that's provided.
  7. Open your existing web page and find the HTML element that will contain the embedded web map.
  8. Paste the HTML you copied into your web page.

Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Title</title>
  <link href="https://esri.github.io/calcite-bootstrap/assets/css/calcite-bootstrap-open.min.css" rel="stylesheet">
  <style>
    .footer {
      height: 6.25rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="page-header col-md-12">
      <h1>Embedding WebMaps into existing pages</h1>
    </div>
    <div class="row">
      <div class="col-md-4">
        <h1>Hawaii Island Lava Flow Risk</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Donec ullamcorper nulla non metus auctor fringilla.
          Donec ullamcorper nulla non metus auctor fringilla.
          Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          Nullam id dolor id nibh ultricies vehicula ut id elit.
        </p>
        <p>
          Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
          Donec id elit non mi porta gravida at eget metus.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Sed posuere consectetur est at lobortis.
          Curabitur blandit tempus porttitor.
          Aenean eu leo quam.
          Pellentesque ornare sem lacinia quam venenatis vestibulum.
        </p>
      </div>
      <div class="col-md-8 embed-responsive embed-responsive-16by9">
        
        <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="Hawaii Island Lava Flow Risk" src="//www.arcgis.com/apps/Embed/index.html?webmap=ce88f9dba8d748a4bf3aa8d6c8027d2e&extent=-156.5905,17.3102,-154.3273,21.7176&zoom=true&scale=true&disable_scroll=true&theme=light">
          </iframe>
        </div>
        
      </div>
    </div>
    <footer class="footer">
      <div class="container">
        <p class="text-muted">Footer content</p>
      </div>
    </footer>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://esri.github.io/calcite-bootstrap/assets/js/bootstrap.min.js"></script>
</body>
</html>