Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Julien Jerphanion
Rex Dri
Commits
9e2c4717
Commit
9e2c4717
authored
Sep 17, 2018
by
Florent Chehab
Browse files
Fix map size
parent
fe67608e
Changes
1
Hide whitespace changes
Inline
Side-by-side
frontend/src/components/map/UnivMap.js
View file @
9e2c4717
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
)
=>
{
t
his
.
setState
(
Object
.
assign
({},
this
.
state
,
{
selected_layer
:
e
.
name
,
})
)
updateDimensions
()
{
t
ry
{
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
=
'
© Openstreetmap France | © <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> — Map data © <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> — Map data © <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 © Esri — 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
=
'
© Openstreetmap France | © <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> — Map data © <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> — Map data © <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 © Esri — 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
);
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment