[GIS] Coloring circleMarkers based on category in Leaflet

dynamicjavascriptleaflet

My question is, how can I get Leaflet to color each of circleMarkers I am generating/points with a different color, based off the type property of the point?

I've done a bit of research, but all I've seen is coloring points based on manually created dictionary, while my "known list of types" can be expanded at any time, and additional colors have to be added to accommodate new types of points. Also I am quite weak in Javascript and its actual syntax.

I have the list of all unique types before the iteration over data.

I am working in C# MVC if that helps.

My view (presentation layer of the program – generates a HTML page based off its contents) iterates over Model data (basically data which I need to show on the map) which contains latitude, longitude and type properties (more than that, but irrelevant for this), and adds the points to map, drawing them.

Code that generates my points:

{
foreach (var item in Model)
{
    <text>var point = L.circleMarker(["@item.Latitude",     "@item.Longitude"]).addTo(mymap)
        .bindPopup("@item.Type.TypeDesc" + ", " + "@item.Latitude" + ", " +     "@item.Longitude" + ", " + "@item.RPT_DT").openPopup(); </text>
}
}

I need each point to be of a color depending on TypeDesc property. List of TypeDesc properties can be easily accessed via a Viewbag.TypeDesc list.

Best Answer

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

Related Solutions

Leaflet Markers – Using OverlappingMarkerSpiderfier Plugin with GeoJSON Circlemarkers

OverlappingMarkerSpiderfier is a plugin designed for the L.Marker class in Leaflet. Thus, it only accepts an L.Marker object and can't handle L.circleMarker properly, since it's based on the L.Circle objects which is based on L.Path. Credit for pointing this out goes to @FranceImage.

You can't use the L.circleMarker layer with the spiderfier plugin, it will be glitchy (http://jsfiddle.net/GFarkas/qzdr2w73/). However, you can convert your GeoJSON data to traditional markers with the L.Marker object. You can customize your marker icon to resemble to the circleMarker object (http://jsfiddle.net/GFarkas/qzdr2w73/4/).

To do this easily, Leaflet offers a L.DivIcon style which can be customized with pure CSS, you won't need an image. To make orange circles with solid border in CSS, the code will look like the following:

.mydivicon{
    width: 12px
    height: 12px;
    border-radius: 10px;
    background: #ff7800;
    border: 1px solid #000;
    opacity: 0.85
}

The most important part is the border-radius property. It will round your shape at the corners. To create a regular circle with it, you have to calculate the radius with the border. The formula is width / 2 + border * 4 if width = height. After you created the CSS, you have to make a L.DivIcon object to be used with L.Marker:

var icon = new L.divIcon({className: 'mydivicon'});

When rendering the GeoJSON data to the map object, use L.Marker instead of L.circleMarker with the previously created icon:

pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {
        icon: icon});

Now to use OverlappingMarkerSpiderfier properly: you have to create an OMS instance before adding the GeoJSON data:

var oms = new OverlappingMarkerSpiderfier(map);

After, you have to add each marker to the OMS object, so the built-in renderer can use them. To do this, use the onEachFeature method of L.geoJson:

onEachFeature: function (feature, latlng) {
    oms.addMarker(latlng);
}

Finally, create an event associated with the OMS object and the markers it contains and add popup content to the markers. Note: if you don't add some markers to the OMS object, it won't apply the spiderfy effect on them. Also, the popup content in my case is in the GeoJSON data (properties -> popupContent).

var popup = new L.Popup();
oms.addListener('click', function(marker) {
    popup.setContent(marker.feature.properties.popupContent);
    popup.setLatLng(marker.getLatLng());
    map.openPopup(popup);
});

Final note: markers created with L.DivIcon will be rendered as individual div objects instead of canvas or SVG. If you use a lot of points (around thousand or more) the rendering process will be painfully slow if the browser doesn't crash. To avoid it at masses of points like that, use OMS with other strategies (clusters, bounding box, etc.).

[GIS] resetStyle in geoJSON pointToLayer circleMarkers

One method is to create your own reset function using setStyle to be run on mouseout. For example:

function resetHighlight(e) {
    var layer = e.target;
    layer.setStyle(StyleDefault);
}

(where StyleDefault is your default circleMarker style, defined elsewhere)

Here is an example fiddle using some synthetic data.