osm-quickedit plugin working

app/static/app/js/MapView.jsx

@@ -105,7 +105,7 @@ class MapView extends React.Component {
           opacity={opacity}
           mapType={this.state.selectedMapType} 
           public={this.props.public} />
-        <div className="opacity-slider theme-secondary">
+        <div className="opacity-slider theme-secondary hidden-xs">
           Opacity: <input type="range" step="1" value={opacity} onChange={this.updateOpacity} />
         </div>
       </div>);

app/static/app/js/classes/plugins/ApiFactory.js

@@ -15,8 +15,12 @@ export default class ApiFactory{
     // are more robust as we can detect more easily if 
     // things break
     const addEndpoint = (obj, eventName, preTrigger = () => {}) => {
-      const askForResponse = (...args) => {
-        this.events.emit(`${api.namespace}::${eventName}::Response`, ...args);
+      const emitResponse = (...args) => {
+        // Timeout needed for modules that have no dependencies
+        // and load synchronously. Gives time to setup the listeners.
+        setTimeout(() => {
+          this.events.emit(`${api.namespace}::${eventName}::Response`, ...args);
+        }, 0);
       };
 
       obj[eventName] = (callbackOrDeps, callbackOrUndef) => {
@@ -27,13 +31,13 @@ export default class ApiFactory{
           this.events.addListener(`${api.namespace}::${eventName}`, (...args) => {
             Promise.all(callbackOrDeps.map(dep => SystemJS.import(dep)))
               .then((...deps) => {
-                askForResponse(callbackOrUndef(...(Array.from(args).concat(...deps))));
+                emitResponse(callbackOrUndef(...(Array.from(args).concat(...deps))));
               });
             });
         }else{
           // Callback
           this.events.addListener(`${api.namespace}::${eventName}`, (...args) => {
-            askForResponse(callbackOrDeps(...args));
+            emitResponse(callbackOrDeps(...args));
           });
         }
       }

app/static/app/js/classes/plugins/Map.js

@@ -5,6 +5,7 @@ const { assert } = Utils;
 
 const leafletPreCheck = (options) => {
   assert(options.map !== undefined);
+  assert(options.tiles !== undefined);
 };
 
 export default {

app/static/app/js/components/Map.jsx

@@ -169,7 +169,7 @@ class Map extends React.Component {
   }
 
   componentDidMount() {
-    const { showBackground } = this.props;
+    const { showBackground, tiles } = this.props;
 
     this.map = Leaflet.map(this.container, {
       scrollWheelZoom: true,
@@ -178,7 +178,8 @@ class Map extends React.Component {
     });
 
     PluginsAPI.Map.triggerWillAddControls({
-      map: this.map
+      map: this.map,
+      tiles
     });
 
     Leaflet.control.scale({
@@ -239,11 +240,13 @@ class Map extends React.Component {
     });
 
     PluginsAPI.Map.triggerDidAddControls({
-      map: this.map
+      map: this.map,
+      tiles: tiles
     });
 
     PluginsAPI.Map.triggerAddActionButton({
-      map: this.map
+      map: this.map,
+      tiles
     }, (button) => {
       this.setState(update(this.state, {
         pluginActionButtons: {$push: [button]}
@@ -258,9 +261,7 @@ class Map extends React.Component {
     });
 
     if (prevProps.tiles !== this.props.tiles){
-      this.loadImageryLayers().then(() => {
-        // console.log("GOT: ", this.autolayers, this.autolayers.selectedOverlays);
-      });
+      this.loadImageryLayers();
     }
   }
 

plugins/osm-quickedit/plugin.py

@@ -5,8 +5,6 @@ class Plugin(PluginBase):
     def include_js_files(self):
     	return ['main.js']
 
-    # def include_css_files(self):
-    # 	return ['test.css']
 
 
 

plugins/osm-quickedit/public/main.js

@@ -1,7 +1,33 @@
-PluginsAPI.Map.addActionButton([
-    	'osm-quickedit/main.css'
-	], function(options){
-	
-	console.log("PLUGIN INIT!");
-	return React.createElement("div", null, "HELLO");
+PluginsAPI.Map.addActionButton(function(options){
+	if (options.tiles.length > 0){
+		// TODO: pick the topmost layer instead
+		// of the first on the list, to support
+		// maps that display multiple tasks.
+
+		var tile = options.tiles[0];
+		var url = window.location.protocol + "//" + 
+					window.location.host +
+					tile.url.replace(/tiles\.json$/, "tiles/{zoom}/{x}/{ty}.png");
+
+		return React.createElement("button", {
+				type: "button",
+				className: "btn btn-sm btn-secondary",
+				onClick: function(){
+					var mapLocation = options.map.getZoom() + "/" + 
+									  options.map.getCenter().lat + "/" + 
+									  options.map.getCenter().lng;
+
+					if (window.prompt("To start digitizing this map on OpenStreetMap:\n\n" +
+										"1. Copy the URL below.\n" + 
+										"2.When the editor loads, open the Background Settings (press B) and select \"Custom\".\n" +
+										"3. Press \"Edit Custom Background\".\n" + 
+										"4. Paste the URL you copied below.\n\n" + 
+										"Press OK to go to OpenStreetMap", url)){
+						window.location.href = "https://www.openstreetmap.org/edit?editor=id#map=" + mapLocation;
+					}
+				}
+			}, React.createElement("i", {className: "fa fa-map"}, ""), 
+				" OSM Digitize");
+	}
+
 });