Change source of shape MapLayer on marker click

[David]

I already have marker click event setup and able to extract coordinates from marker. Now, i need dynamically show lines initiated from these coordinates on marker click, meaning i need to manipulate source to my shape layer.

Any recommendations?

[Ianko]

Hi David,

Shape layers in RadMap should be bound to GeoJSON data via RadClientDataSource—http://docs.telerik.com/devtools/aspnet-ajax/controls/map/functionality/shapes.

The most straight-forward approach I can think of is updating the the data source file bound to the shape layer when marker is clicked and reload RadMap and RadClientDataSource.  This will update the Shape layer. 

Regards,
Ianko
Telerik

[David]

In my understanding marker click is a client-side event. How can i do what you described on client-side?

[Ianko]

Hi David,

One option is to perform an AJAX request from the client by using RadAjaxManager—http://docs.telerik.com/devtools/aspnet-ajax/controls/ajaxmanager/server-side-programming/events/onajaxrequest.

Regards,
Ianko
Telerik

[David]

Hi Ianko,

    For some reason it does not work for me. Let me know if i am doing something wrong, please

 Protected Sub RadAjaxManager1_AjaxRequest(ByVal sender As Object, ByVal e As Telerik.Web.UI.AjaxRequestEventArgs)

            RadClientDataSource1.DataSource.WebServiceDataSourceSettings.BaseUrl = "Content/routes2.json"
            RadClientDataSource1.DataBind()

            RadMap1.DataBind()

        End Sub

 

<telerik:RadMap ID="RadMap1" runat="server" Zoom="6" Height="600px"
                            BackColor="#E6F5F8" MinZoom="2" Skin="Glow">
                <ClientEvents OnMarkerClick="markerClickHandler"/>
                <LayersCollection>
                    <telerik:MapLayer></telerik:MapLayer>
                    <telerik:MapLayer Type="Shape" ClientDataSourceID="RadClientDataSource1" Opacity="0.7">                    
                        <StyleSettings>
                            <StrokeSettings Color="#ffffff" Width="3" />
                        </StyleSettings>
                    </telerik:MapLayer>
                    <telerik:MapLayer Key="Markers"  ClientDataSourceID="RadClientDataSource2" Type="Marker" Opacity="1">
                        <TooltipSettings Position="Bottom"
                            Template="<div class='markers'>#= getImage(marker.dataItem) #<div class='title'>#= marker.dataItem.Name #</div><hr><div class='details'>Coordinates: #= marker.dataItem.location[0] + ' / ' + marker.dataItem.location[1] #</div></div>">
                        </TooltipSettings>
                    </telerik:MapLayer>
                </LayersCollection>
                <CenterSettings  Latitude="42.3537012"  Longitude="-71.0586317"/>
            </telerik:RadMap>

 

 <telerik:RadClientDataSource runat="server" ID="RadClientDataSource1">
        <DataSource>            
            <WebServiceDataSourceSettings ServiceType="GeoJSON">
                <Select Url="" DataType="JSON" />
            </WebServiceDataSourceSettings>
        </DataSource>
    </telerik:RadClientDataSource>

[Ianko]

Hello David, 

The DataBind methods in this case does not do anything with the controls as there is no server-side data binding. Also, I do not see the json file to be updated programmatically, so that changes to take place later when a post back occurs.

What should be done is:

1. Use an AjaxManager to configure it to update RadClientDataSource and RadMap;
2. Use the click handlers to trigger an AJAX call to the server;
3. Update the JSON file based on arguments passed to the server via the AJAX call;
4. Finally, when controls are updated after the AJAX call, the new GeoJSON will be loaded automatically without the need of DataBind method or configuring something additional in RadClientDataSource.

Regards,
Ianko
Telerik

[David]

I tried to implement your suggestion to the best of my understanding. Can you please create example in which Layer file updated on Marker click. It would be very helpful.

[Ianko]

Hi David,

You can find a sample ASP.NET page that shows how you can use Json.Net library to add up points to a LineString shape.

To properly test the sample:

1.  Add the Telerik.Web.UI.dll assembly in the Bin folder of the site;
2. Make sure you have opened the browser toolbar and configured the browser to not cache resources.

Of course, for the sake of best practices in web development, this should be implemented rather as a web service to at least prevent the browser cache mechanism and assure that each time ClientDataSource fetches the data when updated.

