Change source of shape MapLayer on marker click

20 posts, 0 answers
  1. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 01 Dec 2015 Link to this post

    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?

  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 04 Dec 2015 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 04 Dec 2015 in reply to Ianko Link to this post

    In my understanding marker click is a client-side event. How can i do what you described on client-side?
  5. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 04 Dec 2015 Link to this post

    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
  6. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 04 Dec 2015 in reply to Ianko Link to this post

    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>

  7. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 07 Dec 2015 Link to this post

    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
  8. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 07 Dec 2015 in reply to Ianko Link to this post

    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.
  9. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 09 Dec 2015 Link to this post

    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
  10. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 09 Dec 2015 in reply to Ianko Link to this post

    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

  11. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 10 Dec 2015 Link to this post

    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
  12. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 04 Jan Link to this post

    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.
  13. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 05 Jan Link to this post

    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
  14. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 05 Jan in reply to Ianko Link to this post

    Thank you
  15. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 15 Jan Link to this post

    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>

  16. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 18 Jan Link to this post

    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
  17. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 18 Jan in reply to Ianko Link to this post

    Perfect!!

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

     

     

  18. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 18 Jan Link to this post

    Hello David,

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

    Regards,
    Ianko
    Telerik
  19. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 21 Jan in reply to Ianko Link to this post

    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

     

  20. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 22 Jan Link to this post

    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
  21. David
    David avatar
    159 posts
    Member since:
    Mar 2014

    Posted 26 Jan in reply to Ianko Link to this post

    Worked like a charm! Thank you
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017