Cleanup

src/App.css

@@ -1,42 +1,3 @@
-/* .App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-} */
 .map{
   height: 100vh;
-  /* width: 150vh; */
 }

src/components/bounds.js

@@ -1,6 +1,18 @@
 import React, {useState} from 'react';
 import { Map, TileLayer, Rectangle } from 'react-leaflet';
 
+import '../App.css';
+// map is BROKEN without zoom attribute
+import 'leaflet/dist/leaflet.css';
+import L from 'leaflet';
+
+delete L.Icon.Default.prototype._getIconUrl;
+
+L.Icon.Default.mergeOptions({
+    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+    iconUrl: require('leaflet/dist/images/marker-icon.png'),
+    shadowUrl: require('leaflet/dist/images/marker-shadow.png')
+});
 
 const outer = [
   [50.505, -29.09],
@@ -22,8 +34,10 @@ function BoundsExmaple() {
     setBounds({ bounds: outer })
   }
 
+  const position = [20.5937, 78.9629];
+
   return (
-   <Map bounds={bounds}>
+    <Map className="map" center={position} zoom={4} bounds={bounds}>
      <TileLayer
           attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

src/components/customPopup.js

@@ -0,0 +1,29 @@
+/*
+Copyright (C) 2021  Stefan Begerad
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import React from 'react';
+import {Popup} from 'react-leaflet';
+
+const CustomPopup=()=>{
+    return(
+        <Popup>
+            This is a custom popup.
+        </Popup>
+    );
+}
+
+export default CustomPopup;

src/components/simple.js

@@ -1,23 +1,31 @@
-import React, {useState} from 'react';
-import {Map, TileLayer, Marker, Popup} from 'react-leaflet';
+import React from 'react';
+import {Map, TileLayer, Marker} from 'react-leaflet';
+import '../App.css';
+// map is BROKEN without zoom attribute
+import 'leaflet/dist/leaflet.css';
+import L from 'leaflet';
+import CustomPopup from './customPopup';
 
-function SampleExmaple() {
-  const [lat, setLat] = useState(20.5937)
-  const [lng, setLng] = useState(78.9629)
-  const [zoom, setZoom] = useState(13);
+delete L.Icon.Default.prototype._getIconUrl;
+
+L.Icon.Default.mergeOptions({
+    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+    iconUrl: require('leaflet/dist/images/marker-icon.png'),
+    shadowUrl: require('leaflet/dist/images/marker-shadow.png')
+});
 
-  const position = [lat, lng];
+function SampleExmaple() {
+  const position = [20.5937, 78.9629];
 
   return (
-   <Map center={position} zoom={zoom}>
+    // className is required to visualise map
+   <Map className="map"  center={position} zoom={4}>
      <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>
-            A pretty CSS3 popup. <br /> Easily customizable.
-          </Popup>
+          <CustomPopup/>
         </Marker>
    </Map>
   )

src/components/test.js

@@ -1,21 +1,14 @@
 import React, {Component} from 'react';
 import '../App.css';
 import L from 'leaflet';
-import {Map, TileLayer, Marker, Popup} from 'react-leaflet';
+import {Map, TileLayer, Marker} from 'react-leaflet';
 import leafGreen from '../assets/leaf-green.png';
 import leafOragne from '../assets/leaf-orange.png';
 import leafRed from '../assets/leaf-red.png';
 import leafShadow from '../assets/leaf-shadow.png';
-import mapIcon from '../assets/map_icon.png';
 import 'react-leaflet-fullscreen/dist/styles.css';
 import FullscreenControl from 'react-leaflet-fullscreen';
-
-// let myIcon = L.icon({
-//   iconUrl: "",
-//   iconSize: [25, 41],
-//   iconAnchor: [12.5, 41],
-//   popupAnchor: [0, -41]
-// })
+import CustomPopup from './customPopup';
 
 delete L.Icon.Default.prototype._getIconUrl;
 
@@ -85,45 +78,39 @@ class App extends Component {
          />
          <Marker
            position={positionGreenIcon}
-           //icon={this.greenIcon}
+           icon={this.greenIcon}
          onMouseOver={(e) => {
             e.target.openPopup();
           }}
           onMouseOut={(e) => {
             e.target.closePopup();
           }}
-    >
-           <Popup>
-             A pretty CSS3 popup. <br /> Easily customizable.
-           </Popup>
+          >
+           <CustomPopup/>
          </Marker>
          <Marker
           position={positionRedIcon}
-          //icon={this.redIcon}
+          icon={this.redIcon}
           onMouseOver={(e) => {
             e.target.openPopup();
           }}
           onMouseOut={(e) => {
             e.target.closePopup();
           }}
          >
-           <Popup>
-             A pretty CSS3 popup. <br /> Easily customizable.
-           </Popup>
+           <CustomPopup/>
          </Marker>
          <Marker
          position={positionOrangeIcon}
-         //icon={this.orangeIcon}
+         icon={this.orangeIcon}
          onMouseOver={(e) => {
           e.target.openPopup();
         }}
         onMouseOut={(e) => {
           e.target.closePopup();
         }}
          >
-           <Popup>
-             A pretty CSS3 popup. <br /> Easily customizable.
-           </Popup>
+           <CustomPopup/>
          </Marker>
          <FullscreenControl position="topright" />
        </Map>

src/index.js

@@ -2,15 +2,16 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import 'leaflet/dist/leaflet.css';
 import './index.css';
-// import App from './App';
-import SampleExmaple from './components/simple';
+// import SampleExmaple from './components/simple';
 import BoundsExmaple from './components/bounds';
-import Test from './components/test'
+// import Test from './components/test';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
   <React.StrictMode>
-    <Test />
+    {/* <Test /> */}
+    {/* <SampleExmaple/> */}
+    <BoundsExmaple/>
   </React.StrictMode>,
   document.getElementById('root')
 );