Lightbox with geojson

[Brian393]

@edwardsharp

I have a geojson file named "VanportMosaic" which currently displays 15 icons. I would like to use it to display videos. The instructions in the ReadMe don't cover this case, so it would be great to have one working model, using the videos below (there are currently only 11 but I'll add more). The lightbox should also display the title.

---

Ed Washington: That was their home https://vimeo.com/218190199

John Kelly: I want you to know https://vimeo.com/217432721

Holly Elkins: Our Nation of Melting Pots https://vimeo.com/215757194

Thelma Glover: Step By Step https://vimeo.com/199467783

Violet and The Photographer https://vimeo.com/149108309

Kim Moreland: A Pattern of Displacement https://vimeo.com/146978971

Beatrice Gilmore: Challenging History https://vimeo.com/152496755

Cherished Memories https://vimeo.com/147915420

Lurlene Shamsud-Din: We are still here https://vimeo.com/168415688

Evelyn Bolme https://vimeo.com/168125010

Terri’s Trunk https://vimeo.com/168383247

[edwardsharp]

so, you don't really need to use a lightbox here, what you can use is an overlay from the openlayers lib.

so, you can see in the components/Map.vue file the overlays are computed properties, like:

tooltip: function () {
      return new Overlay({
        element: this.$refs.tooltip,
        offset: [10, 0],
        positioning: 'center-left'
      })
    }

these are passed to the openlays Map via the initBaseMap setup function, like

overlays: [this.twitterPopup, this.popup, this.titletip, this.tooltip]

so you can just create a computed property that returns a new overlay, maybe named vimeoVideo. you also need to add that computed property to the array of overlays

then you need to add an empty html element to contain the vimeo player, like:

<div ref="vimeoVideo"></div>

you will also need a method that closes the overlay (that just setPosition(undefined)), see:

closeVimeoVideo: function () {
      this.vimeoVideo.setPosition(undefined)
      return false
    },

okay, how to call these? well, if you add unique keys whos value is the url to the vimeo video, to your .geoJSON files. you can shoe them into the singleclick handler this.olmap.on('singleclick', (e) => { ... } see: https://github.com/Brian393/ecotopia-today/blob/master/src/components/Map.vue#L125 by adding another else if block that looks for your key, something like:

if (props.whateverYouNamedYourVimeoVideoPropertyInYourGeoJsonFiles) {
  this.$refs. vimeoVideo.innerHTML = `<iframe src="${props.whateverYouNamedYourVimeoVideoPropertyInYourGeoJsonFiles}" width="640" height="360" frameborder="0" allowfullscreen></iframe>`
  this.popup.setPosition(e.coordinate)
}

for the closeVimeoVideo you will need to call this via the this.olmap.on('pointermove', (e) => { ... } handler if you want these to close like the other overlays do, look for how the other overlays close methods are called (look for closeTooltip()). you also might need to destroy the vimeo player in the closeVimeoVideo methods; perhaps just setting .innerHTML = '' would do the trick.

[Brian393]

@edwardsharp

Hey, ed, this suggestion you are offering looks right and I can definitely learn something from it, but here's the thing:

this will take me hours of trial and error and if it doesn't work right I will never be sure if I have understood you correctly. So in the meantime I cannot create any image or write anything. Plus it stresses me out to my wits end.

Could you provide me with a working example? That's what I am hoping for. The thing is, now I have almost no time to be experimenting with this stuff....

[Brian393]

@edwardsharp

hi ed -

Thanks for working on this. I pulled your changes to my origin-master and then updated my local master. The twitter feed and the set-map-view seem to work fine. However, the video does not. It will not close, either on clicking the "x" or on a background click. Plus if you move the map around, the video can come unglued from the white background. Worse yet, the entire map now malfunctions: when you click on the layer-switching panel, the sidebar text changes but the map view does not. It takes a second click for it to change. So unfortunately this has not worked. Actually what I wanted was to use the lightbox to display the video. The reason for this can be seen now: once the user has clicked on the icon, they can still move the map, whether voluntarily or inadvertently. It really confuses the viewing experience.With the lightbox, the view is stable, centered, and the map is greyed out for full focus on the video. The user can exit by clicking on the "x" or anywhere on the background, so it's perfectly fluid. This would be much better.

Should I revert the merges to master and origin master? I am pasting the commands I used below.

thanks in advance for looking into this, Brian

GIT COMMANDS

brian@NewTerritories:~/Git/ecotopia-today$ git checkout master Switched to branch 'master' Your branch is up to date with 'origin/master'.

brian@NewTerritories:~/Git/ecotopia-today$ git fetch remote: Enumerating objects: 56, done. remote: Counting objects: 100% (56/56), done. remote: Compressing objects: 100% (33/33), done. remote: Total 56 (delta 24), reused 52 (delta 23), pack-reused 0 Unpacking objects: 100% (56/56), done. From https://github.com/Brian393/ecotopia-today 337c9c8..a245136 master -> origin/master 24ccc92..5810e92 gh-pages -> origin/gh-pages

brian@NewTerritories:~/Git/ecotopia-today$ git status On branch master Your branch is behind 'origin/master' by 4 commits, and can be fast-forwarded. (use "git pull" to update your local branch)

nothing to commit, working tree clean

brian@NewTerritories:~/Git/ecotopia-today$ git pull Updating 337c9c8..a245136 Fast-forward public/geojson/VanportMosaic.geojson | 155 +++++++++++++++++++++---- src/assets/styles.css | 4 + src/components/Map.vue | 22 +++- src/views/watershed/WatershedFalls.vue | 1 + src/views/watershed/WatershedHanford.vue | 17 ++- src/views/watershed/WatershedHanfordFloods.vue | 4 +- src/views/watershed/WatershedHanfordPlumes.vue | 1 + vue.config.js | 8 +- 8 files changed, 187 insertions(+), 25 deletions(-)