From f61397b07126acc0dba72c2549fbf279e49c21da Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Tue, 5 Feb 2019 17:21:00 +0200
Subject: [PATCH] Add colors for markers and grey marker clusters
---
src/client/components/LeafletMap.js | 90 +++++++++++++++++++++--------
src/client/index.html | 6 ++
2 files changed, 71 insertions(+), 25 deletions(-)
diff --git a/src/client/components/LeafletMap.js b/src/client/components/LeafletMap.js
index c7429ece..fa97e3a9 100644
--- a/src/client/components/LeafletMap.js
+++ b/src/client/components/LeafletMap.js
@@ -28,6 +28,12 @@ import 'Leaflet.extra-markers/dist/css/leaflet.extra-markers.min.css';
import 'Leaflet.extra-markers/dist/img/markers_default.png';
import 'Leaflet.extra-markers/dist/img/markers_shadow.png';
+import markerShadowIcon from '../img/markers/marker-shadow.png';
+import markerIconViolet from '../img/markers/marker-icon-violet.png';
+import markerIconGreen from '../img/markers/marker-icon-green.png';
+import markerIconRed from '../img/markers/marker-icon-red.png';
+import markerIconOrange from '../img/markers/marker-icon-orange.png';
+
const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoiZWtrb25lbiIsImEiOiJjam5vampzZ28xd2dyM3BzNXR0Zzg4azl4In0.eozyF-bBaZbA3ibhvJlJpQ';
const style = {
@@ -50,16 +56,16 @@ const styles = () => ({
},
});
-// https://github.com/pointhi/leaflet-color-markers
-// const ColorIcon = L.Icon.extend({
-// options: {
-// shadowUrl: 'img/markers/marker-shadow.png',
-// iconSize: [25, 41],
-// iconAnchor: [12, 41],
-// popupAnchor: [1, -34],
-// shadowSize: [41, 41]
-// }
-// });
+//https://github.com/pointhi/leaflet-color-markers
+const ColorIcon = L.Icon.extend({
+ options: {
+ shadowUrl: markerShadowIcon,
+ iconSize: [25, 41],
+ iconAnchor: [12, 41],
+ popupAnchor: [1, -34],
+ shadowSize: [41, 41]
+ }
+});
class LeafletMap extends React.Component {
@@ -204,7 +210,12 @@ class LeafletMap extends React.Component {
}
});
} else {
- clusterer = new L.MarkerClusterGroup();
+ clusterer = new L.MarkerClusterGroup({
+ iconCreateFunction: cluster => {
+ const childCount = cluster.getChildCount();
+ return new L.DivIcon({ html: '<div><span>' + childCount + '</span></div>', className: 'marker-cluster marker-cluster-grey', iconSize: new L.Point(40, 40) });
+ }
+ });
}
results.forEach(value => {
@@ -224,21 +235,50 @@ class LeafletMap extends React.Component {
} else {
const { lat, long } = result;
const latLng = [+lat, +long];
- // https://github.com/coryasilva/Leaflet.ExtraMarkers
- const icon = L.ExtraMarkers.icon({
- icon: 'fa-number',
- number: result.manuscriptCount,
- markerColor: 'red',
- shape: 'circle',
- prefix: 'fa'
- });
+ let marker = null;
+
+ if (this.props.variant === 'productionPlaces') {
+ // https://github.com/coryasilva/Leaflet.ExtraMarkers
+ const icon = L.ExtraMarkers.icon({
+ icon: 'fa-number',
+ number: result.manuscriptCount,
+ markerColor: 'red',
+ shape: 'circle',
+ prefix: 'fa'
+ });
+ marker = L.marker(latLng, {
+ icon: icon,
+ manuscriptCount: result.manuscriptCount ? result.manuscriptCount : null,
+ id: result.id
+ })
+ .on('click', this.markerOnClick);
+ } else {
+
+ const color = 'green';
+
+ let markerIcon = '';
+ switch(color) {
+ case 'violet':
+ markerIcon = markerIconViolet;
+ break;
+ case 'green':
+ markerIcon = markerIconGreen;
+ break;
+ case 'red':
+ markerIcon = markerIconRed;
+ break;
+ case 'orange':
+ markerIcon = markerIconOrange;
+ break;
+ }
+
+ marker = L.marker(latLng, {
+ icon: new ColorIcon({iconUrl: markerIcon }),
+ id: result.id
+ })
+ .on('click', this.markerOnClick);
+ }
- const marker = L.marker(latLng, {
- icon: icon,
- manuscriptCount: result.manuscriptCount ? result.manuscriptCount : null,
- id: result.id
- })
- .on('click', this.markerOnClick);
return marker;
}
}
diff --git a/src/client/index.html b/src/client/index.html
index b167b569..fd932362 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -29,6 +29,12 @@
font-size: 14px;
font-family: 'Roboto', sans-serif;
}
+ .marker-cluster-grey {
+ background-color: rgba(128,128,128, 0.6);
+ }
+ .marker-cluster-small div {
+ background-color: rgba(211,211,211, 0.6);
+ }
.rstcustom__rowWrapper {
display: flex;
align-items: center;
--
GitLab