CODEWITHSUNDEEP
javascriptreactjsleafletreact-leaflet
heyarne
heyarne

Reputation: 1167

Custom Leaflet Renderer for GeoJSON

I want to render GeoJSON differently than provided by Leaflet by default. Unfortunately changing the style() function will not suffice as I need greater control over the vector graphics being created.

What is the idiomatic way of doing this? I reckon I can reuse lots of parts of the default SVG renderer found in src/layers/vector/SVG.js. I would however like to only replace it for one GeoJSON layer / one FeatureGroup. As none of these inherit from Path, this does not seem possible.

I tried extending the SVG class in a very basic way:

import {SVG} from 'leaflet/src/layer/vector/SVG'

export default class CustomSVG extends SVG {
  _updatePoly (layer, closed) {
    console.log('Custom renderer in action')
    super._updatePoly(layer, closed)
  }
}

and then set it as the renderer while initializing Leaflet, but this fails with a TypeError: max2 is undefined (it is an unhandled promise rejection which stems from me using react-leaflet).

What is it I'm missing?

Upvotes: 1

Views: 1799

Answers (1)

heyarne
heyarne

Reputation: 1167

I read the documentation again and I seem to have missed this bit about the GeoJSON options:

style: A Function defining the Path options for styling GeoJSON lines and polygons, called internally when data is added. The default value is to not override any defaults:

function (geoJsonFeature) {
  return {}
}

The path options on the other hand take a renderer, which I can use to override the rendering of this particular GeoJSON layer only. Hope this helps anybody else!

Upvotes: 1

Related Questions