JSON doesn't seem to be working...

8 posts, 0 answers
  1. Raymond
    Raymond avatar
    19 posts
    Member since:
    Jul 2014

    Posted 07 Oct 2014 Link to this post

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

    Posted 08 Oct 2014 Link to this post

    Hi Raymond,

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Raymond
    Raymond avatar
    19 posts
    Member since:
    Jul 2014

    Posted 08 Oct 2014 in reply to Ianko Link to this post

    Hi,

    Thanks,  that resolved the issue.  A comment about the need for this would be very useful in your demo documentation.
  5. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 09 Oct 2014 Link to this post

    Hi Raymond,

    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.

     
  6. Josh
    Josh  avatar
    10 posts
    Member since:
    Nov 2013

    Posted 31 Dec 2014 in reply to Ianko Link to this post

    I saved and ran your JSON-Issues.zip and the json data is still not displaying.  I am having trouble in my application getting any maplayer I specify as a marker type to get displayed. So, I tried your example just to verify it works at all, and it still doesn't for me. I thought maybe it was my Telerik version. Was using build Telerik_UI_for_ASP.NET_AJAX_2014_3_724_Dev_hotfix. Upgraded to most recent (Telerik_UI_for_ASP.NET_AJAX_2014_3_1209_Dev_hotfix) in your project just to see and still nothing.

    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.
  7. Josh
    Josh  avatar
    10 posts
    Member since:
    Nov 2013

    Posted 31 Dec 2014 in reply to Josh Link to this post

    I got the markers to display finally.  You NEED to specify service type. Not sure how it works in your example, however.
    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>
  8. Josh
    Josh  avatar
    10 posts
    Member since:
    Nov 2013

    Posted 02 Jan 2015 Link to this post

    Also, if other people have made it this far and still are not seeing their layers - markers or shape types on the map, then it may be that the json data is not matching the Type you are specifying. 

    <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>

  9. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 05 Jan 2015 Link to this post

    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,

    Ianko
    Telerik
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017