1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.format.KML');
|
4 | goog.require('ol.layer.Heatmap');
|
5 | goog.require('ol.layer.Tile');
|
6 | goog.require('ol.source.Stamen');
|
7 | goog.require('ol.source.Vector');
|
8 |
|
9 | var blur = document.getElementById('blur');
|
10 | var radius = document.getElementById('radius');
|
11 |
|
12 | var vector = new ol.layer.Heatmap({
|
13 | source: new ol.source.Vector({
|
14 | url: 'data/kml/2012_Earthquakes_Mag5.kml',
|
15 | format: new ol.format.KML({
|
16 | extractStyles: false
|
17 | })
|
18 | }),
|
19 | blur: parseInt(blur.value, 10),
|
20 | radius: parseInt(radius.value, 10)
|
21 | });
|
22 |
|
23 | vector.getSource().on('addfeature', function(event) {
|
24 |
|
25 |
|
26 |
|
27 | var name = event.feature.get('name');
|
28 | var magnitude = parseFloat(name.substr(2));
|
29 | event.feature.set('weight', magnitude - 5);
|
30 | });
|
31 |
|
32 | var raster = new ol.layer.Tile({
|
33 | source: new ol.source.Stamen({
|
34 | layer: 'toner'
|
35 | })
|
36 | });
|
37 |
|
38 | var map = new ol.Map({
|
39 | layers: [raster, vector],
|
40 | target: 'map',
|
41 | view: new ol.View({
|
42 | center: [0, 0],
|
43 | zoom: 2
|
44 | })
|
45 | });
|
46 |
|
47 |
|
48 | blur.addEventListener('input', function() {
|
49 | vector.setBlur(parseInt(blur.value, 10));
|
50 | });
|
51 |
|
52 | radius.addEventListener('input', function() {
|
53 | vector.setRadius(parseInt(radius.value, 10));
|
54 | });
|