Skip to main content
added 2461 characters in body
Source Link
hoogw
  • 1.8k
  • 1
  • 19
  • 23

Usually, when you get current map lat, long, zoom level, you want to update the current web page query URL, which has old info before map extend change.

if ('URLSearchParams' in window) {
    var searchParams = new URLSearchParams(window.location.search);
    searchParams.set("center_lat", center_lat);
    searchParams.set("center_long", center_long);
    searchParams.set("center_zoom", center_zoom);

    // this cause reload  https://stackoverflow.com/questions/5999118/how-can-i-add-or-update-a-query-string-parameter
    //window.location.search = searchParams.toString();

    // instead avoid reload
    var newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();
    history.pushState(null, '', newRelativePathQuery);

    }// if

So the whole function is:

function update_center_latLngZoom(){

  center_latLng = map.extent.getCenter();
  center_lat = center_latLng.getLatitude();
  center_long = center_latLng.getLongitude();
  center_zoom = map.getZoom();


  if ('URLSearchParams' in window) {
    var searchParams = new URLSearchParams(window.location.search);
    searchParams.set("center_lat", center_lat);
    searchParams.set("center_long", center_long);
    searchParams.set("center_zoom", center_zoom);

    // this cause reload  https://stackoverflow.com/questions/5999118/how-can-i-add-or-update-a-query-string-parameter
    //window.location.search = searchParams.toString();

    // instead avoid reload
    var newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();
    history.pushState(null, '', newRelativePathQuery);

    }// if

}// function

This function should be trigged by map move or zoom or extend change. You need to attach this function to map extend change event.

  1. google map, attach to map idle event

    map.addListener('idle', function() {   
    
                       update_center_latLngZoom();
    
               });
    

2)arcgis map api, attach to map extent-change event

   map.on("extent-change", function(){
                    
                   // url search parameter update 
                    update_center_latLngZoom()

                     
                    });

Usually, when you get current map lat, long, zoom level, you want to update the current web page query URL, which has old info before map extend change.

if ('URLSearchParams' in window) {
    var searchParams = new URLSearchParams(window.location.search);
    searchParams.set("center_lat", center_lat);
    searchParams.set("center_long", center_long);
    searchParams.set("center_zoom", center_zoom);

    // this cause reload  https://stackoverflow.com/questions/5999118/how-can-i-add-or-update-a-query-string-parameter
    //window.location.search = searchParams.toString();

    // instead avoid reload
    var newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();
    history.pushState(null, '', newRelativePathQuery);

    }// if

So the whole function is:

function update_center_latLngZoom(){

  center_latLng = map.extent.getCenter();
  center_lat = center_latLng.getLatitude();
  center_long = center_latLng.getLongitude();
  center_zoom = map.getZoom();


  if ('URLSearchParams' in window) {
    var searchParams = new URLSearchParams(window.location.search);
    searchParams.set("center_lat", center_lat);
    searchParams.set("center_long", center_long);
    searchParams.set("center_zoom", center_zoom);

    // this cause reload  https://stackoverflow.com/questions/5999118/how-can-i-add-or-update-a-query-string-parameter
    //window.location.search = searchParams.toString();

    // instead avoid reload
    var newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();
    history.pushState(null, '', newRelativePathQuery);

    }// if

}// function

This function should be trigged by map move or zoom or extend change. You need to attach this function to map extend change event.

  1. google map, attach to map idle event

    map.addListener('idle', function() {   
    
                       update_center_latLngZoom();
    
               });
    

2)arcgis map api, attach to map extent-change event

   map.on("extent-change", function(){
                    
                   // url search parameter update 
                    update_center_latLngZoom()

                     
                    });
Source Link
hoogw
  • 1.8k
  • 1
  • 19
  • 23

On google map api v3, map is the google map object, this is how you get map center lat, long, and zoom level.

center_latLng = map.getCenter();
center_lat = center_latLng.lat();
center_long = center_latLng.lng();
center_zoom = map.getZoom();

However, arcgis api is little different, map is arcgis map object, you will use extend property.

  center_latLng = map.extent.getCenter();
  center_lat = center_latLng.getLatitude();
  center_long = center_latLng.getLongitude();
  center_zoom = map.getZoom();