[GIS] GeoJSON not displaying within leaflet

coordinate systemgeojsonleaflet

I'm struggling with making Leaflet show a GeoJSON file. From what I can tell it's loading properly and according to geojsonlint.com and other websites the file is valid and displays properly there.

I'm not getting any errors in my debug console.

I originally had major issues getting my map to project properly with Leaflet, turns out that it's using some kind of weird local projection. (EPSG:32633)
I solved this issue by adding Proj4 and Proj4Leaflet to my project and setting up the map like this:

// Spatial reference
var crs = new L.Proj.CRS('EPSG:32633', '+proj=utm +zone=33 +ellps=WGS84 +datum=WGS84 +units=m +no_defs', {
    origin: [-2500000.0, 9045984.0],
    resolutions: [
        21674.7100160867,
        10837.35500804335,
        5418.677504021675,
        2709.3387520108377,
        1354.6693760054188,
        677.3346880027094,
        338.6673440013547,
        169.33367200067735,
        84.66683600033868,
        42.33341800016934,
        21.16670900008467,
        10.583354500042335,
        5.291677250021167,
        2.6458386250105836,
        1.3229193125052918,
        0.6614596562526459,
        0.33072982812632296,
        0.16536491406316148
    ]
});

// Geodata maps
var GeodataBasis = L.esri.tiledMapLayer({
    url: 'https://services.geodataonline.no/arcgis/rest/services/Geocache_UTM33_WGS84/GeocacheBasis/MapServer'
});
var GeodataBilder = L.esri.tiledMapLayer({
    url: 'https://services.geodataonline.no/arcgis/rest/services/Geocache_UTM33_WGS84/GeocacheBilder/MapServer'
});
var GeodataGraatone = L.esri.tiledMapLayer({
    url: 'https://services.geodataonline.no/arcgis/rest/services/Geocache_UTM33_WGS84/GeocacheGraatone/MapServer'
});
var GeodataLandskap = L.esri.tiledMapLayer({
    url: 'https://services.geodataonline.no/arcgis/rest/services/Geocache_UTM33_WGS84/GeocacheLandskap/MapServer'
});

// Map
var map = L.map('map', {
    crs: crs,
    maxZoom: 17,
    minZoom: 2,
    attributionControl: false,
    layers: [GeodataBasis]
});

// Basemaps
var baseMaps = {
    "Kart": GeodataBasis,
    "Gråtonekart": GeodataGraatone,
    "Landskapskart": GeodataLandskap,
    "Flyfoto": GeodataBilder
};

// Add a map controller
L.control.layers(baseMaps).addTo(map);

However, when I try to add the GeoJSON data, nothing seems to happen at all. No errors, no warnings, nothing. It seems to load just fine, but never get added to the map at all.

var geojsonlayer = new L.GeoJSON.AJAX("../data/tracks.js", { local: true });
geojsonlayer.addTo(map);

When I take a look at the geojsonlayer variable, I can see that it loads the file. I'm at my wits end.

Here is the GeoJSON file I'm trying to load within Leaflet.

What am I missing here?

Best Answer

You may want to try adding the CRS to the GeoJSON. I've run into something similar in the past even though the GeoJSON spec no longer allows for CRS. An example -

What's up with the GeoJSON spec and CRS as a IRM?

Related Question