CODEWITHSUNDEEP
javascriptleaflet
Saud
Saud

Reputation: 490

12 clusters, 12 different icons using Leaflet library for Javascript

I would like to display points/markers on a map. There are 12 clusters of points and each cluster should have a unique marker/icon.

In this example I have displayed sample data on two clusters with each its own icon. Currently, there are only 3-4 points in each cluster. The actual data contains 100-200 points in each cluster so clearly the solution is not optimal. I would like to read the 12 clusters more easily. Thought of using a class statement, assigning each class (=cluster) an icon. Not sure how to start. 

    var map = L.map("map");

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

map.setView([48.87, 2.35], 12);

//STEP 1
var leafIcons = L.Icon.extend({
    options: {
        //shadowUrl: 'leaf-shadow.png',
        iconSize:     [100, 100],
        //shadowSize:   [50, 64],
        iconAnchor:   [22, 94],
        //shadowAnchor: [4, 62],
        popupAnchor:  [-3, -76]
    }
});

//STEP 2
var greenIcon = new leafIcons({iconUrl: 'http://www.marchigiana.org.br/home/images/Diversas/Map-Marker-Marker-Outside-Chartreuse-icon.png'}),
    blueIcon = new leafIcons({iconUrl: 'http://maps.google.com/mapfiles/ms/icons/blue.png'});

//STEP 3
L.icon = function (options) {
    return new L.Icon(options);
};


//Green icon cluster
L.marker([48.90, 2.35], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf.");
L.marker([48.90, 2.36], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf.");
L.marker([48.89, 2.34], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf.");

//Blue icon cluster
L.marker([48.84, 2.35], {icon: blueIcon}).addTo(map).bindPopup("I am a blue icon");
L.marker([48.85, 2.35], {icon: blueIcon}).addTo(map).bindPopup("I am a blue icon");
L.marker([48.84, 2.34], {icon: blueIcon}).addTo(map).bindPopup("I am a blue icon");
L.marker([48.83, 2.36], {icon: blueIcon}).addTo(map).bindPopup("I am a blue icon");

Any ideas on approaches?

Upvotes: 1

Views: 768

Answers (1)

ghybs
ghybs

Reputation: 53225

Indeed having hundreds of points simultaneously on your map will make it not really readable, as well as considerably slow down visitors' browser.

If I understand correctly, besides the number, you would like to be able to differentiate your different types of icons ("clusters")?

To decrease the number of points displayed simultaneously, you could use some clustering plugin.

E.g., with Leaflet.markercluster you could create 1 L.markerClusterGroup per type / cluster of points, so that they cluster only with each other (and not among several types), specifying a custom cluster icon for each group (see how to customize them / demo / demo source)

JavaScript:

var mcgGreen = L.markerClusterGroup({
  iconCreateFunction: function(cluster) {
    return L.divIcon({
      html: cluster.getChildCount(),
      className: 'mycluster',
      iconSize: L.point(40, 40)
    });
  }
}).addTo(map);
var mcgBlue = L.markerClusterGroup({
  iconCreateFunction: function(cluster) {
    return L.divIcon({
      html: cluster.getChildCount(),
      className: 'mycluster mycluster-blue',
      iconSize: L.point(40, 40)
    });
  }
}).addTo(map);

L.marker([48.90, 2.35], {
  icon: greenIcon
}).addTo(mcgGreen);

L.marker([48.84, 2.35], {
  icon: blueIcon
}).addTo(mcgBlue);

CSS:

.mycluster {
  width: 40px;
  height: 40px;
  background-color: greenyellow;
  text-align: center;
  font-size: 24px;
}

.mycluster-blue {
  background-color: blue;
}

Demo: https://jsfiddle.net/g1bh6sr1/2/

Upvotes: 3

Related Questions