trouble figuring out how to specify my Longitude and Latit

46 views
Skip to first unread message

newbi...@gmail.com

unread,
May 30, 2016, 1:01:06 AM5/30/16
to Timemap.js Development



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


[{"lon":"106.78185","title":"Tester","start":"2016-05-25","description":"OPERATIONs","lat":"-6.2206087"}]

And below is the HTML file I'm working with. 
<link rel="shortcut icon" href="images/csalogo.ico" type="image/x-icon"/>

       
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyBTquZF3N7wt_qze9l02cX8MSAkUEvBpuE&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 type="text/javascript" src="lib/timeline-1.2.js"></script>-->
        <script type="text/javascript" src="src/timemap.js"></script>
        <script type="text/javascript" src="timemap_full.pack.js"></script>
<!--     <script type="text/javascript" src="src/loaders/json.js"></script>-->
        <!-- <script src="src/loaders/json.js" type="text/javascript"></script>-->
        <script type="text/javascript" src="src/loaders/progressive.js" ></script>
        
        <script type="text/javascript">
            var tm;
            var errFn = function(jqXHR, textStatus, errorThrown){
                alert(textStatus);
            }
            $(function() {
                
                TimeMap.loaders.custom = function(options) {
                    var loader = new TimeMap.loaders.remote(options);
                    loader.parse = JSON.parse;
                    loader.preload = function(data) {
                        return data["rows"]
                    }
                    loader.transform = function(data) {
                        return {
                            "title" : data.title,
                            "start" : data.date,
                            "options" : {
                                "description" : data.description
                            },
                            "point": {
                                "lat" : data.Lat,
                                "lon" : data.Lon
                            }
                        };
                    };
                    return loader;
                };

                //    <!--start loading data-->
                tm = TimeMap.init({
                    mapId: "map",               // Id of map div element (required)
                    timelineId:"timeline",     // Id of timeline div element (required) 
                    options: {
                        eventIconPath: "/TimeMaps/images/"
                    },
                    datasets: [
                        {
                            title: "Tacking OPS",
                            type: "json",
                            options: {
                                // json file
                                method:'GET',
                                url: "getDataTrackingServlet",
                                error: errFn
                            }
                        }
                    ], 

                    bandIntervals: [
                        //                        Timeline.DateTime.DAY, 
                        //                        Timeline.DateTime.WEEK
                        Timeline.DateTime.DAY,                         
                        Timeline.DateTime.MONTH
                    ]
                });
            });   
            //<!--end loading data-->
                   
        </script>
         
        <link href="css/examples.css" type="text/css" rel="stylesheet"/>
    </head>

    <body>
        <div id="help">
            <h1>TIME MAPS CSA</h1>
        <div id="timemap">
            <div id="timelinecontainer">
                <div id="timeline"></div>
            </div>
            <div id="mapcontainer">
                <div id="map"></div>
            </div>
        </div>
    </body>
</html>


and this my screenshot














Does anyone have suggstions? Thanks,

newbi...@gmail.com

unread,
Jun 2, 2016, 6:03:55 AM6/2/16
to Timemap.js Development
this my new html

