Page 1 of 1

Dropdown menu to select overlays

Posted: Tue Aug 16, 2016 1:10 pm
by Mac
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

Re: Dropdown menu to select overlays

Posted: Tue Aug 16, 2016 7:49 pm
by nitro999
I'd be interested in knowing this too

Re: Dropdown menu to select overlays

Posted: Tue Aug 23, 2016 12:51 am
by agw
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>

Re: Dropdown menu to select overlays

Posted: Tue Aug 23, 2016 2:23 pm
by Mac
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

Re: Dropdown menu to select overlays

Posted: Sun Aug 28, 2016 2:51 pm
by NGS31
Hi all !

Any idea ?

Thanks !

Re: Dropdown menu to select overlays

Posted: Mon Aug 29, 2016 10:27 pm
by agw
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)

Re: Dropdown menu to select overlays

Posted: Fri Sep 02, 2016 2:43 pm
by NGS31
Thanks a lot !!!

Re: Dropdown menu to select overlays

Posted: Mon Oct 03, 2016 9:54 am
by NGS31
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 !

Re: Dropdown menu to select overlays

Posted: Tue Oct 18, 2016 10:11 pm
by agw
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>