Mercurial > gemma

annotate client/src/components/Map.jsx @ 483:27502291e564

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
docs: Added comments on non trivial parts of the code
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 24 Aug 2018 10:50:58 +0200
parents 89f1aa33adcf
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
483
27502291e564 docs: Added comments on non trivial parts of the code
Thomas Junk <thomas.junk@intevation.de>
parents: 275
diff changeset
1 /**
27502291e564 docs: Added comments on non trivial parts of the code
Thomas Junk <thomas.junk@intevation.de>
parents: 275
diff changeset
2 * Map comonent and integration point with open layers
27502291e564 docs: Added comments on non trivial parts of the code
Thomas Junk <thomas.junk@intevation.de>
parents: 275
diff changeset
3 * Currently JSX was chosen to have more programmatic control
27502291e564 docs: Added comments on non trivial parts of the code
Thomas Junk <thomas.junk@intevation.de>
parents: 275
diff changeset
4 * over resulting HTML
27502291e564 docs: Added comments on non trivial parts of the code
Thomas Junk <thomas.junk@intevation.de>
parents: 275
diff changeset
5 *
27502291e564 docs: Added comments on non trivial parts of the code
Thomas Junk <thomas.junk@intevation.de>
parents: 275
diff changeset
6 * May change in the future
27502291e564 docs: Added comments on non trivial parts of the code
Thomas Junk <thomas.junk@intevation.de>
parents: 275
diff changeset
7 *
27502291e564 docs: Added comments on non trivial parts of the code
Thomas Junk <thomas.junk@intevation.de>
parents: 275
diff changeset
8 */
27502291e564 docs: Added comments on non trivial parts of the code
Thomas Junk <thomas.junk@intevation.de>
parents: 275
diff changeset
9
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
10 /*eslint no-unused-vars: ["error", { "args": "none" }]*/
123
92e0c636e67c Upgraded to current Version of OpenLayers
Thomas Junk <thomas.junk@intevation.de>
parents: 117
diff changeset
11 import "ol/ol.css";
92e0c636e67c Upgraded to current Version of OpenLayers
Thomas Junk <thomas.junk@intevation.de>
parents: 117
diff changeset
12 import { Map, View } from "ol";
92e0c636e67c Upgraded to current Version of OpenLayers
Thomas Junk <thomas.junk@intevation.de>
parents: 117
diff changeset
13 import TileLayer from "ol/layer/Tile";
92e0c636e67c Upgraded to current Version of OpenLayers
Thomas Junk <thomas.junk@intevation.de>
parents: 117
diff changeset
14 import OSM from "ol/source/OSM";
275
89f1aa33adcf style: corrected coding style
Thomas Junk <thomas.junk@intevation.de>
parents: 264
diff changeset
15 import TileWMS from "ol/source/TileWMS.js";
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
16
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
17 export default {
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
18 render(h) {
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
19 return <div id="map" />;
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
20 },
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
21 data() {
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
22 return {
264
78f96f168b59 Online Map: Fix projection and add TileWMS sample
Frank Koormann <frank@intevation.de>
parents: 153
diff changeset
23 lat: 6155376,
78f96f168b59 Online Map: Fix projection and add TileWMS sample
Frank Koormann <frank@intevation.de>
parents: 153
diff changeset
24 long: 1819178,
78f96f168b59 Online Map: Fix projection and add TileWMS sample
Frank Koormann <frank@intevation.de>
parents: 153
diff changeset
25 zoom: 11,
78f96f168b59 Online Map: Fix projection and add TileWMS sample
Frank Koormann <frank@intevation.de>
parents: 153
diff changeset
26 projection: "EPSG:3857"
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
27 };
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
28 },
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
29 mounted() {
123
92e0c636e67c Upgraded to current Version of OpenLayers
Thomas Junk <thomas.junk@intevation.de>
parents: 117
diff changeset
30 new Map({
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
31 layers: [
123
92e0c636e67c Upgraded to current Version of OpenLayers
Thomas Junk <thomas.junk@intevation.de>
parents: 117
diff changeset
32 new TileLayer({
92e0c636e67c Upgraded to current Version of OpenLayers
Thomas Junk <thomas.junk@intevation.de>
parents: 117
diff changeset
33 source: new OSM()
275
89f1aa33adcf style: corrected coding style
Thomas Junk <thomas.junk@intevation.de>
parents: 264
diff changeset
34 }),
264
78f96f168b59 Online Map: Fix projection and add TileWMS sample
Frank Koormann <frank@intevation.de>
parents: 153
diff changeset
35 new TileLayer({
78f96f168b59 Online Map: Fix projection and add TileWMS sample
Frank Koormann <frank@intevation.de>
parents: 153
diff changeset
36 source: new TileWMS({
275
89f1aa33adcf style: corrected coding style
Thomas Junk <thomas.junk@intevation.de>
parents: 264
diff changeset
37 url: "https://demo.d4d-portal.info/wms",
89f1aa33adcf style: corrected coding style
Thomas Junk <thomas.junk@intevation.de>
parents: 264
diff changeset
38 params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true }
264
78f96f168b59 Online Map: Fix projection and add TileWMS sample
Frank Koormann <frank@intevation.de>
parents: 153
diff changeset
39 })
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
40 })
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
41 ],
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
42 target: "map",
123
92e0c636e67c Upgraded to current Version of OpenLayers
Thomas Junk <thomas.junk@intevation.de>
parents: 117
diff changeset
43 view: new View({
117
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
44 center: [this.long, this.lat],
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
45 zoom: this.zoom,
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
46 projection: this.projection
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
47 })
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
48 });
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
49 }
5e95c62a7e74 Move component. Re-add Css.
Thomas Junk <thomas.junk@intevation.de>
parents:
diff changeset
50 };