US Counties map

[David]

I need to color some of US counties with specific colors.

Ideally some kind of "heat map" (meaning different tints of the same color depending on the number supplied. Bigger number results in deeper color tint).

Not sure how to approach this task.

Thank you

[Ianko]

Hello David,

Similar scenario is illustrated in this Kendo Map demo—http://demos.telerik.com/kendo-ui/map/geojson.

Also, the same but with RadMap is available here—http://demos.telerik.com/aspnet-ajax/map/examples/functionality/shapes-layer/defaultcs.aspx.

Regards,
Ianko
Telerik

[David]

Ianko,

  Thank you for reply. I need exactly what your Kendo example does. However i don't have Kendo subscription ( i didn't realize there are more than just RadMap). Can you give me some RadMap heat map example with geojson (or other way) for US counties, please?

[Ianko]

Hello David,

RadMap and Kendo Map are the same products. RadMap is just a wrapper control for ASP.NET AJAX. Thus, the same can be achieved by using the same GeoJSON data and the same client-side logic implemented in the Kendo Map demo.

Another demo for binding to GeoJSON scenario is available here—http://demos.telerik.com/aspnet-ajax/map/examples/data-binding/client-side-data-binding/defaultcs.aspx.

Regards,
Ianko
Telerik

[David]

I really struggle to implement desired functionality. You are saying that "RadMap and Kendo Map are the same products", i am not sure how it helps. Example with earthquake is not useful to me. Especially it seems that earthquake data is static and stored in json. Also, i would like to have some kind of dynamic legend. I tried to us the following as starting point, but i am getting error "us_counties.json not found". Can you please create example with RadMap that produces result similar to http://demos.telerik.com/kendo-ui/map/geojson.

Thank you

 

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

<telerik:RadMap runat="server" ID="RadMap1" Zoom="2" MinZoom="2" Skin="Silk">
            <ClientEvents OnShapeCreated="shapeCreated" OnShapeMouseEnter="shapeMouseEnter"
                OnShapeClick="shapeClick" OnPan="clientPan" OnZoomStart="zoomStart"
                OnShapeMouseLeave="shapeMouseLeave" OnClick="clientClick" OnMarkerCreated="markerCreated" />
            <LayersCollection>
                <telerik:MapLayer ClientDataSourceID="RadClientDataSource1" Type="Shape" Opacity="1"></telerik:MapLayer>
            </LayersCollection>
            <CenterSettings Longitude="32" Latitude="7" />
        </telerik:RadMap> 

 

 

[Ianko]

Hello David,

You can find attached the required demo. Note that this is a sample ASP.NET page. To run it locally, you need to add a Bin folder with the Telerik.Web.UI.dll assembly inside.

Regards,
Ianko
Telerik

[David]

Hi Ianko,

   This is very good example. However, i need to be able to load values from dataset. Sorry, i didn't mention this before. Can you please produce something similar with basic (no values) json?

 Thank you very much

David

 

[Ianko]

Hi David,

Layers of type Shape can be data bound only via client-side techniques, where the data can be only GeoJSON, which is JSON format. DataSet assumes that server-side data-binding is involved, which is not supported in such a scenario.

Regards,
Ianko
Telerik

[David]

I see. What kind of layers can be done through server-side?

Also, is there a way to implement scenario when clicked shape changes it's color. So if i clicked 5 counties i want them to stay different color than rest?

[Ianko]

Hello David,

You can bind only Markers via server-side data-binding—http://demos.telerik.com/aspnet-ajax/map/examples/data-binding/dataset/defaultcs.aspx.

As for Shape clicking, you can use the shapeClick event (http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/map#events-shapeClick) to implement the described scenario.

Regards,
Ianko
Telerik

[David]

Ianko, thank you for continuing support. So, to permanently color particular shapes on click i will have to recreate json with new values and reload? Or is there a better way?

[Ianko]

Hello David,

If by permanently you mean to change the data source—the JSON—yes, you should update the JSON literal in the data used and reload.

If, however, you need this to by a dynamic change, you can just update the shape layout as it is shown here—http://demos.telerik.com/kendo-ui/map/geojson.

Regards,
Ianko
Telerik

[David]

Ianko,

   I am still confused how i use kendo if i have subscription for Ajax controls. And also where do i get files like "styles/kendo.common.min.css"? Sorry if this question is stupid.

Also, do you have for me json with US counties (preferable with road behind on zoom)?

Thank you

[Ianko]

Hello David,

In a previous post, I provided an example, showing how basically to re-use the Kendo's demo logic with RadMap. It can serve as a pointer to examine how the structure is in RadMap and how iot related to Kendo Map.

Basically, using RadMap, you are using Kendo Map. You do not need to add, reference or download Kendo resources. With adding RadMap, they are loaded automatically. RadMap is just a wrapper of the Kendo Map, and all API is the same, it is just wrapped up in an ASP.NET AJAX control.

As for the Shape's GeoJSON, Telerik does not provide such data. Such can be found through public resources or by building one on your own. A quick Google search lead me to this resource. I believe it might be helpful for you—http://eric.clst.org/Stuff/USGeoJSON.

Regards,
Ianko
Telerik

[David]

Understood. I had some maps like that, i was just hoping to have some better defined and multi layered maps you have.

Thank you