Working Timeline

Oli Howson

unread,

Aug 31, 2008, 8:22:18 AM8/31/08

to simile-...@googlegroups.com

Does anyone have the timeline widget working locally? I’ve been looking into this for ages (over a year off and on) and never managed to get it working! If they do, could someone zip and send me the whole thing, so I’ve got a secure working base to start from?

Many thanks

Oli

--

Oli Howson, BSc (Hons) MBCS

o...@badllama.net

0777 929 8368

www.genghisfolly.org.uk

Genghis' Folly 2008 Mongolian Rally Team

Bernard

unread,

Sep 1, 2008, 10:24:53 AM9/1/08

to SIMILE Widgets

what have you tried? post some code, we'll help. sounds to me like you
just want the code the dine & dash way.

David López

unread,

Sep 1, 2008, 12:14:03 PM9/1/08

to simile-...@googlegroups.com

Hi, I forgot to include the code:

The following corresponds to a working html:

So the thing is that in the beginning the KML gets properly loaded on top of google map.

But once I apply the filter (in simile terms "the facet") the map is properly updated with the filtered JSON but fails to "recharge" the KML.

Any help will be appreciated.

Cheers

 <html>
 <head>
    <title>Title</title>

  
    <link href="js/data.js" type="application/json" rel="exhibit/data" />

  
    <script src="js/gmap.js" type="text/javascript"></script>

    <script src="http://static.simile.mit.edu/exhibit/api-2.0/exhibit-api.js"

            type="text/javascript"></script>
    <script src="http://static.simile.mit.edu/exhibit/extensions-2.0/time/time-extension.js" type="text/javascript"></script>

    <script src="http://static.simile.mit.edu/exhibit/extensions-2.0/map/map-extension.js?gmapkey=MyGMAPKEY"></script>

<script language="javascript" src="source-to/gmap-wms.js"> </script> 

    <script type="text/javascript">
       var oldReconstruct = Exhibit.MapView.prototype._reconstruct;

       // Overwriting reconstruct to show WMS maps
       Exhibit.MapView.prototype._reconstruct = function() {
          oldReconstruct.call(this);
	  //if(this._map.getMapTypes().length<5){
	  if(this._map.getMapTypes().length<4){

         
             //var WMS_URL_ROUTE='http://wms.mapa.es/wms/wms.aspx?&reaspect=false&EXCEPTIONS=application/vnd.ogc.se_xml&';

             var WMS_URL_ROUTE0='http://www.idee.es/wms/PNOA/PNOA?application/vnd.ogc.se_inimage&';
         
             var G_MAP_WMS_SPEC0 = createWMSSpec(WMS_URL_ROUTE0, "PNOA", "PNOA", "pnoa", "", "image/jpeg", "1.1.1","0xFFFFFF","EPSG:4326");

             //var G_MAP_WMS_SPEC = createWMSSpec(WMS_URL_ROUTE, "SIGPAC", "SIGPAC", "ORTOFOTOS", "", "image/jpeg", "1.1.1","0xFFFFFF","EPSG:4326");

	     
	     var geoXml_fincas = new GGeoXml("URL_PATH_TO_MY_KML"); 
	    
	     
	     //this._map.addMapType(G_MAP_WMS_SPEC);
	     this._map.addMapType(G_MAP_WMS_SPEC0);
	     
	   this._map.addOverlay(geoXml_fincas); 

	     
	     this._map.enableScrollWheelZoom();
	    
	     
	 }

       };
        
    </script>

   <style>
       body {

           font-family:    "arial","georgia", "times", "times new roman", serif;
            font-size:   50%;
       }
       div.name {
           

           font-size:   100%;
       }
       .status {
           font-color: red;
       }
   </style>
 </head> 
 <body>

 
 
    <table width="100%">
        <tr valign="top">

            <td width="15%">
    		<h1>Riegos</h1>

                <b>Buscar:</b>
                <div ex:role="facet" ex:facetClass="TextSearch"></div>

                <hr/>
		<div ex:role="facet" ex:expression=".Parcela" ex:facetLabel="Parcela"></div>

            </td>
            
	

	<!--td ex:role="viewPanel"-->

            <td>

   		

               <table ex:role="lens" class="riego">

                <tr>
                        <td>
                        
                        <div>

                                Parcela: <span ex:content=".Parcela" class="label"></span><br/>

                               Consumo(m3): <span ex:content=".label" class="label"></span><br/>

                               Aportaci&oacute;n(mm): <span ex:content=".Aportacion" class="label"></span><br/>

                                Inicio: <span ex:content=".FInicio" class="year"></span><br/>

                                Fin: <span ex:content=".FFin" class="year"></span><br>

                                
                        </div>
                        </td>
                </tr>

                </table>

		<div ex:role="coordinator" id="riego"></div>

 		<div ex:role="view" 
 				 ex:viewClass="Timeline"

     		 ex:start=".FInicio"
     		 ex:end=".FFin"

				 ex:timelineHeight="200"
     		 ex:colorKey=".Parcela"

     		 ex:bottomBandUnit="week"
     	     ex:selectCoordinator="riego">

 		</div>
       		<div id="map" ex:role="view"

           		ex:viewClass="Map"
           		ex:latlng=".latlng"

			ex:colorKey=".Parcela"
			ex:zoom="15"
			ex:center="42.0980,-7.712412"

            
			ex:mapHeight= "700"
			ex:showSummary="false"

			ex:showHeader="false"
			ex:showFooter="false"

			ex:selectCoordinator="riego">
       		</div>

		<div>

			

		</div>
            </td>
        </tr>

    </table>

 </body>
 </html>

