New UI for the map

app/assets/javascripts/carte/carte.js

@@ -93,22 +93,30 @@ function add_event_freeDraw() {
     freeDraw.on('markers', function (e) {
         $("#json_latlngs").val(JSON.stringify(e.latLngs));
 
+        add_event_edit();
+
         get_external_data(e.latLngs);
     });
 
+    $("#map").on('click', function(){
+        freeDraw.setMode(L.FreeDraw.MODES.VIEW);
+    });
+
     $("#new").on('click', function (e) {
         freeDraw.setMode(L.FreeDraw.MODES.CREATE);
     });
 
-    $("#edit").on('click', function (e) {
-        freeDraw.setMode(L.FreeDraw.MODES.EDIT);
-    });
-
     $("#delete").on('click', function (e) {
         freeDraw.setMode(L.FreeDraw.MODES.DELETE);
     });
 }
 
+function add_event_edit (){
+    $(".leaflet-container g path").on('click', function (e) {
+        setTimeout(function(){freeDraw.setMode(L.FreeDraw.MODES.EDIT | L.FreeDraw.MODES.DELETE)}, 50);
+    });
+}
+
 function get_position() {
     var position;
 
@@ -131,7 +139,7 @@ function get_address_point(request) {
     }).done(function (data) {
         if (data.lat != null) {
             map.setView(new L.LatLng(data.lat, data.lon), data.zoom);
-            L.marker([data.lat, data.lon], {icon: icon}).addTo(map);
+            //L.marker([data.lat, data.lon], {icon: icon}).addTo(map);
         }
     });
 }

app/assets/stylesheets/carte.scss

@@ -12,12 +12,16 @@ table {
     @extend .col-md-12;
     @extend .col-lg-12;
 
+    margin-left: 15px;
+    width: 90%;
     height: 600px;
   }
 
   #map.qp, #map.cadastre {
     @extend .col-md-9;
     @extend .col-lg-9;
+
+    width: 70%;
   }
 
   .list {
@@ -35,6 +39,10 @@ table {
   }
 }
 
+.leaflet-container path {
+  cursor: url('/assets/edit.png'), default !important;
+}
+
 #infos_dossier {
   #map.mini {
     height: 300px;
@@ -42,8 +50,6 @@ table {
   }
 }
 
-
-
 #map section.overlay {
   position: absolute;
   top: 0;
@@ -56,7 +62,7 @@ table {
 }
 
 #map.mode-create {
-  cursor: crosshair !important;
+  cursor: url('/assets/pencil.png'), crosshair !important;
 }
 
 #map g path.tracer {

app/views/users/carte/show.html.haml

@@ -1,13 +1,17 @@
 %h2
-  ='Localisation de votre demande'
+  ='Localisation'
+%h4.text-primary
+  Positionnez-vous et dessinez sur la carte la zone d'action de votre demande.
 %br
 
 .content{style:'margin-bottom:60px'}
-  %button#new.btn.btn-sm.btn-success{type:'button'} Nouveau
-  \-
-  %button#edit.btn.btn-sm.btn-info{type:'button'} Editer
-  \-
-  %button#delete.btn.btn-sm.btn-danger{type:'button'} Supprimer
+  %button#new.btn.btn-md.btn-success{type:'button'}
+    %i.fa.fa-pencil
+    Ajouter une zone
+  -#\-
+  -#%button#edit.btn.btn-sm.btn-info{type:'button'} Editer
+  -#\-
+  -#%button#delete.btn.btn-sm.btn-danger{type:'button'} Supprimer
 
   %span#search_by_address{style: 'margin-left: 20px'}
     %input.form-control{type: :address, placeholder: 'Rechercher une adresse'}