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]

Rajnayan,

   How does your html look for the mapDiv? I would add a div wrapped around the mapDiv that has the css rule you have for mapDiv now and then have a new rule for the actual mapDiv that is just:

#mapDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

#mapOuterDiv {
  padding-top: 0px;
  padding-bottom: 10px;
  margin: 50px;
  height: 50px; /*this seems really small*/
  width: 50%;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RajnayanPalav]

Hello Robert,

Thank you for your prompt reply and help.

Actually I have included the mapDiv in another HTML (thymeleaf) which calls the CSS and JS. Below is the Snippet:

<div class="row">                           
 <div id="mapDiv"/>                            
  </div>

FYI, the issue is now solved.

Yeah. the height is small because I am embedding a map in an application and I need to show only the portion for which lat/long will be provided.

I have another problem now, i.e. with "center". When I give lat/long in Point Function the map is not shown on that point but I have to manually pan it to the Point. How to coordinate with lat/long and center?

Your help is appreciated.

Thanks for your reply in advance.

[RobertScheitlin__GISP]

So you are saying that the map does not respect the center value you define here?

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
  });‍‍‍‍‍‍

[RajnayanPalav]

Hi,

Actually not.

Below is the Snippet:

 var view = new MapView({
    container: "mapDiv", //Reference to the div id created in html
    map: map,  // Reference to the map object created above
    zoom: 5,  // Sets the zoom level based on level of detail (LOD)
    center: [82, 22]  // Sets the center point of view in lon/lat -------> I have to Manually Set this with trial/error method to check get it aligned to lat/long.
  });
    
   // First create a point geometry (this is the location of the Titanic)
      var point = new Point({
        longitude:72,   // for Mumbai (India)
        latitude:19      //for Mumbai  (India)
      });

I have to Manually Set this with trial/error method to check get it aligned to lat/long to see my Point.

My Goal : I want to pass lat/long dynamically (coming from another application) and it should show me the desired location in the specified area. As of now I am entering lat/long manually, but stuck in the concept of "Center".

Can you tell me how should I deal with it?

Your reply and help is appreciated

[RobertScheitlin__GISP]

I would suggest you use the following code to dynamically set the maps center:

var pt = new Point({ latitude: 19, longitude: 72 });
// go to the given point
view.goTo(pt);‍‍‍‍‍‍

https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#goTo 

[RajnayanPalav]

Hi,

view.goTo(pt); --> Doesn't Work as it takes the map to different continent and also does not show my Point graphic
view.center=pt; --> But thanks to your Article as this works Perfectly

Now I need to just find a way to dynamically pass the lat/long values to the JS Point.

Regards

[RajnayanPalav]

Hello Robert,

I want a "stick pin or push Pin" to point on map on the specific location.

As of now I am able to show a filled circle using Simple marker Symbol.

Can you please let me know how to add Push Pin/Stick pin?

Regards

[RobertScheitlin__GISP · Accepted solution]

For that you just switch SimoleMarkerSymbol for a PictureMarkerSymbol:

PictureMarkerSymbol | API Reference | ArcGIS API for JavaScript 3.20 

[RajnayanPalav]

Thanks Robert. I figured it out.

I have one issue: I have raised this question:

https://community.esri.com/thread/193728-none-of-the-widgets-are-working-in-my-application 

Can you answer this question?

Regards