1

I am a beginner with GIS. I have the following code that is successfully creating and displaying a 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.eyJ1IjoibnVtaW51czEiLCJhIjoiY2treTN3YzduMDcgf34ubXPjMWNpemdicyJ9.McJEAeE0Jbj617Ozz4l5Zg', {
        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);

Now, I am using the following geopackage https://biogeo.ucdavis.edu/data/gadm3.6/gpkg/gadm36_IND_gpkg.zip to draw state lines on my map (for just one of the layers):

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

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

This, too, is working. Now, I know that the polygons within are stored in a binary format; I also know that each polygon has a 'name' column (the innards of the gpkg can be seen here: https://ngageoint.github.io/geopackage-js/)).

How can I convert the gpkg file into an array that I can easily traverse through?

My primary aim is this: for each state, I have a number ranging from 0 to 10 for each state; I want to create a chloropleth map (https://leafletjs.com/examples/choropleth/). What I am lacking is the ability to transform the gpkg file into the same type of array that they are using (https://leafletjs.com/examples/choropleth/us-states.js).

1

This is an instance of the XY problem. You say you want to...

How can I convert the gpkg file into an array that I can easily traverse through?

...but I do not think you want to convert the data into a structure you can traverse through, I think you just want to traverse through the data.

Now, the geopackage-js documentation states:

GeoPackageFeatureLayer extends L.GeoJSON and accepts all options for L.GeoJSON in addition to the following:

...which means you can use things like L.GeoJSON's onEachFeature and L.GeoJSON's filter, so you can traverse, iterate and filter through features in a GeoPackageFeatureLayer the same way that you would do in a plain L.GeoJSON.

I particular, you should be able to specify a callback function as the style option, just in the same way that is done in the Leaflet choropleth example, e.g.:

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

 style: function (feature) {
   if (feature.something) {
     /* etc */
   }
 }
}).addTo(map);
2
  • thanks a lot, it worked. Could you link me to some documentation regarding that feature object?
    – Numi
    Feb 16 at 12:36
  • 1
    You mean the GeoJSON spec section 3.2? OGC simple features access? Since it's not exactly GeoJSON, the GeoPackageFeatureLayer code might decorate features as it sees fit, and you might be better off console.log()ing them to see their structure. Feb 16 at 12:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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