Geopackage not rendering polygons to map

Question

The code to create the map:

 <div id="map" style="width: 1000px; height: 700px"></div>
 <script> 
    var map = L.map('map').setView([0,0], 1);
    L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/{z}/{x}/{y}?access_token=pk.ey31IjoibnVtaW51czEiLCJhIjoiY2treTN3YzduekdwMDJubXNhMWNpemdicyJ9.McJEAeE0Jbj999Oz4pbsZg', {
        attribution: '<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>'
    }).addTo(map);

    var marker = L.marker([18.52, 73.86]).addTo(map);

This is correctly creating a map. Now, I'm trying to add a geopackage containing data about states: https://biogeo.ucdavis.edu/data/gadm3.6/gpkg/gadm36_IND_gpkg.zip

When I use the tutorial code to draw rivers onto the map, it works just fine:

var rivers = L.geoPackageFeatureLayer([], {
     geoPackageUrl: 'http://ngageoint.github.io/GeoPackage/examples/rivers.gpkg',
     layerName: 'rivers',

     style: {color: 'green'}
    }).addTo(map);

    L.geoJson(stateData).addTo(map); 

And, when I upload this state geopackage to the geopackage viewer https://ngageoint.github.io/geopackage-js/, it draws everything correctly. However, when I then try to implement the same thing in my map, the map renders fine but the state lines aren't being drawn on the map; there is simply no indication that the following code is even there:

var stater = L.geoPackageFeatureLayer([], {
     geoPackageUrl: 'assets/geospatial/gadm_states.gpkg',
     layerName: 'stater',

     style: {color: 'red'}
    }).addTo(map);

I thought maybe it was because there are multiple layers in the gpkg file and I wasn't correctly specifying on or something, so I downloaded the layer I wanted from the GeoPackage Viewer as a geojson file, and that isn't working either. Does anyone have any insight as to what is going wrong?

Answer 1

I think you're making up the name of the stater layer.

I've downloaded (and uncompressed) part of the GADM dataset, and to see which named layers it contains, and then I've run ogrinfo on it:

$ wget https://biogeo.ucdavis.edu/data/gadm3.6/gpkg/gadm36_ESP_gpkg.zip
 [snip]
 2021-02-15 10:49:45 (3,56 MB/s) - “gadm36_ESP_gpkg.zip” saved [9767512/9767512]

$ unzip gadm36_ESP_gpkg.zip
Archive:  gadm36_ESP_gpkg.zip
  inflating: gadm36_ESP.gpkg         
  inflating: license.txt  

$ ogrinfo gadm36_ESP.gpkg 

INFO: Open of `gadm36_ESP.gpkg'
      using driver `GPKG' successful.
1: gadm36_ESP_0 (Multi Polygon)
2: gadm36_ESP_1 (Multi Polygon)
3: gadm36_ESP_2 (Multi Polygon)
4: gadm36_ESP_3 (Multi Polygon)
5: gadm36_ESP_4 (Multi Polygon)

...so that geopackage has five different themed layers, named gadm36_ESP_0 through gadm36_ESP_5.

Now, I can put that file up in a small webserver and set up some basic Leaflet example to load data from a layer in the geopackage that I know exists:

var provinces = L.geoPackageFeatureLayer([], {
     geoPackageUrl: 'https://ivan.sanchezortega.es/cors/2021-02-15-gpkg/gadm36_ESP.gpkg',
     layerName: 'gadm36_ESP_2',

     style: {color: 'red'}
}).addTo(map);

...and the live example works as expected:

So:

• Do check the structure of your geopackage, and know which named layers it contains.
• Always check your browser's console for errors, because
  • A bad layer name will result in a "NULL geometry column error"
  • The web server hosting the geopackage might be misconfigured (e.g. HTTPS or CORS issues)