Map Warper is an open source map warper/map georectifier, and image georeferencer tool developed, hosted, and maintained by Tim Waters.

Creating an Account

In Map Warper, it is possible to browse and download maps others have uploaded into Map Warper without an account. To georectify your own map, however, you must make one. This also allows you to easily return to your maps later.

1. On the top right corner of the page, click "Create Account"

2. Select a username and password and enter an active email address.

3. Click "Sign up"! You should quickly receive an email to confirm your account

Upload a Map with any Available Metadata

Now that you are logged in, you can upload your own images to the Map Warper server in order to georeference them.

1. Clicking “Upload Map” on the main toolbar (note if you are not yet logged in, it will ask you to do so at this point)

2. Insert any available metadata and a description of the map. This is useful both for your own records and for anyone else searching for similar maps on the Map Warper server.

3. At the bottom of the page, choose to Upload an Image File from your local computer or from a URL. Once the file has been selected, click "Create"

Once the upload is complete, a new page will appear informing you that the map was successfully created as well as providing an image of the uploaded map.

Rectify a Map with Control Points

Now the map is on the platform, but it does not yet have any spatial information associated with it. The next step is to use what are called "control points" to place your map in a “real-world” coordinate system where it can interact with other types of spatial data.

Understanding the Georectifying Window

1. Once your image is displayed, select "Rectify" on the main toolbar.

2. This opens up the Georectifying page, the most important page in this tutorial. It is composed of two windows, one showing your map and one showing a “basemap” which you will be using to geolocate your map.

3. In the top right corner of each map there are a series of buttons that help you navigate the map and add control points

4. The goal here is to create what are called, “control points,” or points that are corresponding between your uploaded map and the basemap. This is done by simply zooming in on each map in turn and creating a control point as close to the same point as possible in each map.

The last two icons appear only on the basemap and are used to adjust it as needed to help with georeferencing

Creating Control Points on your maps

1. Navigate on your map to an easily identifiable location. In this example, I have chosen the tip of the island in the middle of Paris that the Notre Dame Cathedral is on. Note that an external mouse with a scroll wheel can make the zooming/moving process easier; zoom and pan buttons are also provided in each window.

2. Click the “Add Control Point” icon, then click again on your map in the desired location. A little control point should pop up!

3. Swap to the basemap and click the “Pan” tool (the hand) to find the proper location, then again select the “Add Control Point” tool and click on the corresponding point on the Basemap.

4. Once you have created a control point on each map, scroll down and click the “Add Control Point.” This will add the control point coordinates to a list of points below, which you can see by clicking the words “Control Points."

Check for Error and Warp the Map

1. After you add the 4th control point, your table of points will start including error information, as the points are triangulated against one another. Note that this error may not mean that you are doing anything wrong, particularly in an older map that is not as spatially accurate as something more modern! On the other hand, if your error is quite high and you believe your map is relatively accurate, you may have misplaced a control point somewhere. Usually, high error is caused by a single point being misreferenced.

2. When you feel like you have enough points scattered around your map, we are ready to georectify the map! Remember you can always come back later and add new points or remove old ones if you feel like the result is not to your liking. To georectify your map, just click “Warp Image!” at the bottom of the page and you’ll get a notice that your rectifier is working.

When the map is finished rectifying, you will get a notification that rectification is complete. Now, you should be able to see your map overlaid on the Basemap, as well as be able to turn it on and off or more or less opaque to check for accuracy!

Exporting your Map

If the map is to your liking, you are ready to export. Map Warper offers a variety of ways to export your map depending on your needs

1. To export your map, Select the Export tab on the toolbar. A window like that seen below will pop up, giving you a variety of choices for exporting

Some exporting options:

• GeoTiff:

  • public domain standard; easily imported into a wide variety of spatial platforms like ArcGIS or QGIS; good for backing up your georeferenced map on your local computer or in cloud storage like Google Drive

• .kml:

  • Easy import directly into GoogleEarth

• Tiles (Google/OSM scheme)

  • Useful for loading into tools like ArcGIS online and Knightlab StoryMap JS. Remember to ensure a backup of your files elsewhere though in case your map is eventually removed from Map Warper.

The Problem

Knightlab StoryMap JS is an excellent tool for quickly and easily creating basic storymaps, which combine spatial data with text and various multimedia. One feature that makes it particularly useful is the ability to import high-resolution imagery as tiles from sites like the David Rumsey Map Collection or the New York Public Library. However, when importing these maps, Knightlab StoryMap automatically sets the maximum zoom level to what it thinks is "appropriate" based on the size of the map. This does not allow the user or the creator to take advantage of such high-resolution images.

