0

Is it possible to set center and zoom/fit bounds to country by name with ArcGIS Javascript API? I mean, with Google Maps you can do something like this: https://stackoverflow.com/a/6086437/1745228 How can we get data from ArcGIS and set extent on country?

  • 1
    do you have a database with country polygons load in lat/lng coordinates? – Mapperz Jan 8 '14 at 14:34
  • No, we don't have it. If we had, there wouldn't be a problem. – YOhan Jan 8 '14 at 14:45
  • 1
    use the natural earth shapefile naturalearthdata.com/downloads and load it into postgis. – Mapperz Jan 8 '14 at 14:48
2

or you could use Esri's free World Geocoding Service and avoid loading a second mapping API entirely.

just load this sample, type 'Belarus' into the text box and click 'Locate' to see it in action.

Additional Info: it appears that our Single input field geocoder returns the extent of the matched country whlie the multi line input geocoder (which is used in the sample above) only returns a center point.

here is an example of the single input field geocoder being used in our API's geocoding widget (demonstrating that you conveniently retrieve the extent of individual countries)

if you want to get finer grain control over the look and feel of the UI, you can skip using the geocoder widget and use something like esriRequest to issue the calls

heres a demonstration of that http://jsfiddle.net/jagravois/DLfZB/

  • It doesn't zoom to boundaries but to center instead - which is a problem for us. We need to zoom to country's boundaries. – YOhan Jan 11 '14 at 10:05
  • i didnt notice this before, but the single line input geocoder returns an extent for matched countries along with the center, while the multi line input geocoder does not. i added some additional information to my answer for clarification. – John Gravois Jan 12 '14 at 16:58
  • update: the multiple line input operation for our World Geocoding Service now returns extents as well, so its no longer necessary to use esriRequest for this sort of thing. – John Gravois Mar 20 '14 at 17:28
1

You can use the same strategy of the article on stackoverflow.
After obtaining the google geocoder extent of the country you can transform it with the WebAPI Javascript and set the extent of the map with the new extent.

I attach a simple Javascript application that does what I described.

<!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>Maps center</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.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=3.2"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
  dojo.require("dijit.layout.BorderContainer");
  dojo.require("dijit.layout.ContentPane");
  dojo.require("esri.map");
  var map;
  var geocoder;
  function init() {
    var initExtent = new esri.geometry.Extent({"xmin":-13618161,"ymin":5892040,"xmax":-13450611,"ymax":5962515,"spatialReference":{"wkid":102100}});
    map = new esri.Map("map",{extent:initExtent});

    //Add world imagery to the map. View the ArcGIS Online site additional services  
    var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
    map.addLayer(basemap);

    var referenceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/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);

      var address = "Belarus";
      geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          var ne = results[0].geometry.bounds.getNorthEast();
          var sw = results[0].geometry.bounds.getSouthWest();
          var ext = new esri.geometry.Extent(sw.lng(), sw.lat(), ne.lng(), ne.lat(), new esri.SpatialReference({"wkid":4326}));

          var newext = esri.geometry.geographicToWebMercator(ext);
          newext = newext.expand(1.2);
          map.setExtent(newext);
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
    });
    geocoder = new google.maps.Geocoder();
  }

  dojo.addOnLoad(init);
</script>
</head>

<body class="claro">
<div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
style="width: 100%; height: 100%; margin: 0;">
  <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;">
  </div>
</div>
</body>

</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.