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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Simple Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.16/"></script>
<script>
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>
<form runat="server">
<div id="map"></div>
<div>
<asp:Button runat="server" ID="zoomIn" Text="Zoom to extent" OnClientClick="zoomIn();" />
</div>
</form>
</body>
</html>
Solved! Go to Solution.
The form is a problem, but you can set the onsubmit property to prevent reloading the page.
<form runat="server" onsubmit="return false">
Does your map need to be inside the form?
Thanks for your help. form is the problem here.
The form is a problem, but you can set the onsubmit property to prevent reloading the page.
<form runat="server" onsubmit="return false">
That did the trick! thank you!
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.
Must the button be an ASP button? Try a normal button:
<button onclick="zoomIn();" style="">Zoom</button>
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.
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.