The solution has three steps:

1. To create your own high-resolution map tiles

2. To host your tiles on Github

3. To import your tiles as a Gigapixel map into Knightlab

To Create Tiles of your Map...

...using Adobe Photoshop (2020 and earlier)

There are two ways to go about creating your own tiles. If you have access to Adobe Photoshop, the process is quick and easy.

• Download your image as a .tiff/.geotiff file from a site like David Rumsey or the NYPL, or use your own image.

• Open your image in Adobe Photoshop.

• Write down the size of your image in pixels. This can be seen by going to Image-->Image Size in the main toolbar. The width and height should then be displayed; make sure your units are in pixels! You'll need this information for adding your tiles to your storymap later.

• It's time to Zoomify your map! Just go to File --> Export--->Zoomify and the Zoomify export menu will pop up. Here you can set the export folder where your tiles will be sent to, as well as the Image Quality. For high-res images, you might as well use the highest quality possibly. Once you are ready, hit Ok. A web browser may pop up, but you can close it. If you navigate to the location where you saved your files, you should now see a series of folders containing your tiles!

...using Zoomify Free (Windows only)

If you do not have access to Photoshop, don't despair! Zoomify has a free tool you can download which will perform the same tiling as photoshop does.

• Go to Zoomify and download their free tool for Windows or Mac

• Once downloaded, open the Zoomify Free Converter application on your computer

• After downloading your high-resolution image, drag and drop the downloaded file onto the converter (or use File-->Open). The tiling will begin automatically and will save to the folder where your image is located. And you are done!

...using OSgeo4W/gdal2tiles (Windows)

OSGeo4W is a distribution of a broad set of open source geospatial software for Windows environments (Windows 10 down to XP). OSGeo4W includes ​QGIS, ​GDAL/OGR, ​GRASS as well as many other packages (over 150).

To tile your image using OSgeo4w, follow these steps:

1. Install Osgeo4w from the OsGeo Website

2. Save your georeferenced map to a known location on your computer by exporting it from ArcGIS, QGIS, or MapWarper (see our tutorial for georeferencing maps in MapWarper).

3. Open up the Osgeo4w command line from the start menu

4. Navigate the command line to the folder where your raster image is stored using the cd ('change directory') command (e.g. cd c:\temp\saved\testImageFolder)

5. Type “gdal2tiles -geodetic imageToBeTiled.tif FolderName” where imageToBeTiled.tif is your exported georeferenced image and FolderName is the Folder you want to be created to hold the tiles

   1. To add control for what zoom levels are created add: -z 2-15 after -geodetic. This example would create tiles for zoom levels 2 through 15

6. Your image is now tiled! A variety of test maps are automatically created in your folder holding the tiles which you can drag and drop into a browser. In some cases, tiling a .jpg may work better than tiling a .tiff, especially if you have self-georeferenced the image.

...using Maptiler (Windows and Mac)

Maptiler has a free version that you can download for both Windows and Mac. On the plus side, it works with Macs unlike some other tools; on the downside, it has its own restrictions.

The free version of Maptiler restricts the size of your image in pixels (10k x 10k) and file size (30 MB), as well as creates a watermark on your tiles. It also does not let you control the zoom levels which are created, meaning that smaller maps (e.g. portions of a city) cannot be tiled appropriately. It also requires spatial data for the map, meaning that you must georeference your image either within the platform or on software like ArcGIS or QGIS.

Yet, it is quite user-friendly otherwise. Simply drop your image into the window after opening...

...and you will be asked about spatial data. If you previously georeferenced your image in ArcGIS, it will automatically detect the spatial data; otherwise, you will need to match up your map with a full-world map using control points. This is, however, quite easy for larger maps, just click the location on your image, then on the world map, and those locations will be linked together. It is recommended to choose at least 4 points scattered across your map.

Once you have added enough points and hit "Continue," you will be asked how you want to export your map. For our purposes, a "Folder with tiles" is fine (MBtiles is for Mapbox, OGC GeoPackage is for SQL databases, neither of which we are concerned with here.

Once you choose your folder, your image tiles will be exported!

To Host your Tiles on GitHub

So you have your tiles; now you need to make them publicly accessible online so your storymap can access them! To do this, we want to use the free hosting site Github. We will be hosting the tiles created through Zoomify Free here.

• Sign up to create an account on Github.

• Start a new project either by pressing the “Start a project” button or, if you already have a Github account, clicking on the plus sign in the top right and selecting “New repository.” Give it an identifying name and make sure it is set to "Public"

• If you’re new to Github, download Github Desktop, which lets you upload many files at once. Once installed, go to the “Code” button in your online depository and click “Open in Desktop.” Allow the site to open Desktop for you, and click "Clone". This will create a copy of your repository on your computer.

• Once your repository is open in Github Desktop, you can open the folder in your Finder/Explorer window by clicking the "Show in Explorer" button on the right side of the screen. This folder is often located in a folder named "Github" in the Documents section of Explorer in Windows. Once you’ve located the folder on your computer, move all the files and folders generated by Zoomify into your repository folder.

• Once your files are copied, return to the Github Desktop application. You should now see a series of files that have been changed in your repository, all the files you just copied over! In the “Summary” field, type a descriptive message of your content. Then click “Commit to Main” to upload your files. This process may take a few minutes depending on the size of your files. Finally, when a blue button appears, click "Push Origin" to push your files to the online version of the repository.

• Once your sync has completed, return to your online github repository and you should see your tile folders. The final step is to make these files publicly available with a URL. Navigate to the "Settings" tab and scroll down to the “Github Pages” section. Create a page for your project by selecting the source branch (main) and clicking “Save.” After the page refreshes, scroll back down to the Github Pages section and you will find the url you can use to create your Gigapixel (Note: clicking on this link directly will take you to an error page saying that Github can’t find what you’re looking for. This is normal.).

To Load your Tiles in Knightlab StoryMap JS

Now you have made your tiles and hosted them on Github; the last step is to load them into Knightlab. (Note: this tutorial assumes you are familiar with StoryMap JS; if you are not, see our tutorial on StoryMap JS here)

• Go to Knightlab Storymap JS and create a new StoryMap

• From the Options menu, where you select your background map image, change the Map Type to Gigapixel, insert the URL for your github tiles into the Zoomify URL box, and finally, under Max Image Size, insert the width and height of the original image in pixels. This can be found by opening the file in Photoshop (see above) or by looking at the Details tab under the Properties of the original image.

• Make sure "Image" is chosen under the "Treat As" option, as we are using a map that does not have any real spatial data attached

And you are done! You should now be able to zoom in much closer into your high-resolution image on each slide of your storymap.

This tutorial goes along with the tutorials .

Problem

So, you have some tiles of a high-resolution image, now you need to allow other people to see those high-resolution images in a zoomable viewer. While the previous tutorial (linked above) allowed you to import your image into KnightLab StoryMap JS, sometimes you want to display the image on your personal site. This tutorial will show you how to create an iFrame embed that can be used on sites like CampusPress or Omeka, with your tiles hosted in GitHub (as with the StoryMap example).

Here we will review 3 tools that can help you achieve this goal: Zoomable, Zoomify, and Leaflet

Using Zoomable

Zoomable () allows users to quickly create zoomable images, but it is free version is limited (5 uses per email). Various plugins for sites like WordPress and Knightlab do exist but must be purchased individually. The free version also does not allow you to host your own images, so you are beholden to their servers functioning. However, it is a very quick process if you only have a few images.

1. Go to the free Zoomable upload page ()

2. Upload your image (30MB max; supports JPG/PNG/TIF) and enter your email address

3. An email containing your zoomable image will be sent to you; once it has, click on the included link ()

4. In the top-right corner is the "embed image" button. Clicking this button will give you an iFrame embed code that you can copy and paste into your website html (for information on iFrame html code, see t)

Pros: Very fast and very little coding required (only iFrame embed); don't need to tile the images yourself

Cons: Minimal free service, don't control your own tiles

Using Zoomify

In order to visualize our image using the Zoomify web viewer, we need to create a GitHub repository that contains (1) our tiles, (2) the javascript file linked above, and (3) an HTML file specific for our image.

Copy the following code into your html file, which is directly copied from the example html file supplied by Zoomify and save your file.

In order to load your file into the viewer, you only need to change 1 line of code! In line 8, where it says ZoomifyImageExample, change the name of the folder to the folder containing your tiles; in my case, that is sanFran (see above), so the code line 8 ends up looking like:

Save your HTML file, and sync it with GitHub as described in the previous tutorial (Commit to Main-->Push Origin in your Github Desktop window). Once synced, your GitHub repository will look something like this:

Once it is hosted on GitHub, you can embed it as an iFrame on any website you want, with the syntax being as follows (where you can replace the URL with your own file URL, and the title with your own title)

And that's it! You can use the same repository for all of your images if you wish, just make a separate .html file that you can use for your iFrame embed!

Using Leaflet

Let's return to our depository, but this time we will download the leaflet javascript package as well as a plugin for viewing tiled images

• Like the previous example, this plugin comes with a nice example script for your html. You can find it in the downloaded folder (example.html) or can copy it from below. As before, you want to create a new html file. I called mine "leafletZoomifySanFran.html"

Now, there are a few changes we want to make to alter the code for our needs.

1. On lines 5, you can change the Title of the page to whatever is appropriate for your image

2. On lines 6 and 19, you should change the URL to point to the local version of leaflet you have downloaded into your repository. This means it will look something like "./leaflet/leaflet.css" and "./leaflet/leaflet-src.js" depending on the name of your leaflet directory inside your repository

3. On line 20, make sure "src" points to the location of the downloaded Leaflet Zoomify Plugin. In my case, I changed it to "./Leaflet.Zoomify-master/L.TileLayer.Zoomify.js"

5. Finally, on lines 31, 32, and 33, change the information to the width, height, and attribution of your image, which can be found in the Properties or Info of your image.

The final version of my script is as follows:

And the iFrame works the same way as previously!

That's all for now. Please contact Matt Naglak, Digital Scholarship Librarian (naglak@bc.edu) if you have questions or come across any errors. And check out our other tutorials!

The following covers setting up your map, adding data, and popups.

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 39 KB of JS, it has all the mapping features most developers ever need.

Leaflet is designed with simplicity, performance, and usability in mind. It works efficiently across all major desktop and mobile platforms, can be extended with lots of plugins, has a beautiful, easy to use and well-documented API, and a simple, readable source code that is a joy to contribute to.

Leaflet offers much more flexibility for story-mapping than many other tools used for such projects; on the other hand, it does demand a basic knowledge of coding in JavaScript.

Here, we walk through the basic steps of setting up a Leaflet map, adding spatial data, and creating popup boxes that go along with that data. Though there are many ways to organize your map files, here we will first create a basic HTML file that will hold your map and then a second JavaScript file that will contain the code for the map and spatial data. To download all the tutorial files discussed in this lesson, click below or visit our GitHub page!

How to Set Up the Leaflet JS Library and your HTML page

Your map needs to be situated on an HTML page in order for it to function. Luckily, it only takes a few steps to get this up and running.

Create an empty folder to hold your map files, and then in the folder new text file in a text editor and save it as index.html. I recommend using Notepad++ (Windows only) or Atom, as your text editor, as these are designed for coding, rather than regular Notepad or Word. At the top of your file, put the following introductory code to set up your HTML and name your map. Each line is commented to let you know how it is functioning.

<!doctype html> <!-- This says your file is in .html -->
<html lang="en"> <!-- This says your file is in English -->

<head>	<!-- This opens your header. Your header is where different libraries and plugins are loaded -->
  <meta charset="utf-8">
  <title>Put the Title of Your Map Here</title> <!-- Put the title of your map here -->
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

Next, you need to tell your HTML to access the Leaflet JavaScript library and its associated CSS stylesheet. You have two options for this, as you can either host the files locally on your computer or call them from their already-hosted location on the web.

• To call them from the web, simply copy these lines into the <head> section of your HTML

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
 integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
 crossorigin=""/>
   
 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>
 
 </head>

• To host the files locally, download and unzip Leaflet, placing the entire Leaflet folder into the folder with your HTML file. Now, you simply need to change the "href=" and the "src=" links from the above code to the current location of your file. It should end up looking something like this. You can also close your header at this point.

 <!-- Load Leaflet files locally -->
 <link rel="stylesheet" href="./leaflet/leaflet.css"/> <!--Put the path to the leaflet.css  you downloaded here -->
 <script src="./leaflet/leaflet.js"></script>  <!-- Put the path to the leaflet.js you downloaded here -->
 </head>

Finally, you need to create the container that will hold your map and set its size on the html page, as well as call the JavaScript file that will be your map itself. This will take place in the <body> of your code. And that's it, your html file is done for now!

<!-- In the body of the code, you need to create the division on the page for your map and call the map.js file you will make next -->
<body>
	<div id = "map" style = "width:900px; height:580px;"></div> <!--set the size of your map -->
  <script type="text/javascript" src="nameOfYourMap.js"></script> <!--call the javascript file for your map -->
</body>
</html>

Starting your Map Javascript File and Loading a World Map Tilelayer

So you've got an HTML file with a map container, but that container is currently totally empty. In this step, we will walk through how to load up an externally hosted world map and show you how to open the HTML file on your own computer. It only takes a few lines of code!

First, create a new empty text file and save it as a javascript file, making sure to use the same file name that you referred to in the HTML file. The first step is to define your map options and create the map object itself. There are a variety of default mapOptions you can set; here we simply choose the center of the map, its initial zoom, and its max zoom level.

var mapOptions = {
 center: [42.336004, -71.169212], //set center Lat/Long of your area of interest
 zoom: 16, //set initial zoom level
 maxZoom : 24,  //set max zoom level
 tap : false //fix popup bug on Safari
 }

//Creates map object according to map options
var map = new L.map('map', mapOptions);

Now you need to load a background map. While it is possible to load a locally hosted tiled map as a background map (which will be discussed in a different tutorial), here we will simply use one of the maps hosted online already by ArcGIS online. Notice that the basemap variable is made up of a few parts: a variable name, a URL for where the layer is located, and attribution information. Other layer options are also possible here, similar to the map options above.

//Example of an externally called basemap
var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
			attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'});

Esri_WorldImagery.addTo(map);

The last line of this code is key; for each variable, you must add it to your named map variable (in this case the "map" defined above) in order for it to appear on your map.

Now it's time to open your map! This is simple enough: just drag your index.html file into a browser window, and your map should appear, centered on your favorite university library!

Adding Spatial Data to Your Map

Now, we have some background imagery, but what about adding other spatial data? There are lots of ways to add spatial data to your map, depending on what form you want it to take. Here we will talk about two methods: adding points individually and importing points from an excel file or a CSV (comma-separated list) exported from excel.

Adding point data directly to your map via code

Adding point data individually is as easy as one line of code! Just give your point variable a name (here bcLibrary), add the coordinates, and add it to your map!

var bcLibrary= L.marker( [42.336004, -71.169212] ).addTo(map);
//adds marker at designated lat/long

Adding a polygon is just as easy! You just need the coordinates for its corners, like this one which is roughly situated around the library.

var libraryPolygon = L.polygon([
    [42.336477, -71.169550],
    [42.336569, -71.169126],
    [42.335788, -71.168826],
    [42.335728, -71.169314]
]).addTo(map);

Now open your map again, and it should look similar to that below!

Adding point data from an external source

Sometimes you already have your spatial data in an external location (either in an excel file or on another platform) and you want to import it fully formed into your map. In order to do this, you need to convert your data into a geoJSON format, a standard spatial format for data that is able to be easily imported into Leaflet.

• For spatial software like ArcGIS or QGIS, such a transformation is easy. You can export files like shapefiles or geodatabase files directly into GeoJSON files to import into Leaflet. Check out the linked pages for more information.

• From software like GoogleEarth, you first want to export your data as a .kml file. From here, there are many free online platforms like MyGeodataConverter that can convert the files to GeoJSONs for you!

• Finally, you can convert your data even if it is in a simple excel file. The key here is to export your file as a .csv. Then, similar to .kml files, there are opensource tools online that will convert it for you.

Great! Now you've got your .geojson file; it's time to get it into your map.

• First, make sure a copy of your .geojson file is in the folder with your HTML and map javascript files.

Now, there are 2 different ways forward here:

• You can simply copy and paste the entire .geojson into your code, if desired (see an example here). Simply set it equal to a variable and you are good to go. On the downside, this approach both clutters up your code, potentially making it very long, and makes it more difficult to find and change any desired attributes

//example code from leafletjs.com, in this case inserted directly into your map code
var states = [{
    "type": "Feature",
    "properties": {"party": "Republican"},
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [-104.05, 48.99],
            [-97.22,  48.98],
            [-96.58,  45.94],
            [-104.03, 45.94],
            [-104.05, 48.99]
        ]]
    }
}, {
    "type": "Feature",
    "properties": {"party": "Democrat"},
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [-109.05, 41.00],
            [-102.06, 40.99],
            [-102.03, 36.99],
            [-109.04, 36.99],
            [-109.05, 41.00]
        ]]
    }
}];

