Description bubbles do not automatically disappear
96 views
Skip to first unread message
Gabe
May 3, 2011, 12:42:54 PM5/3/11
to Timemap.js Development
Hello,
I'm fairly new to TimeMap. I am implementing a version of TimeMap with
google maps v3, using a Google spreadsheet to provide data for my
timeline and map. I have basically copied and pasted from timeMap
examples and changed lines of code to match my specific needs.
I have been unable to get my description bubbles to automatically
disappear when another event marker is selected either on the map or
the timeline itself. I assume this should be the default behavior
since I haven't found any other threads on the issue. Why would this
not be working (see code below)?
In addition to this issue, does anyone know if it is possible to have
imprecise start and end dates for events in the timeline while using
the timeMap interface? If it is possible, could you provide an
example implementation for one imprecise duration event? I have
commented out code that I assumed would have been the correct
implementation for this issue, but did not result in any changes in my
timeline.
Thanks for your help!
-Gabe
html code below:
<!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>Art History Example</title>
<script type="text/javascript" src="http://maps.google.com/maps/
api/js?
sensor=false&key=ABQIAAAAGIqlDliIK8VkXkJGb3KfQxRejvqmi1fk_fUV8G6u33Kpaf23LhRkMj-
DRiDlNzAM0NLo9g8fxuzVnA"></script>
<script type="text/javascript" src="../lib/jquery-1.4.4.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="../src/param.js" type="text/javascript"></script>
<script src="../src/loaders/json.js" type="text/javascript"></
script>
<script src="../src/loaders/google_spreadsheet.js" type="text/
javascript"></script>
<script type="text/javascript">
//https: //spreadsheets.google.com/spreadsheet/pub?
hl=en&hl=en&key=0Ajx3M2Ty1uetdGZsR2IwOExTajUtdUFsTjJ4TVBYVHc&output=html
var tm;
$(function () {
// make a custom map style
var styledMapType = new google.maps.StyledMapType([
{
featureType: "road",
elementType: "all",
stylers: [
{ saturation: 50 },
{ lightness: 50 }
]
},
{
featureType: "all",
elementType: "all",
stylers: [
{ saturation: 0 }
]
}
], {
name: "white"
});
tm = TimeMap.init({
mapId: "map", // Id of map div element
(required)
timelineId: "timeline", // Id of timeline div
element (required)
options: {
centerMapOnItems: true,
mapType: "physical",
eventIconPath: "../images/"
},
datasets: [
{
title: "Events",
id: "events",
theme: "default",
type: "gss",
options: {
// note that your spreadsheet must be
published for this to work
key:
"0Ajx3M2Ty1uetdGZsR2IwOExTajUtdUFsTjJ4TVBYVHc",
// map spreadsheet column names to
expected ids
paramMap: {
start: "StartDate",
//latestStart: "latestStart",
//earliestEnd: "earliestEnd",
//durationEvent: "isDuration",
end: "EndDate"
},
// load extra data from non-standard
spreadsheet columns
extraColumns: [
//"city",
//"depthft",
//"pitno."
],
// let's do something with that extra
data!
infoTemplate: "<table
style='quarrytable'>" +
"<tr><th colspan='2'
class='title'>Details</th></tr>" +
"<tr><th>Event</
th><td>{{title}}</td></tr>" +
"<tr><th>Description</
th><td>{{description}}</td></tr>" +
"</table>",
}
}
],
bandIntervals: [
Timeline.DateTime.DECADE,
Timeline.DateTime.CENTURY
]
});
// set the map to our custom style
var gmap = tm.getNativeMap();
gmap.mapTypes.set("white", styledMapType);
gmap.setMapTypeId("white");
});
</script>
<link href="style.css" type="text/css" rel="stylesheet"/>
<style>
div#timelinecontainer{ height: 300px; }
div#mapcontainer{ height: 300px; }
</style>
</head>
<body onload="onLoad();">
<div id="help">
<h1>Art History Example</h1>
Here is a TimeMap loaded from this google spreadsheet: (<a
href="//spreadsheets.google.com/spreadsheet/pub?
hl=en&hl=en&key=0Ajx3M2Ty1uetdGZsR2IwOExTajUtdUFsTjJ4TVBYVHc&output=html"
target=_blank>published here</a>). Additional arbitrary columns are
loaded using the "extraColumns" setting, and displayed in the info
window.
</div>
<div id="timemap">
<div id="timelinecontainer">
<div id="timeline"></div>
</div>
<div id="mapcontainer">
<div id="map"></div>
</div>
</div>
</body>
</html>
I'm fairly new to TimeMap. I am implementing a version of TimeMap with
google maps v3, using a Google spreadsheet to provide data for my
timeline and map. I have basically copied and pasted from timeMap
examples and changed lines of code to match my specific needs.
I have been unable to get my description bubbles to automatically
disappear when another event marker is selected either on the map or
the timeline itself. I assume this should be the default behavior
since I haven't found any other threads on the issue. Why would this
not be working (see code below)?
In addition to this issue, does anyone know if it is possible to have
imprecise start and end dates for events in the timeline while using
the timeMap interface? If it is possible, could you provide an
example implementation for one imprecise duration event? I have
commented out code that I assumed would have been the correct
implementation for this issue, but did not result in any changes in my
timeline.
Thanks for your help!
-Gabe
html code below:
<!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>Art History Example</title>
<script type="text/javascript" src="http://maps.google.com/maps/
api/js?
sensor=false&key=ABQIAAAAGIqlDliIK8VkXkJGb3KfQxRejvqmi1fk_fUV8G6u33Kpaf23LhRkMj-
DRiDlNzAM0NLo9g8fxuzVnA"></script>
<script type="text/javascript" src="../lib/jquery-1.4.4.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="../src/param.js" type="text/javascript"></script>
<script src="../src/loaders/json.js" type="text/javascript"></
script>
<script src="../src/loaders/google_spreadsheet.js" type="text/
javascript"></script>
<script type="text/javascript">
//https: //spreadsheets.google.com/spreadsheet/pub?
hl=en&hl=en&key=0Ajx3M2Ty1uetdGZsR2IwOExTajUtdUFsTjJ4TVBYVHc&output=html
var tm;
$(function () {
// make a custom map style
var styledMapType = new google.maps.StyledMapType([
{
featureType: "road",
elementType: "all",
stylers: [
{ saturation: 50 },
{ lightness: 50 }
]
},
{
featureType: "all",
elementType: "all",
stylers: [
{ saturation: 0 }
]
}
], {
name: "white"
});
tm = TimeMap.init({
mapId: "map", // Id of map div element
(required)
timelineId: "timeline", // Id of timeline div
element (required)
options: {
centerMapOnItems: true,
mapType: "physical",
eventIconPath: "../images/"
},
datasets: [
{
title: "Events",
id: "events",
theme: "default",
type: "gss",
options: {
// note that your spreadsheet must be
published for this to work
key:
"0Ajx3M2Ty1uetdGZsR2IwOExTajUtdUFsTjJ4TVBYVHc",
// map spreadsheet column names to
expected ids
paramMap: {
start: "StartDate",
//latestStart: "latestStart",
//earliestEnd: "earliestEnd",
//durationEvent: "isDuration",
end: "EndDate"
},
// load extra data from non-standard
spreadsheet columns
extraColumns: [
//"city",
//"depthft",
//"pitno."
],
// let's do something with that extra
data!
infoTemplate: "<table
style='quarrytable'>" +
"<tr><th colspan='2'
class='title'>Details</th></tr>" +
"<tr><th>Event</
th><td>{{title}}</td></tr>" +
"<tr><th>Description</
th><td>{{description}}</td></tr>" +
"</table>",
}
}
],
bandIntervals: [
Timeline.DateTime.DECADE,
Timeline.DateTime.CENTURY
]
});
// set the map to our custom style
var gmap = tm.getNativeMap();
gmap.mapTypes.set("white", styledMapType);
gmap.setMapTypeId("white");
});
</script>
<link href="style.css" type="text/css" rel="stylesheet"/>
<style>
div#timelinecontainer{ height: 300px; }
div#mapcontainer{ height: 300px; }
</style>
</head>
<body onload="onLoad();">
<div id="help">
<h1>Art History Example</h1>
Here is a TimeMap loaded from this google spreadsheet: (<a
href="//spreadsheets.google.com/spreadsheet/pub?
hl=en&hl=en&key=0Ajx3M2Ty1uetdGZsR2IwOExTajUtdUFsTjJ4TVBYVHc&output=html"
target=_blank>published here</a>). Additional arbitrary columns are
loaded using the "extraColumns" setting, and displayed in the info
window.
</div>
<div id="timemap">
<div id="timelinecontainer">
<div id="timeline"></div>
</div>
<div id="mapcontainer">
<div id="map"></div>
</div>
</div>
</body>
</html>
Nick Rabinowitz
May 3, 2011, 1:24:27 PM5/3/11
to gabe....@gmail.com, Timemap.js Development
Hi Gabe -
The description bubble is a known issue - Google Maps v3 does not make the info window exclusive by default, and so I left in the multiple-window behavior. I'm planning to make this an optional setting in the next release. One possible solution is discussed here: http://groups.google.com/group/timemap-development/browse_thread/thread/3b46eb7d02a885d8
Sorry, the info window implementation has a few issues in timemap.js v2.0 that I'm hoping to get ironed out for the next release - that may be a month or two off, though.
If by imprecise you mean events with earliestStart and earliestEnd, as described here (http://code.google.com/p/simile-widgets/wiki/Timeline_EventSources), then unfortunately no - right now the timemap.js library doesn't support them. I never thought Timeline was particularly good at representing them in any case, to be honest. It would be possible to add this to the timemap.js library, but it's a bit complicated for (in my opinion) not much payoff. Could you use a different theme color for these events instead? That's essentially what Timeline does.
-Nick
--
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.
Gabe
May 3, 2011, 3:28:07 PM5/3/11
to Timemap.js Development
Hi Nick,
Thanks for the response. The fix you posted in the linked thread
seems to work for me so far in terms of closing description bubbles -
Great!
In terms of themes, is there a way to apply different themes to each
event that are all coming from the same Google document data source?
I see that I can apply a theme to the data coming from the spreadsheet
as a whole, but what if I want each event (or groups of events) to
have different band colors, for example.
The only way that I could see to do it is to set up a separate
spreadsheet for each theme, and then have my timeMap get data from
each spreadsheet. Is this what you would recommend or am I missing
something?
Thanks again,
-Gabe
On May 3, 12:24 pm, Nick Rabinowitz <n...@nickrabinowitz.com> wrote:
> Hi Gabe -
>
> The description bubble is a known issue - Google Maps v3 does not make the
> info window exclusive by default, and so I left in the multiple-window
> behavior. I'm planning to make this an optional setting in the next release.
> One possible solution is discussed here:http://groups.google.com/group/timemap-development/browse_thread/thre...
>
> <http://groups.google.com/group/timemap-development/browse_thread/thre...>Sorry,
Thanks for the response. The fix you posted in the linked thread
seems to work for me so far in terms of closing description bubbles -
Great!
In terms of themes, is there a way to apply different themes to each
event that are all coming from the same Google document data source?
I see that I can apply a theme to the data coming from the spreadsheet
as a whole, but what if I want each event (or groups of events) to
have different band colors, for example.
The only way that I could see to do it is to set up a separate
spreadsheet for each theme, and then have my timeMap get data from
each spreadsheet. Is this what you would recommend or am I missing
something?
Thanks again,
-Gabe
On May 3, 12:24 pm, Nick Rabinowitz <n...@nickrabinowitz.com> wrote:
> Hi Gabe -
>
> The description bubble is a known issue - Google Maps v3 does not make the
> info window exclusive by default, and so I left in the multiple-window
> behavior. I'm planning to make this an optional setting in the next release.
>
> <http://groups.google.com/group/timemap-development/browse_thread/thre...>Sorry,
Nick Rabinowitz
May 3, 2011, 4:21:16 PM5/3/11
to gabe....@gmail.com, Timemap.js Development
Hi Gabe -
Yes, this is totally possible. You can add a column to your spreadsheet called "theme" and use it to indicate what theme you want to use (e.g. "blue", "green", etc). You'll need to explicitly tell timemap.js to load the "theme" column - see this example for how to do that: http://timemap.googlecode.com/svn/tags/2.0/examples/google_spreadsheet_columns.html (the example doesn't use a "theme" column, but it would work the same way).
Hope that helps!
-Nick
Tony Dolan
Oct 24, 2012, 5:19:10 AM10/24/12
to timemap-d...@googlegroups.com, gabe....@gmail.com
Hi Nick,
I'm a huge fan of Timelines and Timemap, I think they are simply wonderful tools. However, I would disagree that the latestStart,earliestEnd are not important. In history the birth and death of a lot of key figures is disputed between experts and it is nice to be able to indicate the areas of dispute with a dimmed line.
Similarly the tape-image,tape-repeat style attributes are useful to indicate 'mixed influences' on a timeline which is also a useful tool for a historian.
I would not mind attempting some implmentation (hack) of the above. What is not clear to me is to what extent many of the javascript files used in Timelines are simply redundant in the Timemap implementation. On the one hand I can see all the relevant *-painter.js scripts invoked in the timeline-api.js
Much obliged for any heads-up on this,
Many thanks,
Tony Dolan
Nick Rabinowitz
Oct 24, 2012, 12:39:13 PM10/24/12
to tgmd...@gmail.com, timemap-d...@googlegroups.com, gabe....@gmail.com
Hi Tony -
Conceptually, I agree - being able to represent "fuzzy" dates and date ranges is useful. But I think Timeline represents them really poorly, and barring a better representation I never saw the value in supporting them in Timemap.js.
I haven't looked at this recently, but I think tape-image and tape-repeat are theme settings, right? You can apply standard Timeline themes to timemaps - see http://timemap.googlecode.com/svn/tags/2.0.1/examples/artists.html for an example.
In answer to the implementation question - Timemap.js uses Timeline as is, so most of Timeline is still relevant and used. There may be a few areas of overlap, but essentially Timemap.js is just glue code between Timeline and Mapstraction.
-Nick
To view this discussion on the web visit https://groups.google.com/d/msg/timemap-development/-/Cu_7g-XJdPYJ.
To unsubscribe from this group, send email to timemap-develop...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages