Feature Request or Help with coding

[Palmeta]

Hi, great project! It could be even better if it was possible to add our own layers. I've tried fiddling with layers_ae43201.js in \usr\local\share\tar1090\html but have had no luck adding elements to the menu. Is it possible? All menu elements are in the file but tar1090 seems to ignore any changes. Any help on this ?

[wiedehopf]

I'll put something so you can define layers in config.js i suppose.

[wiedehopf]

Also you could easily do it if you understand the code, just to complete the answer.

[Palmeta]

Where should I start?

[Palmeta]

I see code in layers_ae43201.js (in the same folder as config.js) that should be able to be changed and do what I want but nothing happens if I change it. Is it loaded from somewhere else?

[Palmeta]

A way to bring something in from kml would be perfect. There is already something there for if (tfrs) { world.push(new ol.layer.Vector({ source: new ol.source.Vector({ url: 'tfrs.kml', format: new ol.format.KML(), }), name: 'tfr', title: 'TFRs', type: 'overlay', opacity: 0.7, visible: true, zIndex: 99, })); } But that doesn't bring anything into the menu either.

[wiedehopf]

First of, clone the repository, change something there, then install your local mods using: sudo ./install.sh test The test means it's using the local files.

[Palmeta]

I'll try thanks

[wiedehopf]

Just made some minor changes. You can now use add_kml_overlay(url, name, opacity) from config.js

It's important that you don't screw up any syntax and check that in the dev console.

You can also do custom_layers.push(........................); from config.js and it should show under custom layers.

Note that config.js is not copied from the source folder using ./install.sh test but rather the installed version is kept intact (honoring the original config.js when updating)

[Palmeta]

Hi there, thanks for your rapid support! I've gone about your advice and i am modifying layers.js. I've included a weather radar image of Portugal pretty much by copying what you have dove with NOAA. But, The image is not scaling with the map like the NOAA image. I have no Idea why. I'm sending you my copy of layers.js so you may test it out and see what I mean. It's probably me doing something stupid. I'm jot a js guy, I'm more of a java guy. PS I had to change the extension to txt for google to let me send it.

On Thu, Jun 2, 2022 at 3:29 PM wiedehopf @.***> wrote:

Just made some minor changes. You can now use add_kml_overlay(url, name, opacity) from config.js

It's important that you don't screw up any syntax and check that in the dev console.

You can also do custom_layers.push(........................); from config.js and it should show under custom layers.

Note that config.js is not copied from the source folder using ./install.sh test but rather the installed version is kept intact (honoring the original config.js when updating)

— Reply to this email directly, view it on GitHub https://github.com/wiedehopf/tar1090/issues/184#issuecomment-1144933370, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABPGUMSSKNEV33EXONMGGJDVNDAMDANCNFSM5XUWNSVA . You are receiving this because you authored the thread.Message ID: @.***>

-- Arlindo Bento

// -- mode: javascript; indent-tabs-mode: nil; c-basic-offset: 8 -- "use strict";

// Base layers configuration // "url" : "https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png" // "url" : "http://{a-c}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png" // "url" : "http://{a-c}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png" // "url" : "https://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}" // "url" : "https://korona.geog.uni-heidelberg.de/tiles/asterh/x={x}&y={y}&z={z}" // "url" : "https://{a-c}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png" // "url" : "http://{a-c}.tilessputnik.ru/tiles/kmt2/{z}/{x}/{y}.png" // "url" : "https://{a-c}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png" // "url" : "https://{a-c}.tile.openstreetmap.se/osm/{z}/{x}/{y}.png"

