2

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?

Improve this question

2 Answers 2

Reset to default
2

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?

Improve this answer
4
  • I had a look at the post linked. I went ahead and created a proj4 definition before attempting to load the json, creating a crs with EPSG: 32633 as the properties.name. I'm loading the data through $.getJSON and assigning the crs to the object. It loads fine and all but it's still not showing on the map, sadly. i.imgur.com/H6T8O0I.png The first object is the output after loading the file through $.getJSON, the second is the output of L.Proj.geoJson(data).addTo(map); It's clearly being added to the map with the correct projection as far as I can tell?
    – Dixos
    Apr 30, 2017 at 4:00
  • I should probably note that, while the GeoJSON appears valid and displays on services like GeoJSONLint.com - The data is displayed somewhere in the middle of the Arabian Sea, while it is supposed to be on the Norwegian mainland. I'm not sure if this has anything to do with it? If so, how can I possibly fix this issue?
    – Dixos
    Apr 30, 2017 at 4:57
  • 1
    The Norway vs The Gulf sounds like a switch of latlong vs longlat. See gis.stackexchange.com/questions/54065/… .
    – Bjorn Svensson
    Apr 30, 2017 at 13:36
  • 1
    @BjornSvensson I feared as much. I wrote a quick little regex with Notepad++ that swapped the sides of the coordinates within [], using [(.*), (.*)] and replacing with [\2, \1], they come up where they should on GeoJsonLint now at least.
    – Dixos
    Apr 30, 2017 at 17:27
2

As my first encounter with GeoJSON and after a lot of reading, @BjornSvensson's linked issue set me on the right way. This was very educational for me.

After reading over that issue, I solved it by swapping the coordinate-pair positions of the GeoJSON file (as I don't have access to the QGis project this was exported from) using this regex in Notepad++:

Find: \[(.*), (.*)]
Replace: \[\2, \1]

Notepad++ Find & Replace regex

From LatLng to LngLat.

Loading up the same GeoJSON file again using leaflet-ajax and it rendered perfectly on the map.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.