• A second approach is to enter the GeoJSON file itself, set the data equal to a variable (same as was done above), and then resave the file as a .js Javascript file. If this approach is taken, you must also call the javascript file in the header of your .html page, just as you called the Leaflet javascript file. In doing this, you make your variable accessible within your map. The below spatial data was created in google earth, exported as a .kml file, converted to a .geojson using the method described above for KML files, and then saved as a .js Javascript file after adding the variable name. Each file in this process can be seen in the files associated with this tutorial

//this looks the same as above, but now is done directly in the
//geojson file, which should be resaved as a .js file
var bcKMLTest = {

    "type": "FeatureCollection",
    "name": "Temporary Places",
    "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },

    "features": [
        {   "type": "Feature", 
            "properties": { 
                "Name": "Chestnut Hill Reservoir", 
                "description": "Water! " }, 
                "geometry": { "type": "Point", "coordinates": [ -71.160451098751224, 42.335235738372397 ] } },
        
        {   "type": "Feature", 
            "properties": { 
                "Name": "Football!", 
                "description": "Go Eagles!" }, 
                "geometry": { "type": "Point", "coordinates": [ -71.166387763840049, 42.335024576048127 ] } },
        
        {   "type": "Feature", 
            "properties": { 
                "Name": "Basketball and Hockey", 
                "description": "Go Sports!" }, 
                "geometry": { "type": "Point", "coordinates": [ -71.16777265141657, 42.335122222222218 ] } }
    ]
}

