vjrj
1153556f47
Desplegado en staging, el "montar el control de capas una sola vez" resultó peor que el bug que arreglaba: /fires seguía en gris Y además la portada y /zones —que sí pintaban— se quedaron también sin teselas. Con la clave real, el control acaba montándose después de que el mapa ya esté montado, y entonces no se le añade ninguna capa base. O sea que la carrera no se arregla retrasando el montaje: solo cambia de sitio. Staging revertido a la imagen anterior y comprobado que vuelve a estar como estaba (portada 36 teselas, /zones 18, /fires 0). Se conserva todo lo aprendido, que es lo que vale: el bug se reproduce en local poniendo una clave de Google en settings-ci.json (15 teselas sin clave, 0 con ella), NO es cosa del navegador sin pantalla, y e2e/tests/fires-map.spec.js lo deja como test.fixme para que aparezca en cada ejecución. El arreglo bueno pasa por decidir el conjunto de capas base ANTES de montar el mapa.
88 lines
2.7 KiB
JavaScript
88 lines
2.7 KiB
JavaScript
/* eslint-disable react/jsx-indent-props */
|
|
/* eslint-disable import/no-absolute-path */
|
|
/* eslint-disable import/no-absolute-path */
|
|
|
|
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { withTranslation } from 'react-i18next';
|
|
import GoogleMutantLayer from '/imports/ui/components/Maps/GoogleMutantLayer';
|
|
import Gkeys from '/imports/startup/client/Gkeys';
|
|
import { TileLayer, LayersControl } from 'react-leaflet';
|
|
|
|
const { BaseLayer } = LayersControl;
|
|
|
|
const defOpacity = 0.7;
|
|
|
|
class DefMapLayers extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
gkey: null
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
const self = this;
|
|
Gkeys.load((err, key) => {
|
|
self.setState({ gkey: key });
|
|
});
|
|
}
|
|
|
|
render() {
|
|
const { t } = this.props;
|
|
const osmgraylayer = (
|
|
<BaseLayer checked={this.props.gray} name={t('Mapa gris de OpenStreetMap')}>
|
|
<TileLayer
|
|
opacity={defOpacity}
|
|
attribution="© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors"
|
|
// url="https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png"
|
|
url="https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png"
|
|
/>
|
|
</BaseLayer>);
|
|
const osmlayer = (
|
|
<BaseLayer checked={this.props.osmcolor} name={t('Mapa color de OpenStreetMap')}>
|
|
<TileLayer
|
|
opacity={defOpacity}
|
|
attribution="&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors"
|
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
/>
|
|
</BaseLayer>);
|
|
return (
|
|
<LayersControl position="topleft">
|
|
{osmlayer}
|
|
{osmgraylayer}
|
|
{/* React.Fragment does not work here */}
|
|
{ this.state.gkey &&
|
|
<BaseLayer name={t('Mapa de carreteras de Google')}>
|
|
<GoogleMutantLayer opacity={defOpacity} maptype="ROADMAP" />
|
|
</BaseLayer> }
|
|
{ this.state.gkey &&
|
|
<BaseLayer name={t('Mapa de terreno de Google')} checked={this.props.terrain}>
|
|
<GoogleMutantLayer opacity={defOpacity} maptype="TERRAIN" />
|
|
</BaseLayer> }
|
|
{ this.state.gkey &&
|
|
<BaseLayer name={t('Mapa de satélite de Google')} checked={this.props.satellite}>
|
|
<GoogleMutantLayer opacity={defOpacity} maptype="SATELLITE" />
|
|
</BaseLayer> }
|
|
</LayersControl>
|
|
);
|
|
}
|
|
}
|
|
|
|
DefMapLayers.propTypes = {
|
|
t: PropTypes.func.isRequired,
|
|
gray: PropTypes.bool,
|
|
osmcolor: PropTypes.bool,
|
|
terrain: PropTypes.bool,
|
|
satellite: PropTypes.bool
|
|
|
|
};
|
|
|
|
DefMapLayers.defaultProps = {
|
|
gray: false,
|
|
osmcolor: false,
|
|
terrain: false,
|
|
satellite: false
|
|
};
|
|
|
|
export default withTranslation()(DefMapLayers);
|