function createBaseLayers() { let layers = new ol.Collection(); let layers_group = new ol.layer.Group({ layers: layers, });

let world = new ol.Collection();
let us = new ol.Collection();
let europe = new ol.Collection();
let portugal = new ol.Collection();

if (loStore['customTiles'] != undefined) {
    custom_layers.push(new ol.layer.Tile({
        source: new ol.source.OSM({
            "url": loStore['customTiles'],
            maxZoom: 15,
        }),
        name: 'custom_tiles',
        title: 'Custom tiles',
        type: 'base',
    }));
}
/*
world.push(new ol.layer.Tile({
    source: new ol.source.OSM({
        "url" : "https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png"
    }),
    name: 'wikimedia',
    title: 'OpenStreetMap Wikimedia',
    type: 'base',
}));
*/

if (offlineMapDetail > 0) {
    world.push(new ol.layer.Tile({
        source: new ol.source.OSM({
            "url": "osm_tiles_offline/{z}/{x}/{y}.png",
            attributionsCollapsible: false,
            maxZoom: offlineMapDetail,
        }),
        name: 'osm_tiles_offline',
        title: 'OpenStreetMap offline',
        type: 'base',
    }));
}

world.push(new ol.layer.Tile({
    source: new ol.source.OSM({
        "url": "https://map.adsbexchange.com/mapproxy/tiles/1.0.0/osm/osm_grid/{z}/{x}/{y}.png",
        attributionsCollapsible: false,
        maxZoom: 16,
    }),
    name: 'osm_adsbx',
    title: 'OpenStreetMap ADSBx',
    type: 'base',
}));

world.push(new ol.layer.Tile({
    source: new ol.source.OSM({
        maxZoom: 17,
        attributionsCollapsible: false,
    }),
    name: 'osm',
    title: 'OpenStreetMap',
    type: 'base',
}));

let basemap_id = "rastertiles/voyager";
world.push(new ol.layer.Tile({
    source: new ol.source.OSM({
        "url": "https://{a-d}.basemaps.cartocdn.com/" + basemap_id + "/{z}/{x}/{y}.png",
        "attributions": 'Powered by <a href="https://carto.com">CARTO.com</a>'
            + ' using data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.',
        attributionsCollapsible: false,
        maxZoom: 15,
    }),
    name: "carto_" + basemap_id,
    title: 'CARTO.com English',
    type: 'base',
}));

if (!adsbexchange) {
    world.push(new ol.layer.Tile({
        source: new ol.source.OSM({
            "url": "https://{a-d}.tile.openstreetmap.de/{z}/{x}/{y}.png",
            attributionsCollapsible: false,
            maxZoom: 17,
        }),
        name: 'osm_de',
        title: 'OpenStreetMap DE',
        type: 'base',
    }));
}

if (0 && adsbexchange) {
    world.push(new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: "https://api.maptiler.com/maps/256/{z}/{x}/{y}.png?key=HyIQ6A88uTDdX4n4MNVY",
            attributions: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
            attributionsCollapsible: false,
            maxZoom: 16,
        }),
        name: 'maptiler_english',
        title: 'English MapTiler (testing)',
        type: 'base',
    }));
    world.push(new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: "https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg?key=HyIQ6A88uTDdX4n4MNVY",
            attributions: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
            attributionsCollapsible: false,
            maxZoom: 16,
        }),
        name: 'maptiler_sat',
        title: 'Satellite MapTiler (testing)',
        type: 'base',
    }));
    world.push(new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: "https://api.maptiler.com/maps/hybrid/256/{z}/{x}/{y}.jpg?key=HyIQ6A88uTDdX4n4MNVY",
            attributions: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>',
            attributionsCollapsible: false,
            maxZoom: 16,
        }),
        name: 'maptiler_hybrid',
        title: 'Hybrid MapTiler (testing)',
        type: 'base',
    }));
}

if (!adsbexchange) {
    world.push(new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
            attributions: 'Powered by <a href="https://www.esri.com">Esri.com</a>' +
                '— Sources: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
            attributionsCollapsible: false,
            maxZoom: 17,
        }),
        name: 'esri',
        title: 'ESRI.com Sat.',
        type: 'base',
    }));
    world.push(new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: "https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}",
            attributions: 'Powered by <a href="https://www.esri.com">Esri.com</a>' +
                '— Sources: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
            attributionsCollapsible: false,
            maxZoom: 16,
        }),
        name: 'esri_gray',
        title: 'ESRI.com Gray',
        type: 'base',
    }));
    world.push(new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}",
            attributions: 'Powered by <a href="https://www.esri.com">Esri.com</a>' +
                '— Sources: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
            attributionsCollapsible: false,
            maxZoom: 17,
        }),
        name: 'esri_streets',
        title: 'ESRI.com Streets',
        type: 'base',
    }));
}

