Skip to content
GitLab
Commit f86e2e24 authored by Valeriy Panov's avatar Valeriy Panov
Browse files

google map replaced with leaflet map

parent 9f32b5e5
Hide whitespace changes
Inline Side-by-side
assets/components/common/google/map/index.tsx deleted 100644 → 0
View file @ 9f32b5e5
import * as React from 'react';
import {withGoogleMap, GoogleMap, Marker} from 'react-google-maps';
const Map = ({onMapLoad, onMapClick, onMarkerRightClick, onMouseOut, position, marker}) => (
<GoogleMap
ref={ onMapLoad }
onClick={ onMapClick }
onMouseOut={ onMouseOut }
center={ position }
zoom={ 5 }
>
{ marker && <Marker { ...marker } onRightClick={ onMarkerRightClick }/> }
</GoogleMap>
);
export default withGoogleMap(Map);
assets/components/pages/dataset/dataset-stepper/steps/review-and-publish/LocationMap.tsx
View file @ f86e2e24
import * as React from 'react';
import {CircularProgress} from 'material-ui/Progress';
import {withStyles} from 'material-ui/styles';
import Grid from 'material-ui/Grid';
import Typography from 'material-ui/Typography';
import LocationIcon from 'material-ui-icons/LocationOn';
import Map from '../../../../../common/google/map';
import {Location} from '../../../../../../model/location.model';
let Map;
let Marker;
let TileLayer;
interface ILocationMapProps extends React.ClassAttributes<any> {
classes: any;
location: Location;
}
const styleSheet = {
progress: {
margin: '0 auto',
leafletContainer: {
width: '100%',
height: '300px',
},
gray: {
backgroundColor: '#F8F7F5',
......@@ -35,15 +38,18 @@ class LocationMap extends React.Component<ILocationMapProps, any> {
};
}
public componentDidMount() {
// leaflet map doesn't work on server (ssr)
Map = require('react-leaflet').Map;
Marker = require('react-leaflet').Marker;
TileLayer = require('react-leaflet').TileLayer;
}
private showMap = () => {
const show = !this.state.show;
this.setState({show});
}
private dummy = (e) => {
//
}
public render() {
const {classes, location} = this.props;
......@@ -65,27 +71,18 @@ class LocationMap extends React.Component<ILocationMapProps, any> {
{
this.state.show ?
(
<Map
containerElement={
<div tabIndex={ 0 } style={ {height: '300px'} }/>
}
mapElement={
<div style={ {height: '100%'} }/>
}
loadingElement={
(
<div style={ {height: '100%'} }>
<CircularProgress className={ classes.progress }/>
</div>
)
}
onMapLoad={ this.dummy }
onMapClick={ this.dummy }
onMarkerRightClick={ this.dummy }
onMouseOut={ this.dummy }
position={ position }
marker={ {position} }
/>
<div className={ classes.leafletContainer }>
<Map
center={ position }
zoom={ 6 }
>
<TileLayer
attribution={ '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }
url={ 'http://{s}.tile.osm.org/{z}/{x}/{y}.png' }
/>
{ position && <Marker position={ position }/> }
</Map>
</div>
)
: null
}
......
assets/components/pages/dataset/dataset-stepper/steps/timing-and-location/FormMap.tsx
View file @ f86e2e24
import * as React from 'react';
import {withGoogleMap, GoogleMap, Marker} from 'react-google-maps';
import {CircularProgress} from 'material-ui/Progress';
import {withStyles} from 'material-ui/styles';
import Map from '../../../../../common/google/map';
declare const google: any;
const geocoder = typeof window !== 'undefined' && new google.maps.Geocoder; // tslint:disable-line
let Map;
let Marker;
let TileLayer;
interface IFormMapProps extends React.ClassAttributes<any> {
classes: any;
locations: [{
decimalLatitude: any,
decimalLongitude: any,
decimalLatitude: any,
decimalLongitude: any,
mapCountry: any,
}];
}];
onMouseOut: () => any;
}
const styleSheet = {
nextSection: {
leafletContainer: {
width: '100%',
padding: '20px',
textAlign: 'center',
},
progress: {
margin: `0 auto`,
height: '300px',
},
};
......@@ -41,6 +34,11 @@ class FormMap extends React.Component<IFormMapProps, any> {
}
public componentDidMount() {
// leaflet map doesn't work on server (ssr)
Map = require('react-leaflet').Map;
Marker = require('react-leaflet').Marker;
TileLayer = require('react-leaflet').TileLayer;
const {decimalLatitude, decimalLongitude} = this.props.locations.find((e) => !!e);
if (decimalLatitude.input.value && decimalLongitude.input.value) {
......@@ -52,36 +50,11 @@ class FormMap extends React.Component<IFormMapProps, any> {
}
}
protected onMapLoad = (e) => {
//
}
protected onMapClick = (e) => {
const {decimalLatitude, decimalLongitude, mapCountry} = this.props.locations.find((e) => !!e);
decimalLatitude.input.onChange(e.latLng.lat());
decimalLongitude.input.onChange(e.latLng.lng());
this.geocodeLatLng({lat: e.latLng.lat(), lng: e.latLng.lng()}, (result) => {
mapCountry.input.onChange(result[1].short_name);
});
}
const {decimalLatitude, decimalLongitude} = this.props.locations.find((e) => !!e);
protected geocodeLatLng = (position, callback) => {
geocoder.geocode({location: position}, (results, status) => {
if (status === 'OK') {
const result = results
.find((e) => e.types.indexOf('political') > -1 && e.types.indexOf('administrative_area_level_1') > -1);
if (result) {
callback(result.address_components);
} else {
console.log('No results found');
}
} else {
console.error('Geocoder failed due to: ' + status);
}
});
decimalLatitude.input.onChange(e.latlng.lat);
decimalLongitude.input.onChange(e.latlng.lng);
}
protected onMarkerRightClick = () => {
......@@ -92,6 +65,10 @@ class FormMap extends React.Component<IFormMapProps, any> {
}
public render() {
if (!Map) {
return null;
}
const {classes, locations} = this.props;
const {decimalLatitude, decimalLongitude} = locations.find((e) => !!e);
......@@ -105,27 +82,20 @@ class FormMap extends React.Component<IFormMapProps, any> {
}
return (
<Map
containerElement={
<div tabIndex={ 0 } style={ {height: `300px`} }/>
}
mapElement={
<div style={ {height: `100%`} }/>
}
loadingElement={
(
<div style={ {height: `100%`} }>
<CircularProgress className={ classes.progress }/>
</div>
)
}
onMapLoad={ this.onMapLoad }
onMapClick={ this.onMapClick }
onMarkerRightClick={ this.onMarkerRightClick }
onMouseOut={ this.props.onMouseOut }
position={ this.state }
marker={ position && {position} }
/>
<div className={ classes.leafletContainer }>
<Map
center={ this.state }
onClick={ this.onMapClick }
onMouseout={ this.props.onMouseOut }
zoom={ 6 }
>
<TileLayer
attribution={ '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }
url={ 'http://{s}.tile.osm.org/{z}/{x}/{y}.png' }
/>
{ position && <Marker onContextmenu={ this.onMarkerRightClick } position={ position }/> }
</Map>
</div>
);
};
......
assets/vendor/main.ts
View file @ f86e2e24
......@@ -13,3 +13,5 @@ require('material-design-icons/iconfont/material-icons.css');
require('roboto-fontface/css/roboto/roboto-fontface.css');
// flexboxgrid
// require('flexboxgrid/dist/flexboxgrid.css');
// leaflet map
require('leaflet/dist/leaflet.css');
config/webpack-base.config.js
View file @ f86e2e24
......@@ -15,7 +15,6 @@ const PORT = process.env.PORT;
const GOOGLE_CLIENT_ID = process.env.GOOGLE_CLIENT_ID;
const CATALOG_API_URL = process.env.CATALOG_API_URL;
const SSR = process.env.SSR;
const GOOGLE_MAPS_API_KEY = process.env.GOOGLE_MAPS_API_KEY;
const sortedChunks = function(list) {
return function(chunk1, chunk2) {
......@@ -174,7 +173,13 @@ module.exports = {
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
exclude: /node_modules\/leaflet/,
loader: 'url-loader?limit=100000&name=images/[name].[ext]'
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
include: /node_modules\/leaflet/,
loader: 'file-loader?limit=100000&name=images/[name].[ext]'
}
]
},
......@@ -186,7 +191,6 @@ module.exports = {
new webpack.DefinePlugin({
'process.env': {
GOOGLE_CLIENT_ID: JSON.stringify(GOOGLE_CLIENT_ID),
GOOGLE_MAPS_API_KEY: JSON.stringify(GOOGLE_MAPS_API_KEY),
SSR: JSON.stringify(SSR)
}
}),
......@@ -220,8 +224,7 @@ module.exports = {
template: './index.html',
chunksSortMode: sortedChunks(['vendor', 'common', 'catalog']),
chunks: ['vendor', 'common', 'catalog'],
favicon: './favicon.ico',
apiKey: GOOGLE_MAPS_API_KEY
favicon: './favicon.ico'
}),
......@@ -235,15 +238,15 @@ module.exports = {
template: './react.html',
chunksSortMode: sortedChunks(['vendor', 'common', 'catalog']),
chunks: ['vendor', 'common', 'catalog'],
favicon: './favicon.ico',
apiKey: GOOGLE_MAPS_API_KEY
favicon: './favicon.ico'
}),
// Keep CSS separate
new ExtractTextPlugin('[name].[contenthash].css'),
new CopyWebpackPlugin([
{ from: 'images', to: 'images'}
{ from: 'images', to: 'images'},
{ from: 'node_modules/leaflet/dist/images', to: 'images'}
])
]
};
index.html
View file @ f86e2e24
......@@ -6,7 +6,6 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes" />
<meta name="author" content="Genesys Team, helpdesk@genesys-pgr.org" />
<script src="https://maps.googleapis.com/maps/api/js?key=<%= htmlWebpackPlugin.options.apiKey %>&language=en"></script>
</head>
<body>
......
react.html
View file @ f86e2e24
......@@ -6,7 +6,6 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes" />
<meta name="author" content="Genesys Team, helpdesk@genesys-pgr.org" />
<script src="https://maps.googleapis.com/maps/api/js?key=<%= htmlWebpackPlugin.options.apiKey %>&language=en"></script>
</head>
<body>
......
styles/app.styles.scss
View file @ f86e2e24
......@@ -313,4 +313,9 @@ a:visited {
}
}
}
}
.leaflet-container {
height: inherit;
width: inherit;
}
\ No newline at end of file
Supports Markdown
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