1

I need to embed an ArcGIS Server JavaScript API (version 4) map in a client's Content Management System. For reasons unknown to me, the CMS developers said this results in the map's entire DOM being placed inside a <form> tag.

Doing so prevents the map from loading and displaying, although the JS appears to run correctly.

I've put together a simple demonstration at https://codepen.io/slead/pen/QWWedvd - if you comment/uncomment the <form> tag you can see that placing the map inside the form results in the map not displaying, even though the console logs show that the JS has run.

<!--HTML-->
<body>
  <form>
    <div id="viewDiv"></div>
  </form>
</body>

// JavaScript
require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
  console.log("Before");
  var map = new Map({basemap: "streets"});
  var view = new MapView({
    container: "viewDiv",
    map: map,
    zoom: 4,
    center: [15, 65]
  });
  console.log("After");
});

How can I enable the map functionality when the map's elements are located inside a <form>?

Improve this question

1 Answer 1

Reset to default
2

Actually after all that, this problem was simpler than expected. Giving the form the appropriate CSS seems to solve the problem:

#viewDiv, #frmMap {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

<form id="frmMap">
  <div id="viewDiv"></div>
</form>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.