added basic pigeon map

package-lock.json

@@ -9470,6 +9470,26 @@
       "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
       "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
     },
+    "pigeon-draggable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/pigeon-draggable/-/pigeon-draggable-0.1.1.tgz",
+      "integrity": "sha512-iwR/kkN0b3pe6OcKSLUXEitRMIQ3KvC8WbAs5uarPeTX3CGkDhCsX5e03thQPuVz4SZV9CxO7yVo1h4gg/PzKw=="
+    },
+    "pigeon-maps": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/pigeon-maps/-/pigeon-maps-0.16.1.tgz",
+      "integrity": "sha512-rHW6ClryKhdWWzYiAze8NF1CDwSXPUFply+8MG7tBawtSE4IcK56mKvbhO0EbR+2Ly6n12imvW5gxE+pBdwt6w=="
+    },
+    "pigeon-marker": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/pigeon-marker/-/pigeon-marker-0.3.4.tgz",
+      "integrity": "sha512-6sQoSI8Mii7eWWz3TorssbNmptVoP4heKMDt27AeU8I//MFQfQZS6JfCmW3zXF4a6dk4uisr4m26akUYSblfnQ=="
+    },
+    "pigeon-overlay": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/pigeon-overlay/-/pigeon-overlay-0.2.3.tgz",
+      "integrity": "sha512-mkHwYzDdzdd45XmWW3RB6Vxi0cj1F2CWRzFS8lyDmZcKiruKwhoAa4D3d/hfoO/R3TeHK3IJNNoVV02hP2PJ6Q=="
+    },
     "pinkie": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",

package.json

@@ -8,6 +8,10 @@
     "@testing-library/user-event": "^7.2.1",
     "bootstrap": "^4.5.2",
     "express": "^4.17.1",
+    "pigeon-draggable": "^0.1.1",
+    "pigeon-maps": "^0.16.1",
+    "pigeon-marker": "^0.3.4",
+    "pigeon-overlay": "^0.2.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",

src/App.js

@@ -6,32 +6,9 @@ import Navigation from './Navigation';
 import Footer from './Footer';
 import Home from './Home';
 import About  from './About';
+import Pigeon  from './Pigeon';
 
 export class App extends React.Component{
-    constructor(props){
-        super(props)
-        this.state = {
-            userList: [
-              {name: "Hugo", counter: 0},
-              {name: "Bert", counter: 0},
-              {name: "Sepp", counter: 0},
-              {name: "Lisa", counter: 0},
-              {name: "Susi", counter: 0},
-              
-            ]
-        }
-    }
-    
-    doClick(idx){
-      let listCopy = this.state.userList.slice();
-      listCopy[idx].counter++;
-      this.setState({userList: listCopy})
-    }
-    
-    hello(){
-      return <p>hello</p>
-    }
-    
     render(){
         return (
           <div>
@@ -40,20 +17,10 @@ export class App extends React.Component{
                 <Switch>
                   <Route path="/" exact component={Home} />
                   <Route path="/about" exact component={About} />
+                  <Route path="/pigeon-map" exact component={Pigeon} />
                 </Switch>
                 <Footer />
               </Router>
-              
-              {this.props.title}
-              {this.state.userList.map((user, idx) =>
-                  <User
-                      name={user.name}
-                      counter={user.counter}
-                      doClick={() => this.doClick(idx)}
-                      app={this}
-                      title={this.props.title}
-                  />
-                )}
           </div>
         )
     }

src/Navigation.js

@@ -14,8 +14,8 @@ class Navigation extends React.Component{
                   <li className={`nav-item  ${this.props.location.pathname === "/" ? "active" : ""}`}>
                     <Link className="nav-link" to="/">Home</Link>
                   </li>
-                  <li className={`nav-item  ${this.props.location.pathname === "/about" ? "active" : ""}`}>
-                    <Link className="nav-link" to="/about">About</Link>
+                  <li className={`nav-item  ${this.props.location.pathname === "/pigeon-map" ? "active" : ""}`}>
+                    <Link className="nav-link" to="/pigeon-map">Pigeon Map</Link>
                   </li>
                 </ul>
               </div>

src/Pigeon.js

@@ -0,0 +1,65 @@
+import React from "react";
+import Map from 'pigeon-maps'
+import Marker from 'pigeon-marker'
+import Overlay from 'pigeon-overlay'
+
+export default class Pigeon extends React.Component{
+
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      zoom: 15
+    }
+  }
+  
+  providers = {
+    osm: (x, y, z) => {
+      // use 3 urls to download the tiles faster
+      const s = String.fromCharCode(97 + ((x + y + z) % 3))
+      return `https://${s}.tile.openstreetmap.org/${z}/${x}/${y}.png`
+    },
+    stamenTerrain: (x, y, z, dpr) => {
+      return `https://stamen-tiles.a.ssl.fastly.net/terrain/${z}/${x}/${y}${dpr >= 2 ? '@2x' : ''}.jpg`
+    }
+  }
+  
+  zoomIn = () => {
+    this.setState({
+      zoom: Math.min(this.state.zoom + 1, 22),
+    })
+  }
+  
+  zoomOut = () => {
+    this.setState({
+      zoom: Math.max(this.state.zoom - 1, 0),
+    })
+  }
+
+  render(){
+
+    return (
+      <div>
+        <Map
+          center={[48.336950, 14.320570]}
+          defaultZoom={15}
+          zoom={this.state.zoom}
+          width={600}
+          height={400}
+          attribution="Pigeon Map"
+          attributionPrefix={false}
+          animation={true} 
+          provider={this.providers["osm"]}>
+          {/* animation: for example when switching between different markers */}
+            <Marker anchor={[48.336950, 14.320570]} payload={1} onClick={({ event, anchor, payload }) => {}} />
+        
+            <Overlay anchor={[48.337069, 14.319570]} offset={[120, 79]}>
+              {/*<img src='pigeon.png' width={240} height={158} alt='pigeon' />*/}
+            </Overlay>
+        </Map>
+        <button onClick={this.zoomIn}>+</button>
+        <button onClick={this.zoomOut}>-</button>
+      </div>
+    );
+  }
+}

src/index.js

@@ -4,12 +4,6 @@ import { App } from './App';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 
-export { default as Navigation } from "./Navigation";
-export { default as Footer } from "./Footer";
-export { default as Home } from "./Home";
-export { default as About } from "./About";
-
-
 ReactDOM.render(
     <div>
         <App title="App"/>