if (0) {
    let vtlayer = new ol.layer.VectorTile({
        source: new ol.source.VectorTile({
            url: "http://test02.dev.adsbexchange.com/tiles/{z}/{x}/{y}.pbf",
            format: new ol.format.MVT(),
            maxZoom: 9,
        }),
        name: 'vtlayer',
        title: 'TEST VECTOR',
        type: 'base',
        renderMode: 'image',
    });

    jQuery.ajax({
        url: 'osm-liberty/style.json',
        dataType: 'json',
        layer: vtlayer,
        cache: false,
    }).done(function (glStyle) {
        ol.mbApplyStyle(this.layer, glStyle, 'openmaptiles');
    });

    world.push(vtlayer);
}

world.push(new ol.layer.Tile({
    source: new ol.source.OSM({
        url: 'https://gibs-{a-c}.earthdata.nasa.gov/wmts/epsg3857/best/BlueMarble_ShadedRelief_Bathymetry/default/EPSG3857_500m/{z}/{y}/{x}.jpeg',
        attributions: '<a href="https://terra.nasa.gov/about/terra-instruments/modis">MODIS Terra</a> ' +
            + 'Provided by NASA\'s Global Imagery Browse Services (GIBS), part of NASA\'s Earth Observing System Data and Information System (EOSDIS)',
        maxZoom: 8,
    }),
    name: 'gibs_reliev',
    title: 'GIBS Relief',
    type: 'base',
}));

const date = new Date(Date.now() - 86400 * 1000);
const yesterday = date.getUTCFullYear() + '-' + (date.getUTCMonth() + 1).toString().padStart(2, '0') + '-' + date.getUTCDate().toString().padStart(2, '0');
world.push(new ol.layer.Tile({
    source: new ol.source.OSM({
        url: 'https://gibs-{a-c}.earthdata.nasa.gov/wmts/epsg3857/best/' +
            'MODIS_Terra_CorrectedReflectance_TrueColor/default/' +
            yesterday + '/' +
            'GoogleMapsCompatible_Level9/{z}/{y}/{x}.jpg',
        attributions: '<a href="https://terra.nasa.gov/about/terra-instruments/modis">MODIS Terra</a> ' +
            yesterday + ' Provided by NASA\'s Global Imagery Browse Services (GIBS), part of NASA\'s Earth Observing System Data and Information System (EOSDIS)',
        maxZoom: 9,
    }),
    name: 'gibs',
    title: 'GIBS Clouds ' + yesterday,
    type: 'base',
}));
// carto.com basemaps, see the following URLs for details on them:
// http://basemaps.cartocdn.com
// https://github.com/CartoDB/cartodb/wiki/BaseMaps-available

let basemaps = ["dark_all", "dark_nolabels",
    "light_all", "light_nolabels"
]

if (1) {
    for (let i in basemaps) {
        let basemap_id = basemaps[i];

        world.push(new ol.layer.Tile({
            source: new ol.source.OSM({
                "url": "https://{a-d}.basemaps.cartocdn.com/" + basemap_id + "/{z}/{x}/{y}.png",
                "attributions": 'Powered by <a href="https://carto.com">CARTO.com</a>'
                    + ' using data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.',
                attributionsCollapsible: false,
                maxZoom: 15,
            }),
            name: "carto_" + basemap_id,
            title: 'CARTO.com ' + basemap_id,
            type: 'base',
        }));
    }
}

if (loStore['bingKey'] != undefined)
    BingMapsAPIKey = loStore['bingKey'];

if (BingMapsAPIKey) {
    world.push(new ol.layer.Tile({
        source: new ol.source.BingMaps({
            key: BingMapsAPIKey,
            imagerySet: 'Aerial'
        }),
        name: 'bing_aerial',
        title: 'Bing Aerial',
        type: 'base',
    }));
    world.push(new ol.layer.Tile({
        source: new ol.source.BingMaps({
            key: BingMapsAPIKey,
            imagerySet: 'RoadOnDemand'
        }),
        name: 'bing_roads',
        title: 'Bing Roads',
        type: 'base',
    }));
}

