Added area removing

imports/ui/components/Maps/Icons.js

@@ -16,18 +16,16 @@ export const nFireIcon = new Leaflet.Icon({
   iconUrl: '/n-fire-marker.png',
   iconSize: [16, 24], // size of the icon
   iconAnchor: [8, 26] // point of the icon which will correspond to marker's location
-  /* shadowUrl: require('../public/marker-shadow.png'), */
-  /* shadowSize:   [50, 64], // size of the shadow */
-  /* shadowAnchor: [4, 62],  // the same for the shadow
-   * popupAnchor:  [-3, -76]// point from which the popup should open relative to the iconAnchor */
 });
 
 export const positionIcon = new Leaflet.Icon({
   iconUrl: '/your-position.png',
   iconSize: [50, 77], // size of the icon
   iconAnchor: [25, 82] // point of the icon which will correspond to marker's location
-  /* shadowSize:   [50, 64], // size of the shadow */
-  /* shadowUrl: require('../public/marker-shadow.png'), */
-  /* shadowAnchor: [4, 62],  // the same for the shadow
-   * popupAnchor:  [-3, -76]// point from which the popup should open relative to the iconAnchor */
+});
+
+export const removeIcon = new Leaflet.Icon({
+  iconUrl: '/remove-marker.png',
+  iconSize: [24, 24], // size of the icon
+  iconAnchor: [12, 12] // point of the icon which will correspond to marker's location
 });

imports/ui/components/SelectionMap/SelectionMap.js

@@ -12,7 +12,7 @@ import { translate } from 'react-i18next';
 import { withTracker } from 'meteor/react-meteor-data';
 import update from 'immutability-helper';
 import geolocation from '/imports/startup/client/geolocation';
-import { positionIcon } from '/imports/ui/components/Maps/Icons';
+import { positionIcon, removeIcon } from '/imports/ui/components/Maps/Icons';
 import DefMapLayers from '/imports/ui/components/Maps/DefMapLayers';
 import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css';
 import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js';
@@ -151,6 +151,7 @@ class SelectionMap extends Component {
   }
 
   render() {
+    const { t, onRemove } = this.props;
     return (
       <div>
         { this.isValidState() &&
@@ -169,10 +170,22 @@ class SelectionMap extends Component {
                 onViewportChanged={this.onViewportChanged}
                 sleepNote
                 hoverToWake
-                wakeMessage={this.props.t('Pulsa para activar')}
+                wakeMessage={t('Pulsa para activar')}
                 sleepOpacity={0.6}
             >
               <DefMapLayers gray={false} />
+              {this.props.action === action.edit &&
+               this.props.currentSubs.map(subs => (
+                   <Marker
+                       key={subs._id}
+                       draggable={false}
+                       position={[subs.location.lat, subs.location.lon]}
+                       icon={removeIcon}
+                       title={t('Pulsa para borrar')}
+                       onClick={() => { onRemove(subs._id); }}
+                   />
+               ))
+              }
               {this.props.action === action.add &&
                <Fragment>
                  <Marker
@@ -180,7 +193,7 @@ class SelectionMap extends Component {
                      onDragend={this.updatePosition}
                      position={this.state.marker}
                      icon={positionIcon}
-                     title={this.props.t('Arrastrar para seleccionar otro punto')}
+                     title={t('Arrastrar para seleccionar otro punto')}
                      ref={(ref) => { this.marker = ref; }}
                  />
                  <CircleMarker
@@ -242,6 +255,7 @@ SelectionMap.propTypes = {
   onFstBtn: PropTypes.func.isRequired,
   sndBtn: PropTypes.string,
   onSndBtn: PropTypes.func,
+  onRemove: PropTypes.func,
   action: PropTypes.number.isRequired,
   loadingSubs: PropTypes.bool,
   currentSubs: PropTypes.arrayOf(PropTypes.shape({