createDataset - Map Markers but no Timeline Events
172 views
Skip to first unread message
David Fisher
Jun 8, 2012, 9:13:47 AM6/8/12
to timemap-d...@googlegroups.com
Hi,
When using the following code i get the markers on the map from the newly created dataset but no timeline events when scrolling the timeline:
var scheduleMode = 0,
tm = TimeMap.init({
mapId: "map", // Id of map div element (required)
timelineId: "timeline", // Id of timeline div element (required)
options: {
mapType: "road"
},
datasets: [
{
id: "events",
title: "events",
type: "basic",
options:{
items: appDatasetItems
}
}
],
bandIntervals: [
Timeline.DateTime.HOUR,
]
});
var newEventDatasetItems = [];
var eventRecords = $.map(newEventData, function(item){
var newEventDatasetItem = {
"start":item.Start,
"end":item.End,
"point":{
"lat":item.Lat,
"lon":item.Long
},
"title":item.HoldingName,
"options":{
description:item.HoldingName,
icon: appImageUrl + item.MapIcon,
eventColor: item.Colour,
eventIconImage: item.MapIcon,
Status:item.Status,
iconSize: [32,45]
}
};
});
tm.timeline._bands[0].addOnScrollListener(function(a){
if(scheduleMode === 0){
scheduleMode = 1;
tm.datasets.events.hide();
var newEventDataset = tm.createDataset("newevents",{id:"newevents",title:"newevents",type:"basic"});
newEventDataset.loadItems(newEventDatasetItems);
tm.refreshTimeline(); // Also tried tm.timelline.layout()
return console.log(tm);
}
});
Any help in the right direction appreciated thanks.
Nick Rabinowitz
Jun 13, 2012, 12:18:20 PM6/13/12
to fallen...@gmail.com, timemap-d...@googlegroups.com
Hi David -
I'm not totally sure what you're trying to do here. Notes below:
var scheduleMode = 0,tm = TimeMap.init({mapId: "map", // Id of map div element (required)timelineId: "timeline", // Id of timeline div element (required)options: {mapType: "road"},datasets: [{id: "events",title: "events",type: "basic",options:{items: appDatasetItems}}],bandIntervals: [Timeline.DateTime.HOUR,]});
I assume up to here is just setup, and the rest of the code is actually being run asynchronously, right? Otherwise you'd just be adding all items at load time.
var newEventDatasetItems = [];var eventRecords = $.map(newEventData, function(item){var newEventDatasetItem = {"start":item.Start,"end":item.End,"point":{"lat":item.Lat,"lon":item.Long},"title":item.HoldingName,"options":{description:item.HoldingName,icon: appImageUrl + item.MapIcon,eventColor: item.Colour,eventIconImage: item.MapIcon,Status:item.Status,iconSize: [32,45]}};});
Shouldn't you be returning newEventDatasetItem from the $.map function? Otherwise the resulting eventRecords array will be empty...
tm.timeline._bands[0].addOnScrollListener(function(a){if(scheduleMode === 0){scheduleMode = 1;tm.datasets.events.hide();var newEventDataset = tm.createDataset("newevents",{id:"newevents",title:"newevents",type:"basic"});newEventDataset.loadItems(newEventDatasetItems);tm.refreshTimeline(); // Also tried tm.timelline.layout()return console.log(tm);}});
I'm not sure this is the best way to do this, but it's hard to tell without a better understanding of what you're trying to do. In any case, the main issue here is that your dataset doesn't have an eventSource tied to the timeline - that's the data structure the timeline uses to hold events, and you need to get a reference to the eventSource for the band where you want the events to appear, or the timeline won't know about them. In most cases (unless you're showing different events on different bands), there's only one eventSource per TimeMap object, and there's an easy reference to it:
var newEventDataset = ...
newEventDataset.eventSource = tm.eventSource;
// etc
and that should probably do it. Let me know if that works -
-Nick
matt....@gmail.com
Dec 21, 2012, 2:14:35 PM12/21/12
to timemap-d...@googlegroups.com
Hi,
I have the same issue but I think I know what the problem is. I just don't know how to fix it.
1) I'm using the kenya.html along with the kenya.kml
The kml format of a placemark is as follows:
<Placemark>
<name>Vredefort</name>
<TimeStamp><when>2000-10-01</when></TimeStamp>
<ExtendedData>
<Data name="Country">
<value>South Africa</value>
</Data>
<Data name="Diameter">
<value>300km (~186.4 mile)</value>
</Data>
<Data name="Age">
<value>2023 ± 4 Million years</value>
</Data>
<Data name="Url">
<value>http://en.wikipedia.org/wiki/Vredefort_crater</value>
</Data>
</ExtendedData>
<Point>
<coordinates>27.5,-27,0</coordinates>
</Point>
</Placemark>
2) For my own project, I published a KML through GeoMedia and opened it in Google Maps with no issues.
However, this is the kml format of my placemark:
<Placemark>
<name>Unknown</name>
<styleUrl>#Style1</styleUrl>
<ExtendedData>
<SchemaData schemaUrl="#Schema1">
<SimpleData name="InterruptionDate">2009-01-03T00:00:00</SimpleData>
<SimpleData name="SubCause">Unknown</SimpleData>
</SchemaData>
</ExtendedData>
<Point>
<coordinates>-81.2861270482308,42.9392106072815,0</coordinates>
</Point>
</Placemark>
Question - How do get my format corrected without manually editing every placemark. I'm assuming <TimeStamp><when>2000-10-01</when></TimeStamp>
is the key for the timeline.
Nick Rabinowitz
Dec 22, 2012, 9:27:19 AM12/22/12
to matt....@gmail.com, Timemap.js Development
Timemap.js has some ExtendedData support, and there's a hook for mapping your tags to the names Timemap expects. So I think you can do something like this:
datasets: [
{
type: "kml",
options: {
url: "your_data.kml", // KML file to load
// array of ExtendedData elements to look for
extendedData: ["InterruptionDate"],
tagMap: {
"InterruptionDate":"start"
}
}
}
]
The only issue here is that I'm not sure that Timemap.js can handle the SchemaData / SimpleData form of ExtendedData - it just uses the untyped Data elements, as far as I can see.
If this doesn't work, there are a few options:
- You might be able to do this with the extraTags parameter. Timemap uses jQuery for the lookup, so I think you could use a complex selector for this, e.g.
datasets: [
{
type: "kml",
options: {
url: "your_data.kml", // KML file to load
// array of ExtendedData elements to look for
extraTags: ["SimpleData[name='InterruptionDate']"],
tagMap: {
"SimpleData[name='InterruptionDate']":"start"
}
}
}
]
This might take some trial and error to get the mapping right.
- You could override TimeMap.params.ExtendedDataParam (see https://code.google.com/p/timemap/source/browse/trunk/src/loaders/kml.js#190) - redefine this in your own code to look for SimpleData elements.
I hope that helps -
-Nick
--To view this discussion on the web visit https://groups.google.com/d/msg/timemap-development/-/VEqKNqjqQoIJ.
You received this message because you are subscribed to the Google Groups "Timemap.js Development" group.
To post to this group, send email to timemap-d...@googlegroups.com.
To unsubscribe from this group, send email to timemap-develop...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/timemap-development?hl=en.
Constance B.
Aug 16, 2013, 4:50:25 AM8/16/13
to timemap-d...@googlegroups.com, matt....@gmail.com, ni...@nickrabinowitz.com
Hello,
I am experiencing a similar problem. I have modified the kenya example and instead of using the "datasets" attribute to load my dataset, I use the createDataset function along with the kml loader, as described here: http://code.google.com/p/timemap/wiki/CustomInitScript. Although the events appear on the map *when the associated timestamps are in range*, these timestamps are not visualized in the timeline (this works fine when using the "datasets" option when initializing the timemap, as in the original kenya example). As the placemarks disappear from the map when their associated timestamps get out of range, I guess that the problem is only in the visualization of the events in the timeline. You can find the modified example here: http://manolee.di.uoa.gr/kenya/examples/kenya.
I am wondering if this is a bug or if i am missing something.
Thanks a lot,
Constance.
To post to this group, send email to timemap-development@googlegroups.com.
To unsubscribe from this group, send email to timemap-development+unsub...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages