Zoom to Lat/Lng

1878
7
05-01-2012 02:15 PM
ScottAndreasen
New Contributor
Hello-

I'm having trouble updating the extent of my map. For example, I want the user to input lat/lng and then hit submit to zoom to that point. Being new, I am not super familiar with JavaScript objects, functions and events.

Here is my code. I initially set a lat/lng for the inital view, then...the user inputs a new lat long and the code creates the new extent envelope. (Hopefully simple) my question is: How do I set a new extent to be fired when the user presses a button? Further notes are included as comments in the submit() function in the code below.

Please help
-Thanks

[INDENT]
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Terrain basemap with custom data</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{padding:0;}
</style>
<script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");

var map;
Lat = 33.487424;
Lng = -112.047658;

function init()

  var initExtent = new esri.geometry.Extent({"xmin":Lng-0.15,"ymin":Lat-0.15,"xmax":Lng+0.15,"ymax":Lat+0.15,"spatialReference":{"wkid":4326}});
  map = new esri.Map("map",{extent:esri.geometry.geographicToWebMercator(initExtent)});

  var referenceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer");
  map.addLayer(referenceLayer);
 
  dojo.connect(map, 'onLoad', function(theMap)
   {
//resize the map when the browser resizes
    dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
   });
}

dojo.addOnLoad(init);

function submit()
{
  Lat = document.getElementById("inputLat").value;
  Lng = document.getElementById("inputLng").value;

  init();

  <!--WHY DOESNT the ESRI MAP UPDATE????-->
  <!--WHAT CODE CAN I ADD HERE TO GET IT TO ZOOM TO THE NEW LAT/LONG-->
  <!--ENVELOPE recalculated Below-->
 
  var newExtent = new esri.geometry.Extent(Lng-0.0005,Lat-0.0005,Lng+0.0005,Lat+0.0005,4326);
  emap.setCenter(newExtent);
  <!--emap.setCenter(esri.geometry.geographicToWebMercator(newExtent));-->
 
}
</script>
</head>

<body>
<table border=1>
  <tbody>
    <tr>
<td>ESRI</td>
      <td></td>
    </tr>
    <tr>
<td><div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
style="width: 500px; height: 500px; margin: 0;">
<div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;"> 
</div>
</td>
<td>
Latitude: <input type="text" id="inputLat" value="33.487424" /><br />
Longitude: <input type="text" id="inputLng" value="-112.047658" /><br />
<br /><br />
<button onclick="submit()">Submit</button>
</td>
    </tr>
    <tr>
<td></td>
<td></td>
    </tr>
  </tbody>
</table>


</body>

</html> [/INDENT]
0 Kudos
7 Replies
GadyPitaru
New Contributor II
For what you're doing, I recommend using the centerAndZoom method. Just create a Point from the user-input lat/long, pass that Point into the method with the level value, and you're good to go. So you're submit function will look something like this, might need to tweak the spatial reference and level value, look at the docs for help on that:

function submit()
{
Lat = document.getElementById("inputLat").value;
Lng = document.getElementById("inputLng").value;

map.centerAndZoom(new esri.geometry.Point(Lat, Lng, new esri.SpatialReference({ wkid: 4326 })), 12);
}
0 Kudos
ScottAndreasen
New Contributor
Yes, this submit() is better than what I had. Now it it at least zooms to a point. But the problem is that the point it zooms to is in the Atlantic Ocean, instead of in Arizona.

So, as you alluded to, adjustments need to likely be made to the Spatial Reference. I manually hard coded known web mercator coordinates and the map zoomed to the correct location. This made me think that Lat/Lng coordinates are not being converted from WKID 4326 (WGS84) to WKID 102100(web mercator). So, I attempted the new submit function below...

As you can see I am trying to convert it all in baby steps, first creating a newPoint and then wmPoint. But...the map still pans over to a location in the Atlantic Ocean.

function submit()
{
  newLat = document.getElementById("inputLat").value;
  newLng = document.getElementById("inputLng").value;
 
  newPoint = new esri.geometry.Point(Lat, Lng, new esri.SpatialReference({ wkid: 4326 }));
  wmPoint = new esri.geometry.geographicToWebMercator(newPoint);
 
  map.centerAndZoom(wmPoint,12);
}

Any further help would be appreciated.
Thanks
0 Kudos
GadyPitaru
New Contributor II
Sounds to me like a spatial reference mismatch issue. You need to consider the spatial reference of your map and ensure that your users will enter the lat/long in that coordinate system's units. the map's spatial reference inherits from the base layer's (first layer added to map, unless otherwise specified when initalizing map) spatial reference, which you can find in the REST information for the map service.
0 Kudos
PaulBushore
Occasional Contributor
Hello,

