From 90377d11de19db7a48a4732008b2322ba3020b17 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Wed, 29 Nov 2017 14:27:30 +0200
Subject: [PATCH] Use the 32x32 favicon as the map marker for easy
 customisation

---
 docs/colors-and-icons.md                   |  11 +++++++++--
 src/components/Map/Map.js                  |  20 +++++---------------
 src/components/Map/images/customMarker.png | Bin 875 -> 0 bytes
 src/components/Map/images/marker.png       | Bin 0 -> 1484 bytes
 4 files changed, 14 insertions(+), 17 deletions(-)
 delete mode 100644 src/components/Map/images/customMarker.png
 create mode 100644 src/components/Map/images/marker.png

diff --git a/docs/colors-and-icons.md b/docs/colors-and-icons.md
index 4dc9f9e6..11962cf3 100644
--- a/docs/colors-and-icons.md
+++ b/docs/colors-and-icons.md
@@ -3,7 +3,7 @@
 One of the first customisations is to change the marketplace colors
 and icons.
 
-# Colors
+## Colors
 
 To change the marketplace colors, open the
 [src/marketplace.css](../src/marketplace.css) file and change the
@@ -15,7 +15,7 @@ color variables:
 --marketplaceColorDark: #8c291e;
 ```
 
-# Icons
+## Icons
 
 The default icons are generated with
 [RealFaviconGenerator](https://realfavicongenerator.net/). You can
@@ -60,3 +60,10 @@ point to those images.
     <meta name="theme-color" content="#c0392b">
     <!-- End Favicons -->
    ```
+
+## Map marker icon
+
+The map marker icon in the listing can be found in
+[src/components/Map/images/marker.png](../src/components/Map/images/marker.png). The
+dimensions should be 32x32 pixels, so the `favicon-32x32.png` file can
+be used to replace the map icon.
diff --git a/src/components/Map/Map.js b/src/components/Map/Map.js
index 2645a25a..209b7f9c 100644
--- a/src/components/Map/Map.js
+++ b/src/components/Map/Map.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import * as propTypes from '../../util/propTypes';
 
