Adding KML overlays to maps

[sttovo]

Hello again! I'm sttovo from the MSFS forums. We chatted a bit about "teleport" (see other issue) and adding overlays.

I wasn't able to get teleport to work, but after much trial-and-error, I was able to get KML overlays working.

WHY WOULD YOU WANT THIS?

1) I've found some cool maps online that show either interesting places to fly - but I wanted them to be on the map when I fly so I can easily recognize and remember them.

• Link 1
• Link 2

2) I took my installed addons and using "MSFS Addon Collector" Link, I was able to map out all of the airports/sceneries in my installation. Now I know what airports are "custom" when flying VFR.

NOTES: 1) The KML files seem to require a Folder -> Name -> Placemark -> Name convention. If a KML comes without the "Folder -> Name" part, it won't load (for me at least) 2) You can make anything a map if you have coordinates! If you can get it into a csv type format, you can Google "excel to KML" or whatever and do the conversion that way. But note item #1 since you may have to change the KML manually to add the "Folder" concept. 3) Example KMLs are here: KMLs.zip 4) This code is added to glass.html and glass_landscape.html, right after the line: map.addLayer(basic);

ISSUES: 1) You have to make your own icons, I attached mine for reference. 2) The KMLs are stored in static/img. I couldn't get them to load anywhere else. Ideally, you'd want to have the KMLs in the same place as settings.txt?? 3) KMZ files are not supported. But, KMZ are just zipped KMLs, so you can extract the KML from that. 4) Ideally - the "end user" would put a KML file in their MCA install directory and it would showup as a layer. In this method, it has to be built with the code itself. Not ideal.

TO MAKE THIS WORK (based on what I have done):

1) Incorporate the code below as noted (after map.addLayer(basic);) from the github zip latest. 2) Find the KML files you want, you can use mine to test since I know they work. Place them in static/img 3) Make sure you have icons in static/img and are named correctly for the code below. icons.zip 4) Build the code using instructions provided by mracko.

SAMPLE SCREENSHOT

EXAMPLE CODE: (inserted after map.addLayer(basic);"

    // TOVO -  KML addition with icon names
    //set up a customized icon to use for the point data
    var cityIcon = L.icon({
        iconUrl: '/static/img/city.png',
        iconSize: [25, 30]
    });
    var starIcon = L.icon({
        iconUrl: '/static/img/star.png',
        iconSize: [25, 30]
    });
    var photoIcon = L.icon({
        iconUrl: '/static/img/photo.png',
        iconSize: [25, 30]
    });
    var infoIcon = L.icon({
        iconUrl: '/static/img/info.png',
        iconSize: [25, 30]
    });

    var runLayer = omnivore.kml('/static/img/MSFS-AquilaSimX.kml')
    .on('ready', function() {
        runLayer.eachLayer(function(layer) {
            layer.setIcon(cityIcon);
            layer.bindPopup(layer.feature.properties.name);
        });
    })
    .addTo(map); 

    var runLayer2 = omnivore.kml('/static/img/MSFS-Michaelsoft.kml')
    .on('ready', function() {
        runLayer2.eachLayer(function(layer2) {
            layer2.setIcon(starIcon);
            layer2.bindPopup(layer2.feature.properties.name);
        });
    })
    .addTo(map);    

    var runLayer3 = omnivore.kml('/static/img/MSFS-flightloc.kml')
    .on('ready', function() {
        runLayer3.eachLayer(function(layer3) {
            layer3.setIcon(photoIcon);
            layer3.bindPopup(layer3.feature.properties.name);
        });
    })
    .addTo(map);

    var runLayer4 = omnivore.kml('/static/img/MSFS-addons.kml')
    .on('ready', function() {
        runLayer4.eachLayer(function(layer4) {
            layer4.setIcon(infoIcon);
            layer4.bindPopup(layer4.feature.properties.name);
        });
    })
    .addTo(map);
    // TOVO - END

[sttovo]

I'm sorry, I totally forgot one thing. You'll also need to incorporate the following omnivore JS in your scripts declaration:

    <!-- ADDED FOR KML -->
    <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js'></script>
    <!-- Set script root-->

[mracko]

Hi @sttovo ! Thanks for your great submission! I certainly like how it looks. I can image putting at least all the default MSFS POI into the map that way. The idea of making it customizable for users via the settings.txt sounds reasonable - a nice compromise between being customizable and user-friendly (to a certain degree).

I'll have a look at it in the upcoming weeks. Ever since discovering the MobiFlight WASM module, I've been busy bringing additional airplane compatibility into to the app. I'm currently working on the CRJ which has top priority.

[sttovo]

Thanks for considering it!! I really enjoy this tool!

And no worries at all on any sort of timing. I understand completely!

I just wanted to share, I really like having a similar view to the “world map” while flying.

[mracko]

@luka97 implemented a working KML upload feature here: https://github.com/mracko/MSFS-Mobile-Companion-App/pull/54 I've merged his pull request with the master and it will be included in the upcoming official v1.9 release.

Thanks for initiating this feature request!