Commit 9e2c4717 authored by Florent Chehab's avatar Florent Chehab

Fix map size

parent fe67608e
import React from 'react';
import MyComponent from '../MyComponent'
import {connect} from "react-redux";
import { connect } from "react-redux";
import { Map, TileLayer, LayersControl, LayerGroup } from 'react-leaflet';
import UnivMarkers from './UnivMakers';
......@@ -8,107 +8,124 @@ import UnivMarkers from './UnivMakers';
import { saveMainMapPosition } from '../../actions/map'
class UnivMap extends MyComponent {
constructor() {
super();
this.state = {
leaflet_instance: null
};
}
componentWillUnmount() {
let l = this.state.leaflet_instance;
if (l) {
let selected_layer = "";
if (this.state.selected_layer) {
selected_layer = this.state.selected_layer;
} else {
selected_layer = this.props.map.selected_layer;
}
let center = [l.getCenter().lat, l.getCenter().lng];
this.props.saveMainMap({
zoom: l.getZoom(),
center,
selected_layer
})
}
}
saveLeafletInstance = (l) => {
this.setState(Object.assign({},this.state, {
leaflet_instance: l,
}))
}
constructor() {
super();
this.state = {
leaflet_instance: null,
height: 800,
};
}
saveSelectedLayer = (e) => {
this.setState(Object.assign({},this.state, {
selected_layer: e.name,
}))
updateDimensions() {
try {
const height = window.innerHeight - document.getElementById('MySuperMap').getBoundingClientRect().y;
this.setState({ height: Math.round(0.9 * height) })
}
myRender() {
let stamen_name = "Stamen Watercolor";
let osm_fr_name = "OpenStreetMap France";
let esri_name = "Esri WorldImagery";
return (
<Map center={this.props.map.center} zoom={this.props.map.zoom} style={{ height: "800px" }} whenReady={(e) => this.saveLeafletInstance(e.target)} onBaselayerchange={(e) => this.saveSelectedLayer(e)}>
<LayersControl position="topright">
<LayersControl.BaseLayer name={osm_fr_name} checked={this.props.map.selected_layer == osm_fr_name}>
<TileLayer
attribution='&copy; Openstreetmap France | &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
url="https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png"
maxZoom={20}
/>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name={stamen_name} checked={this.props.map.selected_layer == stamen_name}>
<LayerGroup>
<TileLayer
attribution='Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
url="https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png"
minZoom={1}
maxZoom={18}
subdomains='abcd'
/>
<TileLayer
attribution='Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
url="https://stamen-tiles-{s}.a.ssl.fastly.net/toner-labels/{z}/{x}/{y}.png"
minZoom={1}
subdomains='abcd'
maxZoom={18}
/>
</LayerGroup>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name={esri_name} checked={this.props.map.selected_layer == esri_name}>
<TileLayer
attribution="Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
/>
</LayersControl.BaseLayer>
</LayersControl>
<UnivMarkers />
</Map>
);
catch (err) { }
}
componentWillMount() {
this.updateDimensions()
}
myComponentDidMount() {
window.addEventListener("resize", this.updateDimensions.bind(this))
}
componentWillUnmount() {
let l = this.state.leaflet_instance;
if (l) {
let selected_layer = "";
if (this.state.selected_layer) {
selected_layer = this.state.selected_layer;
} else {
selected_layer = this.props.map.selected_layer;
}
let center = [l.getCenter().lat, l.getCenter().lng];
this.props.saveMainMap({
zoom: l.getZoom(),
center,
selected_layer
})
}
window.removeEventListener("resize", this.updateDimensions.bind(this))
}
saveLeafletInstance = (l) => {
this.setState(Object.assign({}, this.state, {
leaflet_instance: l,
}))
}
saveSelectedLayer = (e) => {
this.setState(Object.assign({}, this.state, {
selected_layer: e.name,
}))
}
myRender() {
let stamen_name = "Stamen Watercolor";
let osm_fr_name = "OpenStreetMap France";
let esri_name = "Esri WorldImagery";
return (
<Map id={"MySuperMap"} center={this.props.map.center} zoom={this.props.map.zoom} style={{ height: this.state.height }} whenReady={(e) => this.saveLeafletInstance(e.target)} onBaselayerchange={(e) => this.saveSelectedLayer(e)}>
<LayersControl position="topright">
<LayersControl.BaseLayer name={osm_fr_name} checked={this.props.map.selected_layer == osm_fr_name}>
<TileLayer
attribution='&copy; Openstreetmap France | &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
url="https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png"
maxZoom={20}
/>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name={stamen_name} checked={this.props.map.selected_layer == stamen_name}>
<LayerGroup>
<TileLayer
attribution='Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
url="https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png"
minZoom={1}
maxZoom={18}
subdomains='abcd'
/>
<TileLayer
attribution='Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
url="https://stamen-tiles-{s}.a.ssl.fastly.net/toner-labels/{z}/{x}/{y}.png"
minZoom={1}
subdomains='abcd'
maxZoom={18}
/>
</LayerGroup>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name={esri_name} checked={this.props.map.selected_layer == esri_name}>
<TileLayer
attribution="Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
/>
</LayersControl.BaseLayer>
</LayersControl>
<UnivMarkers />
</Map>
);
}
}
const mapStateToProps = (state) => {
return {
map: state.app.mainMap
};
return {
map: state.app.mainMap
};
};
const mapDispatchToProps = (dispatch) => {
return {
saveMainMap: (pos) => dispatch(saveMainMapPosition(pos)),
};
return {
saveMainMap: (pos) => dispatch(saveMainMapPosition(pos)),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(UnivMap);
Markdown is supported
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