Leaflet maps and AI assist via copilot + Git

Prerequisite: Familiarity with the Geojson newsmap in the previous tutorial

In this article we want to make rapid changes to the newsmap quickly using CoPilot. We use the newsmap from the previous tutorial as a template to be modified with VSCode’s Github Copilot feature so we can make very quick changes. The Copilot also very easily make a big mess. In order to make it work well it is crucial to make precise and comprehensive instructions while limiting the scope the AI is to operate within. The AI can quite easily become overeager, generate too much and go to far so we need to control it. The other crucial thing we need for this to work well with Copilot is to set up git in VScode. Git is the most common version control around and can help you maintain the intergrity of your project while doing rapid development.

Setup:

  • VSCode with github Copilot
  • In VSCode, open a folder with the file (Newsmap_GEOJSON.html)
  • Set up git in that folder

We use the geojson feed from city of chicago as a data source:

https://data.cityofchicago.org/resource/ijzp-q8t2.geojson?$limit=200&$order=date%20DESC

Set up Git

Git will allow you to work quickly, test new functionality and then if that goes wrong you can eaily revert to a previous version. Because code bases can have a lot of complexity with many files, going back to a previous state is not a simple ‘Undo’, but requires tracking of multiple files in mutiple states. This is what Git does for us. Git is a little complicated to use manually, but fortunately CoPilot can also halp us a lot with this.

Here is how it works:

After you have opened the folder with the newsmap file, we tell CoPilot to set up git in our folder:

Prompt CoPilot to set up git.

You can of course run the ‘git init’ command yourself in a terminal, but the Copilot will simplify this.

This is a simple way to open a file explorer with your file from VSCode:

Try the following prompt and then click ‘Continue’.

Then check that you get a confirmation.