Adding JSON from file

78 views

Skip to first unread message

Patty Jula

unread,

Oct 30, 2014, 7:17:07 PM10/30/14

to timemap-d...@googlegroups.com

Hello, I'm having trouble figuring out how to specify my JSON's fields for use in a timemap. This is my JSON:

{"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"}, {"Lat": "34.0471017", "text": "Boyle Heights", "Lon": "-118.2189275", "bicyclistCount": "11", "date": "2014-10-05"}, {"Lat": "34.0477863", "text": "Dtla", "Lon": "-118.2492945", "bicyclistCount": "5", "date": "2014-10-12"}, {"Lat": "34.1213409", "text": "Highland park", "Lon": "-118.2072629", "bicyclistCount": "11", "date": "2014-10-13"}, {"Lat": "34.058611", "text": "Fig Plaza ", "Lon": "-118.2517945", "bicyclistCount": "17", "date": "2014-10-16"}, {"Lat": "34.056556", "text": "Figueroa and 2ND STREET", "Lon": "-118.252902", "bicyclistCount": "17", "date": "2014-10-17"}, {"Lat": "34.1432066", "text": "Studio city", "Lon": "-118.3977225", "bicyclistCount": "6", "date": "2014-10-19"}, {"Lat": "34.0588248", "text": "Figfront", "Lon": "-118.2509293", "bicyclistCount": "6", "date": "2014-10-23"}, {"Lat": "34.0513133", "text": "Little Tokyo", "Lon": "-118.2420103", "bicyclistCount": "7", "date": "2014-10-26"}]}

And below is the HTML file I'm working with. Does anyone have suggstions? Thanks, Patty

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <title>JSON</title>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=myKey&sensor=false"></script>
    <script type="text/javascript" src="../lib/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="../lib/mxn/mxn.js?(googlev3)"></script>
    <script type="text/javascript" src="../lib/timeline-2.3.0.js"></script>
    <script src="../src/timemap.js" type="text/javascript"></script>
    <script src="../timemap_full.pack.js" type="text/javascript"></script>
    <script src="../src/loaders/json.js" type="text/javascript"></script>

    <script type="text/javascript">

var tm;
var errFn = function(jqXHR, textStatus, errorThrown){
     alert(textStatus);
     }

var jsonFile = "output.json";
//var jsonData = JSON.parse(jsonString);

$(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",
                // load JSON data from Flickr - see the Flickr API for more info
                type: "json_string",
                options: {
                    // json file
                    url: jsonFile,
                    error: errFn
                }
            }
        ],
     bandIntervals: [
            Timeline.DateTime.DAY,
            Timeline.DateTime.WEEK
        ]

    });
});

    </script>
    <link href="examples.css" type="text/css" rel="stylesheet"/>
    <style>
    div#timelinecontainer{ height: 200px; }
    div#mapcontainer{ height: 400px; }
    </style>
</head>

<body>
    <div id="help">
    <h1>JSON</h1>
    Adding json from file
    </div>

    <div id="timemap">
        <div id="timelinecontainer">
          <div id="timeline"></div>
        </div>

        <div id="mapcontainer">
          <div id="map"></div>
        </div>

    </div>

</body>
</html>

Patty Jula

unread,

Nov 1, 2014, 5:41:40 PM11/1/14

to timemap-d...@googlegroups.com

I actually posted this on Stack Overflow too. I had need to parse my JSON file so it would be called within timemap.
http://stackoverflow.com/questions/26683375/loading-json-into-timemap

Thanks,
Patty

Reply all

Reply to author

Forward

0 new messages