Skip to content

Commit b44f6a5

Browse files
jvailjvail
committed
Update examples
1 parent b1b6ca5 commit b44f6a5

12 files changed

+3538
-374
lines changed

‎examples/lights.zip renamed to ‎examples/data/lights.zip

File renamed without changes.

‎examples/world.json renamed to ‎examples/data/world.json

File renamed without changes.

‎examples/extensions.html

Lines changed: 48 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,59 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>Extensions</title>
6-
<script src="https://unpkg.com/d3@4"></script>
7-
<script src="https://unpkg.com/d3-geo-projection@4"></script>
8-
<script src="https://unpkg.com/topojson-client@3"></script>
9-
<script type="module" src="https://unpkg.com/@material/mwc-circular-progress?module"></script>
10-
</head>
11-
<body>
12-
<pre style="text-align:center; width: 100%; margin-top: 20px;">
13-
Wait for loading & creating <mwc-circular-progress id="progress" style="vertical-align: middle;" density=-8 indeterminate></mwc-circular-progress> TopoJSON from a GeoJSON file inside the worker extension.
14-
</pre>
15-
<canvas width="800" height="600"></canvas>
16-
<script type="module">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Extensions</title>
6+
<style>
7+
canvas {
8+
display: block;
9+
margin: 0 auto;
10+
}
11+
</style>
12+
</head>
13+
<body>
14+
<pre style="text-align:center; width: 100%; margin-top: 20px;">
15+
Wait for loading & creating <mwc-circular-progress id="progress" style="vertical-align: middle;" density=-8 indeterminate></mwc-circular-progress> TopoJSON from a GeoJSON file inside the worker extension.
16+
</pre>
17+
<canvas width="800" height="600"></canvas>
18+
<script type="module">
1719

18-
import SPL from '../dist/index.js';
20+
import { d3, geoAitoff, topojson } from './lib/lib.js';
21+
import SPL from '../dist/index.js';
1922

20-
const extention = {
21-
extends: 'db',
22-
fns: {
23-
'toTopoJSON': async (db, table, column='geometry') => {
24-
if (typeof(topojson) === 'undefined') {
25-
await import('https://unpkg.com/topojson-server@3');
23+
const extention = {
24+
extends: 'db',
25+
fns: {
26+
'toTopoJSON': async (db, table, column='geometry') => {
27+
if (typeof(topojson) === 'undefined') {
28+
await import('https://unpkg.com/topojson-server@3');
29+
}
30+
return topojson.topology(db.exec(`SELECT ${column} FROM ${table}`).get.flat);
31+
},
32+
'timeout': async (_, delay) => {
33+
return new Promise(resolve => setTimeout(resolve, delay));
2634
}
27-
return topojson.topology(db.exec(`SELECT ${column} FROM ${table}`).get.flat);
28-
},
29-
'timeout': async (_, delay) => {
30-
return new Promise(resolve => setTimeout(resolve, delay));
3135
}
32-
}
33-
};
36+
};
3437

35-
const spl = await SPL([extention]);
36-
const db = await spl.mount('data', [{
37-
name: 'world.geojson',
38-
data: await fetch('world.json').then(res => res.arrayBuffer())
39-
}]).db().read(`
40-
SELECT InitSpatialMetaDataFull(1);
41-
SELECT ImportGeoJSON('/data/world.geojson', 'world');
42-
`);
38+
const spl = await SPL([extention]);
39+
const db = await spl.mount('data', [{
40+
name: 'world.geojson',
41+
data: await fetch('data/world.json').then(res => res.arrayBuffer())
42+
}]).db().read(`
43+
SELECT InitSpatialMetaDataFull(1);
44+
SELECT ImportGeoJSON('/data/world.geojson', 'world');
45+
`);
4346

44-
const context = d3.select('canvas').node().getContext('2d');
45-
const path = d3.geoPath().projection(d3.geoAitoff()).context(context);
47+
const context = d3.select('canvas').node().getContext('2d');
48+
const path = d3.geoPath().projection(geoAitoff()).context(context);
4649

47-
db.toTopoJSON('world').then(topology => {
48-
context.beginPath();
49-
document.querySelector('#progress').remove();
50-
path(topojson.mesh(topology));
51-
context.stroke();
52-
});
50+
db.toTopoJSON('world').then(topology => {
51+
context.beginPath();
52+
document.querySelector('#progress').remove();
53+
path(topojson.mesh(topology));
54+
context.stroke();
55+
});
5356

54-
</script>
55-
</body>
57+
</script>
58+
</body>
5659
</html>

‎examples/lib/index.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import Map from 'ol/Map';
2+
import View from 'ol/View';
3+
import TileLayer from 'ol/layer/Tile';
4+
import VectorLayer from 'ol/layer/Vector';
5+
import OSM from 'ol/source/OSM';
6+
import Vector from 'ol/source/Vector';
7+
import GeoJSON from 'ol/format/GeoJSON';
8+
import WKB from 'ol/format/WKB';
9+
import Style from 'ol/style/Style';
10+
import Icon from 'ol/style/Icon';
11+
import Circle from 'ol/style/Circle';
12+
import Fill from 'ol/style/Fill';
13+
import Point from 'ol/geom/Point';
14+
import Feature from 'ol/Feature';
15+
import Collection from 'ol/Collection';
16+
import Translate from 'ol/interaction/Translate';
17+
import { CircularProgress } from '@material/mwc-circular-progress';
18+
import { Slider } from '@material/mwc-slider';
19+
import * as d3 from 'd3';
20+
import { geoAitoff } from 'd3-geo-projection';
21+
import * as topojson from 'topojson-client';
22+
import debounce from 'lodash-es/debounce';
23+
24+
const ol = {
25+
Map, View, TileLayer, VectorLayer, OSM, Vector,
26+
GeoJSON, WKB,
27+
Point, Feature, Collection,
28+
Translate,
29+
Style, Circle, Fill, Icon
30+
};
31+
32+
export {
33+
ol,
34+
d3, geoAitoff,
35+
topojson,
36+
debounce,
37+
CircularProgress, Slider
38+
}

‎examples/lib/lib.js

Lines changed: 456 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)