diff --git a/app/javascript/new_design/carto/draw.js b/app/javascript/new_design/carto/draw.js
index 1eee603f1..1e84c0a71 100644
--- a/app/javascript/new_design/carto/draw.js
+++ b/app/javascript/new_design/carto/draw.js
@@ -1,45 +1,32 @@
 import L from 'leaflet';
+import {
+  drawLayer,
+  noEditStyle,
+  CADASTRE_POLYGON_STYLE,
+  QP_POLYGON_STYLE
+} from '../../shared/carto';
 
-function drawLayerWithItems(map, items, style) {
-  if (Array.isArray(items) && items.length > 0) {
-    const layer = new L.GeoJSON();
-
-    items.forEach(function(item) {
-      layer.addData(item.geometry);
-    });
-
-    layer.setStyle(style).addTo(map);
-  }
+export function drawCadastre(map, data) {
+  drawLayer(
+    map,
+    data.cadastres,
+    noEditStyle(CADASTRE_POLYGON_STYLE),
+    'cadastres'
+  );
 }
 
-export function drawCadastre(map, { dossierCadastres }) {
-  drawLayerWithItems(map, dossierCadastres, {
-    fillColor: '#8A6D3B',
-    weight: 2,
-    opacity: 0.7,
-    color: '#8A6D3B',
-    dashArray: '3',
-    fillOpacity: 0.5
-  });
+export function drawQuartiersPrioritaires(map, data) {
+  drawLayer(
+    map,
+    data.quartiersPrioritaires,
+    noEditStyle(QP_POLYGON_STYLE),
+    'quartiersPrioritaires'
+  );
 }
 
-export function drawQuartiersPrioritaires(
-  map,
-  { dossierQuartiersPrioritaires }
-) {
-  drawLayerWithItems(map, dossierQuartiersPrioritaires, {
-    fillColor: '#31708F',
-    weight: 2,
-    opacity: 0.7,
-    color: '#31708F',
-    dashArray: '3',
-    fillOpacity: 0.5
-  });
-}
-
-export function drawUserSelection(map, { dossierJsonLatLngs }) {
-  if (dossierJsonLatLngs.length > 0) {
-    const polygon = L.polygon(dossierJsonLatLngs, {
+export function drawUserSelection(map, data) {
+  if (data.selection.length > 0) {
+    const polygon = L.polygon(data.selection, {
       color: 'red',
       zIndex: 3
     }).addTo(map);