if (ChartBundleLayers) {

    let chartbundleTypes = {
        sec: "Sectional Charts",
        enrh: "IFR Enroute High Charts",

        tac: "Terminal Area Charts",
        hel: "Helicopter Charts",
        enrl: "IFR Enroute Low Charts",
        enra: "IFR Area Charts",
    };

    for (let type in chartbundleTypes) {
        us.push(new ol.layer.Tile({
            source: new ol.source.OSM({
                url: 'https://map.adsbexchange.com/mapproxy/tiles/1.0.0/' + type + '/osm_grid/{z}/{x}/{y}.png',
                projection: 'EPSG:3857',
                attributions: 'Tiles courtesy of <a href="http://www.chartbundle.com/">ChartBundle</a>',
                attributionsCollapsible: false,
                maxZoom: 11,
            }),
            name: 'chartbundle_' + type,
            title: chartbundleTypes[type],
            type: 'base',
            group: 'chartbundle'
        }));
    }
    chartbundleTypes = {
        secgrids: "Sect. w/ SAR grid",
    };

    for (let type in chartbundleTypes) {
        us.push(new ol.layer.Tile({
            source: new ol.source.TileWMS({
                url: 'https://wms.chartbundle.com/wms',
                params: { LAYERS: type },
                projection: 'EPSG:3857',
                attributions: 'Tiles courtesy of <a href="http://www.chartbundle.com/">ChartBundle</a>',
                attributionsCollapsible: false,
                maxZoom: 12, // doesn't work for WMS
            }),
            name: 'chartbundle_' + type,
            title: chartbundleTypes[type],
            type: 'base',
            group: 'chartbundle'
        }));
    }
}

world.push(new ol.layer.Tile({
    source: new ol.source.XYZ({
        "url": "https://map.adsbexchange.com/mapproxy/tiles/1.0.0/openaip/ul_grid/{z}/{x}/{y}.png",
        "attributions": "openAIP.net",
        attributionsCollapsible: false,
        maxZoom: 12,
    }),
    name: 'openaip',
    title: 'openAIP TMS',
    type: 'overlay',
    opacity: 0.7,
    visible: false,
    zIndex: 99,
    maxZoom: 13,
}));

if (tfrs) {
    world.push(new ol.layer.Vector({
        source: new ol.source.Vector({
            url: 'tfrs.kml',
            format: new ol.format.KML(),
        }),
        name: 'tfr',
        title: 'TFRs',
        type: 'overlay',
        opacity: 0.7,
        visible: true,
        zIndex: 99,
    }));
}

if (true) {
    // nexrad and noaa stuff
    const bottomLeft = ol.proj.fromLonLat([-171.0, 9.0]);
    const topRight = ol.proj.fromLonLat([-51.0, 69.0]);
    const extent = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]];

    let nexrad = new ol.layer.Tile({
        name: 'nexrad',
        title: 'NEXRAD',
        type: 'overlay',
        opacity: 0.35,
        visible: false,
        zIndex: 99,
        extent: extent,
    });

    let refreshNexrad = function () {
        // re-build the source to force a refresh of the nexrad tiles
        let now = new Date().getTime();
        nexrad.setSource(new ol.source.XYZ({
            url: 'https://mesonet{1-3}.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/{z}/{x}/{y}.png?_=' + now,
            attributions: 'NEXRAD courtesy of <a href="https://mesonet.agron.iastate.edu/">IEM</a>',
            attributionsCollapsible: false,
            maxZoom: 8,
        }));
    };

    refreshNexrad();
    window.setInterval(refreshNexrad, 2 * 60 * 1000);

    let noaaRadarSource = new ol.source.ImageWMS({
        attributions: ['NOAA'],
        attributionsCollapsible: false,
        url: 'https://nowcoast.noaa.gov/arcgis/services/nowcoast/radar_meteo_imagery_nexrad_time/MapServer/WMSServer',
        params: { 'LAYERS': '1' },
        projection: 'EPSG:3857',
        maxZoom: 10,
    });

    let noaaRadar = new ol.layer.Image({
        title: 'NOAA Radar',
        name: 'noaa_radar',
        zIndex: 99,
        type: 'overlay',
        visible: false,
        source: noaaRadarSource,
        opacity: 0.35,
        extent: extent,
    });

    us.push(nexrad);
    us.push(noaaRadar);
}

