2

I am trying to make a map with ArcGIS 3.29, but in my map I need a bounding box. The ArcGIS API does not have a bounding box function, but the Google Maps API does. What I am having trouble with is using the ArcGIS map with the Google Maps bounding box. This is what I have so far:

var map;

require([
  "esri/map",
  "esri/geometry/Extent",
  "esri/SpatialReference",
  "esri/dijit/Search",
  "esri/layers/FeatureLayer",
  "esri/InfoTemplate",
  "esri/layers/ArcGISTiledMapServiceLayer",
  "dojo/domReady!"
],
  function(
    Map,
    Extent,   
    SpatialReference,
    Search,
    FeatureLayer,
    InfoTemplate,
    ArcGISTiledMapServiceLayer
  )
  {
    var boundingBox = new Extent(-122.3737, 37.454, -121.467, 37.9067, new SpatialReference({ wkid:4326 }));
    /*
    //THIS IS ARCGIS
    map = new Map("map", {
      extent: boundingBox,
      basemap: "streets",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
    });
*/ //THIS IS GOOGLE MAPS
    var acBounds = {
      north: 37.90668952,
      south: 37.45395007,
      west: -122.37374882,
      east: -121.46909034,
    };

    var alameda_county = {
      lat: 37.65,
      lng: -121.91
    };

    map_google = new google.maps.Map(document.getElementById('map'), {
     center: alameda_county,
     zoom: 13,
     restriction: {
       latLngBounds: acBounds,
       strictBounds: false,
     }
   });

Is there a way to use ArcGIS with Google Maps without breaking the code?

1

Try to just use ESRI's API, just check to see the extent of the map and move it back if its outside of the bounding box.

Try adding this:

var previousExtent = map.extent.getExtent();
map.on("extent-change", function(){
    let currentExtent = map.extent.getExtent();
    if (boundingBox.contains(map.extent.getCenter())){
    // Update previous extent
    previousExtent = map.extent.getExtent();
    }
  else {
  // if new extent is not in bounding box then reset to previous extent.
    map.setExtent(previousExtent);
  }


})

See my Fiddle: https://jsfiddle.net/kreza/42qvmc8u/59/

Edit: wrong fiddle posted, now fixed.

  • 1
    I added this to my code and it was able to work. Thank you! – Emily Watt Jul 10 at 17:39

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.