Zoom to Lat/Lng

ScottAndreasen · ‎05-01-2012

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" />

<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();





var newExtent = new esri.geometry.Extent(Lng-0.0005,Lat-0.0005,Lng+0.0005,Lat+0.0005,4326);
emap.setCenter(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]

GadyPitaru · ‎05-01-2012

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

ScottAndreasen · ‎05-01-2012

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

GadyPitaru · ‎05-01-2012

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.

PaulBushore · ‎05-02-2012

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,

ScottAndreasen · ‎05-02-2012

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" />

<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]

KellyHutchins · ‎05-02-2012

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

ScottAndreasen · ‎05-02-2012

Thanks Kelly. That worked!

I'm happy now.