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 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
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
Now, when you open the HTML file in a web browser, you should see a map. Great job!
ourMap.setView([40, -74.50], 9); line and before the closing
Finally, add this HTML button element after the closing
</div> tag and before the opening