Oli Howson

unread,

Sep 1, 2008, 12:17:26 PM9/1/08

to simile-...@googlegroups.com

>what have you tried? post some code, we'll help.

http://www.badllama.net/timeline/timeline.php
tried it on ff, the error says something about the Gregorian locale not
being set?

>sounds to me like you just want the code the dine & dash way.

Well yes. I thought that was the point in widgets? More importantly, I
suffer from a severe case of lazyitiss

:)

Oli

Bernard

unread,

Sep 1, 2008, 1:21:25 PM9/1/08

to SIMILE Widgets

Hey Oli,

I got lazyitiss too sometimes.

Your error makes senses if you check your page with Firebug. it seems
your references to the labellers.js file isn't right.

see the following screenshot: http://img29.picoodle.com/data/img29/3/9/1/f_bugm_4ab0fe5.png

make sure the path is good and reachable.

LarryK

unread,

Sep 1, 2008, 1:37:27 PM9/1/08

to SIMILE Widgets

Hi Oli,

When you say "local" do you mean "only using my own web server,
nothing from MIT" or do you mean "no web server at all"?

If you mean "no web server at all" then that's a bit tricky since
you'd need to put everything in one large html file.

If you mean "only using my own web server, nothing from MIT," that can
be done, instructions below.
Note that you can also run a web server on your own computer. That
way, your computer is stand alone. Personal web servers are available
for all platforms. Simile/Timeline includes a Java based personal web
server. To use it, you'll need to first install Java on your computer.
I haven't pursued it since I don't need it.

Regards,

Larry

Running Timeline without MIT server
See my post: http://snippets.dzone.com/posts/show/6008

Oli Howson

unread,

Sep 1, 2008, 2:00:17 PM9/1/08

to simile-...@googlegroups.com

>Your error makes senses if you check your page with Firebug. it seems
>your references to the labellers.js file isn't right.

Hmm, How do you get that info up in firebug? I've just installed it, and I'm
not seeing that window you posted me. Is there some config or something?

Larry: That copy script is no good if you're working on windows!

LarryK

unread,

Sep 1, 2008, 3:06:05 PM9/1/08

to SIMILE Widgets

Windows, eh? No problem-o, here are the manual steps. Note that I have
not tested this recipe. Let me know how it goes...

Note, read on for an easier solution--just serve the entire source
tree. What's a couple of extra files on your system?

1) Install svn for windows by installing TortoiseSVN package. (free.
Google to find it.)
2) Use Tortoise (right click in a files folder) to Export the
repository http://simile-widgets.googlecode.com/svn/timeline/trunk
export it to a folder "timeline"
3) Download/install a webserver on your windows machine. Set it to
serve a directory such as "c:\webroot"
Here's a free Windows web server: http://www.aprelium.com/abyssws/

