Here was my first adventure in vibe coding [Star Battle: RELEASE | Development Notes]
The Problem
I love the program mapfrappe. Kudos Kelvin.
Open the website: window is split in half; each half has an independent map. On the left map, you place a string of waypoints, and in the right pane, it shows the same outline of your waypoints, properly scaled, according to what the right map is looking at.
So, you could outline the island of Manhattan on the left and then move the map on the right over Paris and see how the sizes compare. Or outline Minnesota on the left and in the right put it over England to see how they compare.
I initially found it because back in 2014ish I was about to take a trip to Instanbul. Looking on Google Maps, I thought, “So many neighborhoods, so much to see – how do I even grasp how big an area this is. What’s walkable? What’s doable? What am I dealing with here?” I think I Googled “scaled maps” or “comapring maps to one another” or something and found the program. I didn’t know THIS was what I wanted, but it is in fact what I definitely needed. I outlined Manhattan and Brooklyn (I’d lived there and knew what the scales meant for trains and walking) and placed it over Istanbul. Instant scale and context. That’s what mapfrappe is great at. I used it to plan many, many other vacations. I used it for years, and then at some point, the creator limited access to it because the Internet was making too many API calls to Google Maps (which he used to implement the two maps). It was costing a lot, he understandably, locked it down.
But I really, really, really wanted access again. [There’s some backstory here I’ll omit.]
After last week’s success of the first project on this blog, I was more than encouraged to create a clone here. Not a ripoff. Don’t charge, don’t sell it, don’t steal mapfrappe. But just borrow the initial concept and add a bunch of features. Use it, see what new features work, what doesn’t, use it more, iterate. And do it with an AI so none of it is copycat.
(Apparently he’s recently refactored his maps to use OpenStreetMap as well. I only knew this after finishing and playing around with v10 of my program.)
The Program
Well, 4 hours of conversation time over 2 days, I managed to go through 9 versions and land on a very stable v10. I have a verrrrry polished program with some verrrrrry nice functionality. Flexible, 1+1=3 type features, dynamic, efficient, and local and on my own browser. It’s wild.
[I was trying to share the zip with some friends via email and Gmail wouldn’t let me email it due to security concerns of executables. Luckily I have this blog so I can share the file. But another issue was that my program was built only for Mac, and he, apparently, only has a PC. Hm. Well that’s an easy one: ask GPT to make you two versions…]
So here are the two different versions. Use on laptop/desktop.
. . . . .
Mac
Windows
I cannot personally vouch for this version, because I don’t have a Windows computer. But from the way GPT explained it, the actual code, libraries, and map developed on Mac are platform agnostic, it’s just the tiny executable that launches the terminal and the tab in the browser, that is customized for Windows (a Windows .bat file vs a Mac .command file). Let me know if there are issues with it.
Someone who tried running the initial version, said it didn’t work (some error in the browser). He verified this refactored version works:
. . . . .
To launch:
- Download desired zip file above; make sure to use desktop/laptop.
- Double-click the downloaded file to completely unzip it
- An Internet connection is required to run the program, because the map data is pulled from OpenStreetMap. This allows you to go to any zoom level, anywhere in the globe. But that’s the only Internet dependency, all other code and libraries have been previously downloaded and included in this file package.
Mac
- Right-click “Start map-compare.command” file > “Open with…” > Terminal
- If it asks you for permission to trust a document downloaded from Internet, select “Open”
- If you double-click the file instead of explicitly opening with Terminal, you may see a dialogue box that just says the computer won’t trust this file downloaded from the Internet, without the option to force it to open. That’s where the right-click Open with… comes in. That should give you the option to open it anyways.
- Some commands may stream through the Terminal, and then a tab in your browser of choice will automatically open.
- Play around
- When you’re ready to quit, close the tab in the browser and then go to Terminal and command-Q which will cancel/close all Terminal processes and quit Terminal. This will close the program completely.
Windows
Again, I haven’t tested this myself, but it sounds only the initial file to start the mini-server and open the browser tab, is the only thing that changed. None of the other code of the program changed so it should work. I am using the instructions from GPT.
- Double-click the “Start map-compare.bat” file
- Keep the Command prompt open while using program
- Close both the browser window and Command program completely to end the program.
Other Details
I’ll keep it at that in this release post.
I do want to do a Development Notes post like I did for Star Battle. The chats with GPT were a little longer, so I’m not sure how practical it’ll be to copy out the entire conversation. But talking with a family member tonight, he was genuinely curious to see a “behind the scenes – what did I do to get here”. Like the Development Notes for Star Battle say, “I thought it would be interesting from a UI development standpoint, to see the evolution of the program along with the chat. …Part of me also wants to show (and prove to myself, and others), how easy this was.” So I think there’s value in including that.
I have a bunch of ideas for other projects. Now that this “conversational code” thing is working out, I see a few programs in my future. And it would be nice to aggregate all those in one place on this site. So I could see “instructions” and “features” explaining the program being valuable, but separate. I want to keep these Release posts to be exciting, a bit unknown (“run it and see”) vs screenshots and long explainers noone ever tries.