Javascript: How to Make a Simple Web Map

Today’s tutorial is a quick dive into the world of online mapping. We’re going to bounce in and out of different programs and services to do that, so be prepared to do some account set-ups/downloads. The good news is these all are free. You might get prompted for upgrades and such, but the base-level plans are no cost for small, non-commercial projects.

A basic understanding of HTML is helpful, but not necessary for this. If anything, JavaScript would be good to know; though, really if you’ve done any coding, you’ll know enough to modify the existing code for a functional map.

Here’s a quick rundown of what we’re using.

Step 1: Download Sublime

Sublime is the program we’ll use to test out the code that makes the map. Sublime is pretty amazing because it’ll predict a lot of what you’re about to do and fill it in for you. So if you go to File and save an empty file as Test.html, you can go to line one and type HTML (then hit TAB) to get the program to add the main tags you’ll need to get started.

Congratulations. That’s it. No kidding. That’s the only HTML we’ll need for what we’re doing because the actual mapping part of this project is in JavaScript. To do that, we’re going to use Leaflet.

Step 2: Go to Leaflet’s Quick Start Guide

Leaflet is magic. It’s a library in JavaScript that gives you everything you need to make snazzy maps. To do this, you’ll need to pull Leaflet’s CSS and Javascript files into your HTML document. Essentially here, you’ll be copying and pasting a lot of code from Leaflet into Sublime. I won’t recreate it here, just go to their website and get the most up-to-date version.

When you’re done it should look something like this:

I opted to delete some of the spare tags Sublime auto-populated to make it a little more readable. Also, I want the map to span the entire page, so for the map size I used:

<style>
#map {position : absolute; top : 0; bottom : 0; left : 0; right : 0;}
</style>

You’ll note that if you try to load the page (by saving the HTML and right-clicking into Sublime to select Open in Browser), it doesn’t work. That’s because Leaflet doesn’t provide the background imagery, showing all the streets and such. For that, we’re going to head over to MapBox.

Step 3: Set up a Mapbox Access Token

Important thing to note here. Sublime is free. Leaflet is free. Mapbox comes with 200,00 free tile requests per month. After that, it’s billed by each 1,000 additional tile request. So if your map gets wildly popular, you may need to look into this more, but for now, just sign up for a free account.

Once you’re in, go to your Dashboard and scroll to the part that says Access Tokens. Then hit +Create a Token.

Name it. Keep the defaults and then hit Create Token.

You should then see it on your Dashboard below Access Tokens, where you can copy it and paste back into Sublime where it says “your.mapbox.access.token’.

Now right-click the HTML in Sublime, and hit “Open in Browser.” If all’s well, you should see something like this:

Step 4: Add Points and Pop-Ups

To keep this example relatively simple, I decided to make a map showing food and drink related museums in the United States: The Spam Museum, The Dr. Pepper Museum, World of Coca-Cola, Jell-O Gallery, and the Potato Museum.

These are going in as points, or markers. Each will be assigned to a variable with their latitude and longitude, then that variable will have a Pop Up bound to it. Here’s the format:

var variableName = L.marker([Latitude, Longitude]).addTo(map);
variableName.bindPopup("Text for Pop Up.");

For larger datasets, it would be absurd to push points into a map this way, but since I’ve only got the five points, I’m making it work. Here’s what the HTML file looks like with the addition:

Step 5: Adjust the View and Zoom of the Map

The code on Leaflet’s example is centered over London, which is a problem for me because my markers are in the United States. I want to center the map. So I picked a location in the middle of all my points (with the help of Google Maps), somewhere in the middle of Kansas (38.4528, -99.9065).

To adjust that, we’re going to go back up to the map variable—it’s the line that starts var map. After setView, you’ll put the coordinates, followed by a zoom level. Zoom Level 0 will give you the whole world on your map. If you want to zoom in, up that number. I’m making a map that fits my whole browser, so I settled on 4.5 to show the continental United States.

var map = L.map('map').setView([38.4528, -99.9065], 4.5);

Quick screenshot to show you where that is just in case:

Step 6: Customize Your Markers (Optional)

As is, the map will throw some generic blue pins in at your markers, but you can customize these to any image you very well please. If you don’t already have a program where you can do this, I’d recommend downloading Gimp to experiment with some designs.

Once you’re done designing your marker, just save it as a PNG, and make sure to save it in the same folder as your HTML file.

Then add this to your HTML inside the <script> tags. Adjust the iconURL to the filename of your PNG, specify a length, and anchors for the icon and popup.

var variableName = L.icon({ 
iconUrl: 'FileName.png', 
iconSize: [width, length],
iconAnchor: [x, y],
popupAnchor: [x, y], 
});

With this in place, you can reference the {icon: variableName} in each of your markers after the coordinates. For instance:

var spamMuseum = L.marker([43.6693, -92.9747], {icon: Museum}).addTo(map);
spamMuseum.bindPopup("The Spam Museum. Yes, it's a museum dedicated to Spam.");

Here’s what that looks like in the HTML:

Step 7: Check it Out In Your Browser/Make it Accessible to Others

Right click the HTML and select “View in Browser” to get a peak at what it looks like so far. Assuming you want other people to access the map, we’re going to require a site. Everything so far is happening locally on your own computer. To get it online, I’m turning to GitHub Pages.

If you haven’t got one yet, sign up for a GitHub account. After logging in, you should see a nice green button next to “Repositories” that says “New.” Click it. Here’s a TL;DR slideshow if you’d rather follow along the next steps with pictures:

On the next page, give the repository a nice, new name, and keep the other defaults in place. Then hit “Create Repository.”

Once you’re in your repository, you’re going to drag and drop your HTML file, as well as any icons you’re using as custom markers. Once you’ve got them loaded, click the button that says, “Commit Changes.”

That’ll take you back to your main Repository Page, where you’ll want to click Settings. It’s on the far right-hand side with a little widget next to it. Once there, you’ll click Pages, and then, under Source, you’ll see that GitHub Pages is currently disabled. In the dropdown, select Branch: main, and click save.

A new box will come up that says “Your site is ready to be published at: ….”

Now… we wait. It can take up to 10 minutes for the page to be ready for display. You might get a 404 error if you click it too soon.

And voila. That link gives you a publicly accessible page for anyone who might want to look at your map. Title element not included, but we may cover that in a future post.

Happy mapping!