Community
Select to view content in your preferred language

New ArcGIS Embedded map not showing (Classic is)

159
2
Jump to solution
a week ago
HarrySmiles
by
Occasional Contributor
a week ago

I have a web map that is embedded in our company website to show open days. Last week it was working as expected, but for some reason no web maps will show when embedded now (just a blank box). I tried using a classic map and fortunately that still works which works as a stop gap solution. I don't think it is a sharing or firewall issue (I tried creating a simple page off our network and I get the same result).

Here is the new style web map code (doesn't show)

<arcgis-embedded-map style="height:600px;width:700px;" item-id="d1ee1681d91d4ecf83f83bcfed68f99a" theme="light" center="145.6511964355444,-36.434334513009894"scale="4622324.434309" portal-url="https://viccfa.maps.arcgis.com" ></arcgis-embedded-map>

And here is the classic map code which does work:

<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="CFA Open Days" src="//viccfa.maps.arcgis.com/apps/Embed/index.html?webmap=d1ee1681d91d4ecf83f83bcfed68f99a&extent=142.402,-39.2873,147.8292,-36.7761&zoom=true&previewImage=false&scale=true&disable_scroll=true&theme=light"></iframe></div>

 

 

1 Solution

Accepted Solutions
JonathanMcD
by
Frequent Contributor
a week ago

@HarrySmiles 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Embedded ArcGIS Map</title>
 
  <!-- Add script to the <head> of your page to load the embeddable map component -->
  <script type="module" src="https://js.arcgis.com/4.33/embeddable-components/"></script>
</head>
<body>
  <!-- Add custom element to <body> of your page -->
  <arcgis-embedded-map
    style="height:600px;width:700px;"
    item-id="d1ee1681d91d4ecf83f83bcfed68f99a"
    theme="light" bookmarks-enabled heading-enabled legend-enabled information-enabled
centre="145.6511964355444,-36.434334513009894"
    scale="4622324.434309
>
  </arcgis-embedded-map>
</body>
</html>
 
This works - compare to what you have from the Embed Map html output.

View solution in original post

2 Replies
JonathanMcD
by
Frequent Contributor
a week ago

@HarrySmiles 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Embedded ArcGIS Map</title>
 
  <!-- Add script to the <head> of your page to load the embeddable map component -->
  <script type="module" src="https://js.arcgis.com/4.33/embeddable-components/"></script>
</head>
<body>
  <!-- Add custom element to <body> of your page -->
  <arcgis-embedded-map
    style="height:600px;width:700px;"
    item-id="d1ee1681d91d4ecf83f83bcfed68f99a"
    theme="light" bookmarks-enabled heading-enabled legend-enabled information-enabled
centre="145.6511964355444,-36.434334513009894"
    scale="4622324.434309
>
  </arcgis-embedded-map>
</body>
</html>
 
This works - compare to what you have from the Embed Map html output.
HarrySmiles
by
Occasional Contributor
a week ago

Apparently it was something to do with a js library. The web developer changed it without realizing.  

0 Kudos