topic Re: setExtent does not work properly in ArcGIS JavaScript Maps SDK Questions

setExtent does not work properly

YanWang4 — Fri, 10 Jun 2016 20:48:09 GMT

I'm just starting to learn javascript API and copy/pasted some very simple code to test and run. On click of the button the map suppose to zoom in but after a second or 2 it just zooms back to it's initial extent. What have I done wrong? Please help! Thanks in advance.

<!DOCTYPE html>

<html>

<head>

<title>Simple Map</title>

<style>

html, body, #map {

height: 100%;

margin: 0;

padding: 0;

}

</style>

var map;

require(["esri/map", "dojo/domReady!"], function (Map) {

map = new Map("map", {

basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd

center: [-122.45, 37.75], // longitude, latitude

zoom: 13

});

function zoomIn() {

var extent = map.extent;

map.setExtent(extent.expand(0.5));

}

</script>

</head>

<body>

<div>

<asp:Button runat="server" ID="zoomIn" Text="Zoom to extent" OnClientClick="zoomIn();" />

</div>

</form>

</body>

</html>

Re: setExtent does not work properly

BillDaigle — Fri, 10 Jun 2016 22:15:22 GMT

Does your map need to be inside the form?

Re: setExtent does not work properly

FC_Basson — Mon, 13 Jun 2016 07:08:58 GMT

The form is a problem, but you can set the onsubmit property to prevent reloading the page.

<form runat="server" onsubmit="return false">

Re: setExtent does not work properly

YanWang4 — Mon, 13 Jun 2016 12:25:41 GMT

Thanks for your help. form is the problem here.

Re: setExtent does not work properly

YanWang4 — Mon, 13 Jun 2016 12:26:16 GMT

That did the trick! thank you!

Re: setExtent does not work properly

YanWang4 — Mon, 13 Jun 2016 13:13:24 GMT

I was cheering too soon after setting onsubmit="return false" the setExtent only works the first time the button is clicked then nothing after that. Any idea why and how to fix it?

thanks in advance.

Re: setExtent does not work properly

FC_Basson — Mon, 13 Jun 2016 13:31:43 GMT

Must the button be an ASP button? Try a normal button:

<button onclick="zoomIn();" style="">Zoom</button>

Re: setExtent does not work properly

YanWang4 — Mon, 13 Jun 2016 14:05:22 GMT

FC,

Unfortunately yes. I was tasked to convert a project that uses WebADF9.3 (yes, still) to javascript API. The zoom is actually triggered by an asp dropdown box. There are a lot of interactions between the asp controls and the map. I just picked the zoom to a given extent to test and see how much effect it will be involved. The project is pretty big and I don't have a lot of time. I was thinking/hoping I could just replace the map control without changing too much of the rest of the application. Guess I was too optimistic.

So as far as you know is it even possible to mix the javascript api with asp.net in an application that relies heavily on server side code?

thanks.

Re: setExtent does not work properly

YanWang4 — Mon, 13 Jun 2016 18:00:26 GMT

I think I solved it by wrapping the asp button inside a updatepabel. May not be the best way but now setExtent works properly. Kinda makes sense. Need to prevent the whole page from refreshing.

thanks again for the help.