Script for generating new spreadsheet based layers

[daemon1024]

Initial Steps for #488

Aim of the script is to generate a new spreadsheet layer based on some configuration ( json for now ).

Checklist the script should perform:

• Take input from a json
• Generate src/layername.js with the following content

   L.layerGroup.NewLayerName = function (options) {
   		return new L.SpreadsheetLayer({
   				url: "", // String url of data sheet
   				lat: "Latitude", // name of latitude column
   				lon: "Longitude", // name of longitude column
   				columns: ["", ""], // Array of column names to be used
   				generatePopup: function () {
   						  // function used to create content of popups
   				},
   				imageOptions: {
     				icon: L.icon.mapKnitterIcon(),
   				}, // optional, defaults to blank
   				// sheetNum: // optional, defaults to 0 (first sheet)
   		});
   };

• Add import statement for generated file to AllLayers.js
• Add Layer Name to LeafletEnvironmentalLayers.js

Ref publiclab/plots2#9698

[welcome]

Thanks for opening your first issue! This space is protected by our Code of Conduct - and we're here to help.
Please follow the issue template to help us help you 👍🎉😄
If you have screenshots or a gif to share demonstrating the issue, that's really helpful! 📸
Do join our Gitter channel for some brainstorming discussions.

[daemon1024]

Can you please review the checklist once?
Where should the script and template files reside in?

cc @jywarren @coderjolly @RuthNjeri @pydevsg

[jywarren]

Hi, my thoughts were to put everything in the same repo, maybe in a /scripts/ folder? How does that sound? We can put a README in there too, just README.md should appear in GitHub in a directory.

[daemon1024]

I came up with a much more cleaner way to import stuff

const fs = require("fs");

// List all json files in the driectory containing spreadsheet based layer
const layerFiles = fs
  .readdirSync("./")
  .filter((file) => file.endsWith(".json"));

for (const file of layerFiles) {
  // Dynamically import the listed file
  const data = fs.readFileSync(__dirname + `/${file}`, "utf8");
  const layerData = JSON.parse(data);

  //Evaluate based on dynamic data
  let newLayer = function (options) {
    return new L.SpreadsheetLayer({
      url: layerData.url,
      lat: "Latitude",
      lon: "Longitude",
      generatePopup: function () {},
      imageOptions: {
        icon: L.icon.mapKnitterIcon(),
      },
    });
  };
  eval("L.layerGroup." + layerData.name + "=newLayer");
}

[daemon1024]

I am not sure about how to transpile this for browsers.

I found about https://github.com/browserify/brfs/ which would compile fs for us. But it doesnt support the dynamic imports

[daemon1024]

I think I was only trying to read multiple json files since I was trying to have all the layers have there respective json files. But that's not a necessity 🤔

[daemon1024]

Noting, We need to add information to info.json as well other wise we end up with

[jywarren]

Ooh!!! Very nice! Couldn't we run this during compilation so it doesn't need to transpile? The /dist/ versions would then include all of this? Very cool @daemon1024 -- i like it a lot! Want to try opening a PR with this and slowly build on it?

[daemon1024]

Hey @jywarren, I actually figured it out. I have updated my PR already. You can take a look at it at #531. It does it all at compilation now :)

[daemon1024]

Noting some of the things which needs to be handled in the subsequent pull requests.

• Handle oneLinerCodeExample
• Handle other columns other than lat and long for more informative map layer
• use custom pop up function
• use custom marker
• Tests

[daemon1024]

Regarding OneLinerCodeExample we are using https://github.com/publiclab/leaflet-environmental-layers/blob/main/src/AllLayers.js

I think we will need to modify how the source of truth for the layer names work.

Currently it's hardcoded but we need to extract it from info.json maybe. But I am not sure hwo the layer group works.