//example of html header to call your spatial data
<script src="./bcKMLTest.js"></script>

Now, your external data is linked within your map's code, but it still needs to be added to the map! Whichever of the above two methods you used, the following line of code will add the data to your map

//with the external js holding your data, only this line of code needs to be added to add your data to the map
L.geoJSON(bcKMLTest).addTo(map);

Adding Popups

So now you have some points, lines, or polygons on your map, but what do they mean? For example, in Google Earth, we added names and descriptions to our points, but that information is not yet visible in our Leaflet map. Popup boxes attached to your data can offer more information to those using your maps. And making them is quite simple!

Let's look back at the first marker we used to indicate the O'Neill Library (named bcLibrary). To create a popup box for this, we simply use one line of code. Then clicking on the point creates our popup!

bcLibrary.bindPopup("<b>I'm the Boston College Library</b>");

Note how you can use HTML styling methods like <b> to style your text (in this case, to make it bold).

If you are importing large amounts of spatial data, sometimes it already has attribute data attached to it. For example, in our GeoJSON data imported from Google Earth above, each point already had a "Name" and "description" attribute. Instead of retyping that into our code, we can call the attribute directly in our popups!

When importing your spatial data, you can automatically create a popup for every piece of spatial data in your dataset. We do this by adding the "onEachFeature" option when adding the GeoJSON to the map; here, this calls a function called "popUp" which will use to define our popup.

