1

I found this answer here by user @hoogw very useful regarding Overlaying ArcGIS REST API on Google Maps. I've been trying to add several layers to be toggled by checkmarks to no avail. The base URL can be the same, but the layers will be different. I know it's probably best to list all the overlays and push them to an array, then loop over them, but I'm too much of a novice to get it to work.

Below is the code referenced:

var map;
var Overlays= []
var Overlay;

function get_overlay_image(_ne, _sw){

                var imageBounds = {
                  north: _ne.lat(),
                  south: _sw.lat(),
                  east:  _ne.lng(),
                  west:  _sw.lng()
                };
                
            var export_bbox = _sw.lng() + ',' + _sw.lat() + ',' + _ne.lng() + ',' + _ne.lat();
        
        var url_param = '&format=png&transparent=true&f=image&bboxSR=4326&imageSR=3857';
         
         var _width = map.getDiv().offsetWidth;
         var _height = map.getDiv().offsetHeight;
         
         var _size = '&size='+ _width + ',' + _height
         
         var _layers ='&layers=show:4,5'
        
        
         var root_url = 
     'https://ndgishub.nd.gov/ArcGIS/rest/services/All_GovtBoundaries/MapServer/export?bbox=';


     var image_url = root_url + export_bbox + url_param + _size + _layers;       

    // delete remove all overlay in overlays array.
       while(Overlays[0])
                {
                Overlays.pop().setMap(null);
                }

     var  Overlay = new google.maps.GroundOverlay(
            image_url,
            imageBounds);
     
       Overlay.setOpacity(0.5)
        
       Overlay.setMap(map);
       
       // push new overlay into overlays array
       Overlays.push(Overlay);
}

function initMap() {

map = new google.maps.Map(document.getElementById('map'), {
    zoom: 9,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
   // center: {lat: 38.907292, lng: -77.036420} //washington
    center: {lat: 48.16, lng: -103.61}
    //48.16, lng: -103.61
  });

google.maps.event.addListener(map, 'idle', function() {
              var bounds =  map.getBounds();
              var ne = bounds.getNorthEast();
              var sw = bounds.getSouthWest();
                            
            get_overlay_image(ne, sw);
     });
  }

Maybe something like

overlayMaps = [
    { //layer1
    url:  {
    return url1 + layers ;
    }, 
    { //layer2
    url:  {
    return url2 + layers ;
    }]

function toggleLayer(i) {
  if (overlayMaps[i].getMap() === null) {
    overlayMaps[i].setMap(map);
  }
  else {
    overlayMaps[i].setMap(null);
  }
}

But how to implement with the various parameters?

1

This is what I ended up doing. I'm sure it could be better.

var map;
var layers = [];
var Overlays = [];
var export_bbox, url_param, _size, a_layers;
var a_layers = '&layers=show:4,5'
var b_layers = '&layers=show:29,30,31,32'
var c_layers = '&layers=show:6,20'
var d_layers = '&layers=show:18,19'
var root_url = 'https://ndgishub.nd.gov/ArcGIS/rest/services/All_GovtBoundaries/MapServer/export?bbox=';
var root_url_b = 'https://gis.dot.nd.gov/ArcGIS/rest/services/external/rcrs_dynamic/MapServer/export?bbox=';
var root_url_c = 'https://ndgishub.nd.gov/ArcGIS/rest/services/All_Transportation/MapServer/export?bbox=';

var url_param = '&format=png&transparent=true&f=image&bboxSR=4326&imageSR=3857';

function get_overlay_image(_ne, _sw) {

    var imageBounds = {
        north: _ne.lat(),
        south: _sw.lat(),
        east: _ne.lng(),
        west: _sw.lng()
    };

    export_bbox = _sw.lng() + ',' + _sw.lat() + ',' + _ne.lng() + ',' + _ne.lat();

    var _width = map.getDiv().offsetWidth;
    var _height = map.getDiv().offsetHeight;

    _size = '&size=' + _width + ',' + _height

    layers[0] = new google.maps.GroundOverlay(root_url + export_bbox + url_param + _size + a_layers, imageBounds);
    layers[1] = new google.maps.GroundOverlay(root_url_b + export_bbox + url_param + _size + b_layers, imageBounds);
    layers[2] = new google.maps.GroundOverlay(root_url + export_bbox + url_param + _size + c_layers, imageBounds);
    layers[3] = new google.maps.GroundOverlay(root_url_c + export_bbox + url_param + _size + d_layers, imageBounds);


    // delete remove all overlay in overlays array.
    while (Overlays[0]) {

        Overlays.pop().setMap(null);
    }
    for (var i = 0; i < layers.length; i++) {

        toggleLayer(i);
    }

}


function initialize() {
    var myLatLng = new google.maps.LatLng(48.16, -103.61);
    var myOptions = {
        zoom: 10,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);


    ////////////This event is fired when the map becomes idle after panning or zooming
    google.maps.event.addListener(map, 'idle', function() {
        var bounds = map.getBounds();
        var ne = bounds.getNorthEast();
        var sw = bounds.getSouthWest();


        get_overlay_image(ne, sw);
    });
}


function toggleLayer(i) {

    if ($('.layer')[i].checked) {

        // push new overlay into overlays array
        Overlays.push(layers[i]);
        layers[i].setOpacity(0.8)
        layers[i].setMap(map);
    } else {

        layers[i].setMap(null);

    }

}

And the checkboxes html...

<div id="checkboxes">
  <input type="checkbox" id="layer0" onClick="toggleLayer(0)" class ="layer"/>PLSS <br />
  <input type="checkbox" id="layer1" onClick="toggleLayer(1)" class ="layer"/>Road Conditions <br />
  <input type="checkbox" id="layer2" onClick="toggleLayer(2)" class ="layer"/>Cities, Counties <br />
  <input type="checkbox" id="layer3" onClick="toggleLayer(3)" class ="layer"/>Detailed Roads
</div>

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.