javascript - Loading JSON into timemap -
i want load json timemap, , code seems missing configure json correctly. json format below
{"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"}]}
this link contains html file based on timemap example. opens timeline , map, info not load. map won't zoom in , out, though want solve json load issue first. have suggestion on can change? adding javascript code below. thanks, patty
the javascript code:
var tm; var errfn = function(jqxhr, textstatus, errorthrown){ alert(textstatus); } $(function() { 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: "json", options: { // json file url: "output.json", <!--this file sits in same folder html--> error: errfn, } } ], bandintervals: [ timeline.datetime.day, timeline.datetime.week ] }); <!--start loading data--> function transformdata(data) { var text, lat, lon, bicyclistcount, date; <!--is how info called?--> var newdata = { "title" : text, "start" : date, "options" : { "description" : bicyclistcount } }; newdata["point"] = { "lat" : lat, "lon" : lon, }; } }); <!--end loading data-->
if don't want alter json define custom loader , configure timemap utilize it.
$(function() { timemap.loaders.custom = function(options) { var loader = new timemap.loaders.remote(options); loader.parse = json.parse; loader.preload = function(data) { homecoming data["results"] } loader.transform = function(data) { homecoming { "title" : data.text, "start" : data.date, "options" : { "description" : data.bicyclistcount }, "point": { "lat" : data.lat, "lon" : data.lon, } }; }; homecoming 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 file url: "output.json" } } ], bandintervals: [ timeline.datetime.day, timeline.datetime.week ] }); });
javascript json google-maps
No comments:
Post a Comment