<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>

        <!--        <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyBTquZF3N7wt_qze9l02cX8MSAkUEvBpuE&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-1.2.js"></script>
        <script src="src/timemap.js" type="text/javascript"></script>

        <script src="src/timemap.js" type="text/javascript"></script>

        <script src="src/loaders/json.js" type="text/javascript"></script>
        <!--        <script src="src/loaders/progressive.js" type="text/javascript"></script>-->
        <!--        <script src="src/ext/circle_icons.js" type="text/javascript"></script>-->
        <!-- source
        http://www.vermontelectric.coop/custom/timemap/docs/symbols/TimeMap.loaders.json.html
        http://www.ibiblio.org/tamil/maps/docs/symbols/TimeMap.loaders.jsonp.html#constructor
        http://stackoverflow.com/questions/26683375/loading-json-into-timemap
        https://groups.google.com/forum/#!topic/timemap-development/MNjFbvMY42w
        http://www.gps-coordinates.net/
        http://en.marnoto.com/2014/04/converter-coordenadas-gps.html
        https://developers.google.com/maps/documentation/javascript/examples/#basics
        http://geekswithblogs.net/bosuch/archive/2011/10/05/converting-decimal-degrees-to-degreesminutesseconds-astronomy-with-your-personal-computer.aspx
        http://stackoverflow.com/questions/2342371/jquery-loop-on-json-data-using-each
        http://jsfiddle.net/5pjha/
        -->

        <script type="text/javascript">
            var tm;
            var isi_url ="getDataTrackingServlet";
            var isi_jon, lon,lat,title,start,jamstart,description,theme;

            var errFn = function(jqXHR, textStatus, errorThrown){
                alert(textStatus);
            }
            //            $(function() {
            $(function() {
               
                $.getJSON(isi_url, function (json) {
                   
                    $.each(json.results, function(i, item) {
                   
                        lat = item.lat;
                        lon = item.lon;
                        title = item.title;  
                        start = item.start;        
                        description = item.description; 
                        jamstart = item.jamstart; 
                        theme = item.theme; 
                       
                        //                    })
                        console.log('Latitude : ',i, lat);
                        console.log('Longitude : ',i, lon);
                        console.log('title : ',i, title);
                        console.log('start : ',i, start);
                        console.log('description : ',i, description);
                        console.log('jamstart : ',i, jamstart);
                        console.log('theme : ',i, theme);
                       
                        tm = TimeMap.init({
                           
                            mapId: "map",               // Id of map div element (required)
                            timelineId:"timeline",     // Id of timeline div element (required)
                            options: {
                                mapType: "physical",
                                eventIconPath: "/TimeMaps/images/"
                               
                            },
                           
                            datasets: [
                                {
                                    //                                    id:"trackingOPs",
                                    title: "Tacking OPS",
                                    //type:"basic","json"
                                    type: "basic",
                                    options: {
                                        //                                method:'GET',
                                        //                                url: isi_url,
                                        //                                "theme": "Red",                                       
                                        //                                error: errFn,
                                        items: [
                                           
                                            {
                                                "start" : item.start,
                                                "end" : item.jamstart,
                                                "point" : {
                                                    "lat" : item.lat,
                                                    "lon" : item.lon
                                                },
                                                "title" : item.title,
                                                "options" : {
                                                    // set the full HTML for the info window
                                                    "infoHtml": "<div class='custominfostyle'><b>"+item.title+"<br/>"+"Divisi :"+" "+item.description+"<br/>"+"Postition :"+item.lat+","+item.lon+
                                                        "</b></div>",
                                                    "theme": item.theme
                                                }
                                   
                                            },
//                                            {
//                                                "start" : item.start,
//                                                "end" : item.jamstart,
//                                                "point" : {
//                                                    "lat" : item.lat,
//                                                    "lon" : item.lon
//                                                },
//                                                "title" : item.title,
//                                                "options" : {
//                                                    // set the full HTML for the info window
//                                                    "infoHtml": "<div class='custominfostyle'><b>"+item.title+"<br/>"+"Divisi :"+" "+item.description+"<br/>"+"Postition :"+item.lat+","+item.lon+
//                                                        "</b></div>",
//                                                    "theme": item.theme
//                                                }
//                                            }
                                        ],events: {
                                            click: function(marker, event, context){
                                                markerSelected(context.id);
                                            }
                                           
                                        }
                                    }
                                }
                            ],                     
                            //                        bandIntervals: [
                            //                            //                        Timeline.DateTime.DAY,
                            //                            //                        Timeline.DateTime.WEEK
                            //                            Timeline.DateTime.DAY, 
                            //                            Timeline.DateTime.MONTH
                            //                        ]
                            //                        bandInfo: [
                            //                            {
                            //                                width:          "85%",
                            //                                intervalUnit:   Timeline.DateTime.DAY,
                            //                                intervalPixels: 210
                            //                            },
                            //                            {
                            //                                width:          "15%",
                            //                                intervalUnit:   Timeline.DateTime.MONTH,
                            //                                intervalPixels: 150,
                            //                                showEventText:  false,
                            //                                trackHeight:    0.2,
                            //                                trackGap:       0.2
                            //                            }
                            //                        ]
                            bandIntervals: "wk"
                        });
                    });

                });              
            });  
            //<!--end loading data-->
          
       
        </script>

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

    </head>

    <body>
        <div id="help">
            <h1>TIME MAPS CSA</h1>
           
        </div>

        <div id="timemap">
            <div id="timelinecontainer">
                <div id="timeline"></div>
            </div>
            <div id="mapcontainer">
                <div id="map"></div>
            </div>
        </div>
    </body>
</html>

Reply all
Reply to author
Forward
0 new messages