diff --git a/web/client/utils/AnnotationsUtils.js b/web/client/utils/AnnotationsUtils.js
index 2739c4ed9f..4f0e52f0ad 100644
--- a/web/client/utils/AnnotationsUtils.js
+++ b/web/client/utils/AnnotationsUtils.js
@@ -11,7 +11,7 @@ const LocaleUtils = require('./LocaleUtils');
 const {extraMarkers} = require('./MarkerUtils');
 const {geometryFunctions, fetchStyle, hashAndStringify} = require('./VectorStyleUtils');
 const {set} = require('./ImmutableUtils');
-const {values, isNil, slice, head, castArray, last, isArray, findIndex} = require('lodash');
+const {values, isNil, slice, head, castArray, last, isArray, findIndex, isString} = require('lodash');
 const uuid = require('uuid');
 const turfCenter = require('@turf/center').default;
 const assign = require('object-assign');
@@ -96,9 +96,14 @@ const getStylesObject = ({type = "Point", features = []} = {}) => {
 };
 const getProperties = (props = {}, messages = {}) => ({title: LocaleUtils.getMessageById(messages, "annotations.defaulttitle") !== "annotations.defaulttitle" ? LocaleUtils.getMessageById(messages, "annotations.defaulttitle") : "Default title", id: uuidv1(), ...props});
 
+const getDashArrayFromStyle = dashArray => {
+    return isString(dashArray) && dashArray || isArray(dashArray) && dashArray.join(" ");
+};
+
 const annStyleToOlStyle = (type, tempStyle, label = "") => {
     let style = tempStyle && tempStyle[type] ? tempStyle[type] : tempStyle;
     const s = style;
+    const dashArray = s.dashArray ? getDashArrayFromStyle(s.dashArray) : "";
     switch (type) {
         case "MultiPolygon":
         case "Polygon":
@@ -108,14 +113,16 @@ const annStyleToOlStyle = (type, tempStyle, label = "") => {
                 "strokeOpacity": s.opacity,
                 "strokeWidth": s.weight,
                 "fillColor": rgbaTorgb(s.fillColor),
-                "fillOpacity": s.fillOpacity
+                "fillOpacity": s.fillOpacity,
+                "strokeDashStyle": dashArray
             };
         case "LineString":
         case "MultiLineString":
             return {
                 "strokeColor": rgbaTorgb(s.color),
                 "strokeOpacity": s.opacity,
-                "strokeWidth": s.weight
+                "strokeWidth": s.weight,
+                "strokeDashStyle": dashArray
             };
         case "Text":
             return {
@@ -133,7 +140,8 @@ const annStyleToOlStyle = (type, tempStyle, label = "") => {
                 "stroke": true,
                 "strokeColor": rgbaTorgb(s.color),
                 "strokeOpacity": s.opacity,
-                "strokeWidth": s.weight
+                "strokeWidth": s.weight,
+                "strokeDashStyle": dashArray
             };
         case "Point":
         case "MultiPoint": {
@@ -177,6 +185,7 @@ const annStyleToOlStyle = (type, tempStyle, label = "") => {
                 "strokeColor": "#FF0000",
                 "pointRadius": 5,
                 "strokeOpacity": 1,
+                "strokeDashStyle": dashArray,
                 "strokeWidth": 1
             };
     }
@@ -565,7 +574,8 @@ const AnnotationsUtils = {
     isCompletePolygon: (coords = [[[]]]) => {
         const validCoords = coords[0].filter(AnnotationsUtils.validateCoordsArray);
         return validCoords.length > 3 && head(validCoords)[0] === last(validCoords)[0] && head(validCoords)[1] === last(validCoords)[1];
-    }
+    },
+    getDashArrayFromStyle
 };
 
 module.exports = AnnotationsUtils;
diff --git a/web/client/utils/__tests__/AnnotationsUtils-test.js b/web/client/utils/__tests__/AnnotationsUtils-test.js
index b71156b8d4..ad67920240 100644
--- a/web/client/utils/__tests__/AnnotationsUtils-test.js
+++ b/web/client/utils/__tests__/AnnotationsUtils-test.js
@@ -19,7 +19,8 @@ const {getAvailableStyler, getRelativeStyler, convertGeoJSONToInternalModel,
     getStartEndPointsForLinestring,
     createGeometryFromGeomFunction,
     updateAllStyles,
-    fromLineStringToGeodesicLineString, isCompletePolygon
+    fromLineStringToGeodesicLineString, isCompletePolygon,
+    getDashArrayFromStyle
 } = require('../AnnotationsUtils');
 
 const featureCollection = {
@@ -374,6 +375,23 @@ describe('Test the AnnotationsUtils', () => {
         expect(ft.properties).toExist();
         expect(ft.properties.ms_style).toExist();
     });
+    it('fromAnnotationToGeoJson with a LineString with dashArray', () => {
+        const f = {
+            type: "Feature",
+            geometry: {
+                type: "LineString",
+                coordinates: [[0, 0], [1, 1], [3, 3], [5, 5]]
+            },
+            style: {
+                dashArray: [1, 3]
+            }
+        };
+        const ft = fromAnnotationToGeoJson(f);
+        expect(ft.type).toBe("Feature");
+        expect(ft.properties).toExist();
+        expect(ft.properties.ms_style).toExist();
+        expect(ft.properties.ms_style.strokeDashStyle).toEqual("1 3");
+    });
     it('flattenGeometryCollection', () => {
         const fts = flattenGeometryCollection(feature);
         expect(fts).toExist();
@@ -739,4 +757,10 @@ describe('Test the AnnotationsUtils', () => {
         expect(isCompletePolygon(polygonCoords3)).toBe(true);
         expect(isCompletePolygon(polygonCoords4)).toBe(false);
     });
+    it('test getDashArrayFromStyle', () => {
+        // default
+        expect(getDashArrayFromStyle()).toEqual("");
+        expect(getDashArrayFromStyle("3 4 5")).toEqual("3 4 5");
+        expect(getDashArrayFromStyle(["3", "4", "5"])).toEqual("3 4 5");
+    });
 });