Open AIP

[agw]

When this kind of thing happens I generally take a look at the Network tab in the browser's developer tools (you usually get to those with F12) and look at the full URL that the browser is trying to fetch.

I the case of "/Airspace.kml" I imagine the browser will try to fetch Airspace.kml off the root of the server. That won't work because you need the prefix that VRS is using (/VirtualRadar). If you need to path it from root then try "/VirtualRadar/Airspace.kml". If the page that references the file is already at the top level of the VRS site then just remove the leading /.

However, in the script I think you need an absolute URL for google.maps.KmlLayer. I would add a function that takes a relative path and turns it into an absolute path - add this bit right at the end of the script, just before the </script> tag:

Code: Select all

function formAbsoluteUrl(relativePath)
{
    var result = window.location.href;
    var lastSlashIdx = result.lastIndexOf('/');
    return result.slice(0, lastSlashIdx) + relativePath;
}

and then where you have references to kml files replace them with calls to that function - e.g.

Code: Select all

        var ctaLayer = new google.maps.KmlLayer({
          url: 'http://webpage.com/Airports.kml',
          map: map
        });

becomes

Code: Select all

        var ctaLayer = new google.maps.KmlLayer({
          url: formAbsoluteUrl('/Airports.kml'),
          map: map
        });

[Mac]

Thanks that helped a great deal. It still doesn't work on the Windows 10 machine but works on an XP machine
I've copied over the HTML and KML files used on the XP machine to the Win 10 machiine but it made no difference.
F12 shows a correct path to the KML file so not sure whats up, unless it a Win 10 security issue.

Any idea how to convert Airport AIP files ?
I can convert Airspace files bit the option to convert Airport AIP files in QOpen is greyed out ??

Thanks

Mac

[EDDT38]

Here's the code to make it work using the custom content plugin. You'll need to change the URL to wherever you are hosting your KML files:

Code: Select all

<script type="text/javascript">
    if(VRS && VRS.globalDispatch && VRS.serverConfig) {
        VRS.globalDispatch.hook(VRS.globalEvent.bootstrapCreated, function(bootStrap) {
          
            if(bootStrap.hookMapInitialised) {

                bootStrap.hookMapInitialised(function(pageSettings) {

                    if(pageSettings.mapPlugin && pageSettings.mapPlugin.getNativeType() === 'GoogleMaps') {

                        var map = pageSettings.mapPlugin.getNative();
                        
                   
//Add airports layer

        var ctaLayer = new google.maps.KmlLayer({
          url: 'http://webpage.com/Airports.kml',
          map: map
        });

//Add hotspots layer

        var ctaLayer = new google.maps.KmlLayer({
          url: 'http://webpage.com/Hotspot.kml',
          map: map
        });

//Add airspace layer


        var ctaLayer = new google.maps.KmlLayer({
        url: 'http://webpage.com/Airspace.kml',
        map: map
        });



                    }
                });
            }
        });
    }
</script>

The above puts the overlay on all the time. If anyone knows how to write a function to toggle them on / off then please do let me know.

Hi,

I tried this code to put german waypoints into my map.
I created a map in google maps an saved the kml file.
In my map at Google I have got small black points for the waypoints but in VRS I have got the typical google maps marker.
What is the reason for it?
Can you help me?

Marcus

[Mac]

Try this

Install the custom content plugin.
Copy the text below into a html file and setup the plugin as shown in the photo attached. ( Airspace Tiles.html in screenshot )
Any questions give me a shout.

CODE****************

<script type="text/javascript">
if(VRS && VRS.globalDispatch && VRS.serverConfig) {
VRS.globalDispatch.hook(VRS.globalEvent.bootstrapCreated, function(bootStrap) {

if(bootStrap.hookMapInitialised) {

bootStrap.hookMapInitialised(function(pageSettings) {

if(pageSettings.mapPlugin && pageSettings.mapPlugin.getNativeType() === 'GoogleMaps') {

var map = pageSettings.mapPlugin.getNative();


//Add airspace overlays

var myMapType = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://1.tile.maps.openaip.net/geowebca ... 00913@png/" +
zoom + "/" + coord.x + "/" + (Math.pow(2, zoom) - coord.y - 1) + ".png";
},
tileSize: new google.maps.Size(256, 256),
maxZoom: 9,
minZoom: 0,
name: 'mymaptype'
});

map.overlayMapTypes.insertAt(0, myMapType);



}
});
}
});
}
</script>

[EDDT38]

Hi Mac,

thank you, it works.
But this layer is too colorfull for me.

I tried my way again and saved the map as kmz file.
Now i have little black points, but not the same as in Google Maps and no description of the waypoints.

[DaveB771]

hello. i have tried doing this using the code below. i have converted the files to .kml but it wont show on my own vrs. do the kml files have to be uploaded somwhere online to work as i currently directed the script to the files on my hard drive. thanks

Here's the code to make it work using the custom content plugin. You'll need to change the URL to wherever you are hosting your KML files:

Code: Select all

<script type="text/javascript">
    if(VRS && VRS.globalDispatch && VRS.serverConfig) {
        VRS.globalDispatch.hook(VRS.globalEvent.bootstrapCreated, function(bootStrap) {
          
            if(bootStrap.hookMapInitialised) {

                bootStrap.hookMapInitialised(function(pageSettings) {

                    if(pageSettings.mapPlugin && pageSettings.mapPlugin.getNativeType() === 'GoogleMaps') {

                        var map = pageSettings.mapPlugin.getNative();
                        
                   
//Add airports layer

        var ctaLayer = new google.maps.KmlLayer({
          url: 'http://webpage.com/Airports.kml',
          map: map
        });

//Add hotspots layer

        var ctaLayer = new google.maps.KmlLayer({
          url: 'http://webpage.com/Hotspot.kml',
          map: map
        });

//Add airspace layer


        var ctaLayer = new google.maps.KmlLayer({
        url: 'http://webpage.com/Airspace.kml',
        map: map
        });



                    }
                });
            }
        });
    }
</script>

The above puts the overlay on all the time. If anyone knows how to write a function to toggle them on / off then please do let me know.

[nitro999]

Hello - it should work if you put the KML files in your VRS root folder. Take a look at the following page, and scroll down to the 'Site root folder' section.

http://www.virtualradarserver.co.uk/Doc ... fault.aspx

[edwoodza]

bit of a nuub here sorry.
how do i impliment that code with the custom content plugin.
ie how do i enter the code (link to file) in the custom content plugin

sorry massive vertical learning curve for me currently

[Swadsb]

Hi all

Has the abovementioned javascript code stopped working in newer versions of VRS / Plug in?

I have tested it on 2.4.2 / 2.4.0 but no success.

Anyone successful on this combination?

[nitro999]

This wont work if you’re using Leadlet maps. The code as written above works on Google maps only. See the various other recent threads for overlays using Leaflet, which include OpenAIP.