SharpMap Ajax Map Control

Topics: SharpMap v0.9 / v1.x, Web Controls
Aug 4, 2011 at 1:37 PM

Hi,

I am using Ajax Map control to display my custom map (data from SQL database). When I click the ajax map it is zooming and panning, not able to disable that default zooming option in the control. Tried some of the solutions given in Discussion area here but no help. Can anyone of you help me to override this functionality. Currently my code works well with the mouse over and mouse out with control not mouse click.

 

Thanks,

deviMurugan

 

Editor
Aug 6, 2011 at 12:19 AM

Hi devi

An option if you want to disable default zooming is to set

obj.clickEventActive = true;

on ajaxMap.js javascript file, inside SharpMap_Init function.

This will enable MapClicked function on your .aspx page on map click.

 

Just to let you know, Ajax Map control will no longer be supported, to focus on WMS server + Open Layers.

http://sharpmap.codeplex.com/discussions/254362

Aug 6, 2011 at 9:06 PM

Hi Carjona,

 

Thanks for the quick reply. I tried what you told but i didn't get that click event worked. I  have the following code in the aspx page, please have a look and provide your suggestions. In the following javascript methods ViewChanging and ViewChanged works with out any issues.

 

<script type="text/javascript">
    //Fired when query is selected and map is clicked
    function MapClicked(event, obj) {
        var mousePos = SharpMap_GetRelativePosition(event.clientX, event.clientY, obj.container);
        var pnt = SharpMap_PixelToMap(mousePos.x, mousePos.y, obj);
        var field = document.getElementById('divDetails');
        field.innerHTML = "You clicked map at: " + pnt.x + "," + pnt.y;
    }
    //Fired when a new map starts to load
    function ViewChanging(obj) {
        var field = document.getElementById('divDetails');
        field.innerHTML = "Loading...";
    }
    //Fired when a map has loaded
    function ViewChanged(obj) {
        var field = document.getElementById('divDetails');
        field.innerHTML = "Current map center: " + obj.GetCenter().x + "," + obj.GetCenter().y;
    }
</script>

 

<smap:AjaxMapControl Width="1200px" Height="600px" ID="imgMap" runat="server"
            BorderColor="White" BorderStyle="Solid" OnClickEvent="MapClicked" OnViewChange="ViewChanged"
            OnViewChanging="ViewChanging" DisplayStatusBar="false" />

 

<asp:RadioButtonList ID="rblMapTools" runat="server" RepeatDirection="Horizontal">
        <asp:ListItem  Value="0" onclick="javascript:ctl00_MainContent_ajaxMapObj.disableClickEvent(); ctl00_MainContent_ajaxMapObj.zoomAmount = 3;"  Selected="True">Zoom in</asp:ListItem>
        <asp:ListItem  Value="1" onclick="javascript:ctl00_MainContent_ajaxMapObj.disableClickEvent(); ctl00_MainContent_ajaxMapObj.zoomAmount = 0.33333;" >Zoom out</asp:ListItem>
        <asp:ListItem  Value="2" onclick="imgMap.enableClickEvent();">Query map</asp:ListItem>
    </asp:RadioButtonList>

 

 

Thanks,

deviMurugan

Editor
Aug 8, 2011 at 1:35 PM

Hi,

Try changing onclick function for asp:ListItem Value="2"

onclick="javascript:ctl00_MainContent_ajaxMapObj.enableClickEvent();" 
Aug 8, 2011 at 5:38 PM

I wonder if SharpMap can be used to work in Linux or development IDEs like MonoDevelop with Sharpmap. And I wonder if VS is normal and to be included and the libraries and to work with SharpMap ....  I need as soon as possible if they can explain to me ahh and whether a project developed in VS so I can continue in that IDE Linux .. Greetings and thanks ..

PS: This question is for how to achieve it using SharpMap multiplatform ... Greetings and thanks ....

Aug 9, 2011 at 7:24 PM

Hi Carjona,

Thanks again. It is also not working again. Do you have any ajax (sharpmap control) aspx page code with you for clicking (querying), zoomin,zoomout if you have one please share it.

Please help me to sort out this thing.

 

Thanks,

deviMurugan

 

Aug 10, 2011 at 9:33 PM

Hi Carijona,

Waiting for your reply. Please help me to sort out this.

 

Thanks,

deviMurugan

 

Editor
Aug 11, 2011 at 4:06 PM

Hi,

The first option: obj.clickEventActive = true; on AjaxMap.js should work. It worked on lastest source code version http://sharpmap.codeplex.com/SourceControl/changeset/changes/91733

Try doing a Clean and Build solution after making changes. Let me know if it works. 

 

 

Aug 12, 2011 at 6:14 AM

