Dropdown menu to select overlays

Are you having problems with using or developing a plugin? Let me know here.
Post Reply
Mac
Posts: 84
Joined: Tue Mar 19, 2013 11:49 am

Dropdown menu to select overlays

Post by Mac » Tue Aug 16, 2016 1:10 pm

I've managed to get a few custom content scripts working with thanks to members of the forum here.

Is there a way to add a Drop down menu to the map to allow various overlays to be turned on/off or changed ?

Thanks

Mac

nitro999
Posts: 83
Joined: Tue Feb 09, 2016 7:32 pm
Location: UK
Contact:

Re: Dropdown menu to select overlays

Post by nitro999 » Tue Aug 16, 2016 7:49 pm

I'd be interested in knowing this too

agw
Posts: 2248
Joined: Fri Feb 17, 2012 3:20 am

Re: Dropdown menu to select overlays

Post by agw » Tue Aug 23, 2016 12:51 am

This would add a DIV tag with a SELECT element inside it to the top-right hand corner of the map:

Code: Select all

<script type="text/javascript">
    if(VRS && VRS.globalDispatch && VRS.serverConfig) {
        VRS.globalDispatch.hook(VRS.globalEvent.bootstrapCreated, function(bootStrap) {
            if(bootStrap.hookInitialised) {
                bootStrap.hookInitialised(function(pageSettings) {
                    var mapPlugin = pageSettings.mapPlugin;
                    if(mapPlugin) {
                        var container = $('<div />');
                        var selectElem = $('<select />').appendTo(container);
                        var option1Elem = $('<option value="value1">First Value</option>').appendTo(selectElem);
                        var option2Elem = $('<option value="value2">Second Value</option>').appendTo(selectElem);
                        var option3Elem = $('<option value="value3">Third Value</option>').appendTo(selectElem);

                        mapPlugin.addControl(container, VRS.MapPosition.TopRight);
                    }
                });
            }
        });
    }
</script>

Mac
Posts: 84
Joined: Tue Mar 19, 2013 11:49 am

Re: Dropdown menu to select overlays

Post by Mac » Tue Aug 23, 2016 2:23 pm

Thanks for the reply.
How would I define "value1" where Value1 would be a normal VRS map with no overlays ?
"value2" being the map with my overlay1.html showing .

Mac

NGS31
Posts: 3
Joined: Sun Aug 28, 2016 2:50 pm

Re: Dropdown menu to select overlays

Post by NGS31 » Sun Aug 28, 2016 2:51 pm

Hi all !

Any idea ?

Thanks !

agw
Posts: 2248
Joined: Fri Feb 17, 2012 3:20 am

Re: Dropdown menu to select overlays

Post by agw » Mon Aug 29, 2016 10:27 pm

The code just adds a dropdown menu to the map. You need to hook the onChange event on the <select> element and then do whatever it is you need to do when they choose an entry, e.g.:

Code: Select all

...

mapPlugin.addControl(container, VRS.MapPosition.TopRight);

selectElem.on('change', function() {
    var selectedValue = selectElem.val();
    switch(selectedValue) {
        case 'value1':
            alert('You chose option 1');
            break;
        case 'value2':
            alert('Hello from option 2!');
            break;
        default:
            alert(selectedValue);
            break;
    }
});
If you wanted to change to another page then you need to use Window.location (https://developer.mozilla.org/en-US/doc ... w/location)

NGS31
Posts: 3
Joined: Sun Aug 28, 2016 2:50 pm

Re: Dropdown menu to select overlays

Post by NGS31 » Fri Sep 02, 2016 2:43 pm

Thanks a lot !!!

NGS31
Posts: 3
Joined: Sun Aug 28, 2016 2:50 pm

Re: Dropdown menu to select overlays

Post by NGS31 » Mon Oct 03, 2016 9:54 am

An error occurs with this line : "mapPlugin.addControl(container, VRS.MapPosition.TopRight);" -> "mapPlugin.addControl is not a function"
The menu is ok and totaly functionnal, but I the flight reports returns me a blank page when the menu is loaded.

Any ideas ?

Thanks a lot !

agw
Posts: 2248
Joined: Fri Feb 17, 2012 3:20 am

Re: Dropdown menu to select overlays

Post by agw » Tue Oct 18, 2016 10:11 pm

Did you copy the original example script and then add the chunk in the second script, or did you just use the second script? The second script was just an example of what else you could do after you have added the control, it wasn't meant to be a complete script. The complete example would be:

Code: Select all

<script type="text/javascript">
    if(VRS && VRS.globalDispatch && VRS.serverConfig) {
        VRS.globalDispatch.hook(VRS.globalEvent.bootstrapCreated, function(bootStrap) {
            if(bootStrap.hookInitialised) {
                bootStrap.hookInitialised(function(pageSettings) {
                    var mapPlugin = pageSettings.mapPlugin;
                    if(mapPlugin) {
                        var container = $('<div />');
                        var selectElem = $('<select />').appendTo(container);
                        var option1Elem = $('<option value="value1">First Value</option>').appendTo(selectElem);
                        var option2Elem = $('<option value="value2">Second Value</option>').appendTo(selectElem);
                        var option3Elem = $('<option value="value3">Third Value</option>').appendTo(selectElem);

                        mapPlugin.addControl(container, VRS.MapPosition.TopRight);

                        selectElem.on('change', function() {
                            var selectedValue = selectElem.val();
                            switch(selectedValue) {
                                case 'value1':
                                    alert('You chose option 1');
                                    break;
                                case 'value2':
                                    alert('Hello from option 2!');
                                    break;
                                default:
                                    alert(selectedValue);
                                    break;
                            }
                        });
                    }
                });
            }
        });
    }
</script>

Post Reply