leaflet: tested some stuff for the evaluation

src/maps/Leaflet.js

@@ -5,9 +5,12 @@ import {
   Marker,
   Popup,
   ZoomControl,
+  ScaleControl,
   Polyline,
+  Tooltip,
   FeatureGroup
 } from "react-leaflet";
+import L from "leaflet";
 import {EditControl} from "react-leaflet-draw";
 import "./../css/maps.css";
 import {calcDistance} from "./../helpers/distance";
@@ -27,6 +30,12 @@ const mapStyles = {
   "outdoor": "outdoors-v10"
 }
 
+//const customIcon = new L.Icon({
+//    iconUrl: require("../images/marker_icon.png"),
+//    iconSize: [24, 40],
+//    iconAnchor: [12, 40],
+//});
+
 export default class Leaflet extends React.Component{
   constructor(props){
     super(props);
@@ -126,8 +135,11 @@ export default class Leaflet extends React.Component{
           position={pos}
           draggable
           key={idx}
+          riseOnHover={true}
           onDragend={(e) => this.updateMarker(idx, e)}
+//          icon={customIcon}
         >
+//          <Tooltip permanent>{idx}</Tooltip>
           <Popup>
             {idx}
           </Popup>
@@ -146,6 +158,7 @@ export default class Leaflet extends React.Component{
             onClick={this.addMarker}
           >
             <TileLayer
+              maxZoom={30}
               attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
               url={"https://api.mapbox.com/styles/v1/mapbox/" + this.state.mapStyle + "/tiles/{z}/{x}/{y}?access_token=" + mapboxToken}
             />
@@ -156,6 +169,7 @@ export default class Leaflet extends React.Component{
                 onEdited={this._onEdited}
                 onCreated={this._onCreated}
                 onDeleted={this._onDeleted}
+                onDrawStart={() => {this.setState({drawMode: true})}}
                 draw={{
                   marker: false,
                   circlemarker: false,
@@ -170,6 +184,7 @@ export default class Leaflet extends React.Component{
             {markers}
             <Polyline color="grey" positions={this.state.path} />
 
+            <ScaleControl position="bottomright"/>
             <ZoomControl position="bottomright" />
           </Map>
         </div>