if (true) {
    const bottomLeft = ol.proj.fromLonLat([-12.42, 33.85]);
    const topRight = ol.proj.fromLonLat([-4.22, 43.8]);
    const extent = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]];

    let ipmaRadarSource = new ol.source.ImageWMS({
        attributions: ['IPMA'],
        attributionsCollapsible: false,
        url: 'https://www.ipma.pt/resources.www/transf/radar/por/pcr-2022-06-02T1940.png',
        params: { 'LAYERS': '1' },
        projection: 'EPSG:3857',
        maxZoom: 10,
    });

    let ipma = new ol.layer.Image({
        title: 'IPMA RADAR',
        name: 'ipmaRadar',
        zIndex: 99,
        type: 'overlay',
        source: ipmaRadarSource,
        opacity: 0.35,
        visible: true,
        extent: extent,
    });
    portugal.push(ipma);
}

if (enableDWD) {
    const bottomLeft = ol.proj.fromLonLat([1.9, 46.2]);
    const topRight = ol.proj.fromLonLat([16.0, 55.0]);
    const extent = [bottomLeft[0], bottomLeft[1], topRight[0], topRight[1]];
    let dwd = new ol.layer.Tile({
        source: new ol.source.TileWMS({
            url: 'https://maps.dwd.de/geoserver/wms',
            params: { LAYERS: dwdLayers, validtime: (new Date()).getTime() },
            projection: 'EPSG:3857',
            attributions: 'Deutscher Wetterdienst (DWD)',
            attributionsCollapsible: false,
            maxZoom: 8,
        }),
        name: 'radolan',
        title: 'DWD RADOLAN',
        type: 'overlay',
        opacity: 0.3,
        visible: false,
        zIndex: 99,
        extent: extent,
    });

    let refreshDwd = function () {
        dwd.getSource().updateParams({ "validtime": (new Date()).getTime() });
    };
    refreshDwd();
    window.setInterval(refreshDwd, 2 * 60 * 1000);

    europe.push(dwd);
}

let createGeoJsonLayer = function (title, name, url, fill, stroke, showLabel = true) {
    return new ol.layer.Vector({
        type: 'overlay',
        title: title,
        name: name,
        zIndex: 99,
        visible: false,
        source: new ol.source.Vector({
            url: url,
            format: new ol.format.GeoJSON({
                defaultDataProjection: 'EPSG:4326',
                projection: 'EPSG:3857'
            })
        }),
        style: function style(feature) {
            return new ol.style.Style({
                fill: new ol.style.Fill({
                    color: fill
                }),
                stroke: new ol.style.Stroke({
                    color: stroke,
                    width: 1
                }),
                text: new ol.style.Text({
                    text: showLabel ? feature.get("name") : "",
                    overflow: OLMap.getView().getZoom() > 5,
                    scale: 1.25,
                    fill: new ol.style.Fill({
                        color: '#000000'
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#FFFFFF',
                        width: 2
                    })
                })
            });
        }
    });
};

// Taken from https://github.com/alkissack/Dump1090-OpenLayers3-html
europe.push(createGeoJsonLayer('UK Radar Corridors', 'ukradarcorridors', 'geojson/UK_Mil_RC.geojson', 'rgba(22, 171, 22, 0.3)', 'rgba(22, 171, 22, 1)'));
europe.push(createGeoJsonLayer('UK A2A Refueling', 'uka2arefueling', 'geojson/UK_Mil_AAR_Zones.geojson', 'rgba(52, 50, 168, 0.3)', 'rgba(52, 50, 168, 1)'));
europe.push(createGeoJsonLayer('UK AWACS Orbits', 'uka2awacsorbits', 'geojson/UK_Mil_AWACS_Orbits.geojson', 'rgba(252, 186, 3, 0.3)', 'rgba(252, 186, 3, 1)', false));

us.push(createGeoJsonLayer('US A2A Refueling', 'usa2arefueling', 'geojson/US_A2A_refueling.geojson', 'rgba(52, 50, 168, 0.3)', 'rgba(52, 50, 168, 1)'));

us.push(createGeoJsonLayer('US ARTCC Boundaries', 'usartccboundaries', 'geojson/US_ARTCC_boundaries.geojson', 'rgba(255, 0, 255, 0.3)', 'rgba(255, 0, 255, 1)', false));

