CODEWITHSUNDEEP
javascripthtmljsongeolocation
Anshu Thakur
Anshu Thakur

Reputation: 67

Using Json file to display data on Geotemco

I have a simple json file "example.json" whose entries are in this format :

{ 
    "id": 122,
    "name" : Wearable,
    "description": someDescription,
    "lon" : 11.581981, 
    "lat" : 48.135125,
    "place" : Munich,
    "time" : 2013-11-20,
    "tableContent": someValuesList
}

I want to display this information on a visualization program called Geotemco (http://www.informatik.uni-leipzig.de:8080/geotemco/)

I am able to display the map but unable to display the information from this json file. The loader.html file looks like this:

    <!DOCTYPE html>
    <html>

      <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>GeoTemCo</title>
        <link rel="stylesheet" href="css/geotemco.css" type="text/css"/>
        <script src="geotemco-min.js"></script>
        <script src="js/Util/Publisher.js"></script>
        <script src="js/Build/Loader/DynaJsLoader.js"></script>
        <script src="js/Build/Loader/Loader.js"></script>
      </head>

      <body>

        <div id="mapContainerDiv" style="position:relative;"></div>
        <div id="plotContainerDiv" style="position:relative;"></div>
        <div id="tableContainerDiv" style="position:relative;"></div>

        <script>
            var datasets = [];
            var mapDiv = document.getElementById("mapContainerDiv");
            var map = new WidgetWrapper();
            var mapWidget = new MapWidget(map,mapDiv);
            var timeDiv = document.getElementById("plotContainerDiv");
            var time = new WidgetWrapper();
            var timeWidget = new TimeWidget(time,timeDiv);
            var tableDiv = document.getElementById("tableContainerDiv");
            var table = new WidgetWrapper();
            var tableWidget = new TableWidget(table,tableDiv);
        //  var jsonFile = GeoTemConfid.getJson('data/example.json');
        //  var jsonData = GeoTemConfig.loadJson(jsonFile);
        //  var dataset = new Dataset([{"name" : "Wearable","lon" : "11.0","lat" : "48.0","place" : "USA/New York/New York City/Liberty Island","time" : "2013","tableContent": "someValuesList"}],'Events');
        //  datasets.push(dataset);

datasets.push(new Dataset(GeoTemConfig.loadJson(GeoTemConfig.getJson('/data/example.json')),'Events'));

            map.display(datasets);
            time.display(datasets);
            table.display(datasets);

        </script>

      </body>

    </html>

I tried every method but unable to display the event anywhere on the map. It always loads only the map: Geotemco Map

Please help me out with this issue. Many Thanks in advance

Upvotes: 0

Views: 89

Answers (1)

Anto Jurković
Anto Jurković

Reputation: 11258

You have wrong content of json file. It should be something like:

[
    { 
        "id": 122,
        "name": 'Wearable',
        "description": 'someDescription',
        "lon" : 11.582, 
        "lat" : 48.135,
        "place" : 'Munich',
        "time" : '2013-11-20',
        "tableContent":  {'a': '111', 'b': '222'}
    }
]

See tutorial and tops.json from GeoTemco site.

Upvotes: 1

Related Questions