Below is the markup of my page. I've tried to keep it as simple as possible. The map has 3 layers: The first is the actual map itself from opencyclemap.org which displays as it should. Another layer displays markers from a dataset created in javascript (copied from one of the demos). That also displays as expected. The last one connects to the MarkersData.json file (from the demo) through a RadClientDataSource. That does not display at all. The file exists in the same directory as the page. Any idea what I'm doing wrong?
<%@ 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>
<%@ 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>