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":"ZAKI","start":"2016-05-25","description":"OPERATION","Id":1,"lat":-6.2206087,"timeStart":"18:00:00"}]
And below is the 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 my servlet code
for (int i = 0; i < 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 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);
}
// items: [
// {
// "start" :"2016-05-27",
// "end" : "2016-05-27",
// "point" : {
// "lat" : -6.2206089,
// "lon" : 106.7810652
// },
// "title" : "ZAKI",
// "options" : {
// // set the full HTML for the info window
// "infoHtml": "<div class='custominfostyle'><b>Domenico Ghirlandaio</b> was a visual artist of some 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 for tags
var hasSelectedTag = function(item) {
console.log(item.opts.tags.indexOf(window.selectedTag));
// if no tag was selected, everything passes
return !window.selectedTag || (
// item has tags?
item.opts.tags &&
// tag found? (note - will work in IE; Timemap extends the Array prototype if necessary)
item.opts.tags.indexOf(window.selectedTag) >= 0
);
};
// add our new function to the map and timeline filters
tm.addFilter("map", hasSelectedTag); // hide map markers on fail
tm.addFilter("timeline", hasSelectedTag); // hide timeline events on fail
// onChange handler for 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 My 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 Does anyone have suggestions? Thanks,
