Skip to content

Instantly share code, notes, and snippets.

@ThomasG77

ThomasG77/index.html

Created June 16, 2015 15:47
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ThomasG77/badfca2694a7255fa2fa to your computer and use it in GitHub Desktop.
Save ThomasG77/badfca2694a7255fa2fa to your computer and use it in GitHub Desktop.
Download ZIP
Sample to display GeoJSON as cluster in Openlayers 3. derived from http://openlayers.org/en/v3.6.0/examples/cluster.html?mode=advanced
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Clustering example</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
</div>
<script>
var source = new ol.source.Vector({
url: 'sample.geojson',
format: new ol.format.GeoJSON()
});
var clusterSource = new ol.source.Cluster({
distance: 40,
source: source
});
var styleCache = {};
var clusters = new ol.layer.Vector({
source: clusterSource,
style: function(feature, resolution) {
var size = feature.get('features').length;
var style = styleCache[size];
if (!style) {
style = [new ol.style.Style({
image: new ol.style.Circle({
radius: 10,
stroke: new ol.style.Stroke({
color: '#fff'
}),
fill: new ol.style.Fill({
color: '#3399CC'
})
}),
text: new ol.style.Text({
text: size.toString(),
fill: new ol.style.Fill({
color: '#fff'
})
})
})];
styleCache[size] = style;
}
return style;
}
});
var raster = new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
});
var raw = new ol.layer.Vector({
source: source
});
var map = new ol.Map({
layers: [raster, clusters],
renderer: 'canvas',
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
sample.geojson
{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-168.8107390422374,54.157725758850574]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-51.3403064198792,10.214974768459797]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[16.4004828594625,79.99757340643555]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[63.2266481872648,-85.34215268678963]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[106.13785260356963,29.31626608595252]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[39.09217447042465,53.163649938069284]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[30.305081298574805,38.54451818391681]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-36.71918953768909,47.100036763586104]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[137.6619114819914,-83.14054414629936]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-11.086550960317254,11.748411767184734]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-122.24006392993033,38.088570018298924]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[178.2322765700519,-14.917281582020223]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-105.73685539886355,6.475950591266155]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[88.32394014112651,14.28174720145762]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-67.31159971095622,81.7289754934609]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-82.86072805523872,37.474773433059454]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[125.23716528899968,-31.744816289283335]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-147.48356762342155,-9.246051739901304]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[81.09614071436226,72.29239370673895]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-55.43385894969106,64.99408097472042]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-34.09113901667297,-75.52165324799716]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[105.67570715211332,-43.7638100143522]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[159.1162263136357,87.00035226065665]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[2.93970032595098,80.0898248841986]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[131.906731557101,68.72645800933242]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-10.07488701492548,-71.26021509524435]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-83.54379222728312,71.47082009352744]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[126.05772569775581,-54.02026950381696]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[18.24992062523961,55.54340623319149]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-169.38413799740374,74.36375472228974]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[59.04887622222304,59.79575643315911]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[64.94813879951835,-42.03933221753687]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[83.88567262329161,-51.38644435442984]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[147.63913499191403,-48.66006845142692]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[119.36279931105673,-67.04430119600147]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-49.39418708905578,-26.73325303941965]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[10.717678405344486,15.000474485568702]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-70.2815752197057,-69.93871808052063]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[41.18658400140703,67.22894668579102]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-20.614430448040366,-32.82640068791807]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-136.5223963558674,36.095731258392334]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[121.22438144870102,50.41759630199522]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[116.6193754132837,66.43212860450149]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[51.20865672826767,78.88874790631235]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-159.20696334913373,19.781243498437107]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[37.97882345505059,-57.71822084672749]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-113.19356032647192,58.838679967448115]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[5.868360763415694,2.5968516943976283]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-132.30001556687057,-59.22897461336106]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[72.20566816627979,-16.490485221147537]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-51.085848519578576,9.367312481626868]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-39.896600218489766,10.130148860625923]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[147.91608061641455,8.095497102476656]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-18.767728116363287,73.95180094521493]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[164.5572561956942,-53.767800838686526]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-96.36975858360529,66.68249634560198]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[126.09176435507834,65.77462018467486]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[83.46960056573153,-5.448401304893196]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[6.316659478470683,89.92363336030394]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-58.5989776533097,-38.5455375071615]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-71.54770159162581,71.82458632159978]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[117.98323569819331,-30.71393163409084]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[51.71699007041752,-10.874916790053248]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[13.322307709604502,48.67331739049405]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[67.39593020640314,18.83719020523131]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[131.6128010954708,-88.33010088186711]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.521387917920947,45.31049834098667]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-38.51892655715346,-32.77438347693533]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-34.359974479302764,-42.00836037285626]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-179.28971375338733,-82.32790924608707]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[92.00547778978944,5.866278070025146]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[179.85380393452942,21.64526653010398]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[147.84241005778313,28.671128475107253]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-137.77436795644462,-49.687956157140434]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-61.05841286480427,-61.82999659795314]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[75.43903450481594,23.689003684557974]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-81.0940664447844,-18.075707713142037]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-51.11512684263289,67.7947018481791]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[111.23076293617487,-23.43830242753029]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-92.58807479403913,44.68438136391342]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[91.06549512594938,48.89295896049589]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-160.79887024126947,36.815112959593534]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[32.74603608995676,47.775046806782484]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[9.668360771611333,-10.18841574434191]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-104.25263970158994,58.63374138716608]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[40.11863364838064,86.5496090054512]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[68.00022795796394,-29.89073830191046]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-89.24345218576491,7.557663358747959]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[41.293986942619085,12.602811846882105]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[149.48293215595186,-87.55234291311353]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[67.41163847967982,81.23281929641962]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[146.538623040542,30.659864922054112]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[174.50993640348315,-24.65151807758957]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-161.39792653732002,-54.21583686489612]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[11.361873848363757,-60.63226387370378]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-60.1769663952291,-84.56661680247635]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[38.301065638661385,-5.702632390893996]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[18.693967116996646,-5.734719950705767]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-10.913244970142841,19.357194886542857]},"properties":{}},{"type":"Feature","geometry":{"type":"Point","coordinates":[0.9538325015455484,73.06504215113819]},"properties":{}}]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment