Anchor wird gross dargestellt per Button Klick

src/App.js

@@ -3,9 +3,10 @@ import React, { Component } from 'react'
 import './App.css'
 import Map from 'pigeon-maps'
 import Marker from 'pigeon-marker'
-import { geolocated } from "react-geolocated"
 
+import Overlay from 'pigeon-overlay'
 
+import pigeon from './pin-hover@2x.png'
 import Tables from './Tables';
 
 
@@ -42,10 +43,15 @@ const markers = {
   Lukas: [[48.1542134, 14.0052118], 10],
 }
 
+
+
 const lng2tile = (lon, zoom) => (lon + 180) / 360 * Math.pow(2, zoom)
 const lat2tile = (lat, zoom) => (1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) / Math.PI) / 2 * Math.pow(2, zoom)
 
-
+const overlay = {
+    longOver : [48.1542150],
+    latOver : [13.9952130]
+}
 
 function isMapBox (provider) {
   return provider === 'streets' || provider === 'satellite' || provider === 'outdoors' || provider === 'light' || provider === 'dark'
@@ -168,6 +174,7 @@ export default class App extends Component {
   updateLocation = () => {
     if (this.name!=null && navigator.geolocation) { //check if geolocation is available
       navigator.geolocation.getCurrentPosition(this.receivedPosition);
+	  
     }
   }
   
@@ -219,6 +226,11 @@ export default class App extends Component {
             ))}
 			
             {isMapBox(provider) && <span className='mapbox-wordmark' />}
+			
+			<Overlay anchor={[overlay.latOver, overlay.longOver]} offset={[60, 39]}>
+                <img src={pigeon} width={80} height={79} alt='' />
+            </Overlay>
+			
           </Map>
         </div>
         <div>
@@ -241,7 +253,8 @@ export default class App extends Component {
 			  
 			  this.updateLocation();
 			  markers.Bernie=[[this.state.persons[3].latitude,this.state.persons[3].longitude], 13];
-			
+			  overlay.longOver = this.state.persons[3].longitude;
+              overlay.latOver = this.state.persons[3].latitude;
             }}> Bernie </button>
         <button
             onClick={ () => {
@@ -249,6 +262,8 @@ export default class App extends Component {
 			  
 			  this.updateLocation();
 			  markers.Martin=[[this.state.persons[0].latitude,this.state.persons[0].longitude], 12];
+			  overlay.longOver = this.state.persons[0].longitude;
+              overlay.latOver = this.state.persons[0].latitude;
 			
             }}> Martin </button>
         <button
@@ -257,6 +272,8 @@ export default class App extends Component {
 			  
 			  this.updateLocation();
 			  markers.Simon=[[this.state.persons[1].latitude,this.state.persons[1].longitude], 11];
+			  overlay.longOver = this.state.persons[1].longitude;
+              overlay.latOver = this.state.persons[1].latitude;
 			
             }}> Simon </button>
         <button
@@ -265,6 +282,8 @@ export default class App extends Component {
 			  
 			  this.updateLocation();
 			  markers.Lukas=[[this.state.persons[2].latitude,this.state.persons[2].longitude], 10];
+			  overlay.longOver = this.state.persons[2].longitude;
+              overlay.latOver = this.state.persons[2].latitude;
 			
             }}> Lukas </button>
       </div>