How do I refresh static map?

AlexanderCrawford · ‎04-29-2014

I would like to refresh ArcGIS map on the page when my ajax completes call. I have a function that gets executed when ajax completes call in that function i have:

function onAjaxSuccess()
{

map.setExtent(map.extent);
mapLayer.refresh();

}

but map does not get refreshed.

JonathanUihlein · ‎04-29-2014

Hey Alex! The map shouldn't need to be refreshed in normal circumstances.

What is your use-case and could you provide a sample using jsfiddle.net?

Thanks!

AlexanderCrawford · ‎04-29-2014

Hey Alex! The map shouldn't need to be refreshed in normal circumstances.

What is your use-case and could you provide a sample using jsfiddle.net?

Thanks!

I have a drop down and ajax handler that is attached to that drop down. When selection in the drop down changes I would like to show new map based on what's selected in that drop down box without refreshing whole page.

JonathanUihlein · ‎04-29-2014

If you are just changing the extent, no refresh is needed.

Make sure you have a direct reference to the map object in your callback.

If this doesn't fix the issue, could you create a sample using jsfiddle.net so I can take a look? Thanks!

JeffPace · ‎04-29-2014

Try console.dir(map) before your setextent. I bet you your map object is null do to a scoping issue

AlexanderCrawford · ‎04-29-2014

If you are just changing the extent, no refresh is needed.

Make sure you have a direct reference to the map object in your callback.

If this doesn't fix the issue, could you create a sample using jsfiddle.net so I can take a look? Thanks!

Here is the initialization code for the map:

function init() {

    map = new esri.Map("map", { slider: false, logo: false });
    dojo.connect(map, "onLoad", function () {
        map.disableClickRecenter();
        map.disableDoubleClickZoom();
        map.disableKeyboardNavigation();
        map.disableMapNavigation();
        map.disablePan();
        map.disableRubberBandZoom();
        map.disableScrollWheelZoom();
        map.disableShiftDoubleClickZoom();
        map.hidePanArrows();
        map.hideZoomSlider();
    });

    dojo.connect(map, "onExtentChange", showScaleInfo);    
    //instantiate the PCI map service
    swaMapLayer = new esri.layers.ArcGISDynamicMapServiceLayer(PCILayer, { "visible": true });
    //add the PCI layer to the map
    map.addLayer(swaMapLayer);
    //scalebar = new dtdg.scalebar(map);

    //get the SourceTagNumber
    featureId = $('#SelectASourceSelected').val();
    var queryTask, query;
    //build a query to get the extent of the SWA delineated area
    queryTask = new esri.tasks.QueryTask(queryLayer);
    query = new esri.tasks.Query();
    //the geometry is needed to get the extent of the feature
    query.returnGeometry = true;

    query.where = "SRCID='" + featureId + "'";    

    queryTask.execute(query, onQueryResult);
}

I show map on the website based on "featureId" value. featureId is value of the drop down box.

When my ajax completes function:

function ajaxOnSuccess() {

}

gets called, how in that function do i tell arcgis to reload its static map?

AlexanderCrawford · ‎04-29-2014

Try console.dir(map) before your setextent. I bet you your map object is null do to a scoping issue

Map object is not null.