var ourImportedData = L.geoJSON(bcKMLTest, {
    onEachFeature: popUp
}).addTo(map);

Now you can write and customize a function called popUp to create whatever type of popup information you want!

//if your features come with various attributes already attached to them,
//this function will create your popup box based on those features!

function popUp(feature, layer) {
    var out = [];
		if (f.properties){
		     out.push("The name of location is is: " + feature.properties.Name);
		     out.push("The description of the location is:" + feature.properties.description);
		     out.push("Have a nice day!");
		}
		layer.bindPopup(out.join("<br />"));
}

Now every piece of spatial information in your Google Earth geojson will have a popup box saying the name of the space it is associated with (assuming it has an attribute titled "name" that it was imported with, such as a header from an excel spreadsheet) and its description, and it will wish you a nice day!

Sharing your map online

The easiest way to immediately share your map online is to upload it to GitHub.

1) Create a GitHub account

2) Click Start a Project, which will then ask you to name your project and provide a brief description.

3) Upload your entire mapping folder into the project depository by clicking Upload an existing file on the main repository page

Now that your map files are in, anyone with access to your repository can download your mapping files. You can also set up a unique url to display your map in just a few easy steps

1) Go to Settings on the central toolbar

2) Scroll down to the Github Pages portion of the settings

3) Under "Source" select Branch: main to set your main branch as the viewable page. Then hit Save.

4) The page will refresh. If you scroll back down, you should now see a statement in the Github Pages portion saying: Your site is ready to be published at YYY. Now you have a URL for your map! You can share this URL with others or put it on the main page of your repository in the About or Readme sections.

That's all for now! In the future, there will be tutorials on how to add new raster layers to your map, turn on and off layers, and other functions!