diff --git a/src/components/Map.jsx b/src/components/Map.jsx
index 0451da5..4aa0b18 100644
--- a/src/components/Map.jsx
+++ b/src/components/Map.jsx
@@ -50,7 +50,13 @@ class Map extends React.Component {
const eventPoint = (nextProps.app.selected.length > 0) ? nextProps.app.selected[0] : null
if (eventPoint !== null && eventPoint.latitude && eventPoint.longitude) {
- this.map.setView([eventPoint.latitude, eventPoint.longitude])
+ // this.map.setView([eventPoint.latitude, eventPoint.longitude])
+ this.map.setView([eventPoint.latitude, eventPoint.longitude], this.map.getZoom(), {
+ "animate":true,
+ "pan":{
+ "duration": 0.7
+ }
+ })
}
}
}
@@ -207,6 +213,7 @@ class Map extends React.Component {
styleLocation={this.styleLocation}
categories={this.props.domain.categories}
projectPoint={this.projectPoint}
+ selected={this.props.app.selected}
narrative={this.props.app.narrative}
onSelect={this.props.methods.onSelect}
onSelectNarrative={this.props.methods.onSelectNarrative}
diff --git a/src/components/presentational/Map/Events.jsx b/src/components/presentational/Map/Events.jsx
index 2ab1ee4..eec2e70 100644
--- a/src/components/presentational/Map/Events.jsx
+++ b/src/components/presentational/Map/Events.jsx
@@ -1,13 +1,28 @@
import React from 'react'
import { Portal } from 'react-portal'
-function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation, narrative, onSelect, svg, locations }) {
+function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation, selected, narrative, onSelect, svg, locations }) {
function getCoordinatesForPercent (radius, percent) {
const x = radius * Math.cos(2 * Math.PI * percent)
const y = radius * Math.sin(2 * Math.PI * percent)
return [x, y]
}
+ function renderBorder() {
+ return (
+
+ {}
+
+ )
+ }
+
function renderLocationSlicesByCategory (location) {
const locCategory = location.events.length > 0 ? location.events[0].category : 'default'
const customStyles = styleLocation ? styleLocation(location) : null
@@ -94,16 +109,20 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,
const customStyles = styleLocation ? styleLocation(location) : null
const extraRender = (customStyles) ? customStyles[1] : null
- return (
- onSelect(location.events) : null}
- >
- {renderLocationSlicesByCategory(location)}
- {extraRender ? extraRender() : null}
-
+ const isSelected = selected.reduce( (acc, event) => {
+ return acc || (event.latitude == location.latitude && event.longitude == location.longitude)
+ }, false)
+ return (
+ onSelect(location.events) : null}
+ >
+ {renderLocationSlicesByCategory(location)}
+ {extraRender ? extraRender() : null}
+ {isSelected ? null : renderBorder()}
+
)
}
diff --git a/src/scss/map.scss b/src/scss/map.scss
index 966becf..b9c82c1 100644
--- a/src/scss/map.scss
+++ b/src/scss/map.scss
@@ -161,7 +161,15 @@
* Elements
*/
-.location {
+.event-hover {
+ opacity: 0;
+}
+
+.event-hover:hover {
+ opacity: 1;
+}
+
+.location-event {
cursor: pointer;
}