PostGIS, Leaflet en ASP.Core

Toepassingen
#1

Dankzij de antwoorden in https://forum.pdok.nl/t/welke-library-handigste-om-nl-data-te-tonen/1993 heb ik besloten om Leaflet te gebruiken als mijn mapping engine.

Maar het lukt me nog niet om mijn PostGIS data op de kaart te tonen.

Ik gebruik .NET Core met EF Core om te communiceren met mijn PostGIS database. Na heel veel gedoe is het me gelukt een valid GeoJSON (volgens http://geojsonlint.com/) uit mijn controller te krijgen, zie mijn vraag op SO: serialization - Serialize data from PostGIS to JSON - Stack Overflow

Mijn REST service produceert nu deze GeoJSON:

{  
   "type":"FeatureCollection",
   "features":[  
      {  
         "type":"Feature",
         "id":"1",
         "geometry":{  
            "type":"Point",
            "coordinates":[  
               523064.716597462,
               191390.015
            ]
         },
         "properties":{  
            "id":1,
            "use":false,
            "locationId":"KNP_1"
         }
      },
      {  
         "type":"Feature",
         "id":"2",
         "geometry":{  
            "type":"Point",
            "coordinates":[  
               519349.860113963,
               170162.249352578
            ]
         },
         "properties":{  
            "id":2,
            "use":false,
            "locationId":"CP_6"
         }
      }
   ]
}

en mijn Leaflet code is:

var RD = new L.Proj.CRS( 'EPSG:28992','+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +units=m +towgs84=565.2369,50.0087,465.658,-0.406857330322398,0.350732676542563,-1.8703473836068,4.0812 +no_defs',
  {
    resolutions: [3440.640, 1720.320, 860.160, 430.080, 215.040, 107.520, 53.760, 26.880, 13.440, 6.720, 3.360, 1.680, 0.840, 0.420, 0.210],
    bounds: L.bounds([-285401.92, 22598.08], [595401.9199999999, 903401.9199999999]),
    origin: [-285401.92, 22598.08]
  }
);

var map = new L.Map('map-canvas', {
  crs: RD
});

map.attributionControl.setPrefix('');

L.tileLayer('https://geodata.nationaalgeoregister.nl/tiles/service/tms/1.0.0/opentopoachtergrondkaart/EPSG:28992/{z}/{x}/{y}.png', {
  tms: true,
  attribution: 'OpenTopo © PDOK',
}).addTo(map);

L.geoJson('http://localhost:5000/api/data/',
  {
    attribution: 'Mine'
  }
).addTo(map);

map.setView(new L.LatLng(52.7080, 5.7618), 7);

Maar ik blijf de foutmelding:

Uncaught Error: Invalid GeoJSON object.
    at Ft (leaflet.js:5)
    at e.addData (leaflet.js:5)
    at e.initialize (leaflet.js:5)
    at new e (leaflet.js:5)
    at Object.Xt (leaflet.js:5)
    at Leaflet-demo.html?_ijt=kf6v0itfcubnsao4rlvfr19:58
Ft @ leaflet.js:5
addData @ leaflet.js:5
initialize @ leaflet.js:5
e @ leaflet.js:5
Xt @ leaflet.js:5

krijgen.

Er moet toch wel iemand zijn die iets soortgelijks heeft gedaan: PostGIS-data via .NET Core REST service op een Leaflet-kaart tonen?
Ik heb het gevoel dat mijn opzet veel ingewikkelder is dan nodig.
Wie heeft nog wat suggesties?

#2

Jouw GeoJSON geeft coördinaten terug in RD in plaats van WGS-84. Dat mag volgens de standaard, maar LeafletJS moet dat dan wel weten.

Vervang
L.GeoJSON('http://localhost:5000/api/data/',
door
var GeoJsonProjected = L.Proj.geoJson('http://localhost:5000/api/data/',

Check ook nog even ons WFS-voorbeeld uit de Maptime cursus. We maken eerst een leeg GeoJSON-object, waarna we mbv AJAX data ophalen.

#3

Bedankt Edward,

XMLHttpRequest had ik gemist. Ik krijg nu mijn punten op de kaart.
Alleen nog niet op de juiste plek.

Ik moet sowieso

"crs": {
"properties": {
"name": "EPSG:28992"
},
"type": "name"
}

aan mijn REST response toevoegen, anders wordt er niets getoond.

Mijn map bounds zijn na het toevoegen van de OpenTopo:

_northEast: M {lat: 52.83454946092512, lng: 6.0557234906272175}
_southWest: M {lat: 52.580817433004206, lng: 5.469692540983756}

Maar mijn GeoJSON bounds zijn:

_northEast: M {lat: 49.59966474363936, lng: 10.479372921181005}
_southWest: M {lat: 49.41176294031923, lng: 10.40824028129632}

Sowieso snap ik niet waarom de bounds weer in LatLong staan. Ik heb toch aangegeven dat ik de kaart in RD wil hebben.
Het lijkt erop dat mijn coordinaten naar een andere projectie worden getransformeerd.
Moet ik bij L.Proj.geoJson niet ergens aangeven in welke projectie de data binnenkomt?

Ik ben er dus bijna, maar nog niet helemaal.

#4

Omdat ik er niet uitkwam met Leaflet, ben ik toch maar weer met OpenLayers begonnen.
Inmiddels zit dat op v5 waardoor het toch weer langer duurde dan gehoopt :wink:
Uiteindelijk had ik de punten op de kaart, maar wederom ergens in Noord-Italië.

Nu eens goed naar mijn REST response gekeken, blijken mijn coordinaten verkeerd om te staan. :tired_face:
In mijn .NET Core backend converteer ik handmatig de NTS Point naar een GeoJSON.Geometry.Position en die verwacht dus de coordinaten omgedraaid.

Dat aangepast en nu komen de punten binnen op zowel mijn Leaflet als mijn OL5 kaart.

Nu nog beslissen met welke ik verder ga.