Dropdown menu to select overlays
Dropdown menu to select overlays
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
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
I'd be interested in knowing this too
Re: Dropdown menu to select overlays
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
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
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
Hi all !
Any idea ?
Thanks !
Any idea ?
Thanks !
Re: Dropdown menu to select overlays
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.:
If you wanted to change to another page then you need to use Window.location (https://developer.mozilla.org/en-US/doc ... w/location)
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;
}
});
Re: Dropdown menu to select overlays
Thanks a lot !!!
Re: Dropdown menu to select overlays
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 !
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
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>