I have a 360 degree image that I'm using a-frame to display.
My question is, is there any interactivity (like Google Maps Street View) where I can take overlay arrows and take the user to another 360 degree image? Is it possible to do this? How would I go about adding this type of functionality if it is possible?
Is it possible to add text or html links onto the 360 image?
I realize that's more than one question but hopefully someone can help me out. I 'm really liking A-Frame.
There are multiple ways to do what You want to achieve.
A 360 gallery ( like google maps street view ):
The easiest way is to make a sphere/sky which is changing its source image. Examples here, tutorial here.
Basically You make either a <a-sky> or <a-sphere> with the source of your image like <a-sphere src="myImage.jpg"> or <a-sphere material="src:myImage.jpg">. Of course, you would like to have the buttons all over the place, not organized like in the example.
Links
Im not sure about adding normal links, of course you may add any entity, which would redirect you to another page via javascript like this:
in the scene:
<a-entity link><a-entity>
#js:
AFRAME.registerComponent('link', {
init:function(){
this.el.addEventListener('click',function(){
window.location.href = "http://stackoverflow.com";
});
}
});
Text
Adding text is documented here. If you don't like it, you can always make an image with an alpha channel and add it wherever You like.
To be honest, try making a 360 image, then make a 2D picture, then work on some behavior ( links, switching images ).
Related
Here is a canvas: https://www.docker.com/#canvasCircle
I am thinking to use the function/images that creates this canvas. You can see that the circles are created first and then there is a ribbon like movement of the line from first canvas to last.
I have been trying to find either the images or the animation function. But couldn't. I would like to modify it and use it for my website.
In my case, as a front-end , I would use Photo Shop. Transfer everything to layers and extract the images. Than with css or Jquery , you can add :focus or :hover to make them pop or animate them. Not sure exactly what you want with it. With css you can also use transform etc. Hope this helps. It would help to know what exactly do you want the images to do so we can think of a code.
I use shortcode to embed an HTML world map on one of my web pages. Right below the world map is a third party link for which I want to set the display value to "none", however since I have no CSS skills or web dev background I am having difficulty writing the custom CSS for this. I've played around with containers and specific page ID's, but no luck. The page is www.sheerheroine.com/map. Can anyone steer me in the right direction on how to write the code please? When I inspect the page I can see which container the link is in, however when I use this container the entire map is removed. Thanks!
The !important declaration makes the display CSS impossible to override. The following javascript would remove the element you wish to not display -- document.getElementsByClassName('fm-map-container')[0].childNodes[3].remove();. Try it in the developer's console. For it to work on the page, you would need to delay the execution until the element exists though. As others suggest, it would seemingly violate the terms of use of the lovely vector map you are using free of charge. For a proof-of-concept, however, you may find this code enlightening.
As the entire map con-taint is coming because of thirdparty image, better check with the that third party style code.
Or
in alternatively, just check the the height of the total map area.
lets assume here total height of map image is 10px from bottom.
and lets assume the height of that area(to which area,you don't want to show user) is 2 px from bottom.
Then create a div element, where you will put the entire map image, but follow the below stlye, where we can hide some portion of image to user
<div style="max-width: (10 - 2)px"> here .. put your map image url..</div>
i've got 40 images. I want to place them on a grid (or at specific location on a map). The fact that imageA is in point [0,0] depends on some info from the user actually logged in.
Which means, for user1, he will see in [0,0] the imageA, and for user2 he could see in [0,0] imageC.
That could be done with some css, but the problem is, all those images are supposed to be part of a map. So users can zoomin/out/pan, managing click on specific area etc...
My first though would be using leaflet with transparent tiles. My 40 images could be 40 imageoverlays placed on the map. But that would be pretty rough to adjust sizing, and it would require to have 40*4 images (if i want 4 levels of zoom). Something like generating my imageA in 1000*1000, 500*500, 250*250, 125*125 and hope thats actually the good sizing.
Do you have any idea (not specificaly on leaflet) how could i achieve that ?
If you don't want your images to scale, then it sounds like your grid is based off the viewport? In which case, using html/css to handle things sounds like the best option.
Otherwise, you can consider using InfoWindows. You can have an image within the InfoWindow. The location on the map will stay the same and the size of the window should not scale with the zoom either.
Can anybody tell my how map on http://ubytujnaslovensku.sk/sk/ was created/how to create something simillar?
there's only one image....
The map on the website you have provided is using two images. The first image is the actual IDLE map, the second is a shadow version of it.
The shadow version is simply a 'Sprite', where all of the areas is inset and is looking however they want it to look, when you hover it.
Whenever you then hover a zone JavaScript sees it and sets the 'Background-position' variable according to the country you are hovering.
The Sprite image is shown here.
I would suggest you to get a deeper understanding of sprites before trying to accomplish a similar map.
i'm trying to use overlays on a custom google StreetView Panorama.
I was able to simply put one on my pano, but the position is totally random (i made some attempts until the effect was alright), and the change of rendering mode (in chrome which renders as a sphere) changes the effect.
The problem is clear: the custom panorama has no information about its dimensions (it has only a LatLng), so the relative positions are wrong.
Am i missing something?
The only thing i need is to put some clickable labels on the walls of a room, which modify themselves along with the rotating panorama. I searched a lot, but my efforts were inconclusive.
Mapsicle seemed to do what i needed, but if i understood correcly it's a dead project.