Dropdown menu to select overlays

[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

[nitro999]

I'd be interested in knowing this too

[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>

[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

[NGS31]

Hi all !

Any idea ?

Thanks !

[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)

[NGS31]

Thanks a lot !!!

[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 !

[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>