1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.layer.Tile');
|
4 | goog.require('ol.source.CartoDB');
|
5 | goog.require('ol.source.OSM');
|
6 |
|
7 | var mapConfig = {
|
8 | 'layers': [{
|
9 | 'type': 'cartodb',
|
10 | 'options': {
|
11 | 'cartocss_version': '2.1.1',
|
12 | 'cartocss': '#layer { polygon-fill: #F00; }',
|
13 | 'sql': 'select * from european_countries_e where area > 0'
|
14 | }
|
15 | }]
|
16 | };
|
17 |
|
18 | var cartoDBSource = new ol.source.CartoDB({
|
19 | account: 'documentation',
|
20 | config: mapConfig
|
21 | });
|
22 |
|
23 | var map = new ol.Map({
|
24 | layers: [
|
25 | new ol.layer.Tile({
|
26 | source: new ol.source.OSM()
|
27 | }),
|
28 | new ol.layer.Tile({
|
29 | source: cartoDBSource
|
30 | })
|
31 | ],
|
32 | target: 'map',
|
33 | view: new ol.View({
|
34 | center: [0, 0],
|
35 | zoom: 2
|
36 | })
|
37 | });
|
38 |
|
39 | function setArea(n) {
|
40 | mapConfig.layers[0].options.sql =
|
41 | 'select * from european_countries_e where area > ' + n;
|
42 | cartoDBSource.setConfig(mapConfig);
|
43 | }
|
44 |
|
45 |
|
46 | document.getElementById('country-area').addEventListener('change', function() {
|
47 | setArea(this.value);
|
48 | });
|