My Map keeps Loading/Panning automatically going out of screen.

RajnayanPalav

Hello,

I have integrated map with my application.

But when the page (thymeleaf html) loads the map keeps loading and the page grows which goes blank. I want the map to be in that square box and not to grow. can somebody help? its urgent...I think there is issue with CSS?

Javascript:

require([
  "esri/Map",
  "esri/views/MapView",
  "esri/Graphic",
  "esri/geometry/Point",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/symbols/SimpleLineSymbol",
  "dojo/domReady!"
],function( Map,MapView,
      Graphic, Point,
      SimpleMarkerSymbol, SimpleLineSymbol){
            
var map = new Map({
    basemap: "hybrid"
  });
  var view = new MapView({
    container: "mapDiv",  // Reference to the scene div created in step 5
    map: map,  // Reference to the map object created before the scene
    zoom: 5,  // Sets the zoom level based on level of detail (LOD)
    center: [20, 60]  // Sets the center point of view in lon/lat
  });
    
   // First create a point geometry (this is the location of the Titanic)
      var point = new Point({
        longitude:18.5204,
        latitude: 73.8567
      });
      
       // Create a symbol for drawing the point
      var markerSymbol = new SimpleMarkerSymbol({
        color: [226, 119, 40],
        outline: { // autocasts as new SimpleLineSymbol()
          color: [255, 255, 255],
          width: 2
        }
      });
       // Create a graphic and add the geometry and symbol to it
      var pointGraphic = new Graphic({
        geometry: point,
        symbol: markerSymbol
      });
// Add the graphics to the view's graphics layer
      view.graphics.addMany([pointGraphic]);   
});

CSS:

#mapDiv {
 padding-top: 0px;
 padding-bottom: 10px;
 margin: 50px;
 height: 50px;
 width: 50%;
}

RobertScheitlin__GISP

For that you just switch SimoleMarkerSymbol for a PictureMarkerSymbol:

PictureMarkerSymbol | API Reference | ArcGIS API for JavaScript 3.20