topic JavaScript only shows map if the code is inside the head in ArcGIS JavaScript Maps SDK Questions

JavaScript only shows map if the code is inside the head

Yasmndavidkh — Sun, 26 Dec 2021 08:50:01 GMT

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

Re: JavaScript only shows map if the code is inside the head

Jordi-Monk-Developer — Mon, 27 Dec 2021 01:10:53 GMT

Hello, the code below works for me. Substitute your API KEY appropriately.

<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>ArcGIS API for JavaScript Tutorials: Display a map</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css" /> </head> <body> <h1>This is an ArcGIS Map</h1> <script src="https://js.arcgis.com/4.22/"></script> <script> require(["esri/config", "esri/Map", "esri/views/MapView"], function ( esriConfig, Map, MapView ) { esriConfig.apiKey = "YOUR_API_KEY"; const map = new Map({ basemap: "arcgis-topographic", // Basemap layer service }); const view = new MapView({ map: map, center: [-118.805, 34.027], // Longitude, latitude zoom: 13, // Zoom level container: "viewDiv", // Div element }); }); </script> <div style="height: 50%; width: 50%" id="viewDiv"></div> </body> </html>

Which should render like:

Is that what you wanted?

Re: JavaScript only shows map if the code is inside the head

WorldZone — Mon, 03 Jan 2022 10:10:10 GMT

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>