[GIS] Coloring geojson/topojson tiled using geojson-vt by category

colorgeojsonleaflet

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?

Best Answer

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.

Related Solutions

[GIS] Rendering TopoJSON in Leaflet from GeoJSON PostGIS output

I'm not sure TopoJSON is the answer here. Under the covers leaflet-omnivore is converting the TopoJSON to GeoJSON and feeding that to Leaflet. Using d3js-topojson does exactly the same thing. In the end the polygons being rendered are the same wether sourced as TopoJSON or GeoJSON. You might need to consider simplifying your polygons. The only way you can really help the browser is to ask it to do less work. In this case that means fewer vertices so the browser has to draw fewer lines. Simplification can be done dynamically when requesting the data, but that introduces more latency. I'd suggest creating a second geometry columnn in your source table for storing simplified geometries.

[GIS] Coloring circleMarkers based on category in Leaflet

Elaborating on the third option in OP's answer:

Code

I'm assuming that you have an array of points with coordinates and categories. This differs slightly from the OP's question. Using the ES6 standard of JavaScript and palette.js from Google, you can automatically colour your points like this:

//Get an array of unique categories
//Reference: [1]
var uniqueCategories = [...new Set(points.map(function(point) {
    return point.category
}))]

//Create palette ('mpn65' has up to 65 different colours)
var palette = palette('mpn65',uniqueCategories.length);

//Construct empty JavaScript Map (keys mapped to values)
//Reference: [2]
var paletteMap = new Map()

//Map all categories to a RGB colour string
for(let i = 0; i < palette.length; i++) {
    paletteMap.set(uniqueCategories[i],palette[i])
}

//Add circleMarkers to Leaflet map
for (let point of points) {
  L.circleMarker(point.coordinates,
                 {color: '#' + paletteMap.get(point.category)} //retrieve mapped colour
                ).addTo(map)
}

Links

[1] https://stackoverflow.com/questions/1960473/get-all-unique-values-in-a-javascript-array-remove-duplicates#14438954
[2] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

Working example

There is a working example hosted on Codepen: https://codepen.io/anon/pen/zmNLdZ?editors=0010#0