JavaScript only shows map if the code is inside the head

Question

I'm in a project that I will need to show a map of "arcgis", can not be the map of google Maps, on the site of "arcgis" there is an example to show the code with javascript, here's the link: https://developers.arcgis.com/javascript/latest/display-a-map/, in the example the code is placed in the "head" of html, placing the head code as shown in the tutorial works, but in the project the "head" is in a template, and not on the page I want to show the map. The code of arcgis is as follows: .

< html>
  <head>
   <meta charset="utf-8" />      
    <link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.22/"></script>

    <script>
      require(["esri/config","esri/Map", "esri/views/MapView"], function (esriConfig,Map, MapView) {
        

       // Here will come the implementation of the map

     });
   </script>

   < /head>
   < body>
  <div id="viewDiv">The map will appear here</div>
 < /body>
 < /html>

If I remove that part of the code that's in the head

<script>
  require(["esri/config","esri/Map", "esri/views/MapView"], function (esriConfig,Map, MapView) 
 {

   // Here will come the implementation of the map, where I will inform the coordinates

 });
</script>
< div id="viewDiv"></div>

And put on the page I want to show the map does not load ... No error appears in the console, simply does not load, I put several "consoles.log(" to follow the processing and everything is ok, apparently it's all loaded

There is a project that uses this map, but the implementation was done in Angular, the code is as follows:

return loadModules([
        "esri/config",
        "esri/Map",
        "esri/views/MapView",
    ]).then(([esriConfig, Map, MapView]) => {

        // Starts the map implementation by picking up the coordinates
        ...
        ...

Is there any way to implement in javaScript something similar to what was implemented in Angular?

I need to click a button and make that call to JavaScript

The project is Java 7 with PrimeFaces 3.5

score 0 · Answer 1 · answered Dec 26 '21 at 18:43

It looks like you might be missing the CSS for the viewDiv. Here's the snippet from the sample:

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

Or you can just add the needed style when creating the div:

<div id="viewDiv" style="height: 100%;width: 100%;"></div>

JavaScript only shows map if the code is inside the head

1 Answers1