Hi Carjona,

Thanks a lot for your help. I will test and let you know defnitely.

Thanks,

deviMurugan

 

Aug 28, 2011 at 6:32 PM

Hi Carjona,

Thanks a lot its working fine now as you said.

deviMurugan

 

Aug 30, 2011 at 8:35 AM

Hi Carjona,

Clicking the ajax map is working fine but now am working display the place information which is stored in SQL DB. I read that ajax pagemethods or call back needs to be implemented but i dont know how to do that can you please guide me or provide some code snippets (pagemthod or callbacks) to proceed.

 

Thanks,

deviMurugan 

Sep 1, 2011 at 1:49 PM

Hi All,

If Anyone implemented asp.net call backs or ajax Pagemethods to display the details from the database of selected polygon or feature? please share the code.

Thanks,

deviMurugan

Editor
Sep 1, 2011 at 4:43 PM

Hi deviMurugan

To implement asp.net Client Callbacks, please follow the steps provided here: http://msdn.microsoft.com/en-us/library/ms178208.aspx#Y952

You have to write your "Get Data" logic on GetCallbackResult function.

You should also check TrueIntersectionTestingWithNTS.cs inside ExampleCodeSnippets project on your sharpmap's source code, in order to get DB data.

 

carjona

Sep 21, 2011 at 2:02 PM

Hi Carjona,

Thanks for your support. Callback is working fine now. I have implemented getdata method in the RaiseCallBackEvent instead of GetCallbackresult.

Hi Everyone,

Now please help me to display a javascript popup over the ajax map, its working for me but its displaying in the back of the map image in the ajax control. Is there any property do i need to enable or any other way to do it. Also tried obout control flyout same effect please help.

Thanks,

deviMurugan

Editor
Sep 22, 2011 at 5:06 PM

Please post your javascript's popup code here.

Sep 22, 2011 at 5:46 PM
Edited Sep 22, 2011 at 5:49 PM

Hi Carjon, this is the code please have a look, thanks for your help

function showBox(displayValue) {

    var width = document.documentElement.clientWidth + document.documentElement.scrollLeft;

    var layer = document.createElement('div');

    layer.style.zIndex = 2;

    layer.id = 'layer';

    layer.style.position = 'absolute';

    layer.style.top = '0px';

    layer.style.left = '0px';

    layer.style.height = document.documentElement.scrollHeight + 'px';

    layer.style.width = width + 'px';

    //layer.style.backgroundColor = 'black';

    layer.style.opacity = '.6';

    layer.style.filter += ("progid:DXImageTransform.Microsoft.Alpha(opacity=60)");

    document.body.appendChild(layer);

    var div = document.createElement('div');

    div.style.zIndex = 3;

    div.id = 'box';

    div.style.position = (navigator.userAgent.indexOf('MSIE 6') > -1) ? 'absolute' : 'fixed';

    div.style.top = '200px'; div.style.left = (width / 2) - (400 / 2) + 'px';

    div.style.height = '50px'; div.style.width = '400px';

    div.style.backgroundColor = 'white';

    div.style.border = '2px solid silver';

    div.style.padding = '20px';

    document.body.appendChild(div);

    var p = document.createElement('p');

    p.innerHTML = displayValue;

    div.appendChild(p);

    var a = document.createElement('a');

    a.innerHTML = 'Close window';

    a.href = 'javascript:void(0)';

    a.onclick = function() {
        document.body.removeChild(document.getElementById('layer'));

        document.body.removeChild(document.getElementById('box'));
    };

    div.appendChild(a);

}

 

function MapClicked(event,obj) {
   
    var mousePos = SharpMap_GetRelativePosition(event.clientX,event.clientY,obj.container);
    var pnt = SharpMap_PixelToMap(mousePos.x, mousePos.y, obj);
    var field = document.getElementById('dataContents');
    field.innerHTML = "Clicked at " + pnt.x + " , " + pnt.y;
    showBox("Clicked at " + pnt.x + " , " + pnt.y);

}

Thanks,

deviMurugan

Editor
Sep 22, 2011 at 8:24 PM

You want a popup window with a message, rigth ?

If that is the case just call

alert('Clicked at...
Sep 23, 2011 at 1:07 PM

Hi Carjona,

Basically i need to display a popup with the clicked area details in it, it is same as google maps popup box or Bing infobox. The clicked area details will come from db thats why am using asp.net callback.

Thanks ,

deviMurugan 

Editor
Sep 23, 2011 at 11:03 PM

OK, on your aspx page you should have a ReceiveServerData(rValue) function, where rValue is your db data from callback

Inside this function you can call window.showModalDialog(URL + "?parameter1=" + rValue).

URL is the url of some custom page that takes parameters to display details.