I'd like to implement a geojson file with over 30MB in a web map. Of course, the Web Map runs very slow, when importing it directly. So I came across the pluginn geojson-vt, but I can't get it working. I'm just too unexperienced in Leaflet to get this done.

What would be the way to get this working?

I tried it with this code from the GitHub Page:

var options = {
    maxZoom: 16,
    tolerance: 3,
    debug: 0,
    style: {
        fillColor: '#1EB300',
        color: '#F2FF00',
        weight: 2
var canvasLayer = L.gridLayer.geoJson("myfile.geojson", options).addTo(map); 

I have the geojsonFile "myfile.geojson" stored directly in the leaflet folder next to the index.html.

I am running leaflet 1.7.1.

I have loaded the <script src="https://unpkg.com/geojson-vt@3.2.0/geojson-vt.js"></script>.

I have stored the leaflet-geojson-vt.js directly in the leaflet folder next to the geojson and loaded it via <script src="/leaflet-geojson-vt.js"></script>.

  • 1
    L.gridLayer.geoJson expects GeoJSON object, not a file. You have first to read your GeoJSON file with some of the AJAX methods, as you can see in the demo brandonxiang.github.io/leaflet-geojson-vt/test
    – TomazicM
    Jul 26 at 9:10
  • I get the idea. So, I tried to load in the geojson with 'var myfile = new L.GeoJSON.AJAX("myfile.geojson",{style:Style});' and to call the variable myfile with 'var canvasLayer = L.gridLayer.geoJson(myfile, options).addTo(map);' But it still doesn't display. Jul 26 at 11:01
  • 1
    No, that's not the right way. With L.GeoJSON.AJAX you get Leaflet vector layer, not GeoJSON object. Google for JS fetch method.
    – TomazicM
    Jul 26 at 15:17
  • I tried to find some input I can work with, unfortunately I am still not quite sure how to import it as a object. Is there maybe a usefull hint in the leaflet documentation I have not seen yet? Jul 27 at 20:49

Your Answer

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

Browse other questions tagged or ask your own question.