4) Do some file copying:
a) Create directory (folder) c:\webroot
b) In that directory, create timeline
c) In that directory, create folder timeline_js
d) Goto directory timeline/src/webapp/api
e) Copy files timeline-api.js timeline-bundle.js timeline-bundle.css
from there to c:\webroot\timeline\timeline_js
f) Goto dir c:\webroot\timeline\timeline_js
g) Create directory scripts
h) Goto timeline/src/webapp/api/scripts
i) Copy the FOLDER l10n (cntrl-c)
j) Goto dir c:\webroot\timeline\timeline_js\scripts
k) Paste the FOLDER. (cntrl-v). You will now see new folder l10n which
has man sub folders
l) Goto dir timeline/src/webapp/api
m) Copy the FOLDER images
n) Goto dir c:\webroot\timeline\timeline_js and paste the FOLDER her

Now the ajax programs
a) goto directory (folder) c:\webroot\timeline
b) Create folder timeline_ajax (the directory should already have a
folder timeline_js.
c) In folder timeline_ajax, create folder scripts
d) goto dir timeline/src/ajax/api
e) Copy files simile-ajax-api.js and simile-ajax-bundle.js to folder
c:\webroot\timeline\timeline_ajax
f) Goto dir timeline/src/ajax/api/scripts
g) Copy just one file, signal.js to folder c:\webroot\timeline
\timeline_ajax\scripts
h) Goto dir timeline/src/ajax/api
i) Copy FOLDER images
j) Goto c:\webroot\timeline\timeline_ajax and paste the folder

In your html file, include the following at the top:

<script src="http://localhost/timeline/timeline_ajax/simile-ajax-
api.js" type="text/javascript"></script>
<script>
Timeline_urlPrefix='http://localhost/timeline/
timeline_js/';
Timeline_parameters='bundle=true';
</script>
<script src="http://localhost/timeline/timeline_js/timeline-
api.js" type="text/javascript"></script>
The above will get easier once my patch to timeline-api.js is
accepted.

The other way to do this is to just serve the entire source tree. In
that case, you would do the following:

1) Again assuming web server is serving c:\webroot
2) Use TortoiseSVN to export the source to c:\webroot\timeline
3) Put the following at the top of your html file -- eg c:\webroot
\index.html

<script src="http://localhost/timeline/src/ajax/api/simile-ajax-
api.js" type="text/javascript"></script>
<script>
Timeline_urlPrefix='http://localhost/timeline/src/webapp/
api';
Timeline_parameters='bundle=true';
</script>
<script src="http://localhost/timeline/src/webapp/api/timeline-
api.js" type="text/javascript"></script>

Shazam!

If you surf to http://localhost you should see your timeline on your
web page. And no Internet connection needed!

HTH,

Larry

Oli Howson

unread,

Sep 1, 2008, 3:30:56 PM9/1/08

to simile-...@googlegroups.com

Ace! Larry, you're a star! The guide was a *touch* more simplistic than I
needed (I'm a PHP developer in my spare time, an IT teacher by profession)
but it worked, so yay! Cheers mate!

David Huynh

unread,

Sep 1, 2008, 4:12:57 PM9/1/08

to simile-...@googlegroups.com

David,

Move the statement
this._map.addOverlay(geoXml_fincas);
Outside the if statement. You should always add that overlay even if you
don't need to re-add the map type. This is because the original
_reconstruct function calls
this._map.clearOverlays();

David

> //var WMS_URL_ROUTE='http://wms.mapa.es/wms/wms.aspx?&reaspect=false&EXCEPTIONS=application/vnd.ogc.se_xml& <http://wms.mapa.es/wms/wms.aspx?&reaspect=false&EXCEPTIONS=application/vnd.ogc.se_xml&>';
>
> var WMS_URL_ROUTE0='http://www.idee.es/wms/PNOA/PNOA?application/vnd.ogc.se_inimage& <http://www.idee.es/wms/PNOA/PNOA?application/vnd.ogc.se_inimage&>';

>
> var G_MAP_WMS_SPEC0 = createWMSSpec(WMS_URL_ROUTE0, "PNOA", "PNOA", "pnoa", "", "image/jpeg", "1.1.1","0xFFFFFF","EPSG:4326");
>
> //var G_MAP_WMS_SPEC = createWMSSpec(WMS_URL_ROUTE, "SIGPAC", "SIGPAC", "ORTOFOTOS", "", "image/jpeg", "1.1.1","0xFFFFFF","EPSG:4326");
>
>
> var geoXml_fincas = new GGeoXml("URL_PATH_TO_MY_KML");
>
>
> //this._map.addMapType(G_MAP_WMS_SPEC);
> this._map.addMapType(G_MAP_WMS_SPEC0);
>
> this._map.addOverlay(geoXml_fincas);
>
>
> this._map.enableScrollWheelZoom();
>
>
> }
>
> };
>
> </script>
>
> <style>
> body {
>
> font-family: "arial","georgia", "times", "times new roman", serif;
> font-size: 50%;
> }