bject
__LOD: undefined
__container: div#map_container.container
__panning: false
__root: div#map_root.container
__tileInfo: null
__visibleDelta: Object
__visibleRect: Object
__zooming: false
_canZoom: function (){return _bb.apply(_ba,arguments||[]);}
_clickDuration: 300
_clickTimer: null
_connects: Array[11]
_cursor: "default"
_dblClickZoomHandler_connect: Array[4]
_delta: null
_downCoords: null
_downPanHandler_connect: Array[4]
_downZoomHandler_connect: Array[4]
_dragEnd: false
_dragOrigin: null
_fireClickEvent: function (){return _bb.apply(_ba,arguments||[]);}
_fireMouseWheel: function (){return _bb.apply(_ba,arguments||[]);}
_firstLayerId: null
_fixedPan: function (){return _bb.apply(_ba,arguments||[]);}
_gc: Object
_infoWindowCoords: null
_infoWindowIsShowing: false
_internalLayerIds: Array[1]
_isPanningOrZooming: function (){return _bb.apply(_ba,arguments||[]);}
_iwExtentChange_connect: null
_iwPan_connect: null
_iwZoomStart_connect: null
_keyNavigatingHandler_connect: Array[4]
_keyNavigationEndHandler_connect: Array[4]
_keyboardPanDx: 0
_keyboardPanDy: 0
_layerDivs: Array[0]
_layerSize: 1
_layers: Array[0]
_layersDiv: div#map_layers.layersDiv
_mapParams: Object
_mouseWheelEvent: Object
_mouseWheelTimer: null
_navDiv: null
_normalizeRect: function (){return _bb.apply(_ba,arguments||[]);}
_onKeyDown_connect: null
_onKeyUp_connect: null
_onLoadHandler_connect: Array[4]
_onMouseDragHandler_connect: null
_onMouseMoveHandler_connect: Array[4]
_onMouseUpHandler_connect: Array[4]
_panEndHandler: function (){return _bb.apply(_ba,arguments||[]);}
_panHandler_connect: null
_panInitEvent: "onMouseDown"
_panStartHandler_connect: null
_panningHandler: function (){return _bb.apply(_ba,arguments||[]);}
_params: Object
_processEvent: function (){return _bb.apply(_ba,arguments||[]);}
_ratioH: 0.3474365355898457
_ratioW: 0.3474365355898506
_recenterHandler_connect: Array[4]
_recenterZoomHandler_connect: null
_scrollZoomHandler_connect: Array[4]
_slider: null
_sliderChangeAnchor: null
_slider_connect: null
_slidermovestop_connect: null
_upPanHandler_connect: null
_upZoomHandler_connect: null
_zoom: 0
_zoomAnim: null
_zoomAnimDiv: div#_zAD
_zoomEndHandler: function (){return _bb.apply(_ba,arguments||[]);}
_zoomHandler_connect: null
_zoomInitEvent: "onMouseDown"
_zoomRect: Object
_zoomStartHandler: function (){return _bb.apply(_ba,arguments||[]);}
_zoomingHandler: function (){return _bb.apply(_ba,arguments||[]);}
container: div#map.map
cursor: "default"
extent: Object
graphics: Object
graphicsLayerIds: Array[0]
height: 698
id: "map"
infoWindow: Object
isClickRecenter: false
isDoubleClickZoom: false
isKeyboardNavigation: false
isPan: false
isPanArrows: false
isRubberBandZoom: false
isScrollWheelZoom: false
isShiftDoubleClickZoom: false
isZoomSlider: false
layer0_addtoken_err: Array[4]
layer0_addtoken_load: Array[4]
layerIds: Array[1]
loaded: true
onClick: function (){var ap=Array.prototype,c=arguments.callee,ls=c._listeners,t=c.target;var r=t&&t.apply(this,arguments);var lls;lls=[].concat(ls);for(var i in lls){if(!(i in ap)){lls.apply(this,arguments);}}return r;}
onDblClick: function (){var ap=Array.prototype,c=arguments.callee,ls=c._listeners,t=c.target;var r=t&&t.apply(this,arguments);var lls;lls=[].concat(ls);for(var i in lls){if(!(i in ap)){lls.apply(this,arguments);}}return r;}
onExtentChange: function (){var ap=Array.prototype,c=arguments.callee,ls=c._listeners,t=c.target;var r=t&&t.apply(this,arguments);var lls;lls=[].concat(ls);for(var i in lls){if(!(i in ap)){lls.apply(this,arguments);}}return r;}
onKeyDown: function (){var ap=Array.prototype,c=arguments.callee,ls=c._listeners,t=c.target;var r=t&&t.apply(this,arguments);var lls;lls=[].concat(ls);for(var i in lls){if(!(i in ap)){lls.apply(this,arguments);}}return r;}
onKeyUp: function (){var ap=Array.prototype,c=arguments.callee,ls=c._listeners,t=c.target;var r=t&&t.apply(this,arguments);var lls;lls=[].concat(ls);for(var i in lls){if(!(i in ap)){lls.apply(this,arguments);}}return r;}
onLoad: function (){var ap=Array.prototype,c=arguments.callee,ls=c._listeners,t=c.target;var r=t&&t.apply(this,arguments);var lls;lls=[].concat(ls);for(var i in lls){if(!(i in ap)){lls.apply(this,arguments);}}return r;}
onMouseDown: function (){var ap=Array.prototype,c=arguments.callee,ls=c._listeners,t=c.target;var r=t&&t.apply(this,arguments);var lls;lls=[].concat(ls);for(var i in lls){if(!(i in ap)){lls.apply(this,arguments);}}return r;}
onMouseWheel: function (){var ap=Array.prototype,c=arguments.callee,ls=c._listeners,t=c.target;var r=t&&t.apply(this,arguments);var lls;lls=[].concat(ls);for(var i in lls){if(!(i in ap)){lls.apply(this,arguments);}}return r;}
onPan: function (){var ap=Array.prototype,c=arguments.callee,ls=c._listeners,t=c.target;var r=t&&t.apply(this,arguments);var lls;lls=[].concat(ls);for(var i in lls){if(!(i in ap)){lls.apply(this,arguments);}}return r;}
onPanEnd: function (){var ap=Array.prototype,c=arguments.callee,ls=c._listeners,t=c.target;var r=t&&t.apply(this,arguments);var lls;lls=[].concat(ls);for(var i in lls){if(!(i in ap)){lls.apply(this,arguments);}}return r;}
onResize: function (){var ap=Array.prototype,c=arguments.callee,ls=c._listeners,t=c.target;var r=t&&t.apply(this,arguments);var lls;lls=[].concat(ls);for(var i in lls){if(!(i in ap)){lls.apply(this,arguments);}}return r;}
onUnload: function (){var ap=Array.prototype,c=arguments.callee,ls=c._listeners,t=c.target;var r=t&&t.apply(this,arguments);var lls;lls=[].concat(ls);for(var i in lls){if(!(i in ap)){lls.apply(this,arguments);}}return r;}
onZoom: function (){var ap=Array.prototype,c=arguments.callee,ls=c._listeners,t=c.target;var r=t&&t.apply(this,arguments);var lls;lls=[].concat(ls);for(var i in lls){if(!(i in ap)){lls.apply(this,arguments);}}return r;}
onZoomStart: function (){var ap=Array.prototype,c=arguments.callee,ls=c._listeners,t=c.target;var r=t&&t.apply(this,arguments);var lls;lls=[].concat(ls);for(var i in lls){if(!(i in ap)){lls.apply(this,arguments);}}return r;}
position: Object
spatialReference: Object
width: 918
__proto__: Object

