diff --git a/src/components/Map.jsx b/src/components/Map.jsx index 741cb3e..7bbb689 100644 --- a/src/components/Map.jsx +++ b/src/components/Map.jsx @@ -19,7 +19,6 @@ class Map extends React.Component { this.svgRef = React.createRef(); this.map = null; this.state = { - isInitialized: false, mapTransformX: 0, mapTransformY: 0 } @@ -71,14 +70,15 @@ class Map extends React.Component { map.on("move", () => this.alignLayers()); map.on("zoomend viewreset moveend", () => this.alignLayers()); + map.on('zoomstart', () => { if (this.svgRef.current !== null) this.svgRef.current.classList.add('hide') }); + map.on('zoomend', () => { if (this.svgRef.current !== null) this.svgRef.current.classList.remove('hide'); }); + this.addResizeListener(); this.mapLogic = new MapLogic(map, this.svgRef.current, this.props.app, this.props.ui); this.mapLogic.update(this.props.app); this.map = map; - - this.setState({ isInitialized: true }); } addResizeListener() { @@ -193,10 +193,10 @@ class Map extends React.Component {
{this.renderSVG()} - {(this.state.isInitialized) ? this.renderMarkers() : ''} - {(this.state.isInitialized) ? this.renderSites() : ''} - {(this.state.isInitialized) ? this.renderEvents() : ''} - {(this.state.isInitialized) ? this.renderNarratives() : ''} + {(this.map !== null) ? this.renderMarkers() : ''} + {(this.map !== null) ? this.renderSites() : ''} + {(this.map !== null) ? this.renderEvents() : ''} + {(this.map !== null) ? this.renderNarratives() : ''}
); } diff --git a/src/components/MapEvents.jsx b/src/components/MapEvents.jsx index 84cf6c4..479736b 100644 --- a/src/components/MapEvents.jsx +++ b/src/components/MapEvents.jsx @@ -46,6 +46,7 @@ class MapEvents extends React.Component { {Object.keys(eventsByCategory).map(cat => { return this.renderCategory(eventsByCategory[cat], cat)