RadMap and US Counties, continued

[Tom]

I have the following RadClientDataSource:

      <telerik:RadClientDataSource runat="server" ID="rdsCounty">
         <DataSource>
            <WebServiceDataSourceSettings ServiceType="GeoJSON">
               <Select Url="Arizona.json" DataType="JSON" ContentType="application/json" />
            </WebServiceDataSourceSettings>
         </DataSource>
      </telerik:RadClientDataSource>

...which is being consumed by a RadMap (along with other RadClientDataSource controls) like so:

         <telerik:RadMap runat="server" ID="rdmTest" Width="800" Height="600">
            <ClientEvents OnShapeCreated="configureShape" OnShapeClick="clickShape" OnLoad="zoomToContiguousUSA" />
            <LayersCollection>
               <telerik:MapLayer Type="Bing" Key="my key here" />
               <telerik:MapLayer Type="Shape" ClientDataSourceID="rdsState" />
               <telerik:MapLayer Type="Shape" ClientDataSourceID="rdsCounty" />
            </LayersCollection>
         </telerik:RadMap>

Is it possible to change the URL from "Arizona.json" to "Illinois.json"? I want to do this on the client, using javascript, in response to user action. I've looked at the client side API for the RadClientDataSource and I don't see how this could be done. I could also load Illinois.json manually, but I've tried something like this:

                     map.layers[2].setDataSource(JSON.parse(IllinoisFileContents));

...but that doesn't seem to work.

Is there a proper technique for this?

[Vessy]

Hi Tom,

Besides passing the new json file to the layer[0] data source, you will also update the options of the map with the newly set ones like demonstrated in the second sample here:

https://docs.telerik.com/devtools/aspnet-ajax/controls/map/data-binding/client-side#data-binding-a-shape-layer

    function OnInitialize(sender, args) {
        var originalOptions = args.get_options();

        originalOptions.layers[0].dataSource = { data: shapeData }; 

        args.set_options(originalOptions);
    }

 

Regards,
Vessy
Progress Telerik

[Tom]

Thank you, Vessy.

I tried your suggestion but I'm still having trouble. I have a map with three layers:

               <telerik:MapLayer Type="Bing" Key="the key" />
               <telerik:MapLayer Type="Shape" ClientDataSourceID="rdsState" />
               <telerik:MapLayer Type="Shape" />

Layers 0 (Bing) and 1 (shapes of US states) show up fine. Layer 2 is empty on purpose. What I want to do is superimpose counties on top of whatever state is clicked by loading data into layer 2 at runtime using JavaScript.

 

In your example, the OnInitialize is only triggered once when the map is first initialized, so I'm not sure how I can set options after calling:

map.layers[2].setDataSource(JSON.parse(IllinoisFileContents));

I tried saving the options from the OnInitialize event and doing this:

                     map._options = SavedOptions;

...but this doesn't work. Can you help? Is this even possible?

[Vessy]

Hi Tom,

I am afraid that the OnInitialize is the latest moment in which you can change a layer's data source and update the map UI with it. A possible option you can consider is to wrap the map into AjaxPanel and initiate a manual Postback on each shape clickk, so the OnInitialize event will be triggered again.