JavaScript only shows map if the code is inside the head

Yasmndavidkh · ‎12-26-2021

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

Jordi-Monk-Developer · ‎12-26-2021

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?

WorldZone · ‎01-03-2022

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>