-import CustomMarker from './images/customMarker.png';
+import CustomMarker from './images/marker.png';
 import css from './Map.css';
 
 class Map extends Component {
@@ -29,28 +29,18 @@ class Map extends Component {
 
     const customMarker = {
       url: CustomMarker,
-      // This marker is 21 pixels wide by 25 pixels high.
-      size: new window.google.maps.Size(21, 25),
+      // This marker is 32 pixels wide by 32 pixels high.
+      size: new window.google.maps.Size(32, 32),
       // The origin for this image is (0, 0).
       origin: new window.google.maps.Point(0, 0),
-      // The anchor for this image is the base of the flagpole at (10, 25).
-      anchor: new window.google.maps.Point(10, 25),
+      // The anchor for the marker is in the bottom center.
+      anchor: new window.google.maps.Point(16, 32),
     };
 
-    // Shapes define the clickable region of the icon. The type defines an HTML
-    // <area> element 'poly' which traces out a polygon as a series of X,Y points.
-    // The final coordinate closes the poly by connecting to the first coordinate.
-    const shape = {
-      coords: [1, 1, 1, 21, 25, 21, 25, 1],
-      type: 'poly',
-    };
-
-    // eslint-disable-next-line no-new
     new window.google.maps.Marker({
       position: centerLocation,
       map,
       icon: customMarker,
-      shape,
       title: address,
     });
   }
diff --git a/src/components/Map/images/customMarker.png b/src/components/Map/images/customMarker.png
deleted file mode 100644
index 9d12f8488e4f6db008c9a60805a5c50762d73e88..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 875
zcmV-x1C;!UP)<h;3K|Lk000e1NJLTq000#L000;W1^@s66^XV;00004XF*Lt006O%
z3;baP0009bNkl<ZI1!yxO=wd=5T4nW*k1!}{lSA`saT{*MYJG!O#&W75PuL$MJS5e
zn_!V5A|gEqf}jUarB*>itE5FmLGYBMX{zE+e^R9fEqG8+g4MS4$GkVrKHc;sc`4#v
zX6Bo3W@mP17r|jg{oY;z*nj{L)U><7{^6Gnw1N=F<*%5(?vP2)qdW*Wpb635I56^D
zVM|Hj<Sg|T_c5MQJ_6FyWX7X<-6iViaEwu0DIF`7j)=c53<L+IZeNIazsy_IvaRd&
zFFS763+~D-kK2h#C!*%*<Xo4son+yp2s2Ir7DjM1s@ESW<j*9PXT`UEqu=jskz~_^
zib6paZW>qPy1v|rlSvwT)_a{>J7xf#mPAC@>=d9d9=S?`CQm8bF0G4->fYmIQnzvl
z0j*@>HNN!{g*i#Sw2z@gvL@Guul8&$ok`74aFwevPDC!4w2Zxk;zrG<Cq|NXikM9;
zG-oB0-hWIesRo*jQV#E|FN^E-wNe)*nERyi-;1z1>h}dFr;N7-nRjF!<QxCQm9AYX
zDbMUIpKmA2T`V_caS^8Zk(65)V!GU0R4TaD)mfxm17Qf<q7H>NoR?5?RYFTASNg+z
zr66Ruz~a$(#~;a#P;6uZ$ZRS=%Yubbf&vLYXQ9gAR)hwJ1M$)C65^e!__TiT0H+lt
zS8@>x4J+4wla<DEoqz4#KzwXi`H*Ow=kkmjTn#L(jg)Uu;vj~@h5!K%7QsbL0Nz`)
z06azRwoqcUOHT|9fuJ_KPw6P=q0~jlwc;_il=mZ%i{2=*lv^T0lgf6l@r1e6+`C9E
z^OWC|9D$KYS|eyz0ZMv=Yf9<4(jOk=5yPK$TnIeB{pkw}vp$r-VDbr~xM(L$8MM)E
z+x7lNUj+}1M`2v`t>8eiQ`wncDmXB5!JgPOjFXC#EBUdU;NCeGFU0OLUvaCQ^T%OB
zVt(&#6W|Izidx>}EN^z1Z##2-{G%NJlX|%QuNuO+Kq7hD7H+9|NhL~6O<MHJ`@Q^E
z?dN)`_<4?*L<W;<WQ9E4kJh=X`l=(5x!i=({tXE?5Qn$&cq#w@002ovPDHLkV1jT9
Bm~sFB

diff --git a/src/components/Map/images/marker.png b/src/components/Map/images/marker.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2f8dc2b9ca02424804471e654a2edebf03f299e
GIT binary patch
literal 1484
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dyEa{HEjtmSN`?>!lvVtU&J%W50
z7^>757#dm_7=8hT8eT9klo~KFyh>nTu$sZZAYL$MSD+081LL^>pAc7|f&-S?2Q9Vt
zTWTK$F?4|3Q8W}o;Q#;s?zI<yvClB0B*-rqNCSaLqPsMc?z1nKr@3&k&i}l@f!X8h
zn?^ygOMh0$Zs}XX*YdlR(JS(?aoFn{GP7Cil7*ieh#okeR9W!%<-c8=XCEo~{^&66
z{1tL;)BANNoXsB|<=Lvxb(){|lrqO*?oU2zT355LJgGn7XZ^PbSDR%|)g2EBq+bw{
z+<s=G$?aQGH?Mm>_#SX~_h$M2<qNtEqZ;-$g$g~p4NQFuj7i?^E;AXgnXLeFI14-?
ziy0WWg+Z8+Vb&Z8pdfpRr>`sfLvCq4X;J;cMxZ?7eNPw15R22LlV3**1qvLiyr`tp
z72?7aqvdk_iiv}OmL99<%Bj<4P4~H^cVp_67kMiyJ@=$M{aI{VT{b;7VW$4?GiTn<
zEH6vz^HZ1Xlj@VqUa&gDqV7=1rzt;8v<z3QRc^TwEwx6JW5Go?&Z1-QRs^t|Q)5(^
z^LmXL<Ld5?vU4ju8J?>)?3lfk!Pds;!lhOEiU+pGt_akc@U1UNFr+l@&8ugztPL@r
z7J1yg?q^Z&KbeW8$<-mh<Jh6;zFZFLR+u!b7F@VF!-w_A`jrgNOM}unRStBAt}1+-
zW|{C=u~M5g@L^fts(#JFwttL|5>*4L-KXw*y{+Jo`LqSAcOS14JKOAKXH)XO@eyyo
z!2!d7jvl)sGgjUC!NRO|xah$}5xL``2TEo!#&tijpUHUX@<bMO=FM+*H7uX>|BYor
z?ZlbYKfSp2h_N>wGk-Mce$%bpI+xxb-E&gMPuMm|_%pY_tH9_r>5crBoCl7J9sK_#
zQp$c`$;M8}C#?rRhH|7ladv(;`$4_FjNFDV&1`j2sR@;>yH-1<K0dJC)ajb}l4Td&
zcHc8uy`C?Wcgw4M^)Eh!-LF!;*9rZ6n~~El$JqCzT)A=Yr{m1;<^3&E?%)6aJO9W3
zInS6`-+Pq)`pdpjX1$j@(-E^T1)F?wfh87$YKdz^NlIc#s#S7PDv)9@GB7mPH8j*U
zG7m8{u`)8ZGBVUQFtjo-u;=)29YsTKeoAIqC2kFVp&r>l4dGQG5hX#1<q8Ew`DvLs
zsR|{P1*r;|1trN03>9-8f8yaN4Aam!<$wB&=hGktW@T=@WNu+)VeiQz%)$yT4JL<E
vn3Xq&D4f1=<;0OQM`Vt$pKkD2;HAg#N?fqylauLGpcM?Bu6{1-oD!M<7I05O

literal 0
HcmV?d00001