Putting a Map on a Web Page

Aaron Dennis bio photo By Aaron Dennis

This is all about getting our hands dirty with HTML, CSS, Javascript, and a mapping library API. It’s a quick intro, just to give you a sense of how we can integrate tiled maps in web pages. Copy and paste the entirety of the code blocks below into your HTML file as instructed.

First, create a new .html document by opening a text editor like Notepad or TextEdit and saving a blank file called web-map.html. Make sure the file extension is .html and not .txt. You may have to ‘save as all file types’.

Before you start, it’s important to know that HTML is written in pairs of opening and closing tags that are contained within each other, like this – <first><second></second></first> – and never like this – <first><second></first></second>. Paste the following blocks of code into your .html document within the specified tags.

The code below is a basic template for an html document and includes a box on the webpage–known as a div–where we’ll put our map. Copy and paste this into your .html file.

Save your .html file and then open it with a web browser like Chrome. Web browsers are the applications that read and interpret .html files. As you make changes to the code in your file, save and then

Copy and paste this next block of code into the space between the <head></head> tags.

Add this next block of code after the stuff you just added, but keep it between the <head></head> tags. This is some CSS for the page.

Add this next block of code in between the <body></body> tags and after closing </div> tag.

Now, when you open the HTML file in a web browser, you should see a map. Great job!

For a little added fun, we can use javascript to provide further functionality. Add the next code block after the ourMap.setView([40, -74.50], 9); line and before the closing </script> tag.

Finally, add this HTML button element after the closing </div> tag and before the opening <script> tag.

Save your file and refresh the page. Now, the webpage should be listening for you to click on the button in the top left. When you do, javascript will load a random new tiled map.