Anyone able to successfully integrate Leaflet with Timemap?

[L P]

I have been trying to modify the basic examples to use leaflet.js, but I have not had much success. The map renders, but none of the points are shown. 
I modified the head only of examples/basic_openlayers.html. Is anyone using timeline with leaflet?  What am I missing?

This is the code:

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.ie.css" />
    <![endif]-->
    <script src="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.js"></script>
   
    <script type="text/javascript" src="../lib/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="http://mapstraction.com/mxn/build/latest/mxn.js?(leaflet)"></script>
   
    <script type="text/javascript" src="../lib/timeline-2.3.0.js"></script>
    <script src="../src/timemap.js" type="text/javascript"></script>
    <script type="text/javascript">
    ...
    </script>
    <link href="examples.css" type="text/css" rel="stylesheet"/>
    <style>
    div#timelinecontainer { height: 300px; }
    div#mapcontainer { height: 300px; }
    div.olFramedCloudPopupContent { width: 300px; }
    </style>
  </head>

[L P]

I got it to work by upgrading mapstraction to the latest version (2.0.18 at the time of this post)
https://github.com/mapstraction/mxn/downloads

Then when importing my mapstraction scripts, I directly called leaflet.core.js
mxn.js?(leaflet) did not work for me

See below:

<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="<path to leaflet-0.6.4>/leaflet.js?body=1" type="text/javascript"></script>
<script src="<path to timemap.2.0.1>lib/mxn-2.0.18/mxn.js?body=1" type="text/javascript"></script>
<script src="<path to timemap.2.0.1>lib/mxn-2.0.18/mxn.core.js?body=1" type="text/javascript"></script>
<script src="<path to timemap.2.0.1>lib/mxn-2.0.18/mxn.leaflet.core.js?body=1" type="text/javascript"></script>

(Note: I changed the tileLayer definitions in setMapType in mxn.leaflet.core.js to suit my needs)

[L P]

I forgot to add this important part:

I was getting the error "iconUrl not set in options" and found the fix here: https://github.com/Leaflet/Leaflet/issues/826

Mapstraction version 2.0.18 has not updated its leaflet module to include the iconUrl updates so I had to change lines 281-285 of mxn.leaflet.core.js (toProprietary function) because leaflet changed the Marker definition.

FROM:

  if (me.iconUrl) {
     thisIcon = thisIcon.extend({
        iconUrl: me.iconUrl
     });
  }

TO:

  if (me.iconUrl){
     thisIcon = thisIcon.extend({
       options: {
              iconUrl: me.iconUrl
        }
     });

[L P]

If anyone is having trouble with popups not appearing for leaflet using mxn 2.0.18 see below:

I found that when I clicked on a leaflet map marker directly, the popup would not appear.  However, the popup for the marker would open when clicking on an event in the timeline.  I fixed this behavior by modifying the Marker's openBubble function in mxn.leaflet.core.js.

openBubble: function() {
       var pin = this.proprietary_marker;
       if (this.infoBubble) {
           pin.mxnMarker = this;
           pin.bindPopup(this.infoBubble);
           pin.openPopup();
           pin.unbindPopup(); //Added this line to get the desired behavior when clicking leaflet markers on the map

[s]

Following code steps, everything goes fine but map tiles not showing. 

See my site http://riders1.dalli.it/timeline.php

Need an help, thank you. Regards.

Stefano

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^