Transfer js code in export.html into separate .js file

[segun-codes]

Hi, this is a first-timers-only issue. This means we've worked to make it more legible to folks who either haven't contributed to our codebase before, or even folks who haven't contributed to open source before.

If that's you, we're interested in helping you take the first step and can answer questions and help you out as you do. Note that we're especially interested in contributions from people from underrepresented groups in free and open-source software!

We know that the process of creating a pull request is one of the biggest barriers for new contributors. This issue is for you 💝

If you have contributed before, consider leaving this one for someone new, and looking through our general help wanted issues. Thanks!

🤔 What you will need to know.

Nothing. This issue is meant to welcome you to Open Source :) We are happy to walk you through the process.

📋 Step by Step

• 🙋 Claim this issue: Claim the issue by commenting. If someone else has claimed it, ask if they've opened a pull request already and if they're stuck -- maybe you can help them solve a problem or move it along!

💡 Learn how to claim 🙋

Claiming an issue

Unless the issue is marked as reserved for someone, you can just say "I'd like to try this!" and then you've claimed it - no need to wait for someone to assign it to you. Just be sure you link your pull request (PR) to this issue so we can see where your solution is.

And open one early if possible - even before you've completed it with additional commits - and others can help you figure out any issues you may face.

• 📝 Update the file export.html in the https://github.com/publiclab/Leaflet.DistortableImage repository (press the little pen Icon) and edit the line as shown below.

See this page for some help in taking your first steps!

Below is a "diff" showing in red (and a -) which lines to remove, and in green (and a +) which lines to add:

In file export.html, add <script src="./js/export.js" defer></script> to the header section, then apply the diff below.

-
-  <script>
-   let map;
-
-   (function() {
-     map = L.map('map').setView([51.505, -0.13], 13);
-     map.addGoogleMutant();
-
-     map.whenReady(function() {
-       img = L.distortableImageOverlay('example.jpg', {
-         corners: [
-           L.latLng(51.52, -0.14),
-           L.latLng(51.52,-0.10),
-           L.latLng(51.50, -0.14),
-           L.latLng(51.50,-0.10),
-         ],
-         mode: 'lock',
-       });
-
-       // create a second image
-       img2 = L.distortableImageOverlay('example.jpg', {
-         corners: [
-           L.latLng(51.51, -0.20),
-           L.latLng(51.51,-0.16),
-           L.latLng(51.49, -0.21),
-           L.latLng(51.49,-0.17),
-         ],
-         mode: 'freeRotate',
-         suppressToolbar: true,
-       });
-
-       let json = [{"nodes":[
-               {"lat":"41.8200378187","lon":"-71.4034409085"},
-               {"lat":"41.8199873593","lon":"-71.4030021564"},
-               {"lat":"41.8196229772","lon":"-71.4029728831"},
-               {"lat":"41.8198214546","lon":"-71.4034614433"}
-           ],
-           "cm_per_pixel":23.0934,
-           "src":"https://s3.amazonaws.com/grassrootsmapping/warpables/312455/test.png"},
-           {"nodes":[
-               {"lat":"41.819898342","lon":"-71.4035387139"},
-               {"lat":"41.819898342","lon":"-71.4028493862"},
-               {"lat":"41.8195005594","lon":"-71.4028493862"},
-               {"lat":"41.8195005594","lon":"-71.4035387139"}
-           ],
-           "cm_per_pixel":35.8578,
-           "src":"https://s3.amazonaws.com/grassrootsmapping/warpables/320983/test.png"}
-       ];
-
-       // customize the function that starts up the export
-       const fetchStatusUrl = (mergedOpts) => {
-         const form = new FormData();
-         form.append('collection', JSON.stringify(mergedOpts.collection));
-         form.append('scale', prompt("Choose a scale or use the default (cm per pixel):", 100) || mergedOpts.scale);
-         form.append('upload', true);
-
-         const reqOpts = {method: 'POST', body: form};
-         const req = new Request(mergedOpts.exportStartUrl, reqOpts);
-
-         fetch(req).then((res) => {
-           if (res.ok) {
-             return res.text();
-           }
-         }).then(mergedOpts.handleStatusRes);
-       };
-
-       // receives the URL of status.json, and starts running the updater to repeatedly fetch from status.json;
-       // this may be overridden to integrate with any UI
-       const handleStatusRes = (data) => {
-         statusUrl = data.split('please visit, ')[1];
-
-         /*
-           if we are getting status updates, repeatedly fetch the status.json:
-           this.updateInterval = setInterval(() => {
-             const reqOpts = {method: 'GET'};
-             const req = new Request(`${data}?${Date.now()}`, reqOpts);
-             fetch(req).then((res) => {
-               if (res.ok) {
-                 return res.text();
-               }
-             }).then(opts.updater);
-           }, opts.frequency);
-         */
-
-         // but in this example, we're not; we just get the URL of the finished image;
-         // we should initiate the download?
-         window.location = statusUrl;
-       };
-        // initialize the collection:
-       imgGroup = L.distortableCollection({
-         exportOpts: {
-           collection: json, // here we override the image data sent with a custom set
-           fetchStatusUrl: fetchStatusUrl,
-           handleStatusRes: handleStatusRes,
-           exportUrl: '//34.74.118.242/api/v2/export/', // used to
-           exportStartUrl: '//34.74.118.242/api/v2/export/', // used to initiate the export
-
-           // From this alternative exporter, we'll get a response like:
-           // "Your Image is exporting, to load Image please visit, http://34.74.118.242/api/v2/status/?pid=3d8233faa2ade0f0cee400fba1170890-7153"
-           // So, we can splice like this: response.split("please visit, ")[1]
-           // and get http://34.74.118.242/api/v2/status/?pid=3d8233faa2ade0f0cee400fba1170890-7153
-           // Noting, however, later we will expect to get a full Google Cloud Storage URL.
-
-           // remaining defaults are as follows, in /src/edit/DistortableCollection.Edit.js:
-           // collection = opts.collection || this._group.generateExportJson();
-           // frequency = opts.frequency || 3000;
-           // scale = opts.scale || 100; // switch it to _getAvgCmPerPixel !
-           // updater: function(json) {}  // a function to handle the result of repeated fetching of the status.json file
-           // fetchStatusUrl = opts.fetchStatusUrl || _defaultFetchStatusUrl;
-           // handleStatusRes = opts.handleStatusRes || _defaultHandleStatusRes;
-           // exportStartUrl = opts.exportStartUrl || '//export.mapknitter.org/export';
-           // exportUrl = opts.exportUrl || 'http://export.mapknitter.org/';
-         },
-       }).addTo(map);
-
-       imgGroup.addLayer(img);
-       imgGroup.addLayer(img2);
-     });
-   })();
- </script>

Create file export.js in folder /examples/js and apply the diff below:

+   let map;
+
+   (function() {
+     map = L.map('map').setView([51.505, -0.13], 13);
+     map.addGoogleMutant();
+
+     map.whenReady(function() {
+       img = L.distortableImageOverlay('example.jpg', {
+         corners: [
+           L.latLng(51.52, -0.14),
+           L.latLng(51.52,-0.10),
+           L.latLng(51.50, -0.14),
+           L.latLng(51.50,-0.10),
+         ],
+         mode: 'lock',
+       });
+
+       // create a second image
+       img2 = L.distortableImageOverlay('example.jpg', {
+         corners: [
+           L.latLng(51.51, -0.20),
+           L.latLng(51.51,-0.16),
+           L.latLng(51.49, -0.21),
+           L.latLng(51.49,-0.17),
+         ],
+         mode: 'freeRotate',
+         suppressToolbar: true,
+       });
+
+       let json = [{"nodes":[
+               {"lat":"41.8200378187","lon":"-71.4034409085"},
+               {"lat":"41.8199873593","lon":"-71.4030021564"},
+               {"lat":"41.8196229772","lon":"-71.4029728831"},
+               {"lat":"41.8198214546","lon":"-71.4034614433"}
+           ],
+           "cm_per_pixel":23.0934,
+           "src":"https://s3.amazonaws.com/grassrootsmapping/warpables/312455/test.png"},
+           {"nodes":[
+               {"lat":"41.819898342","lon":"-71.4035387139"},
+               {"lat":"41.819898342","lon":"-71.4028493862"},
+               {"lat":"41.8195005594","lon":"-71.4028493862"},
+               {"lat":"41.8195005594","lon":"-71.4035387139"}
+           ],
+           "cm_per_pixel":35.8578,
+           "src":"https://s3.amazonaws.com/grassrootsmapping/warpables/320983/test.png"}
+       ];
+
+       // customize the function that starts up the export
+       const fetchStatusUrl = (mergedOpts) => {
+         const form = new FormData();
+         form.append('collection', JSON.stringify(mergedOpts.collection));
+         form.append('scale', prompt("Choose a scale or use the default (cm per pixel):", 100) || mergedOpts.scale);
+         form.append('upload', true);
+
+         const reqOpts = {method: 'POST', body: form};
+         const req = new Request(mergedOpts.exportStartUrl, reqOpts);
+
+         fetch(req).then((res) => {
+           if (res.ok) {
+             return res.text();
+           }
+         }).then(mergedOpts.handleStatusRes);
+       };
+
+       // receives the URL of status.json, and starts running the updater to repeatedly fetch from status.json;
+       // this may be overridden to integrate with any UI
+       const handleStatusRes = (data) => {
+         statusUrl = data.split('please visit, ')[1];
+
+         /*
+           if we are getting status updates, repeatedly fetch the status.json:
+           this.updateInterval = setInterval(() => {
+             const reqOpts = {method: 'GET'};
+             const req = new Request(`${data}?${Date.now()}`, reqOpts);
+             fetch(req).then((res) => {
+               if (res.ok) {
+                 return res.text();
+               }
+             }).then(opts.updater);
+           }, opts.frequency);
+         */
+
+         // but in this example, we're not; we just get the URL of the finished image;
+         // we should initiate the download?
+         window.location = statusUrl;
+       };
+        // initialize the collection:
+       imgGroup = L.distortableCollection({
+         exportOpts: {
+           collection: json, // here we override the image data sent with a custom set
+           fetchStatusUrl: fetchStatusUrl,
+           handleStatusRes: handleStatusRes,
+           exportUrl: '//34.74.118.242/api/v2/export/', // used to
+           exportStartUrl: '//34.74.118.242/api/v2/export/', // used to initiate the export
+
+           // From this alternative exporter, we'll get a response like:
+           // "Your Image is exporting, to load Image please visit, http://34.74.118.242/api/v2/status/?pid=3d8233faa2ade0f0cee400fba1170890-7153"
+           // So, we can splice like this: response.split("please visit, ")[1]
+           // and get http://34.74.118.242/api/v2/status/?pid=3d8233faa2ade0f0cee400fba1170890-7153
+           // Noting, however, later we will expect to get a full Google Cloud Storage URL.
+
+           // remaining defaults are as follows, in /src/edit/DistortableCollection.Edit.js:
+           // collection = opts.collection || this._group.generateExportJson();
+           // frequency = opts.frequency || 3000;
+           // scale = opts.scale || 100; // switch it to _getAvgCmPerPixel !
+           // updater: function(json) {}  // a function to handle the result of repeated fetching of the status.json file
+           // fetchStatusUrl = opts.fetchStatusUrl || _defaultFetchStatusUrl;
+           // handleStatusRes = opts.handleStatusRes || _defaultHandleStatusRes;
+           // exportStartUrl = opts.exportStartUrl || '//export.mapknitter.org/export';
+           // exportUrl = opts.exportUrl || 'http://export.mapknitter.org/';
+         },
+       }).addTo(map);
+
+       imgGroup.addLayer(img);
+       imgGroup.addLayer(img2);
+     });
+   })();

