CODEWITHSUNDEEP
leafletmapbox
A.HADDAD
A.HADDAD

Reputation: 1906

How to use supercluster

I am new to mapbox. I need to use the supercluster project of mapbox in order to plot 6 millions of gps in a map. i tried to use the demo in localhost but i only get an empty map !?

this is my code in index.html :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Supercluster Leaflet demo</title>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>

        <link rel="stylesheet" href="cluster.css" />

        <style>
            html, body, #map {
            height: 100%;
            margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
         <script src="index.js"></script>
      <script src="https://unpkg.com/[email protected]/dist/supercluster.min.js">

    var index = supercluster({
      radius: 40,
      maxZoom: 16
     });
       index.load(GeoObs.features);
       index.getClusters([-180, -85, 180, 85], 2);
     </script>
    </body>
</html>

Note : GeoObs is my geojson file

what is wrong ?

Upvotes: 5

Views: 11799

Answers (3)

Jose Martinez
Jose Martinez

Reputation: 21

var map = L.map('map').setView([0, 0], 0);

// Empty Layer Group that will receive the clusters data on the fly.
var markers = L.geoJSON(null, {
  pointToLayer: createClusterIcon
}).addTo(map);

// Update the displayed clusters after user pan / zoom.
map.on('moveend', update);

function update() {
  if (!ready) return;
  var bounds = map.getBounds();
  var bbox = [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()];
  var zoom = map.getZoom();
  var clusters = index.getClusters(bbox, zoom);
  markers.clearLayers();
  markers.addData(clusters);
}

// Zoom to expand the cluster clicked by user.
markers.on('click', function(e) {
  var clusterId = e.layer.feature.properties.cluster_id;
  var center = e.latlng;
  var expansionZoom;
  if (clusterId) {
    expansionZoom = index.getClusterExpansionZoom(clusterId);
    map.flyTo(center, expansionZoom);
  }
});

// Retrieve Points data.
var placesUrl = 'https://cdn.rawgit.com/mapbox/supercluster/v4.0.1/test/fixtures/places.json';
var index;
var ready = false;

jQuery.getJSON(placesUrl, function(geojson) {
  // Initialize the supercluster index.
  index = supercluster({
    radius: 60,
    extent: 256,
    maxZoom: 18
  }).load(geojson.features); // Expects an array of Features.

  ready = true;
  update();
});

