65 |
66 |
67 |
68 | );
69 | }
70 | } );
71 |
72 | export default Compass;
73 |
--------------------------------------------------------------------------------
/src/views/container.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2020 (c) Felix Palmer
3 | *
4 | * This Source Code Form is subject to the terms of the Mozilla Public
5 | * License, v. 2.0. If a copy of the MPL was not distributed with this
6 | * file, You can obtain one at https://mozilla.org/MPL/2.0/.
7 | */
8 | import React from 'react';
9 | // So we can inline the styles wrapping the engine, use this simple
10 | // component, to wrap other parts of app
11 | var Container = React.createClass( {
12 | render: function () {
13 | var outerStyle = {
14 | position: 'relative',
15 | height: '100%',
16 | overflow: 'hidden'
17 | };
18 | var innerStyle = {
19 | fontSize: '14px',
20 | color: '#fff',
21 | position: 'absolute',
22 | top: 0,
23 | bottom: 0,
24 | left: 0,
25 | right: 0
26 | };
27 | return (
28 |
29 |
30 | {this.props.children}
31 |
32 |
33 | );
34 | }
35 | } );
36 |
37 | export default Container;
38 |
--------------------------------------------------------------------------------
/src/views/credits.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2020 (c) Felix Palmer
3 | *
4 | * This Source Code Form is subject to the terms of the Mozilla Public
5 | * License, v. 2.0. If a copy of the MPL was not distributed with this
6 | * file, You can obtain one at https://mozilla.org/MPL/2.0/.
7 | */
8 | import React from 'react';
9 | import AppStore from '/stores/app';
10 | import uiFont from '/utils/uiFont';
11 | const style = {
12 | position : 'absolute',
13 | bottom : 0, right: 0,
14 | paddingTop: 1, paddingBottom: 1, paddingLeft: 4, paddingRight: 4,
15 | fontFamily : uiFont,
16 | textAlign : 'right',
17 | textTransform : 'none',
18 | color : 'white',
19 | background: 'rgba( 255, 255, 255, 0.1 )'
20 | };
21 | const pStyle = { color: 'white', fontSize : '6pt', margin: 0 };
22 |
23 | const Credits = React.createClass( {
24 | getInitialState: () => AppStore.getState().datasource,
25 | componentDidMount: function () {
26 | AppStore.listen( this.onStoreChange );
27 | this.onStoreChange( AppStore.getState() );
28 | },
29 | onStoreChange: function ( { datasource } ) {
30 | this.setState( datasource );
31 | },
32 | render: function () {
33 | let credits = [];
34 | if ( this.state.elevation && this.state.elevation.attribution ) {
35 | credits.push( this.state.elevation.attribution );
36 | }
37 | if ( this.state.imagery && this.state.imagery.attribution ) {
38 | credits.push( this.state.imagery.attribution );
39 | }
40 |
41 | // Inject link styles
42 | let aStyle = `color: ${pStyle.color}; font-size: ${pStyle.fontSize}; margin: ${pStyle.margin}; text-decoration: underline;`;
43 | credits = credits.map( credit =>
44 | credit.replace( /
49 | Data: { credits.map( credit =>
50 | <>
51 |
52 |
53 | ) }
54 |
55 |
56 | );
57 | }
58 | } );
59 |
60 | export default Credits;
61 |
--------------------------------------------------------------------------------
/src/views/engine.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2020 (c) Felix Palmer
3 | *
4 | * This Source Code Form is subject to the terms of the Mozilla Public
5 | * License, v. 2.0. If a copy of the MPL was not distributed with this
6 | * file, You can obtain one at https://mozilla.org/MPL/2.0/.
7 | */
8 | import React from 'react';
9 | import ContainerStore from '/stores/container';
10 | import ErrorStore from '/stores/error';
11 | import renderer from '/renderer';
12 | import RenderActions from '/actions/render';
13 | var container = ContainerStore.getState().element;
14 | var Engine = React.createClass( {
15 | componentDidMount: function () {
16 | var domNode = this.base || this.getDOMNode();
17 | domNode.appendChild( container );
18 | container.appendChild( renderer.domElement );
19 | setTimeout( function () { RenderActions.containerMounted(); }, 0 );
20 | ErrorStore.listen( this.onError );
21 | this.setState( this.getInitialState() );
22 | },
23 | getInitialState: function () {
24 | return { error: ErrorStore.getState().message }
25 | },
26 | onError: function ( state ) {
27 | if ( state.displayErrors ) {
28 | this.setState( { error: state.message } );
29 | }
30 | },
31 | render: function () {
32 | var style = {
33 | width: '100%',
34 | height: '100%',
35 | touchAction: 'none'
36 | }
37 | if ( this.state.error ) {
38 | var errorContainerStyle = {
39 | position: 'absolute',
40 | width: '100%',
41 | height: '100%',
42 | zIndex: 10,
43 | background: 'black',
44 | };
45 | var errorStyle = {
46 | padding: 10,
47 | textAlign: 'center'
48 | };
49 | return (
50 |
51 |
52 |
Error
53 |
{this.state.error}
54 |
55 |
56 | );
57 | }
58 | return
;
59 | }
60 | } );
61 |
62 | export default Engine;
63 |
--------------------------------------------------------------------------------
/src/views/engineControlsBottom.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2020 (c) Felix Palmer
3 | *
4 | * This Source Code Form is subject to the terms of the Mozilla Public
5 | * License, v. 2.0. If a copy of the MPL was not distributed with this
6 | * file, You can obtain one at https://mozilla.org/MPL/2.0/.
7 | */
8 | import React from 'react';
9 | import ButtonRow from '/views/buttonRow.jsx';
10 | import CurrentLocationActions from '/actions/currentLocation';
11 | import UserInterfaceStore from '/stores/userInterface';
12 |
13 | // Listen for geolocation
14 | var userLocation = null;
15 | var registered = false;
16 | if ( 'geolocation' in navigator ) {
17 | var toggleTracking = function () {
18 | if ( !registered ) {
19 | navigator.geolocation.watchPosition( CurrentLocationActions.panToPosition );
20 | registered = true;
21 | }
22 |
23 | CurrentLocationActions.toggleTracking();
24 | }
25 | userLocation = {
26 | icon : 'b1 fa fa-location-arrow',
27 | action : toggleTracking
28 | }
29 | }
30 |
31 | var EngineControlsBottom = React.createClass( {
32 | getInitialState: function () {
33 | return UserInterfaceStore.getState();
34 | },
35 | componentDidMount: function () {
36 | UserInterfaceStore.listen( this.onStoreChange );
37 | this.setState( this.getInitialState() );
38 | },
39 | onStoreChange: function ( storeState ) {
40 | this.setState( storeState );
41 | },
42 | shouldComponentUpdate: function ( nextProps, nextState ) {
43 | return this.state.userLocationControlVisible !== nextState.userLocationControlVisible;
44 | },
45 | render: function () {
46 | var buttons = [];
47 | if ( this.state.userLocationControlVisible ) {
48 | buttons.push(
);
49 | }
50 | var style = {
51 | position: 'absolute',
52 | top: 'initial',
53 | bottom: 15,
54 | right: 8
55 | }
56 | return (
57 |
58 | {buttons}
59 |
60 | );
61 | }
62 | } );
63 |
64 | export default EngineControlsBottom;
65 |
--------------------------------------------------------------------------------
/src/views/logo.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright 2020 (c) Felix Palmer
3 | *
4 | * This Source Code Form is subject to the terms of the Mozilla Public
5 | * License, v. 2.0. If a copy of the MPL was not distributed with this
6 | * file, You can obtain one at https://mozilla.org/MPL/2.0/.
7 | */
8 | import React from 'react';
9 | import logoStyle from '/views/logoStyle.css';
10 | var Logo = React.createClass( {
11 | render: function () {
12 | var style = {};
13 | if ( this.props.color ) {
14 | style.background = this.props.color;
15 | }
16 | return (
17 |
18 |
19 |
20 |
21 |
22 |
23 |