Kezdőlap Felfedezés Súgó
Regisztráció Bejelentkezés
bernie
/
jku-ba-react
1
0
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Forráskód Böngészése

added leaflet map

Bernadette Elena Hammerle 3 éve
szülő
cabb85c09a
commit
860037c0c4
6 módosított fájl, 89 hozzáadás és 13 törlés
Osztott Nézet Diff Statisztika Mutatása
  1. 22 6
      package-lock.json
  2. 4 2
      package.json
  3. 7 0
      public/index.html
  4. 8 5
      src/App.js
  5. 45 0
      src/Leaflet.js
  6. 3 0
      src/Navigation.js

+ 22 - 6
package-lock.json
Fájl Megtekintése 

@@ -8194,6 +8194,11 @@
 
       "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
 
       "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4="
 
     },
 
+    "leaflet": {
 
+      "version": "1.7.1",
 
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz",
 
+      "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
 
+    },
 
     "left-pad": {
 
       "version": "1.3.0",
 
       "resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.3.0.tgz",
 
@@ -10942,9 +10947,9 @@
 
       }
 
     },
 
     "react": {
 
-      "version": "16.13.1",
 
-      "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
 
-      "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
 
+      "version": "16.14.0",
 
+      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
 
+      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
 
       "requires": {
 
         "loose-envify": "^1.1.0",
 
         "object-assign": "^4.1.1",
 
@@ -11166,9 +11171,9 @@
 
       }
 
     },
 
     "react-dom": {
 
-      "version": "16.13.1",
 
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
 
-      "integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==",
 
+      "version": "16.14.0",
 
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
 
+      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
 
       "requires": {
 
         "loose-envify": "^1.1.0",
 
         "object-assign": "^4.1.1",
 
@@ -11186,6 +11191,17 @@
 
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
 
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
 
     },
 
+    "react-leaflet": {
 
+      "version": "2.7.0",
 
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-2.7.0.tgz",
 
+      "integrity": "sha512-pMf5eRyWU8RH9HohM2i0NZymcWHraJA1m6iMFYu94/01PAaBJpOyxORZJmN6cV9dBzkVWaLjAAHTNmxbwIpcfw==",
 
+      "requires": {
 
+        "@babel/runtime": "^7.9.2",
 
+        "fast-deep-equal": "^3.1.1",
 
+        "hoist-non-react-statics": "^3.3.2",
 
+        "warning": "^4.0.3"
 
+      }
 
+    },
 
     "react-lifecycles-compat": {
 
       "version": "3.0.4",
 
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",

+ 4 - 2
package.json
Fájl Megtekintése 

@@ -8,12 +8,14 @@
 
     "@testing-library/user-event": "^7.2.1",
 
     "bootstrap": "^4.5.2",
 
     "express": "^4.17.1",
 
+    "leaflet": "^1.7.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": "^16.14.0",
 
+    "react-dom": "^16.14.0",
 
+    "react-leaflet": "^2.7.0",
 
     "react-map-gl": "^5.2.9",
 
     "react-redux": "^7.2.1",
 
     "react-router-dom": "^5.2.0",

+ 7 - 0
public/index.html
Fájl Megtekintése 

@@ -1,5 +1,12 @@
 
 <html>
 
   <head>
 
+    <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
 
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
 
+      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
 
+      crossorigin=""/>
 
+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
 
+      integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
 
+      crossorigin=""></script>
 
     <title>React App</title>
 
   </head>
 
   <body>

+ 8 - 5
src/App.js
Fájl Megtekintése 

@@ -1,13 +1,15 @@
 
 import React from 'react';
 
-import User from './User';
 
-
 
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 
+
 
 import Navigation from './Navigation';
 
 import Footer from './Footer';
 
 import Home from './Home';
 
-import About  from './About';
 
-import Pigeon  from './Pigeon';
 
-import Mapbox  from './Mapbox';
 
+import About from './About';
 
+
 
+// Maps
 
+import Pigeon from './Pigeon';
 
+import Mapbox from './Mapbox';
 
+import Leaflet from './Leaflet';
 
 
 export class App extends React.Component{
 
     render(){
 
@@ -20,6 +22,7 @@ export class App extends React.Component{
 
                   <Route path="/about" exact component={About} />
 
                   <Route path="/pigeon-map" exact component={Pigeon} />
 
                   <Route path="/mapbox-gl" exact component={Mapbox} />
 
+                  <Route path="/leaflet" exact component={Leaflet} />
 
                 </Switch>
 
                 <Footer />
 
               </Router>

+ 45 - 0
src/Leaflet.js
Fájl Megtekintése 

@@ -0,0 +1,45 @@
 
+import React from "react";
 
+import {
 
+  Map,
 
+  TileLayer,
 
+  Marker,
 
+  Popup,
 
+  ZoomControl,
 
+} from "react-leaflet";
 
+import "./css/maps.css";
 
+
 
+const LONGITUDE = 14.320570
 
+const LATITUDE = 48.336950
 
+
 
+export default class Leaflet extends React.Component{
 
+  state = {
 
+    latitude: LATITUDE,
 
+    longitude: LONGITUDE,
 
+    zoom: 15,
 
+    }
 
+  
+  render() {
 
+    const position = [this.state.latitude, this.state.longitude]
 
+    return (
 
+        <Map
 
+          center={position}
 
+          zoom={this.state.zoom}
 
+          zoomControl={false}
 
+          style={{width: 600, height: 400}}
 
+        >
 
+            <TileLayer
 
+              attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 
+              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
 
+            />
 
+  
+            <Marker position={position}>
 
+              <Popup>
 
+                JKU: Ente
 
+              </Popup>
 
+            </Marker>
 
+            <ZoomControl position="bottomright" />
 
+
 
+        </Map>
 
+    );
 
+  }
 
+}

+ 3 - 0
src/Navigation.js
Fájl Megtekintése 

@@ -20,6 +20,9 @@ class Navigation extends React.Component{
 
                   <li className={`nav-item  ${this.props.location.pathname === "/mapbox-gl" ? "active" : ""}`}>
 
                     <Link className="nav-link" to="/mapbox-gl">Mapbox GL</Link>
 
                   </li>
 
+                  <li className={`nav-item  ${this.props.location.pathname === "/leaflet" ? "active" : ""}`}>
 
+                    <Link className="nav-link" to="/leaflet">Leaflet Map</Link>
 
+                  </li>
 
                 </ul>
 
               </div>
 
             </nav>