Skip to content Skip to sidebar Skip to footer

Loading Json Into Timemap

I want to load a JSON into a timemap, and my code seems to be missing something to configure the JSON correctly. JSON format below {'results': [{'Lat': '34.0453113', 'text': 'Hist

Solution 1:

If you don't want to change json then define custom loader and configure Timemap to use it.

$(function() {

TimeMap.loaders.custom = function(options) {
    var loader = newTimeMap.loaders.remote(options);
    loader.parse = JSON.parse;
    loader.preload = function(data) {
        return data["results"]
    }
    loader.transform = function(data) {
        return {
            "title" : data.text,
             "start" : data.date,
            "options" : {
            "description" : data.bicyclistCount
        },
        "point": { 
            "lat" : data.Lat,
            "lon" : data.Lon,
            }
        };
    };
    return loader;
};

tm = TimeMap.init({
    mapId: "map",               // Id of map div element (required)timelineId: "timeline",     // Id of timeline div element (required) options: {
        eventIconPath: "../images/"
    },
    datasets: [
        {
            title: "JSON String Dataset",
            type: "custom",

            options: {
                // json fileurl: "output.json"
            }
        }
    ], 

 bandIntervals: [
        Timeline.DateTime.DAY, 
        Timeline.DateTime.WEEK
    ]
});
});

Solution 2:

I see a javascript error on your page: Uncaught TypeError: undefined is not a function on this line: data.forEach(function(item)

data is an Object, not an Array

Objectresults: Array[10]

Change your JSON from:

{"results":[{"Lat":"34.0453113","text":"Historic Core DTLA","Lon":"-118.2501836","bicyclistCount":"26","date":"2014-10-15"},{"Lat":"34.0444899","text":"Spring @ 7","Lon":"-118.2523059","bicyclistCount":"16","date":"2014-10-26"}]}

To:

[{"Lat": "34.0453113", "text": "Historic Core DTLA", "Lon": "-118.2501836", "bicyclistCount": "26", "date": "2014-10-15"}, {"Lat": "34.0444899", "text": "Spring @ 7", "Lon": "-118.2523059", "bicyclistCount": "16", "date": "2014-10-26"}]

(make it an array not an object with an array as its "results" property)

Solution 3:

Change your JSON Format to:

[{"title":"example","start":"1968-10-12","end":"1968-11-12",}]

Post a Comment for "Loading Json Into Timemap"