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"