> div.name <http://div.name> {

> <mailto:o...@badllama.net>> wrote:
> > Does anyone have the timeline widget working locally? I've been
> looking into
> > this for ages (over a year off and on) and never managed to get
> it working!
> > If they do, could someone zip and send me the whole thing, so
> I've got a
> > secure working base to start from?
> >
> > Many thanks
> >
> > Oli
> >
> > --
> >
> > Oli Howson, BSc (Hons) MBCS
> >

> > o...@badllama.net <mailto:o...@badllama.net>
> >
> > 0777 929 8368
> >
> > www.genghisfolly.org.uk <http://www.genghisfolly.org.uk>

ILVC

unread,

Oct 2, 2008, 9:26:44 AM10/2/08

to SIMILE Widgets

I was wondering if there could be an override to the _reconstruct()
function similar to a mapConstructor where logic to add overlays
could be separate from the code of the map-view itself. Are there any
plans in that direction?

On Sep 1, 4:12 pm, David Huynh <dfhu...@alum.mit.edu> wrote:
> David,
>
> Move the statement
> this._map.addOverlay(geoXml_fincas);
> Outside the if statement. You should always add that overlay even if you
> don't need to re-add the map type. This is because the original
> _reconstruct function calls
> this._map.clearOverlays();
>
> David
>
> David López wrote:
> > Hi, I forgot to include the code:
>
> > The following corresponds to a working html:
>

> > So the thing is that in the beginning theKMLgets properly loaded on

> > top of google map.
>
> > But once I apply the filter (in simile terms "the facet") the map is
> > properly updated with the filtered JSON but fails to "recharge" theKML.
>
> > Any help will be appreciated.
>
> > Cheers
>
> > <html>
> > <head>
> > <title>Title</title>
>
> > <link href="js/data.js" type="application/json" rel="exhibit/data" />
>
> > <script src="js/gmap.js" type="text/javascript"></script>
>
> > <script src="http://static.simile.mit.edu/exhibit/api-2.0/exhibit-api.js"
>
> > type="text/javascript"></script>

> > <script src="http://static.simile.mit.edu/exhibit/extensions-2.0/time/time-extensi..." type="text/javascript"></script>
>
> > <script src="http://static.simile.mit.edu/exhibit/extensions-2.0/map/map-extension..."></script>

>
> > <script language="javascript" src="source-to/gmap-wms.js"> </script>
>
> > <script type="text/javascript">
> > var oldReconstruct = Exhibit.MapView.prototype._reconstruct;
>
> > // Overwriting reconstruct to show WMS maps
> > Exhibit.MapView.prototype._reconstruct = function() {
> > oldReconstruct.call(this);
> > //if(this._map.getMapTypes().length<5){
> > if(this._map.getMapTypes().length<4){
>

> > //var WMS_URL_ROUTE='http://wms.mapa.es/wms/wms.aspx?&reaspect=false&EXCEPTIONS=applicatio...<http://wms.mapa.es/wms/wms.aspx?&reaspect=false&EXCEPTIONS=applicatio...>';

Reply all

Reply to author

Forward

Working Timeline - Local

Oli Howson

Bernard

David López

Oli Howson

Bernard

LarryK

Oli Howson

LarryK

Oli Howson

David Huynh

ILVC