google maps - how to specify my Longitude and latitude for use in a timemap -
i'm having trouble figuring out how specify longitude , latitude use in timemap. json:
[{"lon":"106.78185","title":"zaki","start":"2016-05-25","description":"operation","id":1,"lat":-6.2206087,"timestart":"18:00:00"}]
and below html file i'm working with.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>tester</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 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 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: "getdatatracking", error: errfn } } ], bandintervals: [ // timeline.datetime.day, // timeline.datetime.week timeline.datetime.day, timeline.datetime.month ] }); }); </script> <link href="css/examples.css" type="text/css" rel="stylesheet"/> </head> <body> <div id="help"> <h1>time maps csa</h1> </div> <div id="timemap"> <div id="timelinecontainer"> <div id="timeline"></div> </div> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>tester</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 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 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: "getdatatracking", error: errfn } } ], bandintervals: [ // timeline.datetime.day, // timeline.datetime.week timeline.datetime.day, timeline.datetime.month ] }); }); </script> <link href="css/examples.css" type="text/css" rel="stylesheet"/> </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> <div id="mapcontainer"> <div id="map"></div> </div> </div> </body> </html> this servlet code
for (int = 0; < listdatatracking.size(); i++) { org.json.simple.jsonobject obj = new org.json.simple.jsonobject(); entitytracking datatracking = listdatatracking.get(i); if (datatracking.getidtracking() == null) { obj.put("id", ""); } else { obj.put("id", datatracking.getidtracking()); // writer.print(datatracking.getidtracking()); } if (datatracking.gettglsend() == null) { obj.put("start", "");//tanggal } else { obj.put("start", sdf.format(datatracking.gettglsend())); // writer.print(sdf.format(datatracking.gettglsend())); } if (datatracking.getjamsend() == null) { obj.put("jamstart", ""); } else { obj.put("jamstart", datatracking.getjamsend()); // writer.print(datatracking.getjamsend()); } if (datatracking.getuser_name().getusername() == null) { obj.put("title", ""); } else { obj.put("title", datatracking.getuser_name().getusername().touppercase()); // writer.print(datatracking.getuser_name().getusername()); } if (datatracking.getuser_name().getrolename() == null) { obj.put("description", ""); } else { obj.put("description", datatracking.getuser_name().getrolename().touppercase()); // writer.print(datatracking.getuser_name().getusername()); } if (datatracking.getgetlatitude() == null) { obj.put("lat", ""); } else { // obj.put("lat", datatracking.getgetlatitude()); } if (datatracking.getgetlongitude() == null) { obj.put("lon", ""); } else { // obj.put("lon", datatracking.getgetlongitude()); } arrayobj.add(obj); } my new html file
<%@page contenttype="text/html" pageencoding="utf-8"%> <!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 name="viewport" content="width=device-width, initial-scale=1.0"/> <!-- <meta http-equiv="content-type" content="text/html; charset=utf-8"/>--> <title>~:. timemaps .:~</title> <link rel="shortcut icon" href="images/csalogo.ico" type="image/x-icon"/> <!-- <script async defer src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> --> <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="https://code.jquery.com/jquery-1.11.0.min.js"></script>--> <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></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 full html 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); } // items: [ // { // "start" :"2016-05-27", // "end" : "2016-05-27", // "point" : { // "lat" : -6.2206089, // "lon" : 106.7810652 // }, // "title" : "zaki", // "options" : { // // set full html info window // "infohtml": "<div class='custominfostyle'><b>domenico ghirlandaio</b> visual artist of sort.</div>" // } // }] } } } ], // 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" }); // filter function tags var hasselectedtag = function(item) { console.log(item.opts.tags.indexof(window.selectedtag)); // if no tag selected, passes return !window.selectedtag || ( // item has tags? item.opts.tags && // tag found? (note - work in ie; timemap extends array prototype if necessary) item.opts.tags.indexof(window.selectedtag) >= 0 ); }; // add our new function map , timeline filters tm.addfilter("map", hasselectedtag); // hide map markers on fail tm.addfilter("timeline", hasselectedtag); // hide timeline events on fail // onchange handler pulldown menu $('#tag_select').change(function() { window.selectedtag = $(this).val(); // run filters tm.filter('map'); tm.filter('timeline'); }); }); }); }); //<!--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"> </div> <div id="timemap"> <div id="timelinecontainer"> <div id="timeline"></div> </div> <div id="mapcontainer"> <div id="map"></div> </div> </div> </body> </html> new json data
{ "results":[ { "lon":"106.7810652", "title":"zaki", "start":"2016-06-01", "description":"operasional", "theme":"red", "id":1, "lat":"-6.2206089", "jamstart":"18:00:00" }, { "lon":"106.7822585", "title":"ardyan", "start":"2016-06-01", "description":"operasional", "theme":"orange", "id":2, "lat":"-6.2216851", "jamstart":"18:00:00" } ] } new output image console.log timemaps have suggestions? thanks,
Comments
Post a Comment