Search code examples
esriarcgis-js-api

Calculate Esri map extents from gps coordinates

I add some markers on Esri map and want to show map at zoom level where all markers are visible. I calculated minimum and maximum lat-lng and set the extent. But its not working. Given Coordinates lat, lon:41.984440, -87.827278 lat, lon:41.874489, -87.705772

calculated min-max: xMax:"-87.827278" xMin:"-87.705772" yMax:"41.984440" yMin:"41.874489" expected result: enter image description here

> EsriSetMapExtent:function(obj)
>     {
>       var extent = new esri.geometry.Extent(obj.xMin, obj.yMin, obj.xMax, obj.yMax);
>       m.esriMap.setExtent(extent);
>     },
Solution

  • The values of xMin and xMax are reversed., Only the X-axis, please check the function which performs the calculations. If you change them it will work. Below is the working sample

    <!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="https://js.arcgis.com/3.17/"></script>
    <script>
      var map;

      require(["esri/map","esri/geometry/Extent", "esri/SpatialReference", "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol",
  "esri/Color", "esri/graphic", "dojo/domReady!"], function(Map, Extent, SpatialReference, Point, SimpleMarkerSymbol, Color, Graphic) {
        map = new Map("map", {
          basemap: "topo",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
          center: [-87.705772, 41.874489], // longitude, latitude
          zoom: 13
        });
        
        map.on('load', function(evt){
          var pt = new Point(-87.705772, 41.874489, new SpatialReference({wkid:4326}))
          var sms = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_SQUARE).setColor(
            new Color([255,0,0,0.5]));
          var graphic = new Graphic(pt,sms);
          map.graphics.add(graphic);
          
          pt = new Point(-87.827278, 41.984440, new SpatialReference({wkid:4326}))
          sms = new SimpleMarkerSymbol().setStyle(SimpleMarkerSymbol.STYLE_SQUARE).setColor(
            new Color([0,255,0,0.5]));
          graphic = new Graphic(pt,sms);
          map.graphics.add(graphic);
        })
        
        var extent = new Extent(-87.827278, 41.874489, -87.705772, 41.984440, new SpatialReference({ wkid:4326 }));
        
        map.setExtent(extent, true);
      });
    </script>
  </head>

  <body>
    <div id="map"></div>
  </body>
</html>