Skip to content
Snippets Groups Projects
Commit 74c49498 authored by Esko Ikkala's avatar Esko Ikkala
Browse files

Add react-google-maps for creating a result heatmap

parent c2c6e294
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
package-lock.json
+ 84
− 12
View file @ 74c49498
...@@ -2676,6 +2676,11 @@ ...@@ -2676,6 +2676,11 @@
} }
} }
}, },
"can-use-dom": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/can-use-dom/-/can-use-dom-0.1.0.tgz",
"integrity": "sha1-IsxKNKCrxDlQ9CxkEQJKP2NmtFo="
},
"caniuse-api": { "caniuse-api": {
"version": "1.6.1", "version": "1.6.1",
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-1.6.1.tgz", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-1.6.1.tgz",
...@@ -5753,7 +5758,8 @@ ...@@ -5753,7 +5758,8 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
...@@ -5774,12 +5780,14 @@ ...@@ -5774,12 +5780,14 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
...@@ -5794,17 +5802,20 @@ ...@@ -5794,17 +5802,20 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
...@@ -5921,7 +5932,8 @@ ...@@ -5921,7 +5932,8 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
...@@ -5933,6 +5945,7 @@ ...@@ -5933,6 +5945,7 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
...@@ -5947,6 +5960,7 @@ ...@@ -5947,6 +5960,7 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
...@@ -5954,12 +5968,14 @@ ...@@ -5954,12 +5968,14 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.2.4", "version": "2.2.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.1", "safe-buffer": "^5.1.1",
"yallist": "^3.0.0" "yallist": "^3.0.0"
...@@ -5978,6 +5994,7 @@ ...@@ -5978,6 +5994,7 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
...@@ -6071,6 +6088,7 @@ ...@@ -6071,6 +6088,7 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
...@@ -6156,7 +6174,8 @@ ...@@ -6156,7 +6174,8 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.1", "version": "5.1.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
...@@ -6192,6 +6211,7 @@ ...@@ -6192,6 +6211,7 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
...@@ -6211,6 +6231,7 @@ ...@@ -6211,6 +6231,7 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
...@@ -6254,12 +6275,14 @@ ...@@ -6254,12 +6275,14 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.2", "version": "3.0.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
} }
} }
}, },
...@@ -6550,6 +6573,11 @@ ...@@ -6550,6 +6573,11 @@
"resolved": "https://registry.npmjs.org/google-maps/-/google-maps-3.3.0.tgz", "resolved": "https://registry.npmjs.org/google-maps/-/google-maps-3.3.0.tgz",
"integrity": "sha512-pj4En0cWKG+lcBvC7qrzu5ItiMsYNTgjG2capsPzAbAM/O8ftugGpUUftTTwdGL8KlNvB4CEZ6IBWwpWYzUEpw==" "integrity": "sha512-pj4En0cWKG+lcBvC7qrzu5ItiMsYNTgjG2capsPzAbAM/O8ftugGpUUftTTwdGL8KlNvB4CEZ6IBWwpWYzUEpw=="
}, },
"google-maps-infobox": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/google-maps-infobox/-/google-maps-infobox-2.0.0.tgz",
"integrity": "sha512-hTuWmWZZSOxf5D/z7l3/hTF1grgRvLG53BEKMdjiKOG+FcK/kH7vqseUeyIU9Zj2ZIqKTOaro0nknxpAuRq4Vw=="
},
"got": { "got": {
"version": "8.3.1", "version": "8.3.1",
"resolved": "https://registry.npmjs.org/got/-/got-8.3.1.tgz", "resolved": "https://registry.npmjs.org/got/-/got-8.3.1.tgz",
...@@ -9707,6 +9735,16 @@ ...@@ -9707,6 +9735,16 @@
"object-visit": "^1.0.0" "object-visit": "^1.0.0"
} }
}, },
"marker-clusterer-plus": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/marker-clusterer-plus/-/marker-clusterer-plus-2.1.4.tgz",
"integrity": "sha1-+O/3TVmdqzt9Dj/tUmTqDnBPXWc="
},
"markerwithlabel": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/markerwithlabel/-/markerwithlabel-2.0.1.tgz",
"integrity": "sha512-UnfHImP2rVpUHDa18/08DvOaMB1NjSkeE/wkiI7DgvflzcK3rKwb2DHU4u9tSEHfjf2piR/E7I9zGvUZRHivqg=="
},
"math-expression-evaluator": { "math-expression-evaluator": {
"version": "1.2.17", "version": "1.2.17",
"resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz", "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
...@@ -11934,6 +11972,37 @@ ...@@ -11934,6 +11972,37 @@
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-1.0.0.tgz", "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-1.0.0.tgz",
"integrity": "sha512-dcQpdWr62flXQJuM8/bVEY5/10ad2SYBUafp8H4q4WHR3fTA/MMlp8mpzX12I0CCoEJc1P6QdiMg7U+7lFS6Rw==" "integrity": "sha512-dcQpdWr62flXQJuM8/bVEY5/10ad2SYBUafp8H4q4WHR3fTA/MMlp8mpzX12I0CCoEJc1P6QdiMg7U+7lFS6Rw=="
}, },
"react-google-maps": {
"version": "9.4.5",
"resolved": "https://registry.npmjs.org/react-google-maps/-/react-google-maps-9.4.5.tgz",
"integrity": "sha512-8z5nX9DxIcBCXuEiurmRT1VXVwnzx0C6+3Es6lxB2/OyY2SLax2/LcDu6Aldxnl3HegefTL7NJzGeaKAJ61pOA==",
"requires": {
"babel-runtime": "^6.11.6",
"can-use-dom": "^0.1.0",
"google-maps-infobox": "^2.0.0",
"invariant": "^2.2.1",
"lodash": "^4.16.2",
"marker-clusterer-plus": "^2.1.4",
"markerwithlabel": "^2.0.1",
"prop-types": "^15.5.8",
"recompose": "^0.26.0",
"scriptjs": "^2.5.8",
"warning": "^3.0.0"
},
"dependencies": {
"recompose": {
"version": "0.26.0",
"resolved": "https://registry.npmjs.org/recompose/-/recompose-0.26.0.tgz",
"integrity": "sha512-KwOu6ztO0mN5vy3+zDcc45lgnaUoaQse/a5yLVqtzTK13czSWnFGmXbQVmnoMgDkI5POd1EwIKSbjU1V7xdZog==",
"requires": {
"change-emitter": "^0.1.2",
"fbjs": "^0.8.1",
"hoist-non-react-statics": "^2.3.1",
"symbol-observable": "^1.0.4"
}
}
}
},
"react-is": { "react-is": {
"version": "16.4.2", "version": "16.4.2",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.4.2.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.4.2.tgz",
...@@ -12793,7 +12862,6 @@ ...@@ -12793,7 +12862,6 @@
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
...@@ -12962,7 +13030,6 @@ ...@@ -12962,7 +13030,6 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
...@@ -13308,6 +13375,11 @@ ...@@ -13308,6 +13375,11 @@
"integrity": "sha1-o0a7Gs1CB65wvXwMfKnlZra63bg=", "integrity": "sha1-o0a7Gs1CB65wvXwMfKnlZra63bg=",
"dev": true "dev": true
}, },
"scriptjs": {
"version": "2.5.8",
"resolved": "https://registry.npmjs.org/scriptjs/-/scriptjs-2.5.8.tgz",
"integrity": "sha1-0MQ5VcLmutM7bk7fe1O4llqnyl8="
},
"section-iterator": { "section-iterator": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/section-iterator/-/section-iterator-2.0.0.tgz", "resolved": "https://registry.npmjs.org/section-iterator/-/section-iterator-2.0.0.tgz",
......
src/client/components/map/GMap.js 0 → 100644
+ 21
− 0
View file @ 74c49498
import React from 'react';
import { withScriptjs, withGoogleMap, GoogleMap } from 'react-google-maps';
import HeatmapLayer from 'react-google-maps/lib/components/visualization/HeatmapLayer';
let GMap = withScriptjs(withGoogleMap((props) =>
<GoogleMap
defaultZoom={4}
defaultCenter={{ lat: 65.184809, lng: 27.31405 }}
>
<HeatmapLayer data={
props.results.reduce((data, obj) => {
if (obj.hasOwnProperty('lat') && obj.hasOwnProperty('long')) {
data.push(new google.maps.LatLng(obj.lat, obj.long));
}
return data;
},[])
} />
</GoogleMap>
));
export default GMap;
src/client/containers/MapApp.js
+ 30
− 10
View file @ 74c49498
...@@ -12,8 +12,10 @@ import Paper from '@material-ui/core/Paper'; ...@@ -12,8 +12,10 @@ import Paper from '@material-ui/core/Paper';
import Immutable from 'immutable'; import Immutable from 'immutable';
import VirtualizedTable from '../components/VirtualizedTable'; import VirtualizedTable from '../components/VirtualizedTable';
import LeafletMap from '../components/map/LeafletMap'; import LeafletMap from '../components/map/LeafletMap';
import GMap from '../components/map/GMap';
import Pie from '../components/Pie'; import Pie from '../components/Pie';
import { import {
getVisibleResults, getVisibleResults,
getVisibleValues getVisibleValues
...@@ -65,8 +67,31 @@ const styles = theme => ({ ...@@ -65,8 +67,31 @@ const styles = theme => ({
}); });
let MapApp = (props) => { let MapApp = (props) => {
const { classes, error, analysisView } = props; const { classes, error, analysisView, heatMap } = props;
// console.log(props.results);
let map = '';
if (heatMap) {
map = (
<GMap
results={props.results}
googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKWw5FjhwLsfp_l2gjVAifPkT3cxGXhA4&v=3.exp&libraries=geometry,drawing,places,visualization"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `100%` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
);
} else {
map = (
<LeafletMap
sliderValue={100}
results={props.results}
geoJSON={props.geoJSON}
geoJSONKey={props.geoJSONKey}
getGeoJSON={props.getGeoJSON}
analysisView={props.analysisView}
/>
);
}
return ( return (
<div className={classes.root}> <div className={classes.root}>
...@@ -101,14 +126,7 @@ let MapApp = (props) => { ...@@ -101,14 +126,7 @@ let MapApp = (props) => {
</Grid> </Grid>
<Grid item xs={12} sm={analysisView ? 4 : 8}> <Grid item xs={12} sm={analysisView ? 4 : 8}>
<Paper className={classes.map}> <Paper className={classes.map}>
<LeafletMap {map}
sliderValue={100}
results={props.results}
geoJSON={props.geoJSON}
geoJSONKey={props.geoJSONKey}
getGeoJSON={props.getGeoJSON}
analysisView={props.analysisView}
/>
</Paper> </Paper>
<div className={classes.map}> <div className={classes.map}>
<Pie data={props.results} groupBy={props.search.groupBy} query={props.search.query} /> <Pie data={props.results} groupBy={props.search.groupBy} query={props.search.query} />
...@@ -126,6 +144,7 @@ const mapStateToProps = (state) => { ...@@ -126,6 +144,7 @@ const mapStateToProps = (state) => {
results: getVisibleResults(state.search), results: getVisibleResults(state.search),
resultValues: getVisibleValues(state.search), resultValues: getVisibleValues(state.search),
analysisView: state.options.analysisView, analysisView: state.options.analysisView,
heatMap: state.options.heatMap,
error: state.error, error: state.error,
geoJSON: state.map.geoJSON, geoJSON: state.map.geoJSON,
geoJSONKey: state.map.geoJSONKey, geoJSONKey: state.map.geoJSONKey,
...@@ -154,6 +173,7 @@ MapApp.propTypes = { ...@@ -154,6 +173,7 @@ MapApp.propTypes = {
search: PropTypes.object.isRequired, search: PropTypes.object.isRequired,
error: PropTypes.object.isRequired, error: PropTypes.object.isRequired,
analysisView: PropTypes.bool.isRequired, analysisView: PropTypes.bool.isRequired,
heatMap: PropTypes.bool.isRequired,
openAnalysisView: PropTypes.func.isRequired, openAnalysisView: PropTypes.func.isRequired,
closeAnalysisView: PropTypes.func.isRequired, closeAnalysisView: PropTypes.func.isRequired,
updateQuery: PropTypes.func.isRequired, updateQuery: PropTypes.func.isRequired,
......
src/client/reducers/options.js
+ 2
− 0
View file @ 74c49498
...@@ -7,12 +7,14 @@ import { ...@@ -7,12 +7,14 @@ import {
const DEFAULT_LANGUAGE = 'en'; const DEFAULT_LANGUAGE = 'en';
const DEFAULT_ANALYSIS_VIEW = true; const DEFAULT_ANALYSIS_VIEW = true;
const DEFAULT_HEATMAP = true;
const DEFAULT_RESULT_FORMAT = 'table'; const DEFAULT_RESULT_FORMAT = 'table';
export const INITIAL_STATE = { export const INITIAL_STATE = {
language: DEFAULT_LANGUAGE, language: DEFAULT_LANGUAGE,
resultFormat: DEFAULT_RESULT_FORMAT, resultFormat: DEFAULT_RESULT_FORMAT,
analysisView: DEFAULT_ANALYSIS_VIEW, analysisView: DEFAULT_ANALYSIS_VIEW,
heatMap: DEFAULT_HEATMAP
}; };
const options = (state = INITIAL_STATE, action) => { const options = (state = INITIAL_STATE, action) => {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment