This morning I was asked by an acquaintance if I could create a quick map of Mar-a-Lago featuring a number of red markers. The image above is the result. As no money was paid for this map feel free to reproduce it and share it on social media with no accreditation.
The budget for this project was zero.
To be honest there is nothing particularly exciting about the map - but I thought it might be worth explaining how I created a map at speed for a friend - and for no cost (except for 30 minutes of my time)!
If you're looking to build an interactive map without relying on expensive APIs or proprietary platforms, MapLibre GL JS and OpenFreeMap offer a powerful, fully open-source solution. For this project, I created a full-screen, 3D-tilted map with custom markers and at no cost. Here is how:
🔧 Tools Used
MapLibre GL JS - A community-driven fork of Mapbox GL JS, free and open-source.
OpenFreeMap - A source for free vector tile styles, ideal for high-performance custom maps.
Bing AI Image Creator - Used to design a unique marker icon using generative AI, completely free.
🧭 The Map
Using MapLibre, I initialized a map with the following features:
- Full-screen display with no padding or scrollbars
- A camera tilt (pitch: 60) and rotation (bearing: 270) to give a dramatic 3D effect
- High zoom level (zoom: 19) for street-level detail
- Free Liberty-style vector tiles from OpenFreeMap
📍 Custom Marker with AI-Generated Image
Instead of using the default pin the client wanted a map marker that resembled markers used by certain crime maps. I created a custom marker using an AI-generated image from Bing Image Creator.
🧪 Try It Yourself
All it takes is a single HTML file and a bit of CSS and JavaScript. Whether you're building a store locator, historical map, or data visualization, this stack gives you full control - without vendor lock-in or usage limits.
No comments:
Post a Comment