topic Re: My Map keeps Loading/Panning automatically going out of screen. in ArcGIS JavaScript Maps SDK Questions

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

RajnayanPalav — Fri, 21 Apr 2017 07:20:03 GMT

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%;
}

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

RobertScheitlin__GISP — Sat, 11 Dec 2021 14:43:15 GMT

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

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

RajnayanPalav — Fri, 21 Apr 2017 13:19:44 GMT

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:

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.

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

RobertScheitlin__GISP — Sat, 11 Dec 2021 14:43:17 GMT

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

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

RajnayanPalav — Fri, 21 Apr 2017 13:36:45 GMT

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

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

RobertScheitlin__GISP — Sat, 11 Dec 2021 14:43:20 GMT

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

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

RajnayanPalav — Fri, 21 Apr 2017 14:21:50 GMT

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

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

RajnayanPalav — Mon, 24 Apr 2017 05:32:23 GMT

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

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

RobertScheitlin__GISP — Mon, 24 Apr 2017 13:43:11 GMT

For that you just switch SimoleMarkerSymbol for a PictureMarkerSymbol:

PictureMarkerSymbol | API Reference | ArcGIS API for JavaScript 3.20

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

RajnayanPalav — Mon, 24 Apr 2017 13:50:42 GMT

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