3

I am mapping polygon data that is tiled on the fly using geojson-vt and leaflet. It works great.

That said, I really need to be able to change the color of each polygon based on its category as stored in a data column (cat1, cat2, cat3, cat4). Right now I am able to define the color of the boarder (strokestyle) and fill (fillStyle), but only for the whole layer.

I have been able to create a fill color that is random using

ctx.fillStyle = 'hsl(' + 360 * Math.random() + ', 50%, 50%)';

How can I bring the category into the mix?

Is this possible, or do I have to utilize a different tiling solution if I want to display by category?

  • Here is the code sample I relied on link – user86605 Nov 19 '16 at 2:19
  • I ended up launch a server with postgis and geoserver and serving the files through wms. Now if I could only figure out how to getfeatureinfo on only the active layers for my popups. – user86605 Dec 12 '16 at 21:02
3

I'd suggest switching to Leaflet.VectorGrid to load data using geojson-vt, and following the Leaflet choropleth tutorial.

In fact, one of the VectorGrid examples deals with the very issue of colouring polygons in different colours depending on a property of each feature:

    var vectorGrid = L.vectorGrid.slicer( euCountries, {
        rendererFactory: L.svg.tile,
        vectorTileLayerStyles: {
            sliced: function(properties, zoom) {

                var p = properties.mapcolor7 % 5;

                return {
                    fillColor: p === 0 ? '#800026' :
                               p === 1 ? '#E31A1C' :
                               p === 2 ? '#FEB24C' :
                               p === 3 ? '#B2FE4C' : '#FFEDA0',
                    fillOpacity: 0.5,
                    stroke: true,
                    fill: true,
                    color: 'black',
                    weight: 0,
                }
            }
        },
        interactive: true
    })

As you can see, the code refers to the mapcolor7 property of each features, performs a modulo operation on it, and chooses a fill colour based on that.

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.