I took a quick look and it appears that when you construct your point you might have a typo.  You are passing Lat(y) Lng(x) when the constructor takes x then y.

I replaced your point constructor with the following code and it appears to work.  Please try and let us know.

newPoint = new esri.geometry.Point(Lng, Lat, new esri.SpatialReference({ wkid: 4326 }));


Best wishes,
0 Kudos
ScottAndreasen
New Contributor
Thanks for taking a look at this. Yes, the Lat/Lng values were reversed. But the submit function is still not working.

I made various changes to the code. To fix the above mentioned problems and to make sure the base data projections are consistent. Also, I converted the Lat/Lng variables from strings to doubles. Check out the code below. Again, I have placed comments in the submit() that explain my questions further.

Any further help would be most appreciated.

-Scott

[INDENT]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Terrain basemap with custom data</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{padding:0;}
</style>
<script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");

var map;
Lat = 33.487424;
Lng = -112.047658;

function init() {
  var initExtent = new esri.geometry.Extent({"xmin":Lng-0.0005,"ymin":Lat-0.0005,"xmax":Lng+0.0005,"ymax":Lat+0.0005,"spatialReference":{"wkid":4326}});
  map = new esri.Map("map",{extent:esri.geometry.geographicToWebMercator(initExtent)});

  var ParcelLabel = new esri.layers.ArcGISDynamicMapServiceLayer("http://xxxx/ArcGIS/rest/services/ParcelLabel/MapServer", {"opacity":1.0});
  var StreetLabels = new esri.layers.ArcGISDynamicMapServiceLayer("http://xxxx/ArcGIS/rest/services/StreetLabels/MapServer", {"opacity":1.0});
  var ParcelsForPrinting = new esri.layers.ArcGISDynamicMapServiceLayer("http://xxxx/ArcGIS/rest/services/ParcelsForPrinting/MapServer", {"opacity":1.0});
  var Aerials2012 = new esri.layers.ArcGISTiledMapServiceLayer("http://xxxx/ArcGIS/rest/services/Aerials2012/MapServer", {"opacity":1.0});

  map.addLayer(Aerials2012);
  map.addLayer(ParcelsForPrinting);
  map.addLayer(StreetLabels);
  map.addLayer(ParcelLabel);

dojo.connect(map, 'onLoad', function(theMap) {
//resize the map when the browser resizes
dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
});
}

dojo.addOnLoad(init);

function submit()
{
Lat = parseFloat(document.getElementById("inputLat").value);
Lng = parseFloat(document.getElementById("inputLng").value);

//THESE COORDINATES WORK (and are in Web Mercator wkid: 102100)
/*
Lat = 3984680.199433726;
Lng = -12467779.83704848;
*/
//THEREFORE, I NEED TO CONVERT THE USER INPUT LAT/LNG VALUES ABOVE FROM WGS84 (wkid: 4326) to WEB MERCATOR (wkid: 102100)
//OR CREATE A POINT AND CONVERT THAT POINT FROM WGS84 to WEB MERCATOR

map.centerAndZoom(new esri.geometry.Point(Lng, Lat, new esri.SpatialReference({ wkid: 4326 })), 7);
}

</script>
</head>

<body class="claro">
<table border=1>
  <tbody>
    <tr>
<td>ESRI</td>
      <td></td>
    </tr>
    <tr>
<td><div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
style="width: 500px; height: 500px; margin: 0;">
<div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;"> 
</div>
</td>
<td>
Latitude: <input type="text" id="inputLat" value="33.487424" /><br />
Longitude: <input type="text" id="inputLng" value="-112.047658" /><br />
<br /><br />
<button onclick="submit()">Submit</button>
</td>
    </tr>
    <tr>
<td></td>
<td></td>
    </tr>

</body>

</html> [/INDENT]
0 Kudos
KellyHutchins
Esri Frequent Contributor
You can use esri.geometry.geographicToWebMercator to convert the geographic coords to web mercator. So if you switch your code to something like this it should zoom to the correct location:


var pt = new esri.geometry.Point(Lng,Lat, new esri.SpatialReference({wkid:4326}));

map.centerAndZoom(esri.geometry.geographicToWebMercator(pt), 7);

0 Kudos
ScottAndreasen
New Contributor
Thanks Kelly. That worked!

I'm happy now.
0 Kudos