AlexanderCrawford · ‎04-29-2014

One other thing that might help is that I have a html tag <div id="map"></div> when page loads arcgis inserts map into that tag, when ajx call completes it reloads <div id="map"></div> tag. I guess better question would be how do I ask arcgis to reinsert map in to <div id="map"></div> tag?

JonathanUihlein · ‎04-29-2014

Alex: I think I might be confused as to what you are trying to accomplish.

Can you recreate a sample of your issue using jsfiddle.net?

AlexanderCrawford · ‎04-29-2014

Alex: I think I might be confused as to what you are trying to accomplish.

Can you recreate a sample of your issue using jsfiddle.net?

No, I cannot provide this sample, it's an MVC web app and there are many parts that make one page.

But I'll try to explain it better does arcgis map has similar function like for example jquery chosen $('#dropdownlist').trigger("chosen:updated");

Maybe this will make it more clear;

I have a page and on that page I have a drop down box with "Location 1", "Location 2", "Location 3". On that same page I have an html element <div id="map"></div>. When page loads the first time map arcgis automatically inserts the map in to <div id="map"></div> for "Location 1".

In situation when someone chooses "Location 2" from drop down javascript ajax removes <div id="map"></div> and reinserts it. When it reinserts it <div id="map"></div> has no map in it. My question is, how do I tell arcgis to reinsert map into <div id="map"></div> again and with "Location 2"?