Deleting items ("lines") from time bands

59 views
Skip to first unread message

Rafael Fraga

unread,
Apr 12, 2013, 5:15:16 PM4/12/13
to timemap-d...@googlegroups.com
Hi Guys,

I've being reading here a lot to produce my stuff, this is helping me a lot! :) Basically everything is done for now, I just have one more last step to do it, which is deleting the items ("lines") from the time bands: I want the time bands to be completely clear, like this example: http://timemap.googlecode.com/svn/tags/2.0.1/examples/google_spreadsheet_heatmap.html

The image below explains better what I want to do: 


I'm VERY NEWBIE at all this, so I have no idea how to do it... maybe probably something that I have to edit at the timemap.js?

Thanks you very much!

Rafael Fraga

unread,
Apr 13, 2013, 1:39:58 PM4/13/13
to timemap-d...@googlegroups.com
Any ideas? I really have to get this done asap :( Thanks a lot!

Alan Leslie

unread,
Apr 15, 2013, 7:02:52 AM4/15/13
to timemap-d...@googlegroups.com
Hiya Rafael

You referred to the google spreadsheet heatmap example.
I am not exactly sure what you want but you might want to try out the noEventLoad setting (approx line 182).
I usually use it in conjunction with the noPlacemarlLoad setting (I have some datasets for the timeline and some for the map - for example http://www.alfi2fe.co.uk/RobberyHeatmap.html).

Alan

Rafael Fraga

unread,
Apr 16, 2013, 11:44:49 AM4/16/13
to timemap-d...@googlegroups.com
Hi Alan,

Thanks a lot for the answer, I really appreciate :). Let me try to explain better what I'm trying to do: I want to clear only the timeband and still having the events showing on the map. I tried to use the noEventLoad, but this clears my map as well... So, my question is: is there anyway to clear ONLY the timebands, but having the items appearing on the map normally? The example with the google spreadsheet heatmap does it, I know, it's very different than what I'm trying to do, but it has items on the map with a clear timeband (like I want to). Thanks a lot again, I already learned a lot of stuff that I had no idea of in your message :). By the way, here is my code, if it helps somehow:

var tm;
$(function() {
    // create the circular themes ("bubbles")
TimeMap.themes['theme1'] = TimeMapTheme.createCircleTheme({
alpha: '9b',
size: 100,
color: '008000'
});
TimeMap.themes['theme2'] = TimeMapTheme.createCircleTheme({
alpha: '9b',
size: 200,
color: '008000'
});
// init for the map and timeline
    tm = TimeMap.init({
        mapId: "map",               // Id of map div element (required)
        timelineId: "timeline",     // Id of timeline div element (required)
        options: {
            mapType: "satellite",
style: "classic",
noEventLoad: true
        },
        datasets: [
            {
                id: "events",
                title: "Events",
                type: "basic",
                options: {
                    items: [
                        {
                          "start" : "2009-01-03T00:00:00",
                          "end" : "2009-01-03T00:15:00",
                          "point" : {
                              "lat" : 40.68566660706582,
                              "lon" : -74.16328270287337
                           },
                          "title" : "event1",
                          "options" : {
                          "theme": "theme1"
                          }
                        },
                        {
                          "start" : "2009-01-03T00:00:00",
                          "end" : "2009-01-03T00:15:00",
                          "point" : {
                              "lat" : 40.63490415024189,
                              "lon" : -73.77831836935826
                           },
                          "title" : "event2",
                          "options" : {
                          "theme": "theme2"
                          }
                        }
                    ]
                }
            }
        ],
        bandIntervals: "min",
    });
});
    </script>
    <link href="examples.css" type="text/css" rel="stylesheet">
    <style>
    div#timelinecontainer{ height: 120px; }
    div#mapcontainer{ height: 550px; }
    </style>
  <script type="text/javascript" charset="UTF-8" src="{mod_drag,mod_ctrapi}.js"></script></head>

  <body>
    <div id="timemap">
        <div id="timelinecontainer">
          <div id="timeline" class=" timeline-container timeline-horizontal"></div>
        <div id="mapcontainer">
          <div id="map" style="position: relative; background-color: rgb(229, 227, 223);"></div>
    </div>

Alan Leslie

unread,
Apr 16, 2013, 4:27:05 PM4/16/13
to timemap-d...@googlegroups.com
Rafael

The problem is that the timeline is not set to the times of your events.
You can get placemarks to display if you add a scrollTo attribute.
For example you can add it after the bandintervals setting.

         bandIntervals: "min",
          scrollTo: '2009-01-03T00:00:00'

Hope that helps.


Alan


On Friday, April 12, 2013 10:15:16 PM UTC+1, Rafael Fraga wrote:

Rafael Fraga

unread,
Apr 17, 2013, 9:48:55 PM4/17/13
to timemap-d...@googlegroups.com
AHHH WONDEFULLLL!!!! THANKS A LOTTTTT!!!

Just perfect my friend, all I needed, THANKS AGAIN!

By the way, when I load a lot of points the scroll goes a little slow... any ideas on how make it more quick/fast/smooth? Again, THANKS A LOT, you already gave me everything I needed, so dont even bother answering this, lol!

:) :) :)
Reply all
Reply to author
Forward
0 new messages