function createClusterIcon(feature, latlng) {
  if (!feature.properties.cluster) return L.marker(latlng);

  var count = feature.properties.point_count;
  var size =
    count < 100 ? 'small' :
    count < 1000 ? 'medium' : 'large';
  var icon = L.divIcon({
    html: '<div><span>' + feature.properties.point_count_abbreviated + '</span></div>',
    className: 'marker-cluster marker-cluster-' + size,
    iconSize: L.point(40, 40)
  });

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

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<link rel="stylesheet" href="https://cdn.rawgit.com/mapbox/supercluster/v4.0.1/demo/cluster.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<script src="https://unpkg.com/[email protected]/dist/supercluster.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<div id="map" style="height: 180px"></div>

var map = L.map('map').setView([0, 0], 0);

// Empty Layer Group that will receive the clusters data on the fly.
var markers = L.geoJSON(null, {
  pointToLayer: createClusterIcon
}).addTo(map);

// Update the displayed clusters after user pan / zoom.
map.on('moveend', update);

function update() {
  if (!ready) return;
  var bounds = map.getBounds();
  var bbox = [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()];
  var zoom = map.getZoom();
  var clusters = index.getClusters(bbox, zoom);
  markers.clearLayers();
  markers.addData(clusters);
}

// Zoom to expand the cluster clicked by user.
markers.on('click', function(e) {
  var clusterId = e.layer.feature.properties.cluster_id;
  var center = e.latlng;
  var expansionZoom;
  if (clusterId) {
    expansionZoom = index.getClusterExpansionZoom(clusterId);
    map.flyTo(center, expansionZoom);
  }
});

// Retrieve Points data.
var placesUrl = 'https://dev.infrapedia.com/api/assets/map/facilities.points.json';
var index;
var ready = false;

jQuery.getJSON(placesUrl, function(geojson) {
  // Initialize the supercluster index.
  index = supercluster({
    radius: 60,
    extent: 256,
    maxZoom: 18
  }).load(geojson.features); // Expects an array of Features.

  ready = true;
  update();
});

function createClusterIcon(feature, latlng) {
  if (!feature.properties.cluster) return L.marker(latlng);

  var count = feature.properties.point_count;
  var size =
    count < 100 ? 'small' :
    count < 1000 ? 'medium' : 'large';
  var icon = L.divIcon({
    html: '<div><span>' + feature.properties.point_count_abbreviated + '</span></div>',
    className: 'marker-cluster marker-cluster-' + size,
    iconSize: L.point(40, 40)
  });

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

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<link rel="stylesheet" href="https://cdn.rawgit.com/mapbox/supercluster/v4.0.1/demo/cluster.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<script src="https://unpkg.com/[email protected]/dist/supercluster.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<div id="map" style="height: 180px"></div>

Upvotes: 2

ghybs
ghybs

Reputation: 53215

FWIW here is a self-contained example of how to use supercluster, without a Web Worker. It is also simply based on the repo demo.

var map = L.map('map').setView([0, 0], 0);

// Empty Layer Group that will receive the clusters data on the fly.
var markers = L.geoJSON(null, {
  pointToLayer: createClusterIcon
}).addTo(map);

// Update the displayed clusters after user pan / zoom.
map.on('moveend', update);

function update() {
  if (!ready) return;
  var bounds = map.getBounds();
  var bbox = [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()];
  var zoom = map.getZoom();
  var clusters = index.getClusters(bbox, zoom);
  markers.clearLayers();
  markers.addData(clusters);
}

// Zoom to expand the cluster clicked by user.
markers.on('click', function(e) {
  var clusterId = e.layer.feature.properties.cluster_id;
  var center = e.latlng;
  var expansionZoom;
  if (clusterId) {
    expansionZoom = index.getClusterExpansionZoom(clusterId);
    map.flyTo(center, expansionZoom);
  }
});

// Retrieve Points data.
var placesUrl = 'https://cdn.rawgit.com/mapbox/supercluster/v4.0.1/test/fixtures/places.json';
var index;
var ready = false;

jQuery.getJSON(placesUrl, function(geojson) {
  // Initialize the supercluster index.
  index = supercluster({
    radius: 60,
    extent: 256,
    maxZoom: 18
  }).load(geojson.features); // Expects an array of Features.

  ready = true;
  update();
});

function createClusterIcon(feature, latlng) {
  if (!feature.properties.cluster) return L.marker(latlng);

  var count = feature.properties.point_count;
  var size =
    count < 100 ? 'small' :
    count < 1000 ? 'medium' : 'large';
  var icon = L.divIcon({
    html: '<div><span>' + feature.properties.point_count_abbreviated + '</span></div>',
    className: 'marker-cluster marker-cluster-' + size,
    iconSize: L.point(40, 40)
  });

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

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<link rel="stylesheet" href="https://cdn.rawgit.com/mapbox/supercluster/v4.0.1/demo/cluster.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<script src="https://unpkg.com/[email protected]/dist/supercluster.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<div id="map" style="height: 180px"></div>

Upvotes: 9

A.HADDAD
A.HADDAD

Reputation: 1906

I Solved my issue.

to use the supercluster project you need :

1) download and install : node and npm

2) with npm install supercluster: npm i supercluster

then you will get a folder named node_modules in which you will find supercluster folder under it copy the folder named dist (node_modules>supercluster>dist)

3) download from github the project supercluster here you will get a folder named supercluster-master past in it the folder dist copied in step 2)


  • Now you can test it by selecting index.html into your browser (supercluster-master>demo>index.html)

  • if you want to test another JSON or GEOJSON file just:

1) put this file under fixtures folder (supercluster-master>test>fixtures)

then

2) open worker.js (supercluster-master>demo>worker.js) and change the first variable of the geojson function to point on that file

example :

getJSON('../test/fixtures/myFile.geojson', function (geojson) {

Alternatively

you can use the super-cluster algorithme directley in mapbox gl js mapBox gl js example or with jupyter version;mapbox-jupyter mapbox-jupyter example

Upvotes: -4

Related Questions