Now that we have created our own map and added the features we wanted, it's time to show it to the world.
At this point, we have beautifully styled our map using Mapbox Editor and we have learned how to create data from scratch or import it. Now it's time for the world to see what we have created.
Before publishing your map, it's wise to have an overview of some settings that may be useful:
Under Project | Settings, you can select the name of your project and its description
Under Project | Advanced, you can set and save the current map position
Click on Save.
Copy the clipboard copy icon next to the Share textbox.
The URL will now be copied to the clipboard. Paste the link anywhere you want for the world to see:
Downloading the example code
You can download the code files by following these steps:
Log in or register to our website using your e-mail address and password.
Hover the mouse pointer on the SUPPORT tab at the top.
Click on Code Downloads & Errata.
Enter the name of the book in the Search box.
Select the book for which you're looking to download the code files.
Choose from the drop-down menu where you purchased this book from.
Click on Code Download.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
WinRAR / 7-Zip for Windows
Zipeg / iZip / UnRarX for Mac
7-Zip / PeaZip for Linux
If you have a self-hosted website, the easiest option is to share your map using IFrames. You can also share to Wordpress, Tumblr, Drupal, and other platforms that support IFrames (usually via plugins).
Mapbox Editor already provides the code to embed the map into HTML.
Below the embedded textbox there are checkboxes. These allow us to limit user interaction in the embedded map. For example, you can disable pan and zoom, scroll wheel...., and geocoding, which disables the magnifier icon that allows us to search for addresses and links.
The code generated in the embed tag looks similar to this:
<iframe width='100%' height='500px' frameBorder='0' src='https://a.tiles.mapbox.com/v4/nimrod7.k4adg5mg/attribution,zoompan,zoomwheel,geocoder,share.html?access_token=pk.eyJ1Ijoibmltcm9kNyIsImEiOiJkNkw1WWRnIn0.pnQn9P2nbHyhKf2FY_XJog'></iframe>
height parameters. We can modify these to specify the size that will work best with our design. You can explicitly set the width or height to a specific pixel value or set a percentage.
frameBorder option. This generates a border around the IFrame to separate the embedded map from the content of the webpage.
For this example, we will use a basic HTML file that contains boilerplate HTML code and some extra elements. We will embed the map into HTML using IFrames.
Before we begin editing HTML, double–click on the
chapter-1/example-1-begin/index.html file, and it will open in your default browser. You will see our HTML page, which contains some basic HTML elements such as
<divs> tags. Embed our map under the
<h3>Earthquakes in Iceland:</h3> element through the following steps:
chapter-1/example-1-begin/index.htmlfile with a text editor.
Copy the code contained within the embedded tag.
Adjust the width and height if needed, and add a frame border if you wish.
<h3>Our Location</h3>, paste the code we copied before.
Save the file.
That's it. We have successfully embedded a map into a custom HTML page using the sharing feature of Mapbox Editor and IFrames. Now, it's time to discuss what we created. We need to open the file in a browser by either dragging the
index.html file on a browser or double-clicking on it (this behavior may be overwritten by your HTML editor):