jakobzhao / storymap Goto Github PK

It would be nice to support interactive maps embedded as section backgrounds that are hosted elsewhere.

Perhaps these could be implemented with <section data-iframe="https://some-map-url-to-embed.com"> and then about there in the code, support could be for them as section backgrounds:

For example, a lot of Esri / ArcGIS Online maps allow iframe embedding.

Hi @jakobzhao, thx for your nice library!

Having used it recently in a little example, we were having problems with 'home button' not working fine. We checked the code and the problem is this function:

$('.storymap-scroll-down').click(function () {
  var viewing = $(".viewing");
  if (viewing.data("scene") !== $("section:last").data("scene")) {
    if (nav.length !== 0) {
      window.scrollBy(0, viewing.offset().top + viewing.height() - $(window).scrollTop() - $('.storymap-navbar').height() - 10);
    } else {
      window.scrollBy(0, viewing.offset().top + viewing.height() - $(window).scrollTop() - 10);
    }
  } else {
    window.scrollTo(0, 0);
  }
}); 

As you can see, there is a DOM selector like $("section:last").data("scene")), and in our web page we had another, unrelated 'section' tag (without any 'scene' attribute), so that broke the 'if' when returning undefined.

IMO it should be enough to just replace it with $("section[data-scene]:last").data('scene') to fix it.

Thx!

PD We were using https://cdn.rawgit.com/jakobzhao/storymap/master/dist/storymap.2.4.js

https://github.com/jakobzhao/storymap

It would be nice if the official 'scene-name' didn't show in the navbar. Is there a way to create an alias?

add a prefix (e.g., sm-) to all the storymap classes.

add an intro.js function

Hi, and thank you for this awesome library. I'm trying to add divIcon on a map, but it seems that not working.

onEachFeature: function (feature, layer) {
   return L.marker([feature.properties.labelx, feature.properties.labely], {icon: L.divIcon({
       className: 'labelDiocese', 
       html: feature.properties.nom
   })});
}

I've no error on my console, but div not appear. Is it storymap configuration or me ?

Looks like layers isn't declared within the storymap.2.5.js script. Can be fixed by passing layers as a setting to the map:

$('#storymap').storymap({
        layers: layers,
        scenes: scenes,

And then accessing like so within storymap.2.5.js (line 292):

$.each(settings.layers, function (key, layer) {

    // layer = layer.layer;
    layer.layer.on('s');
    layer.layer.on('load', function () {
        $(".storymap-loader").fadeTo(1000, 0);
    })

});```

Right now there is only a bottom arrow on each page. I think a top arrow (to return to the previous section) would be useful as well.

Thank you!