Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Embedding web maps into existing pages
Explore in the sandbox
Open in CodePen
View live sample
Description
Demonstrates how to share a web map by embedding a map into an existing website.
- Open an existing web map or create a new one.
- Click Share, Embed in Website.
- Choose the size of your map.
- Modify the Map Options, or use the defaults.
- Optionally, add a symbol to your map.
- Copy the HTML that's provided.
- Open your existing web page and find the HTML element that will contain the embedded web map.
- 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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.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://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>