Okay, so here’s the deal. I was messing around with map APIs the other day, trying to find the best way to display some location data I have. And I thought, “Hey, why not try making a map of San Juan, Puerto Rico?” It seemed like a fun little project.
First things first, I fired up my trusty code editor. I’m a big fan of VS Code, so that’s what I used. I created a new project folder and started with a basic HTML file. Nothing fancy, just the bare bones structure. You know, <html>, <head>, <body> – the usual suspects.
Then, I needed a map library. I’ve used Leaflet before and found it pretty straightforward, so I decided to go with that. I grabbed the Leaflet CSS and JavaScript files from their CDN and linked them in the <head> of my HTML file. Easy peasy.
Next, I added a <div> element to the <body> where I wanted the map to appear. I gave it an ID, like “mapid”, so I could easily target it with JavaScript. I also set a width and height for the div, otherwise the map would just be a tiny little square.
Now for the fun part: JavaScript! I created a new JavaScript file and linked it to my HTML. Inside the JavaScript file, I initialized the map using *('mapid'). This tells Leaflet to create a map inside the div with the ID “mapid”.
I then set the initial view of the map using setView([18.4663, -66.1057], 13). Those coordinates are for San Juan, and the 13 is the zoom level. I had to play around with the zoom level to get it just right. Too zoomed in, and you only see a small area. Too zoomed out, and it’s hard to see any details.
To actually see something on the map, I needed to add a tile layer. Tile layers are basically the map images that Leaflet uses. I used Mapbox tiles, which require an access token. I already had one from a previous project, so I just pasted it in. There are other tile providers you can use, like OpenStreetMap, but I like the look of the Mapbox tiles.
After that, I added some markers to the map. I used *([latitude, longitude]).addTo(map) to add a marker at a specific location. I found some coordinates for Old San Juan and dropped a marker there. I also added a popup to the marker using bindPopup(). The popup displays some text when you click on the marker.
I played around with different marker icons and popup styles. Leaflet is pretty flexible, so you can customize the map quite a bit. I didn’t go too crazy, though. I just wanted a simple, clean map.
Finally, I opened the HTML file in my browser and boom! There was my map of San Juan, Puerto Rico. It wasn’t anything groundbreaking, but it was a fun little exercise and I learned a few things along the way. Plus, now I have a cool map I can use for other projects.
Things I Learned
- Leaflet is still a solid choice for simple map projects.
- Mapbox tiles look really nice.
- It’s always good to brush up on your JavaScript skills.
Overall, it was a pretty smooth process. I ran into a few minor hiccups, like forgetting to set the map container size, but nothing too major. If you’re looking to create a map yourself, I highly recommend giving Leaflet a try. It’s a great library for beginners and experts alike.
