I am trying to use Leaflet's GridLayer Vector Slicer to split up a geojson with complex geometries being passed to my webmap via GeoDjango. I can't seem to get the tiled GeoJSON to display, however.

Documentation for VectorGrid is here: https://github.com/Leaflet/Leaflet.VectorGrid

I can tile the same vector layer from a static framework when I assign the geojson text to a JS variable in a separate geojson.js file, then load that script and tile the vector using VectorGrid.

Static framework that works:

For example, from geojson.js:

var soil_ph = {"type": "FeatureCollection",... }

Then, from index.html:

<script type="text/javascript" src="./geojson.js"></script>

<script type="text/javascript">

        var vectorGrid = L.vectorGrid.slicer( soil_ph, {
            rendererFactory: L.svg.tile,

This works fine and the display of the vector is snappy.

What I need, but doesn't work:

When I try to call a serialized GeoJSON view in GeoDjango, however, it doesn't seem to work.

From views.py:

def soil_ph_view(request):
    soil_ph_json = serialize('geojson', soil_ph.objects.all(), geometry_field="geom")
    return HttpResponse(soil_ph_json, content_type='json')

From urls.py:

urlpatterns = [
    url(r'^soil_ph/', views.soil_ph_view, name='soil_ph'),

From index.html:

var soil_vector = $.ajax({
    url: "{% url 'soil_ph' %}"

var soil_ph = L.vectorGrid.slicer(soil_vector2, {
    rendererFactory: L.svg.tile,

I have also tried the following to pull the geojson data from the Django view:

var soil_vector = new L.GeoJSON.AJAX("{% url 'soil_ph' %}");

But no luck in getting it to tile and display.

How do I resolve this?

  • 1
    are you calling the vector grid slicer on the callback of the ajax call? $.ajax(...).done(function(data){ L.vectorGrid.slicer(data, {...})});
    – yellowcap
    Sep 21 '17 at 7:37

On your view, change content_type='json' to content_type='application/json'


var soil_vector = {{ soil_ph_json }}

I strongly recommend to change your configuration to use render and not HttpResponse https://docs.djangoproject.com/en/1.10/topics/http/shortcuts/#render

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.