AJAX map control - a few questions from a newbie

Topics: Web Controls
Apr 19, 2007 at 11:33 AM
Hi - Firstly, i want to say that Sharpmap rocks! I've downloaded the AJAX map control and had a play around, but what i'm wondering is how to implement my own functionality - for example, click on a polygon and retrieve data from the database. I understand how this could be done from http://www.codeplex.com/SharpMap/Wiki/View.aspx?title=Get%20features%20from%20a%20click%20on%20the%20map&referringTitle=How%20to... but this isn't an ajaxified map. With the ajax map, each time the map is clicked it keeps zooming in - is there a way to stop this zooming and run a separate ajax function? I have seen the ajax example in the demo, but this doesn't include the beautiful features of layer groups and zoom box etc. - i'd like to keep these, rather than re-write them.

Any help would be much appreciated. Thanks.
Apr 24, 2007 at 7:24 PM
Anyone got any ideas???? :-)
Apr 24, 2007 at 8:15 PM
Hi spottydog,
There isn't a built in way to do it through the AJAXMap control. You'll have to implement it yourself. The way I get it done is to use a JavaScript XMLHttpRequest to call an .ashx file that queries my data at the map click.

something like:

My data is housed in MsSql Express using the MsSqlSpatial add-on so its as easy as writing a SELECT statement in the MapClickHandler.ashx file.

It might not be the best way of doing it. But it's effective

In order to stop the Map from zooming in when you click the AJAXMap you want to make sure that the onClick event of the Query ListItem is calling the ajaxMapObj.enableClickEvent(). This will let you define a custom event within the OnClickEvent of the AjaxMapControl.

Apr 25, 2007 at 11:56 AM
Hi rp - thanks for your reply.

I had tried something along the lines of what you suggested (as shown below), but clicking on my image 'info' doesn't turn off the previous button clicked - so if the measure tool was previously clicked, when you click info, then click on the map, the measure tool is still operating - so i guess it's not stop it zooming that i need, but make it recognise my custom function?? Any help/example code would be greatly appreciated.

<script language="javascript" type="text/javascript">

function MapClicked(event,obj)
//do something here.....

<form id="Form1" runat="server" action="Ajax.aspx">
<div style="text-align:center;padding:1em;">
<h2>State of Washington</h2>
<div style="background:#f3f2e7;color:#000;width:74em;text-align:left;height:54em;border:solid 1px #000">
<div style="position:relative;margin-left:18em;width:52em;">
<div id="clickTools" class="toolbar" style="width:4.2em">
<img id="zoomIn" src="images/zoom_in.gif" onclick="ajaxMapObj.zoomAmount = 3; togToolbar(this.id,'clickTools');" onmouseover="if(this.className=='button')this.className='raised';" onmouseout="if(this.className=='raised')this.className='button';" class="pressed" />
<img id="zoomOut" src="images/zoom_out.gif" onclick="ajaxMapObj.zoomAmount = 0.33; togToolbar(this.id,'clickTools');" onmouseover="if(this.className=='button')this.className='raised';" onmouseout="if(this.className=='raised')this.className='button';" class="button" />
<div id="dragTools" class="toolbar" style="width:8.5em;left:6em;">
<img id="pan" src="images/pan.gif" onclick="javascript:SharpMap_ToolSelect(ajaxMapObj,this.id); togToolbar(this.id,'dragTools');" onmouseover="if(this.className=='button')this.className='raised';" onmouseout="if(this.className=='raised')this.className='button';" class="pressed" />
<img id="boxZoom" src="images/zoomselected.gif" onclick="javascript:SharpMapToolSelect(ajaxMapObj,this.id); togToolbar(this.id,'dragTools');" onmouseover="if(this.className=='button')this.className='raised';" onmouseout="if(this.className=='raised')this.className='button';" class="button" />
<img id="measure" src="images/measure.gif" onclick="javascript:SharpMap_ToolSelect(ajaxMapObj,this.id); togToolbar(this.id,'dragTools');" onmouseover="if(this.className=='button')this.className='raised';" onmouseout="if(this.className=='raised')this.className='button';" class="button" />
<img id="info" src="images/info.gif" onclick="javascript:ajaxMapObj.enableClickEvent(); togToolbar(this.id,'infoTools');" onmouseover="if(this.className=='button')this.className='raised';" onmouseout="if(this.className=='raised')this.className='button';" class="button"/>
<div id="tempTools" class="toolbar" style="width:2em;left:17em;">
<img id="zoomExtents" src="images/zoomfull.gif" onclick="javascript:SharpMapZoomExtents(ajaxMapObj);" onmouseover="this.className='raised';" onmouseout="this.className='button';" onmouseup="this.className='raised';" onmousedown="this.className='pressed';" class="button" />
<div id="divLayers" style="margin:2.5em 1em 0em 1em;width:15em;position:absolute;background:#fff;border:solid 1px #000;padding:0.5em"><h4>Layers</h4>
<asp:Panel ID="pnlLayers" runat="server" Height="50px" Width="191px" />
<div style="position:absolute;width:52em;height:48em;margin-top:2em;margin-left:18em;border:1px solid #000">
<smap:AjaxMapControl width="52em" height="48em" id="ajaxMap" runat="server" OnClickEvent="MapClicked" />