However, this can serve you as an example for the required functionality.   

Regards,
Ianko
Telerik

[David]

Ianko,

    For some reason your example does not work. I see only markers before and after clicks.

    I think this example is exactly what i need, please try to fix it

Thank you

 David

[Ianko]

Hello David,

Here you are a screencast that shows how this is testable on my end—http://screencast.com/t/epMPHQOUfTiV.

I assume it is the browser cache that causes you troubles to test the example sent. 

As mentioned, you should make sure that cache is disabled. Therefore:

1. Run the page under Chrome;
2. Open the dev toolbar;
3. Select the Network tab;
4. Make sure that Disable cache option is checked.
5. Start clicking on markers (with open dev toolbar). 

Also, you should note that this is only an example for achieving the results you need. This should be implemented as a web service, so that when new data is entered, new JSON content to be delivered via different URL queries. And thus, to prevent the browser caching the resource.

Regards,
Ianko
Telerik

[David]

Another question: Is there a way to make lines different color/thickness? I assume multiple layers can work, but i need to work with more than hundred lines.

[Ianko]

Hi David,

You can see in this demo (http://demos.telerik.com/aspnet-ajax/map/examples/functionality/shapes-layer/defaultcs.aspx) how you can render the shape with a color fetched from the GeoJSON data bound to the layer. For thickness, you can use the stroke.width option.

The same approach can be used in your case. Additionally, the color should be generated programmatically when creating the new JSON literal. 

Regards,
Ianko
Telerik

[David]

Thank you

[David]

Ianko,

    I've been very helpful on this one, but i need more info, please. I am trying to hook up data source on server side, but for some reason i am receiving "NetworkError: 404 Not Found - http://localhost:8411/freight.json"

 Any ideas?

           dsBubbles.DataSource.WebServiceDataSourceSettings.Select.Url = "freight.json" 
            dsBubbles.DataSource.WebServiceDataSourceSettings.Select.DataType = ClientDataSourceDataType.JSON

            dsBubbles.DataBind()

  <telerik:RadClientDataSource runat="server" ID="dsBubbles">
                    <DataSource>
                        <WebServiceDataSourceSettings ServiceType="GeoJSON">
                        </WebServiceDataSourceSettings>
                    </DataSource>
                </telerik:RadClientDataSource>

 <telerik:RadMap runat="server" ID="RadMap1" Zoom="4" MinZoom="2" Skin="Silk"
                                        Width="1200px" Height="580px"
                                        style="margin-top:10px;">                        
                            <LayersCollection>
                                <telerik:MapLayer ClientDataSourceID="dsCountries" Type="Shape" Opacity="1"></telerik:MapLayer>
                                <telerik:MapLayer ClientDataSourceID="dsBubbles" Type="Shape" Opacity="0.9"></telerik:MapLayer>
                            </LayersCollection>
                            <CenterSettings Longitude="-102" Latitude="43"/>
                        </telerik:RadMap>

[Ianko]

Hi,

I assume you are getting this error because IIS needs the .json mime type to be configured in the web.config file in order to be fetched as application/json type. You can read mire about that here—http://stackoverflow.com/questions/8158193/how-to-allow-download-of-json-file-with-asp-net.

Basically, you need to add this setting in the system.webServer tag in the web.config file:

<staticContent>
  <mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>

On a side note, you do not need to call the server-side DataBind method of the ClientDataSource control as binding happens on the client not on the server.

Regards,
Ianko
Telerik

[David]

Perfect!!

Thank you Ianko! And in my previous post i of course meant "You've been very helpful on this one". Just a typo.

 

 

[Ianko]

Hello David,

You are welcome. Glad I have been able to help you out. 

Regards,
Ianko
Telerik

[David]

Ianko, I need little bit more of your wisdom. For some reason in iframes my maps look kinda not "refreshed" (pic attached). Any suggestions? Thank you

 

[Ianko]

Hello David,

I assume the iframe elements are being either resized, shown, or loaded dynamically. Either of these situations can be resolved by calling the resize() method of the kendo Map instance and re-center it via the centet() method. 

You can see a similar discussion about the same issue here—http://www.telerik.com/forums/radmap-bootstrap-tabs. Similar approach should help you resolve the visual issue.

Regards,
Ianko
Telerik

[David]

Worked like a charm! Thank you