• 💾 Commit your changes

• 🔀 Start a Pull Request. There are two ways how you can start a pull request:

1. If you are familiar with the terminal or would like to learn it, here is a great tutorial on how to send a pull request using the terminal.

2. You can also edit files directly in your browser and open a pull request from there.

• 🏁 Done Ask in comments for a review :)

🤔❓ Questions?

Leave a comment below!

Is someone else already working on this?

We encourage you to link to this issue by mentioning the issue # in your pull request, so we can see if someone's already started on it. If someone seem stuck, offer them some help! Otherwise, take a look at some other issues you can help with. Thanks!

(This issue was created by First-Timers-Bot.)

[segun-codes]

@TildaDares @jywarren, you may want to assign this out at some point if not now.

[TildaDares]

Let's follow @jywarren's suggestion in #1181. Thanks @segun-codes!

[TildaDares]

Same thing goes for #1184 and #1185

[segun-codes]

@TildaDares, @jywarren's suggestion has been followed and the issue closed out with the associated PR merged.

So there are still 4 similar open issues i.e., #1182 to #1185. I'm trying to avoid fixing the remaining myself because I thought you may want to assign them to other people. So do you want to assign them now, if not I'm happy to close them out quickly? Is there something you will like me to do to make this easy for anyone who wants to try them out? Thanks.

[TildaDares]

Hi @segun-codes, you can ahead and rework these issues to FTOs. Thank you!

[segun-codes]

Hi @segun-codes, you can ahead and rework these issues to FTOs. Thank you!

Hi @TildaDares, as you advised, this issue has now been converted into an FTO. You may now apply FTO label on it. Many thanks.

[TildaDares]

Thanks for working on these issues @segun-codes!

[TildaDares]

Reserved for @Sally-N for 24 hours!

[Sally-N]

Thank you @TildaDares

[segun-codes]

Thanks for working on these issues @segun-codes!

You are most welcome @TildaDares.

[Favour-Cay]

i havent gotten an FTO to work on @TildaDares

[Favour-Cay]

can i try this ?

[TildaDares]

Hi @Favour-Cay, an issue was reserved for you here #1160