Actualizar atribución de OpenStreetMap y cambiar el color de los íconos en ControlBar

Author: AlejandroRM-DEV

leaflet-editable-hook/src/App.jsx

@@ -15,7 +15,7 @@ function App() {
         editable={true}
       >
         <TileLayer
-          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
         <ControlBar />

leaflet-editable-hook/src/ControlBar.jsx

@@ -3,39 +3,34 @@ import { Button } from 'antd';
 import Control from 'react-leaflet-custom-control';
 import { TfiRulerAlt2 } from 'react-icons/tfi';
 import { useState } from 'react';
-import { useMap } from 'react-leaflet';
 import Area from './Area';
 import Ruler from './Ruler';
 
 function ControlBar() {
-  const map = useMap();
   const [drawing, setDrawing] = useState(null);
 
   const editPolyline = () => setDrawing(drawing ? null : <Ruler />);
 
   const editPolygon = () => setDrawing(drawing ? null : <Area />);
 
-  if (!map) return null;
   return (
     <>
       <Control prepend position="topright">
         <div className="leaflet-bar" style={{ backgroundColor: 'white' }}>
           <Button
-            icon={<TfiRulerAlt2 color={drawing?.type === Ruler ? 'black' : 'lightgray'} />}
+            icon={<TfiRulerAlt2 color={drawing?.type === Ruler ? 'blue' : 'black'} />}
             type="text"
             onClick={editPolyline}
             disabled={drawing && drawing.type !== Ruler}
           />
-          <hr className="w-8/12 mx-auto" />
           <Button
-            icon={<FaDraftingCompass color={drawing?.type === Area ? 'black' : 'lightgray'} />}
+            icon={<FaDraftingCompass color={drawing?.type === Area ? 'blue' : 'black'} />}
             type="text"
             onClick={editPolygon}
             disabled={drawing && drawing.type !== Area}
           />
         </div>
       </Control>
-
       {drawing}
     </>
   );

leaflet-editable-hook/src/Ruler.jsx

@@ -65,7 +65,7 @@ function RulerMarker({ position, length }) {
       })}
     >
       <Tooltip permanent offset={[10, 0]} direction="right">
-        {length.toFixed(3, 10)} KM
+        {length.toFixed(3)} KM
       </Tooltip>
     </Marker>
   );