Apr 30, 2007 at 2:44 PM
Can anyone help with my question please?

Apr 30, 2007 at 6:17 PM
The only thing I can think of is that the onclick events of the radio buttons are not referencing ajaxMapObj correctly. If you are using a MasterPage that has a contentplaceholder to hold the ajaxMap, you will need to reference it differently. For instance, if you have a contentplaceholder with an id="MainContent" then you'll need to change the onclick events of your radio buttons to 'ctl00MainContentajaxMapObj' not just ajaxMapObj. Aside from that you'll need to provide more info as to what's going on. Check to see if you have any JavaScript errors when you try and click on the map.

May 1, 2007 at 11:41 AM
I'm not using the ajax example from the sharpmap website - this doesn't have the ability to toggle layers and the measuring tool - if you have an example of how this could be done using the masterpage as per the website, i would be very grateful.

I'm using the ajax map control. If i take the measure tool as an example:
<img id="measure" src="images/measure.gif" onclick="javascript:SharpMap_ToolSelect(ajaxMapObj,this.id); togToolbar(this.id,'dragTools');" onmouseover="if(this.className=='button')this.className='raised';" onmouseout="if(this.className=='raised')this.className='button';" class="button" />

It appears that 'SharpMap_ToolSelect(ajaxMapObj,this.id);' has the code i need to manipulate - but i don't think i can get at this. Dou you use the ajax map control, or are you using a tweaked version of the ajax map from the website ?

Thanks for your help.
May 1, 2007 at 2:43 PM
I'm using the ajax map control from the website. And looking at your code, it looks like we are using the same control. Are you getting any JavaScript errors on your page when you try and use the measure tool? You'll have to look at the source .js file and find the SharpMap_ToolSelect and togToolbar functions and try and figure out why the zoom function isn't getting disabled.
May 1, 2007 at 5:53 PM
Edited May 1, 2007 at 6:02 PM
Well this is very strange - the ajax map control was one i got from another sharpmap user as the link to the map control was broken on the codeplex for months. I've done a search for 'SharpMapToolSelect' in VS2005 and it doesn't appear in any code. There was a function called 'SharpMapToolSelect' in a file called 'ajaxMap.js' that came in the zip file the user sent me, but i haven't included this in my solution and yet the ajax controls e.g. measure, zoombox etc. still work.

Do you have the original ajax map control that you downloaded i can try?

May 9, 2007 at 10:39 AM
I'm struggling (still) with implementing the ajaxmap control. So far i've got the zoom in, zoom out, pan tools, and some other custom functions working, but not the zoom box using this code, hacked from the original ajax demo on this site:

<div id="container_div">
<asp:scriptmanager ID="Scriptmanager1" runat="server" EnablePageMethods="true" >

<img id="boxZoom" alt="" src="images/zoomselected2.gif" onclick="javascript:SharpMapToolSelect(ajaxMapObj,this.id); togToolbar(this.id,'dragTools');" onmouseover="if(this.className=='button')this.className='raised';" onmouseout="if(this.className=='raised')this.className='button';" class="button" />

<smap:AjaxMapControl width="100%" height="700px" id="ajaxMap" runat="server" OnClickEvent="MapClicked" OnViewChange="ViewChanged" onViewChanging="ViewChanging" />

...how do you get the box zoom working? i don't get any javascript errors, but dragging map just pans around - am i missing a reference to the boxZoom drag functions?