2

I am trying to show clusters using markerclustergroups with Polygons. Right now the polygons are shown but the clusters aren't. I have been trying to use center of mass for the polygons because it seems like markerclustergroup doesn't like polygons but that doesn't really work since the animation of markerclustergroup will be set on the centroids and not the actual polygon.

My polygons all vary in amount of coordinates. Some have +10 sets others have 3. How would I use markerclustergroup for polygons?

Below my code can be seen:

        // Create variable to hold map element, give initial settings to map
        var map = L.map('map', {
            center: [23.70489, 43.90137],
            zoom: 5
        });

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        }).addTo(map);

        var ojStyle = {
            "color": "#ff7800",
            "weight": 5,
            "opacity": 0.65
        };
        // Hardcoded polygons as GeoJSON
        var polygons = {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [37.99896240234376, 21.55017532555692],
                            [39.39422607421876, 21.476073444092435],
                            [38.88336181640626, 22.56582956966297],
                            [38.023681640625, 22.611475436593366],
                            [37.43591308593751, 21.99908185836153],
                            [37.28485107421876, 21.624239377938288],
                            [37.28485107421876, 21.624239377938288],
                            [37.99896240234376, 21.55017532555692]
                        ]
                    ]
                }
            }, {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [38.50708007812501, 21.453068633086783],
                            [39.20745849609376, 21.37124437061832],
                            [39.10858154296876, 20.876776727727016],
                            [38.80920410156251, 20.912700155617568],
                            [38.49884033203126, 20.94604992010052],
                            [38.50708007812501, 21.453068633086783]
                        ]
                    ]
                }
            }, {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [50.57830810546875, 25.980268007469803],
                            [50.77606201171876, 25.956809920555312],
                            [50.780181884765625, 25.69970044378398],
                            [50.56457519531251, 25.822144306879686],
                            [50.56182861328126, 25.945696562830516],
                            [50.57830810546875, 25.980268007469803]
                        ]
                    ]
                }
            }, {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [54.37408447265626, 24.51963836811676],
                            [54.29443359375001, 24.40963901896311],
                            [54.25872802734375, 24.449649897759667],
                            [54.32739257812501, 24.539627918861232],
                            [54.37133789062501, 24.559614286039903],
                            [54.37408447265626, 24.51963836811676]
                        ]
                    ]
                }
            }, {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [54.40155029296876, 24.463400705082282],
                            [54.41940307617188, 24.489648077028683],
                            [54.45785522460938, 24.462150693715266],
                            [54.43450927734376, 24.43839812102505],
                            [54.40155029296876, 24.463400705082282]
                        ]
                    ]
                }
            }]
        }
        var polygonArray = []
        for (i = 0; i < polygons.features.length; i++) {
            polygonArray.push(polygons.features[i]);
        }

        var markers = L.markerClusterGroup().addTo(map);
        var geoJsonLayer = L.geoJson(polygonArray);
        markers.addLayer(geoJsonLayer);
        map.fitBounds(markers.getBounds());

http://js.do/code/165930 - Shows how clustering doesn't work for the polygons

I am looking for a solution like this: http://jsfiddle.net/ve2huzxw/237/

4
  • 1
    Welcome to GIS SE. As a new user, please take the Tour. Please Edit the question to place code within the question body. External links fail over time. Then when you consider how so few are willing to follow them, that they just aren't worth the effort. – Vince Aug 21 '17 at 23:05
  • 1
    The markerClusterer by its nature only shows markers, which are point features. Can you please confirm what you're expecting to see in the clusters? Is it 1 point per polygon (such as its centroid)? This will help us to direct you to the solution – Stephen Lead Aug 22 '17 at 0:44
  • @Vince Thanks for the headsup. Updated the post with a code snippet. – Rainoa Aug 22 '17 at 8:23
  • @Stephen Lead Added code snippet and a link to how i picture my solution – Rainoa Aug 22 '17 at 8:23
2

You say "I have been trying to calculate center of mass for the polygons" sounds like what you're looking for is the centroid. Finding polygon centroids is a fairly straightforward processing task in most GIS environments, but I have not personally used leaflet.

Perhaps this thread will help you get started.

1
  • I updated with a code snippet of my javascript. I have already found the centroids of the polygon :) – Rainoa Aug 22 '17 at 8:22
1

I use turf.js library for calculating centroid of a polygon. It also provides other functions which might be useful like calculating distance.

import * as turf from "@turf/turf";
const demoGeometry = {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [54.40155029296876, 24.463400705082282],
                            [54.41940307617188, 24.489648077028683],
                            [54.45785522460938, 24.462150693715266],
                            [54.43450927734376, 24.43839812102505],
                            [54.40155029296876, 24.463400705082282]
                        ]
                    ]
                }
turf.centroid(demoGeometry); // returns centroid of the geometry

Note: demoGeometry should be of the GeoJSON type

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.