<%@ Page Language="VB" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="Testmap._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<script type="text/javascript">
var markerData = [{
"location": [51.506421, -0.127215],
"city": "London"
}, {
"location": [51.762152, -1.258430],
"city": "Oxford"
}];
function OnInitialize(sender, args) {
var originalOptions = args.get_options();
originalOptions.layers[1].dataSource = { data: markerData };
args.set_options(originalOptions);
}
</script>
<telerik:RadClientDataSource runat="server" ID="RadClientDataSource1">
<DataSource>
<WebServiceDataSourceSettings ServiceType="GeoJSON">
<Select Url="MarkersData.json" DataType="JSON" />
</WebServiceDataSourceSettings>
</DataSource>
</telerik:RadClientDataSource>
<telerik:RadMap runat="server" ID="RadMap1" Zoom="5" Width="500" Height="500">
<ClientEvents OnInitialize="OnInitialize"/>
<CenterSettings Latitude="51.506421" Longitude="-0.127215" />
<LayersCollection>
<telerik:MapLayer Type="Tile" Subdomains="a,b,c"
UrlTemplate="http://#= subdomain #.tile2.opencyclemap.org/transport/#= zoom #/#= x #/#= y #.png"
Attribution="© <a href='http://osm.org/copyright' title='OpenStreetMap contributors' target='_blank'>OpenStreetMap contributors</a>.">
</telerik:MapLayer>
<telerik:MapLayer type="Marker" Shape="pinTarget">
<TooltipSettings AutoHide="false" Template="#= marker.dataItem.city # <br/> #= location.lat #, #= location.lng #"></TooltipSettings>
</telerik:MapLayer>
<telerik:MapLayer Type="Marker" Shape="pinTarget" ClientDataSourceID="RadClientDataSource1" >
</telerik:MapLayer>
</LayersCollection>
</telerik:RadMap>
</form>
</body>
</html>
7 Answers, 1 is accepted
Requesting *.json files from ASP.NET application should be further configured in the web.config file. This is a popular matter that is greatly discussed through the public forums. The cure is to add a mimeMap for the .json in the web.config:
<system.webServer> ..... <staticContent> <remove fileExtension=".json" /> <mimeMap fileExtension=".json" mimeType="application/json" /> </staticContent> .....
</system.webServer>You can find more useful information in this Stackoverflow forum thread.
For your convenience I am attaching a sample page with already configured a Map that is bound to the MartersData.json file to test it further on your end. Pay attention to the web.config where I have already added the needed static content mime type.
Regards,
Ianko
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
Rank 1
Thanks, that resolved the issue. A comment about the need for this would be very useful in your demo documentation.
Thank you for the feedback, I am glad that all worked out.
The JSON mime type matter is more related to ASP.NET general difficulties and it is a behavior encountered even without using Telerik products, e.g., jQuery.ajax().
Moreover, the static content mime type is already present by default in IIS8, therefore, further configuration in the web.config are not needed when upgrading to it.
Regards,
Ianko
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
Rank 1
Veteran
You never specified which telerik version you were using, and you didn't include dll's in the bin. Any additional thoughts? I am running your code exactly as is with the addition of adding the reference to telerik.web.ui.dll. Visual studio 2012 and running in IE.. although I tested in chrome too. Thanks.
Rank 1
Veteran
Added ServiceType="GeoJSON" to your code. Instantly the markers would appear.
<telerik:RadClientDataSource runat="server" ID="RadClientDataSource1" >
<DataSource>
<WebServiceDataSourceSettings ServiceType="GeoJSON">
<Select DataType="JSON" Url="JSON/MarkersData.json" />
</WebServiceDataSourceSettings>
</DataSource>
</telerik:RadClientDataSource>
Rank 1
Veteran
<telerik:MapLayer Type="Shape"> Then the json data MUST be a shape.
<telerik:MapLayer Type="Marker"> Then the json data MUST be a Marker.
Look at the json. Does it show anything like featurecollection? That would be a shape. If you put type = "marker" you will not see the data and NO error gets generated.
Telerik - it would be helpful if we could get errors when we have poorly formatted json for the type selected. This has been mentioned in other threads as well with responses from you saying you would look into adding some error handing when json is no good.
Also, and this is a separate issue, but the standard tooltips never display when using shape types. The word TEST never displays. When using marker type it always works.
<LayersCollection>
<telerik:MapLayer Type="Shape" Shape="PinTarget" ClientDataSourceID="RadClientDataSource2" LocationField="location">
<TooltipSettings AutoHide="false" Width="300"
Template="TEST">
<AnimationSettings>
<OpenSettings Duration="300" Effects="fade:in" />
<CloseSettings Duration="200" Effects="fade:out" />
</AnimationSettings>
</TooltipSettings>
</telerik:MapLayer>
</LayersCollection>
<telerik:RadClientDataSource runat="server" ID="RadClientDataSource2">
<DataSource>
<WebServiceDataSourceSettings ServiceType="GeoJSON">
<Select DataType="JSON" Url="earthQuakes2.json" />
</WebServiceDataSourceSettings>
</DataSource>
<ClientEvents />
</telerik:RadClientDataSource>
Hi Raymond,
The ServiceType property should be set to Default when binding Markers, as they are plain JSON literals. As for Shapes, the GeoJSON service type is used to instruct the RadClientDataSource that there is collection of shapes created via GeoJSON specs.
Of course, the Type properties of the MapLayer instances should be properly set to a value that matches the desired type of usage. They cannot automatically decide what to render and how to be bound to the date. You can see the usage of these properties in these demos:
As for checking what type of layer should be used, I would like to mentioned that everyone should know what type of data is used. The GeoJSON specs are far more complex than the plain JSON notation rules and the differences should be obvious not only by searching for a featurecollection text. For further usage of the GeoJSON and JSON notation for data binding purposes it is recommended to examine the exact specification and acknowledge the purposes of these client-side techniques. I can suggest the following articles:
As for the poorly formatted JSON. This is not a matter that can be handled via the control. This is a client-side technique that is used in the browser, and failures due to incorrect formatting should be handled by the developer of the application. Just like the HTML, the valid JSON format is a matter that should be validated prior to its usage. There are free validators that can help you validate your JSON or GeoJSON properly (JSONLint or GeoJSONLint).
As for the tooltips and shapes, shortly, the shapes in RadMad does not support tooltip usage. The configuration used is valid for markers layer, but using it with shapes layer, it is just ignored. You can examine that in the Shapes Layer demo, the tooltips shown are an integration with the RadToolTip control and this is the proper way to show tooltip in a shapes layer scenario.
Regards,
IankoTelerik