diff --git a/.classpath b/.classpath
new file mode 100644
index 0000000..0371133
--- /dev/null
+++ b/.classpath
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<classpath>
+	<classpathentry kind="src" output="target/classes" path="src/main/java">
+		<attributes>
+			<attribute name="optional" value="true"/>
+			<attribute name="maven.pomderived" value="true"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry excluding="**" kind="src" output="target/classes" path="src/main/resources">
+		<attributes>
+			<attribute name="maven.pomderived" value="true"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry kind="src" output="target/test-classes" path="src/test/java">
+		<attributes>
+			<attribute name="optional" value="true"/>
+			<attribute name="maven.pomderived" value="true"/>
+			<attribute name="test" value="true"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry kind="con" path="org.eclipse.jdt.launching.JRE_CONTAINER/org.eclipse.jdt.internal.debug.ui.launcher.StandardVMType/JavaSE-1.8">
+		<attributes>
+			<attribute name="maven.pomderived" value="true"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry kind="con" path="org.eclipse.m2e.MAVEN2_CLASSPATH_CONTAINER">
+		<attributes>
+			<attribute name="maven.pomderived" value="true"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry kind="src" path="target/generated-sources/annotations">
+		<attributes>
+			<attribute name="optional" value="true"/>
+			<attribute name="maven.pomderived" value="true"/>
+			<attribute name="ignore_optional_problems" value="true"/>
+			<attribute name="m2e-apt" value="true"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry kind="src" output="target/test-classes" path="target/generated-sources/test-annotations">
+		<attributes>
+			<attribute name="optional" value="true"/>
+			<attribute name="maven.pomderived" value="true"/>
+			<attribute name="ignore_optional_problems" value="true"/>
+			<attribute name="m2e-apt" value="true"/>
+			<attribute name="test" value="true"/>
+		</attributes>
+	</classpathentry>
+	<classpathentry kind="output" path="target/classes"/>
+</classpath>
diff --git a/.project b/.project
new file mode 100644
index 0000000..25ea1ed
--- /dev/null
+++ b/.project
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>aren</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.jdt.core.javabuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+		<buildCommand>
+			<name>org.eclipse.m2e.core.maven2Builder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.jdt.core.javanature</nature>
+		<nature>org.eclipse.m2e.core.maven2Nature</nature>
+	</natures>
+	<filteredResources>
+		<filter>
+			<id>1631056289277</id>
+			<name></name>
+			<type>30</type>
+			<matcher>
+				<id>org.eclipse.core.resources.regexFilterMatcher</id>
+				<arguments>node_modules|.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__</arguments>
+			</matcher>
+		</filter>
+	</filteredResources>
+</projectDescription>
diff --git a/.settings/org.eclipse.core.resources.prefs b/.settings/org.eclipse.core.resources.prefs
new file mode 100644
index 0000000..abdea9a
--- /dev/null
+++ b/.settings/org.eclipse.core.resources.prefs
@@ -0,0 +1,4 @@
+eclipse.preferences.version=1
+encoding//src/main/java=UTF-8
+encoding//src/main/resources=UTF-8
+encoding/<project>=UTF-8
diff --git a/.settings/org.eclipse.jdt.apt.core.prefs b/.settings/org.eclipse.jdt.apt.core.prefs
new file mode 100644
index 0000000..d4313d4
--- /dev/null
+++ b/.settings/org.eclipse.jdt.apt.core.prefs
@@ -0,0 +1,2 @@
+eclipse.preferences.version=1
+org.eclipse.jdt.apt.aptEnabled=false
diff --git a/.settings/org.eclipse.jdt.core.prefs b/.settings/org.eclipse.jdt.core.prefs
new file mode 100644
index 0000000..1b6e1ef
--- /dev/null
+++ b/.settings/org.eclipse.jdt.core.prefs
@@ -0,0 +1,9 @@
+eclipse.preferences.version=1
+org.eclipse.jdt.core.compiler.codegen.targetPlatform=1.8
+org.eclipse.jdt.core.compiler.compliance=1.8
+org.eclipse.jdt.core.compiler.problem.enablePreviewFeatures=disabled
+org.eclipse.jdt.core.compiler.problem.forbiddenReference=warning
+org.eclipse.jdt.core.compiler.problem.reportPreviewFeatures=ignore
+org.eclipse.jdt.core.compiler.processAnnotations=disabled
+org.eclipse.jdt.core.compiler.release=disabled
+org.eclipse.jdt.core.compiler.source=1.8
diff --git a/.settings/org.eclipse.m2e.core.prefs b/.settings/org.eclipse.m2e.core.prefs
new file mode 100644
index 0000000..f897a7f
--- /dev/null
+++ b/.settings/org.eclipse.m2e.core.prefs
@@ -0,0 +1,4 @@
+activeProfiles=
+eclipse.preferences.version=1
+resolveWorkspaceProjects=true
+version=1
diff --git a/src/main/webapp/assets/img/mapimg.png b/src/main/webapp/assets/img/mapimg.png
new file mode 100644
index 0000000..5942730
Binary files /dev/null and b/src/main/webapp/assets/img/mapimg.png differ
diff --git a/src/main/webapp/assets/js/components/grids/debatesSurCarteGrid.vue b/src/main/webapp/assets/js/components/grids/debatesSurCarteGrid.vue
new file mode 100644
index 0000000..84a31ad
--- /dev/null
+++ b/src/main/webapp/assets/js/components/grids/debatesSurCarteGrid.vue
@@ -0,0 +1,74 @@
+<template>
+    <grid-layout
+        v-bind:extendable="extendable"
+        v-bind:columns="[ 'min-content', '2fr', '1fr', '2fr', '3fr', '2fr', '2fr' ]"
+        v-bind:headers="[ $t('category'), $t('restitution'), $t('posts'), $t('last_post'), $t('document'), $t('teams'), $t('moderators') ]"
+        v-bind:actions="[ 2, 2, 2 ]"
+        v-bind:items="categories"
+        v-bind:grouped-items="( group ) => group.debates()"
+        v-bind:sort="( a, b ) => a.created - b.created"
+        @selection-change="$emit('selection-change', $event)">
+
+        <template v-slot:row.group="{ value: category }">
+            <div class="card center-align">
+                <div class="card-image light-color valign-wrapper">
+                    <img v-bind:src="category.picture">
+                </div>
+                <div>
+                    <h2 v-bind:title="category.name">{{ category.name }}</h2>
+                </div>
+            </div>
+        </template>
+
+        <template v-if="$scopedSlots['side.actions']" v-slot:side.actions="{ value: debate }">
+            <slot name="side.actions" v-bind:debate="debate"></slot>
+        </template>
+
+        <template v-slot:column.1="{ value: debate }">
+            <div v-if="debate.commentsCount > 0" class="opinion">
+                <div class="for" v-bind:style="'width: '+ (debate.commentsCountFor / debate.commentsCount * 100) + '%;'"></div>
+                <div class="against" v-bind:style="'width: ' + (debate.commentsCountAgainst / debate.commentsCount * 100) + '%;'"></div>
+            </div>
+        </template>
+
+        <template v-slot:column.2="{ value: debate }">
+            {{ debate.commentsCount }}
+        </template>
+
+        <template v-slot:column.3="{ value: debate }">
+            {{ debate.lastCommentDate !== 0 ? $d(debate.lastCommentDate, 'short') : $t('no_post') }}
+        </template>
+
+        <template v-slot:column.4="{ value: debate }">
+            {{ debate.document.name }}
+        </template>
+
+        <template v-slot:column.5="{ value: debate }">
+            <div v-for="team in debate.teams" v-bind:key="team.id">
+                {{ team.name }}<br>
+            </div>
+        </template>
+
+        <template v-slot:column.6="{ value: debate }">
+            <div v-for="guest in debate.guests" v-bind:key="guest.id">
+                {{ guest.fullName() }}<br>
+            </div>
+        </template>
+
+        <template v-slot:action.2="{ value: debate }">
+            <router-link v-bind:to="''+debate.id" append class="waves-effect waves-light btn">Aller au débat</router-link>
+        </template>
+
+        <template v-slot:action.3="{ value: debate }">
+            <slot name="add.contributor" v-bind:debate="debate"></slot>
+        </template>
+
+    </grid-layout>
+</template>
+
+<script>
+    module.exports = {
+        mixins: [VueGrid],
+        props: ['categories', 'extendable']
+    };
+</script>
\ No newline at end of file
diff --git a/src/main/webapp/assets/js/components/grids/documentsDebateSurCarte.vue b/src/main/webapp/assets/js/components/grids/documentsDebateSurCarte.vue
new file mode 100644
index 0000000..299850b
--- /dev/null
+++ b/src/main/webapp/assets/js/components/grids/documentsDebateSurCarte.vue
@@ -0,0 +1,51 @@
+<template>
+    <grid-layout
+        v-bind:extendable="extendable"
+        v-bind:columns="[ 'min-content', '4fr', '1fr' ]"
+        v-bind:headers="[ $t('category'), $t('title'), $t('author') ]"
+        v-bind:actions="[ 2 ]"
+        v-bind:items="categories"
+        v-bind:grouped-items="( group ) => group.documents"
+        v-bind:sort="( a, b ) => (a.name > b.name) ? 1 : -1"
+        @selection-change="$emit('selection-change', $event)">
+
+        <template v-slot:row.group="{ value: category }">
+            <div tabindex="0"
+                 class="card center-align">
+                <div class="card-image light-color valign-wrapper">
+                    <img v-bind:src="category.picture">
+                </div>
+                <div>
+                    <h2 v-bind:title="category.name">{{ category.name }}</h2>
+                </div>
+                <div v-if="$scopedSlots['card.actions']" class="card-action">
+                    <slot name="card.actions" v-bind:category="category"></slot>
+                </div>
+            </div>
+        </template>
+
+        <template v-if="$scopedSlots['side.actions']" v-slot:side.actions="{ value: document }">
+            <slot name="side.actions" v-bind:document="document"></slot>
+        </template>
+
+        <template v-slot:column.1="{ value: document }">
+            {{ document.name }}
+        </template>
+
+        <template v-slot:column.2="{ value: document }">
+            {{ document.author }}
+        </template>
+
+        <template v-slot:action.1="{ value: document }">
+            <router-link v-bind:to="'/documents-debats-sur-cartes/' + document.id" class="waves-effect waves-light btn">Aller au document</router-link>
+        </template>
+
+    </grid-layout>
+</template>
+
+<script>
+    module.exports = {
+        mixins: [VueGrid],
+        props: ['categories', 'extendable']
+    };
+</script>
\ No newline at end of file
diff --git a/src/main/webapp/assets/js/router.js b/src/main/webapp/assets/js/router.js
index cd1609e..32bca47 100644
--- a/src/main/webapp/assets/js/router.js
+++ b/src/main/webapp/assets/js/router.js
@@ -21,6 +21,11 @@ const router = new VueRouter({
         {path: '/votemajoritaire', component: vueLoader('views/votemajoritaire')},
         {path: '/createVoteMajoritaire', component: vueLoader('views/createVoteMajoritaire')},
         {path: '/votemajoritairedetails', component: vueLoader('views/votemajoritairedetails')},
+        {path: '/carto', component: vueLoader('views/cartoTest')},
+        {path: '/creation-debats-sur-cartes', component: vueLoader('views/createDebateSurCarte')},
+        {path: '/documents-debats-sur-cartes', component: vueLoader('views/documentsDebatesSurCarte')},
+        {path: '/documents-debats-sur-cartes/:id', component: vueLoader('views/documentDebatesSurCarte')},
+        {path: '/debats-sur-cartes', component: vueLoader('views/debatesSurCarte')},
         {path: '*', component: vueLoader('views/404')},
     ]
 });
\ No newline at end of file
diff --git a/src/main/webapp/assets/js/service/i18n.js b/src/main/webapp/assets/js/service/i18n.js
index 21ac9de..44089ae 100644
--- a/src/main/webapp/assets/js/service/i18n.js
+++ b/src/main/webapp/assets/js/service/i18n.js
@@ -102,6 +102,7 @@ const messages = {
         guests: "Invité⋅e⋅s",
         debates: "Débats",
         new_debate: "Nouveau débat",
+        new_map_debate: "Nouveau débat sur caarte",
         invite_in_debate: "Inviter au débat",
         SUPERADMIN: "Super administrateur⋅rice",
         SUPERADMIN: "Root",
@@ -232,6 +233,8 @@ const messages = {
             teams: "Groupes",
             documents: "Documents",
             my_debates: "Mes débats",
+            my_map_debates: "Mes débats sur cartes",
+            public_map_debates: "Débats publics sur cartes",
             public_debates: "Débats publics",
             logout: "Déconnection",
             login: "Se connecter",
diff --git a/src/main/webapp/assets/js/views/cartoTest.vue b/src/main/webapp/assets/js/views/cartoTest.vue
new file mode 100644
index 0000000..083b423
--- /dev/null
+++ b/src/main/webapp/assets/js/views/cartoTest.vue
@@ -0,0 +1,242 @@
+<template>
+  <div>
+    <base-layout id="cartodebates">
+      <template v-slot:title>
+        <h1>Debat sur carte</h1>
+      </template>
+
+      <!-- ************************************************* -->
+
+      <div id="mainContainer">
+        <div id="documentContainer">
+          <div
+            class="scroll-area"
+            @scroll="
+              hidePopup();
+              updateSpaghettis();
+            "
+            ref="documentContainer"
+          >
+            <div v-if="leftDisplay === 'document'" class="wrap">
+              <documented v-bind:value="$t('documentation.debate_document')">
+                <div id="mapContainer">
+                  <img
+                    id="mapImg"
+                    src="assets/img/mapimg.png"
+                    alt="map image"
+                  />
+                  <table id="myTable">
+                    <tr
+                      v-for="(_, indexOfLine) in nbOfLines"
+                      :key="indexOfLine"
+                    >
+                      <td
+                        v-for="(_, indexOfColumn) in nbOfColumns"
+                        :key="indexOfColumn"
+                        @click="select(indexOfLine, indexOfColumn)"
+                        :class="{
+                          selected: arrayData[indexOfLine][indexOfColumn],
+                        }"
+                      ></td>
+                    </tr>
+                  </table>
+                </div>
+              </documented>
+
+              <!-- <documented v-bind:value="$t('documentation.debate_bulets')">
+                <bullets-container
+                  @over-bullet="selectComment($event)"
+                  @click-bullet="
+                    selectComment($event);
+                    scrollToComment($event);
+                  "
+                  v-bind:displayable-comments="displayableComments"
+                  v-bind:comments="filteredComments"
+                >
+                </bullets-container>
+              </documented> -->
+            </div>
+          </div>
+        </div>
+
+        <div
+          id="commentsContainer"
+          v-bind:class="{ loading: mountedChildren < debate.commentsCount }"
+        >
+          <div
+            class="scroll-area"
+            @scroll="
+              hidePopup();
+              updateSpaghettis();
+            "
+            ref="commentsContainer"
+          >
+            <comment-widget v-for="comment in filteredComments" v-bind:key="comment.id" v-bind:comment="comment"> </comment-widget>
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-show="selectedRange"
+        class="selection_popup z-depth-2"
+        ref="arguePopup"
+        v-bind:style="'top: ' + popup.y + 'px; left: ' + popup.x + 'px;'"
+        @click="createComment()"
+        @mousedown.stop=""
+        @mouseup.stop=""
+      >
+        {{ $t("argue").toLowerCase() }}
+      </div>
+
+      <!-- ************************************************** -->
+
+      <template v-slot:addons>
+        <comment-modal
+          id="commentModalMap"
+          ref="commentModal"
+          v-bind:comment="newComment"
+        >
+        </comment-modal>
+
+        <tags-modal ref="tagModal"> </tags-modal>
+      </template>
+    </base-layout>
+  </div>
+</template>
+<style scoped>
+table,
+td,
+th {
+  border: 1px solid black;
+}
+table {
+  border-collapse: collapse;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+#mapContainer {
+  position: relative;
+}
+#mapImg {
+  width: 100%;
+  height: 100%;
+}
+.selected {
+  background-color: rgb(0 0 0 / 26%);
+}
+</style>
+<script>
+module.exports = {
+  data() {
+    return {
+      nbOfLines: 5,
+      nbOfColumns: 9,
+      arrayData: false,
+      // ********************************
+
+      debate: false,
+      newComment: false,
+      sortByPosition: false,
+      popup: { x: -9999, y: -9999 },
+      displayableComments: {},
+      selectedRange: false,
+      search: "",
+      mountedChildren: 0,
+      leftDisplay: "document",
+      scrapsMagicNumber: 2,
+      spaghettiOver: "",
+      spaghettiCountDown: 0,
+      scraps: [],
+      themes: [],
+      themeInput: "",
+      themeHelper: false,
+
+      // ****************************************
+    };
+  },
+
+  created() {
+    this.initDataArray();
+  },
+  computed: {
+    filteredComments() {
+      return this.debate.comments ? this.debate.comments.filter((comment) => !comment.parent) : []
+    },
+    documentAsDom() {
+      let div = document.createElement("div");
+      div.innerHTML = this.debate.document.content;
+      return div;
+    },
+    spaghettiData() {
+      if (this.leftDisplay === "theme") {
+        return this.themes;
+      } else {
+        return this.scraps;
+      }
+    },
+  },
+  methods: {
+    initDataArray() {
+      let arr = [];
+      let col = Array(this.nbOfColumns).fill(false);
+      for (let i = 0; i < this.nbOfLines; i++) {
+        arr.push(col);
+      }
+      this.arrayData = arr;
+    },
+    select(l, c) {
+      let row = this.arrayData[l].slice();
+      row[c] = true;
+      this.arrayData.splice(l, 1, row);
+      this.createComment();
+    },
+    createComment() {
+      if (!this.$root.user.is("USER")) {
+        this.$confirm({
+          title: this.$t("not_connected"),
+          message: this.$t("helper.not_connected"),
+          isInfo: true,
+        });
+      } else {
+        this.$refs.commentModal.open((returnValue) => {
+          if (returnValue) {
+            // ArenService.Debates.addComment({
+            //   id: this.newComment.debate.id,
+            //   data: this.newComment,
+            //   loading: false,
+            // });
+          }
+        });
+        // this.hidePopup();
+      }
+    },
+    updateSpaghettis() {
+      if (this.leftDisplay !== "document") {
+        this.$nextTick(() => {
+          this.spaghettiData.forEach((s, scrapIndex) => {
+            s.spaghettis = s.comments.map((c, comIndex) =>
+              this.spaghetti(s, scrapIndex, c, comIndex)
+            );
+            s.color = d3.interpolateRainbow(
+              scrapIndex / this.spaghettiData.length
+            );
+          });
+        });
+      }
+    },
+    hidePopup() {
+      this.selectedRange = false;
+    },
+  },
+
+  components: {
+    "tags-modal": vueLoader("components/modals/tagsModal"),
+    "comment-modal": vueLoader("components/modals/commentModal"),
+
+    "comment-widget": vueLoader("components/widgets/comment"),
+    "bullets-container": vueLoader("components/widgets/bulletsContainer"),
+  },
+};
+</script>
diff --git a/src/main/webapp/assets/js/views/createDebateSurCarte.vue b/src/main/webapp/assets/js/views/createDebateSurCarte.vue
new file mode 100644
index 0000000..24cd605
--- /dev/null
+++ b/src/main/webapp/assets/js/views/createDebateSurCarte.vue
@@ -0,0 +1,283 @@
+<template>
+    <base-layout id="createDebate">
+        <template v-slot:title>
+            <h1>Ouvrir un débat</h1>
+        </template>
+
+        <template v-slot:right>
+        </template>
+
+        <tabs-layout
+            class="steps"
+            ref="mainTabs"
+            v-bind:tabs="[
+            {label:$t('with_dots')},
+            {label:$t('on_the_doc')},
+            {label:$t('recapitulative'), disabled: !debate.document}
+            ]"
+            @change-tab="scrollTop()">
+
+            <template v-slot:tab.1.header>
+                <documented v-bind:value="$t('documentation.create_debate_with')">
+                    <img v-if="debate.teams.length === 0" src="assets/img/Aren-icones-dispo-01.svg"/>
+                    <img v-else src="assets/img/Aren-icones-clic-01.svg"/>
+                </documented>
+                <br/>
+                <label class="center">{{ $t('with_dots') }}</label>
+            </template>
+
+            <template v-slot:tab.2.header>
+                <documented v-bind:value="$t('documentation.create_debate_document')">
+                    <img v-if="!debate.document" src="assets/img/Aren-icones-dispo-02.svg"/>
+                    <img v-else src="assets/img/Aren-icones-clic-02.svg"/>
+                </documented>
+                <br/>
+                <label class="center">{{ $t('on_the_doc') }}</label>
+            </template>
+
+            <template v-slot:tab.3.header>
+                <documented v-bind:value="$t('documentation.create_debate_recap')">
+                    <img src="assets/img/Aren-icones-dispo-03.svg"/>
+                </documented>
+                <br/>
+                <label class="center">{{ $t('recapitulative') }}</label>
+            </template>
+
+
+            <template v-slot:tab.1>
+                <div class="container">
+                    <contirbutors-widget>
+                        <template v-slot:team.side.actions="{ team }">
+                            <toggle-action-button
+                                v-bind:checked="debate.teams.includes( team )"
+                                @toggle="toggleTeam( team )">
+                            </toggle-action-button>
+                        </template>
+
+                        <template v-slot:user.side.actions="{ user }">
+                            <toggle-action-button
+                                v-bind:checked="debate.guests.includes( user )"
+                                @toggle="toggleGuest( user )">
+                            </toggle-action-button>
+                        </template>
+                    </contirbutors-widget>
+                </div>
+            </template>
+
+            <template v-slot:tab.2>
+                <div class="container">
+                    <documents-grid v-bind:categories="categories">
+                        <template v-slot:side.actions="{ document }">
+                            <toggle-action-button
+                                v-bind:checked="debate.document === document"
+                                @toggle="$event ? debate.document = document : debate.document = undefined">
+                            </toggle-action-button>
+                        </template>
+                    </documents-grid>
+                </div></template>
+
+            <template v-slot:tab.3>
+                <div class="container">
+
+                    <div class="row" v-if="debate.document">
+                        <template v-if="debate.teams.length !== 0 || debate.guests.length !== 0">
+                            <div class="col s4">
+                                <ul class="collection with-header">
+                                    <li class="collection-header">
+                                        <h2 class="valign-wrapper"><i class="material-icons">group</i>{{ $t('teams') }}</h2>
+                                    </li>
+                                    <li v-for="team in debate.teams" v-bind:key="team.id" class="collection-item">
+                                        <span>
+                                            <span v-if="team.institution.id !== 0"> {{ team.institution.type }} {{ team.institution.name }} - </span>{{ team.name }}
+                                        </span>
+                                        <i class="right close material-icons"
+                                           @click="debate.teams.remove(team)">delete_forever</i>
+                                    </li>
+                                </ul>
+                            </div>
+
+                            <div class="col s4">
+                                <ul class="collection with-header">
+                                    <li class="collection-header">
+                                        <h2 class="valign-wrapper"><i class="material-icons">person</i>{{ $t('guests') }}</h2>
+                                    </li>
+                                    <li v-for="user in debate.guests" v-bind:key="user.id" class="collection-item">
+                                        <span>
+                                            {{ user.fullName() }} - {{ user.atuthority }}
+                                        </span>
+                                        <i class="right close material-icons"
+                                           @click="debate.guests.remove(user)">delete_forever</i>
+                                    </li>
+                                </ul>
+                            </div>
+                        </template>
+                        <template v-else>
+                            <div class="col s8">
+                                <ul class="collection with-header">
+                                    <li class="collection-header">
+                                        <h2 class="valign-wrapper"><i class="material-icons">group</i>{{ $t('public_debate') }}<i class="material-icons">person</i></h2>
+                                    </li>
+                                    <li class="collection-item">
+                                        {{ $t('helper.public_debate') }}
+                                    </li>
+                                </ul>
+                            </div>
+                        </template>
+
+                        <div class="col s4">
+                            <ul class="collection with-header">
+                                <li class="collection-header">
+                                    <h2 class="valign-wrapper"><i class="material-icons">description</i>{{ $t('document') }}</h2>
+                                </li>
+                                <li class="collection-item">
+                                    {{ debate.document.category.name }} - {{ debate.document.name }}
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="row">
+                        <div class="col s4">
+                            <ul id="advancedOptions" class="collection with-header">
+                                <li class="collection-header"  @click="toggleAdvancedOptions()">
+                                    <h2 class="valign-wrapper">
+                                        <i class="material-icons">settings_applications</i>{{ $t('advanced_options') }}
+                                        <span v-bind:class="{ arrow: true, 'to-down': displayAdvancedOptions, 'to-right': !displayAdvancedOptions }"></span>
+                                    </h2>
+                                </li>
+                                <li id="advancedOptionsBody">
+                                    <ul ref="advancedOptions" v-bind:style="'marginTop: ' + (-46 * 4) + 'px;'">
+                                        <li class="collection-item">
+                                            <tooltiped tag="label" v-bind:value="$t('helper.reformulation_assist')">
+                                                <label>
+                                                    <input type="checkbox" v-model="debate.reformulationCheck" />
+                                                    <span>{{ $t('reformulation_assist') }}</span>
+                                                </label>
+                                            </tooltiped>
+                                        </li>
+                                        <li class="collection-item">
+                                            <tooltiped tag="label" v-bind:value="$t('helper.idefix_link')">
+                                                <label>
+                                                    <input type="checkbox" v-model="debate.idfixLink"/>
+                                                    <span>{{ $t('idefix_link') }}</span>
+                                                </label>
+                                            </tooltiped>
+                                        </li>
+                                        <li class="collection-item">
+                                            <tooltiped tag="label" v-bind:value="$t('helper.with_hypostases')">
+                                                <label>
+                                                    <input type="checkbox" v-model="debate.withHypostases"/>
+                                                    <span>{{ $t('with_hypostases') }}</span>
+                                                </label>
+                                            </tooltiped>
+                                        </li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="col s4">
+                        </div>
+                        <div class="col s4">
+                            <span class="right waves-effect waves-light btn"
+                                  @click="createDebate()">Lancer le débat</span>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </tabs-layout>
+
+        <template v-slot:addons>
+        </template>
+    </base-layout>
+</template>
+
+<script>
+    module.exports = {
+        data( ) {
+            return {
+                debate: new Debate( ),
+                categories: ArenService.Store.Category,
+                institution: new Institution( ),
+                search: "",
+                step: 0,
+                displayAdvancedOptions: false
+            };
+        },
+        created( ) {
+            if (!this.$root.user.is('MODO')) {
+                this.$router.push("/404");
+                return;
+            }
+            this.fetchData( );
+            this.debate.reformulationCheck = true;
+        },
+        methods: {
+            fetchData( ) {
+                ArenService.Documents.getAll();
+            },
+            reinit() {
+                this.debate = new Debate( );
+                this.debate.reformulationCheck = true;
+                this.$refs.mainTabs.activeIndex = 0;
+            },
+            institutionChanged(institution) {
+                this.institution = institution;
+            },
+            toggleTeam(team) {
+                if (!this.debate.teams.includes(team)) {
+                    this.debate.teams.push(team);
+                } else {
+                    this.debate.teams.remove(team);
+                }
+            },
+            toggleGuest(user) {
+                if (!this.debate.guests.includes(user)) {
+                    this.debate.guests.push(user);
+                } else {
+                    this.debate.guests.remove(user);
+                }
+            },
+            toggleAdvancedOptions(value) {
+                value = typeof value === "undefined" ? !this.displayAdvancedOptions : value;
+                if (value) {
+                    this.$refs.advancedOptions.style.marginTop = 0;
+                } else {
+                    this.$refs.advancedOptions.style.marginTop = (-46 * 4) + "px";
+                }
+                this.displayAdvancedOptions = value;
+            },
+            createDebate( ) {
+                if (this.debate.teams.length === 0 && this.debate.guests.length === 0) {
+                    this.debate.openPublic = true;
+                }
+                ArenService.Debates.create({
+                    data: this.debate,
+                    onSuccess: (debate) => {
+                        this.debate = debate;
+                        this.$confirm({
+                            title: this.$t("creation_success"),
+                            message: this.$t('helper.debate_created',
+                                    {documentName: this.debate.document.name, categoryName: this.debate.document.category.name}),
+                            cancelLabel: this.$t('no'),
+                            validateLabel: this.$t('yes'),
+                            callback: (returnValue) => {
+                                if (returnValue) {
+                                    this.$router.push('/debates/' + this.debate.id);
+                                } else {
+                                    this.reinit();
+                                }
+                            }
+                        });
+                    }
+                });
+            },
+            scrollTop() {
+                document.documentElement.scrollTop = 0;
+            }
+        },
+        components: {
+            'contirbutors-widget': vueLoader('components/widgets/contributors'),
+            'documents-grid': vueLoader('components/grids/documentsGrid')
+        }
+    };
+</script>
diff --git a/src/main/webapp/assets/js/views/debatesSurCarte.vue b/src/main/webapp/assets/js/views/debatesSurCarte.vue
new file mode 100644
index 0000000..1fd87df
--- /dev/null
+++ b/src/main/webapp/assets/js/views/debatesSurCarte.vue
@@ -0,0 +1,91 @@
+<template>
+    <base-layout id="debates">
+        <template v-slot:title>
+            <h1>{{ $root.user.is('USER') ? $t('menu.my_map_debates') : $t('menu.public_map_debates') }}</h1>
+        </template>
+
+        <template v-slot:right>
+            <router-link v-if="$root.user.is('MODO')"
+                         class="waves-effect waves-light btn"
+                         to="/creation-debats-sur-cartes">
+                {{ $t('new_map_debate') }}
+            </router-link>
+        </template>
+
+        <debates-grid
+            v-bind:categories="categories"
+            v-bind:extendable="true">
+
+            <template v-if="$root.user.is('MODO')" v-slot:side.actions="{ debate }">
+                <action-button
+                    v-bind:tooltip="$t('helper.remove_debate')"
+                    v-bind:tooltip-disabled="$t('helper.cannot_remove_debate')"
+                    v-bind:disabled="debate.commentsCount !== 0"
+                    @press="deleteDebate(debate)"
+                    icon="delete">
+                </action-button>
+            </template>
+            <template v-if="$root.user.is('MODO')" v-slot:add.contributor="{ debate }">
+                <span class="waves-effect waves-light btn"
+                      @click="edit( debate )">
+                    {{ $t('invite_in_debate') }}
+                </span>
+            </template>
+
+        </debates-grid>
+
+        <template v-slot:addons v-if="$root.user.is('MODO')">
+            <contributor-modal
+                ref="contributorModal">
+            </contributor-modal>
+        </template>
+    </base-layout>
+</template>
+
+<script>
+    module.exports = {
+        data( ) {
+            return {
+                categories: [],
+            };
+        },
+        created( ) {
+            this.fetchData( );
+        },
+        methods: {
+            fetchData( ) {
+                this.categories = [];
+                let categoryId = this.$route.query.category;
+                ArenService.Debates.getAll({
+                    query: categoryId ? {category: categoryId, overview: true} : {overview: true},
+                    onSuccess: debates => debates.forEach(d => {
+                            if (!this.categories.includes(d.document.category)) {
+                                this.categories.push(d.document.category)
+                            }
+                        })
+                });
+            },
+            edit(debate) {
+                this.$refs.contributorModal.debate = debate;
+                this.$refs.contributorModal.open( );
+            },
+            deleteDebate(debate) {
+                this.$confirm({
+                    title: this.$t("helper.delete_debate", {debateName: debate.document.name}),
+                    message: this.$t('helper.do_continue'),
+                    callback: (returnValue) => {
+                        if (returnValue) {
+                            ArenService.Debates.remove({
+                                data: debate
+                            });
+                        }
+                    }
+                });
+            }
+        },
+        components: {
+            'contributor-modal': vueLoader('components/modals/contributorModal'),
+            'debates-grid': vueLoader('components/grids/debatesSurCarteGrid')
+        }
+    };
+</script>
\ No newline at end of file
diff --git a/src/main/webapp/assets/js/views/documentDebatesSurCarte.vue b/src/main/webapp/assets/js/views/documentDebatesSurCarte.vue
new file mode 100644
index 0000000..4d07eda
--- /dev/null
+++ b/src/main/webapp/assets/js/views/documentDebatesSurCarte.vue
@@ -0,0 +1,208 @@
+<template>
+  <base-layout id="document">
+    <template v-slot:title>
+      <h1>{{ $t("document") }} -</h1>
+      <h1>
+        <text-input
+          class="inline"
+          v-bind:disabled="!editionMode"
+          ref="name"
+          type="textarea"
+          v-model="document.name"
+          v-bind:placeholder="$t('title')"
+        ></text-input>
+      </h1>
+      <label>{{ $t("by").toLowerCase() }}</label>
+      <text-input
+        class="author inline"
+        v-bind:disabled="!editionMode"
+        ref="author"
+        type="textarea"
+        v-model="document.author"
+        v-bind:placeholder="$t('author')"
+        maxlength="30"
+      ></text-input>
+    </template>
+
+    <template v-slot:right>
+      <span
+        v-if="editionMode"
+        class="waves-effect waves-light btn"
+        @click="saveDocument()"
+      >
+        {{ $t("save") }}
+      </span>
+      <span
+        v-if="editionMode"
+        class="waves-effect waves-light btn"
+        @click="cancelEdition()"
+      >
+        {{ $t("cancel") }}
+      </span>
+
+      <span
+        v-if="!editionMode"
+        class="waves-effect waves-light btn"
+        @click="
+          fetchData();
+          editionMode = true;
+        "
+      >
+        {{ $t("modify") }}
+      </span>
+    </template>
+    <div id="cartoDetails">
+      <div>
+        <label for="loadCarto" class="btn">Charger la carte</label>
+        <input
+          id="loadCarto"
+          style="visibility: hidden;"
+          type="file"
+          @change="onCartoSelected"
+        />
+      </div>
+      <div class="cartoInformation-bloc">
+        <div class="mailleInfo">
+          <label>Nombre de ligne </label>
+          <input type="text" maxlength="2" v-model.number="nbOfLines" />
+        </div>
+        <div class="mailleInfo">
+          <label>Nombre de colonne </label>
+          <input type="text" maxlength="2" v-model.number="nbOfColumns" />
+        </div>
+      </div>
+    </div>
+
+    <div id="mapContainer" v-if="imgUrl">
+      <img id="mapImg" :src="imgUrl" alt="map image" />
+      <table>
+        <tr v-for="(_, indexOfLine) in nbOfLines" :key="indexOfLine">
+          <td
+            v-for="(_, indexOfColumn) in nbOfColumns"
+            :key="indexOfColumn"
+          ></td>
+        </tr>
+      </table>
+    </div>
+    <!-- <div id="documentDisplay" v-bind:class="[ 'container', { 'in-edition': editionMode === true } ]">
+            
+            <tooltiped tag="div"
+                       v-bind:value="(editionMode && document.debatesCount > 0) ? $t('helper.cannot_edit_document') : '' ">
+                <wysiwyg-editor v-model="document.content"
+                                v-bind:enabled="editionMode && !document.debatesCount">
+                </wysiwyg-editor>
+            </tooltiped>
+        </div> -->
+  </base-layout>
+</template>
+
+<style scoped>
+#loadCarto {
+  padding: 10px;
+  margin: 15px;
+}
+#cartoDetails {
+  display: inline;
+}
+.mailleInfo {
+  margin: 10px;
+  width: 110px;
+}
+.cartoInformation-bloc {
+  display: flex;
+}
+/**********************/
+table,
+td,
+th {
+  border: 1px solid black;
+}
+table {
+  border-collapse: collapse;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+#mapContainer {
+  position: relative;
+}
+#mapImg {
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+<script>
+module.exports = {
+  data() {
+    return {
+      document: false,
+      unmodifiedDocument: new Document(),
+      editionMode: false,
+      selectedCarto: null,
+      imgUrl: null,
+      nbOfLines: 0,
+      nbOfColumns: 0,
+    };
+  },
+  created() {
+    if (!this.$root.user.is("MODO")) {
+      this.$router.push("/404");
+      return;
+    }
+  },
+  mounted() {
+    this.fetchData();
+  },
+  methods: {
+    fetchData() {
+      if (this.$route.params.id !== "new") {
+        ArenService.Documents.get({
+          id: this.$route.params.id,
+          onSuccess: (document) => {
+            this.document = document;
+            this.copyDocument(this.document, this.unmodifiedDocument);
+          },
+        });
+      } else {
+        this.document = new Document();
+        this.document.category = new Category();
+        this.document.category.id = this.$route.query.category;
+        this.editionMode = true;
+      }
+    },
+    cancelEdition() {
+      this.copyDocument(this.unmodifiedDocument, this.document);
+      this.editionMode = false;
+      if (this.$route.params.id === "new") {
+        this.$router.push("/documents-debats-sur-cartes");
+      }
+    },
+    saveDocument() {
+      this.editionMode = false;
+      ArenService.Documents.createOrUpdate({
+        data: this.document,
+        onSuccess: (document) => {
+          if (this.$route.params.id === "new") {
+            this.$router.push("/documents-debats-sur-cartes/" + document.id);
+          }
+        },
+      });
+    },
+    copyDocument(from, to) {
+      to.name = from.name;
+      to.author = from.author;
+      to.content = from.content;
+    },
+    onCartoSelected(event) {
+      const file = event.target.files[0];
+      this.selectedCarto = file;
+      this.imgUrl = URL.createObjectURL(file);
+    },
+  },
+  components: {
+    "wysiwyg-editor": vueLoader("components/widgets/wysiwygEditor"),
+  },
+};
+</script>
diff --git a/src/main/webapp/assets/js/views/documentsDebatesSurCarte.vue b/src/main/webapp/assets/js/views/documentsDebatesSurCarte.vue
new file mode 100644
index 0000000..4ab7434
--- /dev/null
+++ b/src/main/webapp/assets/js/views/documentsDebatesSurCarte.vue
@@ -0,0 +1,140 @@
+<template>
+    <base-layout id="documents">
+        <template v-slot:title>
+            <h1>Documents</h1>
+        </template>
+
+        <template v-slot:right>
+            <span class="waves-effect waves-light btn"
+                  @click="createOrUpdateCategory()">
+                Nouvelle catégorie
+            </span>
+        </template>
+
+        <documents-grid ref="documentGrid"
+                        v-bind:categories="categories"
+                        v-bind:extendable="true"
+                        v-bind:actions="[ 2 ]">
+
+            <template v-slot:card.actions="{ category }">
+                <action-button
+                    v-bind:tooltip="$t('helper.add_document')"
+                    @press="$router.push({ path: '/documents-debats-sur-cartes/new', query: { category: category.id }})"
+                    icon="note_add">
+                </action-button>
+                <action-button
+                    v-bind:tooltip="$t('helper.edit_category')"
+                    @press="createOrUpdateCategory(category)"
+                    icon="edit">
+                </action-button>
+                <action-button
+                    v-bind:tooltip="$t('helper.remove_category')"
+                    v-bind:tooltip-disabled="$t('helper.cannot_remove_category')"
+                    v-bind:disabled="category.documents.length !== 0"
+                    @press="deleteCategory(category)"
+                    icon="delete">
+                </action-button>
+            </template>
+
+            <template v-slot:side.actions="{ document }">
+                <action-button
+                    v-bind:tooltip="$t('helper.copy_document')"
+                    @press="duplicateDocument(document)"
+                    icon="content_copy">
+                </action-button>
+                <action-button
+                    v-bind:tooltip="$t('helper.remove_document')"
+                    v-bind:tooltip-disabled="$t('helper.cannot_remove_document')"
+                    v-bind:disabled="document.debatesCount !== 0"
+                    @press="deleteDocument(document)"
+                    icon="delete">
+                </action-button>
+            </template>
+
+        </documents-grid>
+
+        <template v-slot:addons>
+            <category-modal
+                ref="categoryModal">
+            </category-modal>
+        </template>
+    </base-layout>
+</template>
+
+<script>
+    module.exports = {
+        data( ) {
+            return {
+                categories: ArenService.Store.Category
+            };
+        },
+        created( ) {
+            if (!this.$root.user.is('MODO')) {
+                this.$router.push("/404");
+                return;
+            }
+            this.fetchData( );
+        },
+        methods: {
+            fetchData( ) {
+                ArenService.Categories.getAll();
+            },
+            duplicateDocument(document) {
+                let documentCopy = new Document({
+                    name: document.name + " - copie",
+                    author: document.author,
+                    content: document.content,
+                    category: {id: document.category.id}
+                });
+                ArenService.Documents.duplicate({
+                    id: document.id
+                });
+            },
+            createOrUpdateCategory(category = {}) {
+                this.$refs.categoryModal.category = new Category(category);
+                this.$refs.categoryModal.open((updatedCat) => {
+                    if (updatedCat) {
+                        ArenService.Categories.createOrUpdate({
+                            data: updatedCat,
+                            onSuccess: (returnedCategory) => {
+                                this.$nextTick(function ( ) {
+                                    this.$refs.documentGrid.selectRow('group' + returnedCategory.id);
+                                });
+                            }
+                        });
+                    }
+                });
+            },
+            deleteDocument(document) {
+                this.$confirm({
+                    title: this.$t("helper.delete_document", {documentName: document.name}),
+                    message: this.$t('helper.do_continue'),
+                    callback: (returnValue) => {
+                        if (returnValue) {
+                            ArenService.Documents.remove({
+                                data: document
+                            });
+                        }
+                    }
+                });
+            },
+            deleteCategory(category) {
+                this.$confirm({
+                    title: this.$t("helper.delete_category", {debateName: category.name}),
+                    message: this.$t('helper.do_continue'),
+                    callback: (returnValue) => {
+                        if (returnValue) {
+                            ArenService.Categories.remove({
+                                data: category
+                            });
+                        }
+                    }
+                });
+            }
+        },
+        components: {
+            'category-modal': vueLoader('components/modals/categoryModal'),
+            'documents-grid': vueLoader('components/grids/documentsDebateSurCarte')
+        }
+    };
+</script>
\ No newline at end of file
diff --git a/src/main/webapp/index.jsp b/src/main/webapp/index.jsp
index 1e19386..7850e00 100644
--- a/src/main/webapp/index.jsp
+++ b/src/main/webapp/index.jsp
@@ -111,8 +111,16 @@
                     <li v-if="user.is('USER')">
                         <router-link to="/votemajoritaire" v-bind:class="{ active: $route.path === '/votemajoritaire' || $route.path === '/createVoteMajoritaire' || $route.path === '/votemajoritairedetails'}">Votes majoritaires</router-link>
                     </li>
+                    <li>
+                        <router-link to="/creation-debats-sur-cartes" v-bind:class="{ active: $route.path === '/creation-debats-sur-cartes' }">Ouvrir un débat sur carte</router-link>
+                    </li>
+                    <li>
+                        <router-link to="/documents-debats-sur-cartes" v-bind:class="{ active: $route.path === '/documents-debats-sur-cartes' }">Mes documents de débat sur carte</router-link>
+                    </li>
+                    <li>
+                        <router-link to="/debats-sur-cartes" v-bind:class="{ active: $route.path === '/debats-sur-cartes' }">Mes débats sur carte</router-link>
+                    </li>
                 </ul>
-
                 <ul class="right">
                     <template v-if="user.is('USER')">
                         <documented v-bind:value="$t('documentation.notification_panel')">