Max
Forum Replies Created
-
Hello. I will show a sample.
1) Create a map with layers (img 1), add “Extra CSS class“, in my example it’s “my-class”
Img 1 2) Define CSS styles for this layer with extra class, to use it we need go to the custom css tab, enable switcher and type our own styles.
.my-class .vision-body {
background: #ff000050; // red with 50% opacity
}
3) Let’s write some js code. The plugin writes all markup directly into the page, so we can manipulate their elements easely. Go to the JS custom section and write this code (it changes layer background color after click)
jQuery(document).ready(function($) {
$('.my-class').on('click', function(e) {
const randomColor = '#' + Math.floor(Math.random()*16777215).toString(16) + '40';
$(this).find('.vision-body').css('background', randomColor);
});
});
// you can get access to the plugin core by using "this" pointer
// console.log(this);
4) The result
P.S.
I’d like to note that this plugin has limited functionality. I continue to support it, but solely in terms of fixing critical bugs and ensuring compatibility with new versions of WordPress.If you’re looking for something more, I suggest taking a closer look at PicPoints – it’s has an advanced Figma-like interface, renders the map via Shadow DOM (so styles won’t conflict with either the theme or the plugin), allows you to draw complex polygons, and much more. The core functionality has already been written by me and development is still ongoing.
If you have any suggestions or feature requests, I’m always open to them, feel free to reach out at any time.Try to use shapes for nadir. Create a shape and set parameters as shown in the image below.
P.S.
I’m currently developing another plugin for creating virtual tours – HappyVR. It is built on a new teck stack, it uses Marzipano for rendering, supports tiles in scenes, and does not conflict with themes because it is fully isolated using Shadow DOM. I would appreciate any feedback or suggestions.I added options for view limits (FOV, Yaw, Pitch) in v.1.3.0
1) You can set common settings for all virtual tour scenes (image 01)
2) You can set custom settings for a specific scene (image 02)
Image 01. Common View Limits Settings 
Image 02. Specific View Limits Settings for a Scene I added the
widthproperty in v.1.2.5. It accepts any valid CSS value, such as100px,300px,100%, etc.
By default (if the value is not set):
Ifpopover type= “dialog”,width= “min(960px, calc(100% – 70px))”
Ifpopover type= “popover”,width= “320px”
Next feature will be options for FOV.
Are you talking about this? If yes, maybe it will be good to add options for popover size, I will think about it too.
I’d like to implement something similar to Google Maps navigation basically (see image), a dedicated control specifically for scene navigation, let’s call it that. But I’ll be upfront, this isn’t a quick task. Right now, I’m currently working on the embed feature and FOV limitation.