if (uk_advisory) {
    europe.push(createGeoJsonLayer('uka_airports', 'uka_airports', 'geojson/uk_advisory/airports.geojson', 'rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 1)'));
    europe.push(createGeoJsonLayer('uka_airspaces', 'uka_airspaces', 'geojson/uk_advisory/airspaces.geojson', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 30, 255, 0.2)'));
    //europe.push(createGeoJsonLayer('hotspots', 'hotspots', 'geojson/uk_advisory/hotspots.geojson', 'rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 1)'));
    //europe.push(createGeoJsonLayer('navaids', 'navaids', 'geojson/uk_advisory/navaids.geojson', 'rgba(0, 0, 0, 1)', 'rgba(0, 0, 0, 1)'));
    europe.push(createGeoJsonLayer('uka_runways', 'uka_runways', 'geojson/uk_advisory/runways.geojson', 'rgba(0, 0, 0, 0.5)', 'rgba(0, 0, 0, 0.5)'));
    europe.push(createGeoJsonLayer('uka_shoreham', 'uka_shoreham', 'geojson/uk_advisory/shoreham.geojson', 'rgba(0, 0, 0, 0.5)', 'rgba(0, 0, 0, 0.5)'));
}

if (l3harris) {
    let files = ['IFT_NAV_Routes.geojson', 'IFT_Training_Areas.geojson', 'USAFA_Training_Areas.geojson'];
    for (let i in files) {
        let name = files[i].split('.')[0];
        us.push(createGeoJsonLayer(name, 'ift' + i, 'geojson/IFT/' + files[i], 'rgba(52, 50, 168, 0.3)', 'rgba(52, 50, 168, 1)'));
    }
}

layers.push(new ol.layer.Group({
    name: 'custom',
    title: 'Custom',
    layers: custom_layers,
}));

if (europe.getLength() > 0) {
    layers.push(new ol.layer.Group({
        name: 'europe',
        title: 'Europe',
        layers: new ol.Collection(europe.getArray().reverse()),
        fold: 'open',
    }));
}

if (portugal.getLength() > 0) {
    layers.push(new ol.layer.Group({
        name: 'portugal',
        title: 'Portugal',
        layers: new ol.Collection(portugal.getArray().reverse()),
        fold: 'open',
    }));
}

if (us.getLength() > 0) {
    layers.push(new ol.layer.Group({
        name: 'us',
        title: 'US',
        layers: new ol.Collection(us.getArray().reverse()),
        fold: 'open',
    }));
}

if (world.getLength() > 0) {
    layers.push(new ol.layer.Group({
        name: 'world',
        title: 'Worldwide',
        layers: new ol.Collection(world.getArray().reverse()),
        //fold: 'open',
    }));
}

return layers_group;

}

[wiedehopf]

Maybe discuss it with other people on the adsbexchange discord.

I'm not gonna look through pages of source code if you just dump the whole file. Why not just put what you added? Or link a commit on your fork of this project?

Likely your issue is with the Source type in the OpenLayers API being incompatible with the data source.

[Palmeta]

Ok sorry, I'm not used to forking on github I didnt khow I could do that. Thank you.

On Fri, Jun 3, 2022 at 7:59 AM wiedehopf @.***> wrote:

Maybe discuss it with other people on the adsbexchange discord.

I'm not gonna look through pages of source code if you just dump the whole file. Why not just put what you added? Or link a commit on your fork of this project?

Likely your issue is with the Source type in the OpenLayers API being incompatible with the data source.

— Reply to this email directly, view it on GitHub https://github.com/wiedehopf/tar1090/issues/184#issuecomment-1145651017, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABPGUMX5TZVAU7AHKU526S3VNGUODANCNFSM5XUWNSVA . You are receiving this because you authored the thread.Message ID: @.***>

-- Arlindo Bento

[Palmeta]

I'm trying to add a static image overlay to Openlayers Map but it seems the Class is missing. ol.source.ImageStatic does not exist. Has it been excluded on purpose?

[wiedehopf]

yes unnecessary stuff isn't included, it's a reduced form of the library to save on js that needs loading.

pushed a version that has it.

[Palmeta]

Thank you

On Sun, Jun 12, 2022 at 9:21 AM wiedehopf @.***> wrote:

yes unnecessary stuff isn't included, it's a reduced form of the library to save on js that needs loading.

pushed a version that has it.

— Reply to this email directly, view it on GitHub https://github.com/wiedehopf/tar1090/issues/184#issuecomment-1153100207, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABPGUMVS4EV72YX4KRJYET3VOWMXJANCNFSM5XUWNSVA . You are receiving this because you authored the thread.Message ID: @.***>

-- Arlindo Bento