diff --git a/app/static/app/js/classes/plugins/Map.js b/app/static/app/js/classes/plugins/Map.js
index fd074528..72668fa7 100644
--- a/app/static/app/js/classes/plugins/Map.js
+++ b/app/static/app/js/classes/plugins/Map.js
@@ -19,12 +19,16 @@ export default {
   endpoints: [
     ["willAddControls", leafletPreCheck],
     ["didAddControls", layersControlPreCheck],
-	  ["addActionButton", leafletPreCheck],
-    ["didAddAnnotation"]
+	  ["addActionButton", leafletPreCheck]
   ],
 
   functions: [
-    "handleClick"
+    "handleClick",
+    "addAnnotation",
+    "updateAnnotation",
+    "deleteAnnotation",
+    "toggleAnnotation",
+    "annotationDeleted"
   ]
 };
 
diff --git a/app/static/app/js/components/LayersControlAnnotations.jsx b/app/static/app/js/components/LayersControlAnnotations.jsx
index 732f4c02..5341a4cc 100644
--- a/app/static/app/js/components/LayersControlAnnotations.jsx
+++ b/app/static/app/js/components/LayersControlAnnotations.jsx
@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import '../css/LayersControlAnnotations.scss';
+import PluginsAPI from '../classes/plugins/API';
 import { Checkbox, ExpandButton } from './Toggle';
 import { _ } from '../classes/gettext';
 
 class AnnotationLayer extends React.Component{
   static propTypes = {
+    parent: PropTypes.object,
     layer: PropTypes.object
   }
 
@@ -17,8 +19,32 @@ class AnnotationLayer extends React.Component{
     }
   }
 
+  componentDidUpdate(prevProps, prevState){
+    if (prevState.visible !== this.state.visible && this.props.parent.state.visible){
+      PluginsAPI.Map.toggleAnnotation(this.props.layer, this.state.visible);
+    }
+  }
+
+  componentDidMount(){
+    PluginsAPI.Map.onUpdateAnnotation(this.handleUpdate);
+  }
+
+  componentWillUnmount(){
+    PluginsAPI.Map.offUpdateAnnotation(this.handleUpdate);
+  }
+
+  handleUpdate = (layer, name) => {
+    if (this.props.layer === layer){
+      const meta = layer[Symbol.for("meta")];
+      meta.name = name;
+      this.forceUpdate();
+    }
+  }
+
   handleFocus = () => {
     const { layer } = this.props;
+    if (!layer._map) return;
+
     if (layer.options.bounds || layer.getBounds){
       const bounds = layer.options.bounds !== undefined ? 
                      layer.options.bounds :
@@ -32,7 +58,9 @@ class AnnotationLayer extends React.Component{
   }
 
   handleDelete = () => {
-
+    if (window.confirm(_('Are you sure you want to delete this?'))){
+      PluginsAPI.Map.deleteAnnotation(this.props.layer);
+    }
   }
 
   render(){
@@ -51,13 +79,13 @@ export default class LayersControlAnnotations extends React.Component {
   static defaultProps = {
     expanded: true,
     visible: true
-
-};
+  };
+  
   static propTypes = {
     expanded: PropTypes.bool,
     visible: PropTypes.bool,
     layers: PropTypes.array
-}
+  }
 
   constructor(props){
     super(props);
@@ -66,11 +94,21 @@ export default class LayersControlAnnotations extends React.Component {
         visible: props.visible,
         expanded: props.expanded
     };
+
+    this.annRefs = new Array(props.layers.length);
   }
 
+  handleAnnotationsClick = () => {
+    this.setState({expanded: !this.state.expanded});
+  }
 
-  handleLayerClick = () => {
-    console.log("TODO")
+  componentDidUpdate(prevProps, prevState){
+    if (prevState.visible !== this.state.visible){
+      this.annRefs.forEach(ann => {
+        let visible = this.state.visible ? ann.state.visible : false;
+        PluginsAPI.Map.toggleAnnotation(ann.props.layer, visible);
+      });
+    }
   }
 
 
@@ -81,12 +119,12 @@ export default class LayersControlAnnotations extends React.Component {
     return (<div className="layers-control-layer">
         <div className="layer-control-title">
           <ExpandButton bind={[this, 'expanded']} /><Checkbox bind={[this, 'visible']}/>
-          <a title={_("Annotations")} className="layer-label" href="javascript:void(0);" onClick={this.handleLayerClick}><div className="layer-title"><i className="layer-icon fa fa-sticky-note fa-fw"></i> {_("Annotations")}</div></a>
+          <a title={_("Annotations")} className="layer-label" href="javascript:void(0);" onClick={this.handleAnnotationsClick}><div className="layer-title"><i className="layer-icon fa fa-sticky-note fa-fw"></i> {_("Annotations")}</div></a>
         </div>
 
         {this.state.expanded ? 
         <div className="layer-expanded">
-          {layers.map((layer, i) => <AnnotationLayer key={i} layer={layer} />)}
+          {layers.map((layer, i) => <AnnotationLayer parent={this} ref={domNode => this.annRefs[i] = domNode} key={i} layer={layer} />)}
         </div> : ""}
     </div>);
 
diff --git a/app/static/app/js/components/Map.jsx b/app/static/app/js/components/Map.jsx
index 8524dbde..ab471cfe 100644
--- a/app/static/app/js/components/Map.jsx
+++ b/app/static/app/js/components/Map.jsx
@@ -433,6 +433,9 @@ class Map extends React.Component {
     // leaflet bug?
     $(this.container).addClass("leaflet-touch");
 
+    PluginsAPI.Map.onAddAnnotation(this.handleAddAnnotation);
+    PluginsAPI.Map.onAnnotationDeleted(this.handleDeleteAnnotation);
+
     PluginsAPI.Map.triggerWillAddControls({
         map: this.map,
         tiles,
@@ -641,22 +644,25 @@ _('Example:'),
         pluginActionButtons: {$push: [button]}
       }));
     });
+  }
 
-    PluginsAPI.Map.didAddAnnotation([], (opts) => {
-      const layer = opts.layer;
+  handleAddAnnotation = (layer, name, task) => {
       const meta = {
-        name: opts.name || "", 
-        icon: opts.icon || "fa fa-sticky-note fa-fw"
+        name: name || "", 
+        icon: "fa fa-sticky-note fa-fw"
       };
       if (this.props.tiles.length > 1 && opts.task){
-        meta.group = {id: opts.task.id, name: opts.task.name};
+        meta.group = {id: task.id, name: task.name};
       }
       layer[Symbol.for("meta")] = meta;
 
       this.setState(update(this.state, {
         annotations: {$push: [layer]}
      }));
-    });
+  }
+
+  handleDeleteAnnotation = (layer) => {
+    this.setState({annotations: this.state.annotations.filter(l => l !== layer)});
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -683,6 +689,10 @@ _('Example:'),
       this.tileJsonRequests.forEach(tileJsonRequest => tileJsonRequest.abort());
       this.tileJsonRequests = [];
     }
+
+    PluginsAPI.Map.offAddAnnotation(this.handleAddAnnotation);
+    PluginsAPI.Map.offAnnotationDeleted(this.handleAddAnnotation);
+    
   }
 
   handleMapMouseDown(e){