Skip to content

Instantly share code, notes, and snippets.

@malwoodsantoro
Last active March 4, 2022 05:04
Show Gist options
  • Save malwoodsantoro/bd336acea35ffdf4dd81fab5c6f772f0 to your computer and use it in GitHub Desktop.
Save malwoodsantoro/bd336acea35ffdf4dd81fab5c6f772f0 to your computer and use it in GitHub Desktop.
Cluster data from a google sheet
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet" />
<script src='https://npmcdn.com/csv2geojson@latest/csv2geojson.js'></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZGFuc3dpY2siLCJhIjoiY2l1dTUzcmgxMDJ0djJ0b2VhY2sxNXBiMyJ9.25Qs4HNEkHubd4_Awbd8Og';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11', //stylesheet location
center: [-122.411464, 37.7852299], // starting position
zoom: 8// starting zoom
});
$(document).ready(function () {
$.ajax({
type: "GET",
url: 'https://docs.google.com/spreadsheets/u/0/d/1y2hdtxk8f14T5g5DfNoYYTEIGxf49zEX-bvbDKqbSoo/export?format=csv&id=1y2hdtxk8f14T5g5DfNoYYTEIGxf49zEX-bvbDKqbSoo&gid=0',
dataType: "text",
success: function (csvData) { makeGeoJSON(csvData); }
});
});
function makeGeoJSON(csvData) {
console.log(csvData)
csv2geojson.csv2geojson(csvData, {
latfield: 'Latitude',
lonfield: 'Longitude',
delimiter: ','
}, function (err, data) {
console.log(data)
map.on('load', function () {
map.addSource("locations", {
type: "geojson",
data: data,
cluster: true,
clusterMaxZoom: 14,
clusterRadius: 20
});
map.addLayer({
id: "clusters",
type: "symbol",
source: "locations",
filter: ["has", "point_count"],
layout: {
"icon-image": "za-provincial-2",
"text-field": "{point_count_abbreviated}",
"text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
"text-size": 12,
},
paint: {
"text-color": "#000"
}
});
map.addLayer({
id: 'unclustered-count',
type: 'symbol',
source: 'locations',
filter: ['!has', 'point_count'],
layout: {
"icon-image": "za-provincial-2",
}
});
});
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment