static image overlay different for each panorama

[Steve Johnson]

Hi all,

Just came across Marzipano today and seems like a great tool

I've started setting up a  project and had a question. I have an area with panoramas from several locations that I've loaded up through the Marzipano tool and I want to add in a small map inset that has the location highlighted when your at that particular location. I used the example I saw on here for adding in a logo, which works great, I just need to know how I would essentially add a different logo per panorama in my scene (which would be the same map image, just the new spot with a highlight)

thanks!

Steve J

[Manuel Cabral]

Hi Steve,

The easiest way to do this in a tour created with the tool is probably inside the `switchScene` function. Inside the function you can check which scene is being loaded and do whatever you need to change the map.

All the best,

Manuel

--
You received this message because you are subscribed to the Google Groups "marzipano" group.
To unsubscribe from this group and stop receiving emails from it, send an email to marzipano+unsubscribe@googlegroups.com.
To post to this group, send email to marz...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/b611f385-6540-4ea5-b17a-0bebe79b6cd2%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Steve Johnson]

Thanks Manuel, that makes sense.

I see the SwitchScene() function inside the index.js file.

would I need to create another function to be called inside that in order to load a new static image?

Right now I have it set up to define the image in the style.css (i.e. div#image1, etc) and then load that in the index.html file (div id="image1", img src="img/map1.png" , etc)

That works fine, but that obviously only loads one image. I'm guessing I need to create something like a short updateStaticMap(scene) function that gets called during the switchScene(), but my html and java skills are rudimentary at best  (usually limited to following along in the code, but not entirely sure what it's doing :) )

-Steve

On Wednesday, January 4, 2017 at 1:14:13 PM UTC-8, Manuel Cabral wrote:

Hi Steve,

The easiest way to do this in a tour created with the tool is probably inside the `switchScene` function. Inside the function you can check which scene is being loaded and do whatever you need to change the map.

All the best,

Manuel

On Wed, Jan 4, 2017 at 12:09 PM, Steve Johnson <stev...@gmail.com> wrote:

Hi all,

Just came across Marzipano today and seems like a great tool

I've started setting up a  project and had a question. I have an area with panoramas from several locations that I've loaded up through the Marzipano tool and I want to add in a small map inset that has the location highlighted when your at that particular location. I used the example I saw on here for adding in a logo, which works great, I just need to know how I would essentially add a different logo per panorama in my scene (which would be the same map image, just the new spot with a highlight)

thanks!

Steve J

--
You received this message because you are subscribed to the Google Groups "marzipano" group.

To unsubscribe from this group and stop receiving emails from it, send an email to marzipano+...@googlegroups.com.

[Manuel Cabral]

Another possibility might be to have one image with the map and another image with a marker indicating the current location. In `switchScene()` you could then change the location of the marker using CSS.

To unsubscribe from this group and stop receiving emails from it, send an email to marzipano+unsubscribe@googlegroups.com.

To post to this group, send email to marz...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/87c62b8b-65e9-41fb-9954-fc9a43e95d73%40googlegroups.com.

[Steve Johnson]

Thanks, that would work too. Could you give me a quick code spinet example of how that might look? for example just to display 'map-1' or 'map-2' based on 2 different panoramas?

[Steve Johnson]

I think I'm getting close, but not quite there. This is what I did:

in index.html added:

   <img id="imgDisp" src="img/0.png"></img>

in style.css added:

   img#imgDisp {position: absolute; right:5px; top:40px}

in index.js added 

   changeMap(scene); function call to the switchScene(scene) function

and then the function itself:

   function changeMap(imgName) {
     mapImage = document.getElementById(imgDisp);
     mapImage.src = "img/" + imgName + ".png";
    }

 Which I was hoping would bring up my 0.png, 1.png, etc  maps with each scene-0, scene-1 panorama. It seems to get close, but is loosing scene elements depending on where I put the changeMap() function call

Enter code here...

[Manuel Cabral]

Not sure I understand the problem. Do you have a link I can take a look at?

To unsubscribe from this group and stop receiving emails from it, send an email to marzipano+unsubscribe@googlegroups.com.

To post to this group, send email to marz...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/569c5205-934a-465d-b9d7-7f90eefd8477%40googlegroups.com.

[Steve Johnson]

Here's the original I did, which works great (but no map):

http://point002percent.com/I5SR16_panoCCTV

here's the version I'm trying to add a mini-map to:

http://point002percent.com/panoCCTV_mapTest/

this one only has 2 panoramas to switch between. Depending on where I put my  changeMap() function call, it looses scene elements like the scene list, or even the entire background panorama. 

[Manuel Cabral]

There were a few bugs in the code. You can change it to this:

   function changeMap(imgName) {

     var mapImage = document.getElementById('imgDisp');

     mapImage.src = "img/" + imgName.data.id + ".png";

    }

And name your images `0-cctv-1.png` and `1-cctv-2.png`. 

To unsubscribe from this group and stop receiving emails from it, send an email to marzipano+unsubscribe@googlegroups.com.

To post to this group, send email to marz...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/02c50dc0-a862-492d-8a45-56ea921bf315%40googlegroups.com.

[Steve Johnson]

Thanks Manuel, works!

If by 'bugs' you mean me hacking at the keyboard until something happens, than yeah, I guess you could call them bugs...   :)

[jumpjack2]

These are amazing tricks, thanks for sharing.

Now I am trying to implement a couple of improvements:

1) preload of maps (else they will not show immediately upon changing view, disorienting the user)

2) iconizing the map on mobiles, like happens for menu, else it covers whole screen

3) make map clickable to immediately move to a point

Implementing first one should be simple, second one is a bit more tricky, third one is very complex.

[jumpjack2]

Maps preloading:

var mapImage = document.getElementById('imgDisp');

  for (var SceneIndex=0; SceneIndex <scenes.length; SceneIndex++) {
  console.log(scenes[SceneIndex].data.id);
 mapImage.src = "img/" + scenes[SceneIndex].data.id + ".png";
  }


Map enable/disable:

 

var mapToggleElement = document.querySelector('#imgDisp');
 mapToggleElement.addEventListener('click', toggleMap);

  function toggleMap() {
 if (map == 1) { // Minimize map
 map = 0;
 mapToggleElement.width=50;
 mapToggleElement.heigth=50;
 } else { // Maximize map
 map = 1;
 mapToggleElement.width=500;
 mapToggleElement.heigth=500;
 }
  }  

[Jose Clavero]

Hi all, for me doesn´t works making the same of Steve  http://point002percent.com/I5SR16_panoCCTV and i make all steps, sorry I´m not developer but can you rewrite the complete changes process?? adding the solutions to improvements??

Thanks!