Tiles setted up like before

.eslintrc.yml

+extends: google

frontend/src/components/UnivMap.js

 import React, { Component } from 'react';
-import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
+import { Map, TileLayer, Marker, Popup, LayersControl, FeatureGroup, Circle, LayerGroup } from 'react-leaflet';
 // import MarkerClusterGroup from 'react-leaflet-markercluster';
 
-
-// var Stamen_Watercolor = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {
-//     attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-//     subdomains: 'abcd',
-//     minZoom: 1,
-//     maxZoom: 18,
-//     ext: 'png'
-// });
-
-// var Stamen_Label = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-labels/{z}/{x}/{y}.{ext}', {
-//     attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-//     subdomains: 'abcd',
-//     minZoom: 1,
-//     maxZoom: 18,
-//     ext: 'png'
-// });
-
-// var OpenStreetMap_France = L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
-//     maxZoom: 20,
-//     attribution: '&copy; Openstreetmap France | &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-// });
-
-// var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
-//     attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
-// });
-
-// var Stamen = L.layerGroup();
-// Stamen_Watercolor.addTo(Stamen);
-// Stamen_Label.addTo(Stamen);
-
-// var baseLayers = {
-//     "Stamen Watercolor": Stamen,
-//     "OpenStreetMap": OpenStreetMap_France,
-//     "Satellite": Esri_WorldImagery
-// };
-
-// End of handling of layers, now let's handle markers.
-
-
-
 export default class UnivMap extends Component {
     state = {
         lat: 51.505,
@@ -54,15 +14,43 @@ export default class UnivMap extends Component {
         const position = [this.state.lat, this.state.lng]
         return (
             <Map center={position} zoom={this.state.zoom} style={{ height: "500px" }}>
-                <TileLayer
-                    attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
-                    url="https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png"
-                />
-                <Marker position={position}>
-                    <Popup>
-                        A pretty CSS3 popup. <br /> Easily customizable.
-	                </Popup>
-                </Marker>
+                <LayersControl position="topright">
+                    <LayersControl.BaseLayer name="OpenStreetMap France" checked={false}>
+                        <TileLayer
+                            attribution='&copy; Openstreetmap France | &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+                            url="https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png"
+                            maxZoom={20}
+                        />
+                    </LayersControl.BaseLayer>
+
+                    <LayersControl.BaseLayer name="Stamen Watercolor" checked={true}>
+                        <LayerGroup>
+                            <TileLayer
+                                attribution='Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+                                url="https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png"
+                                minZoom={1}
+                                maxZoom={18}
+                                subdomains='abcd'
+                            />
+                            <TileLayer
+                                attribution='Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+                                url="https://stamen-tiles-{s}.a.ssl.fastly.net/toner-labels/{z}/{x}/{y}.png"
+                                minZoom={1}
+                                subdomains='abcd'
+                                maxZoom={18}
+                            />
+                        </LayerGroup>
+                    </LayersControl.BaseLayer>
+
+
+                    <LayersControl.BaseLayer name="Esri WorldImagery">
+                        <TileLayer
+                            attribution="Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"
+                            url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
+                        />
+                    </LayersControl.BaseLayer>
+
+                </LayersControl>
             </Map>
         )
     }

frontend/static/frontend/.gitignore

+main.js
\ No newline at end of file

package.json

@@ -28,6 +28,8 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-1": "^6.24.1",
     "css-loader": "^1.0.0",
+    "eslint": "^5.4.0",
+    "eslint-config-google": "^0.9.1",
     "leaflet": "^1.3.4",
     "prop-types": "^15.6.2",
     "react": "^16.4.2",