Basic Leaflet Map with Markers

with No Comments



The first step in any project is to define what we want and how to display something and what frameworks are already around to ease the proccess. We want to create a map and add a few markers, so we should use a framework with which we can accomplished our needs.

Needed Frameworks:

  • Bootstrap – To ease the html part and automatically get a responsive design
  • Leaflet – A Javascript Mapping framework with the ability to set markers
  • D3.JS- Optionally we could add further D3 functionality to the map

Getting Started

To get started, we should create an appropriate project structure. We accomplish this by creating a folder and some subfolders for out data:

– Leaflet_Map
|–Libraries
|–Marker_Data
|—misc

Your folder structure should look as follows:

Now we can download the Bootstrap framework. Go to the Bootstrap homepage and download the framework under:

https://github.com/twbs/bootstrap/releases/download/v3.3.2/bootstrap-3.3.2-dist.zip

Now extract the downloaded ZIP into your folder Libraries. Your folder Libraries should now contain the subfolder “bootstrap-3.3.2-dist”

Now it is time to create the basic HTML page. In your base folder “Leaflet_Map” create a new empty html file called map.html. Thankfully bootstrap provides us with a few standard templates. Revisit the bootstrap site and now go to

http://getbootstrap.com/examples/starter-template/

Rightclick on the open template, choose view source code and copy the sourcecode into your html file. Our map.html should now contain:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="starter-template.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">

      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>

    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

If you open your map.html, you will not see anything yet. We will get this later.
Now your basic framework is setup and we can start Leafleting 🙂

Setup basic HTML

To set up our basic html, first we have to open our previously created html file in which we copied the standard bootstrap template html. Then start by adjusting the different paths.
First, change the paths:

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="starter-template.css" rel="stylesheet">

to:

    <!-- Bootstrap core CSS -->
    <link href="./Libraries/bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="http://getbootstrap.com/examples/starter-template/starter-template.css" rel="stylesheet">

Now continue by changing the lines:

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>

to:

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="./Libraries/bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>

Now we still have a few things which we can delete. Delete following lines:

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>

And:

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

Now lets adjust the content to show what we want. Adjust the different content elements in particular the divs to show what you want them to show.

My base html file looks as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Starter Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="./Libraries/bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="http://getbootstrap.com/examples/starter-template/starter-template.css" rel="stylesheet">

  </head>

  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">GEO 454 - LAB 2</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Map</a></li>
            <li><a href="#about">Impressum</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">


    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="./Libraries/bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
  </body>
</html>

Congratulations! You have reached the first milestone of this tutorial! To see what you have accomplished, open your map.html and marvel at your html skills. Feel free to resize the browserwindow.

Preparing Leaflet

First step in integrating leaflet into our html is to add the needed leaflet resources. To be more precise, we need:

  • CSS: <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
  • Javascript: <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

Add these lines at the end of the html header part.

Additionally we need a div where our map shoud be displayed. This Div needs a height. Add following div to the content section of your html:
<div id="map" style="height: 400px;"></div>
Now all needed resources to build up a basic map have been implemented, its time to start with the javascript.

Create your basemap

Creating a basemap is now a really simple task:
Create the <script type="text/javascript"></script> tags after all of your content in the body section of the html.
Inside these tags we will initiate the leaflet map with javascript.
Add following lines:

	var map = L.map('map').setView([47.39707,8.54942], 11);

	L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
		attribution: 'Map tiles by &lt;a href="http://stamen.com"&gt;Stamen Design&lt;/a&gt;, under &lt;a href="http://creativecommons.org/licenses/by/3.0"&gt;CC BY 3.0&lt;/a&gt;. Data by &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt;, under &lt;a href="http://www.openstreetmap.org/copyright"&gt;ODbL&lt;/a&gt;.',
		maxZoom: 16
		}).addTo(map);
</pre >
And Voila, now you should see a basemap! But what do the different sections of the javascript do you might ask?<br>
<code>var map = </code> sets up a variable to store your map<br>
<code>L.map('map')</code> specifies in what div our map should be displayed. In our example it is in the div with the id 'map'.<br>
<code>.setView([47.39707,8.54942]</code> here you specifie the center coordinates of your map. Care to use WGS84 coordinates.<br>
<code>, 11);</code> last but not least, you can specify the zoom level. <br>
<br>
<code>L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png'</code> defines what map should be shown as  baselayer. <br>
<code>attribution: 'Map tiles by &lt;a href="http://stamen.com"&gt;Stamen Design&lt;/a&gt;, under &lt;a href="[...]</code> Here you specify the copyright declaration which is shown on the map.<br>
<code>maxZoom: 16</code>Here you can define the maximum zoom level a user can access.<br>
<code>.addTo(map);</code> Finally we tell leaflet to add the basemap to our map. Inside the brackets should be the name of our map variable.<br><br>
<b>To change the style of your basemap</b>, visit: <a href="http://leaflet-extras.github.io/leaflet-providers/preview/">http://leaflet-extras.github.io/leaflet-providers/preview/</a> to get a list of available basemaps. Just replace your basemap URL with a new basemap URL (eg. <code>http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png</code>. Be sure to also replace your copyright information.<br><br> 
Congratulations, you have now reached milestone number 2! <br><br>

Your map.html file should now look like this:
<pre  class="brush: javascript">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;meta name="description" content=""&gt;
    &lt;meta name="author" content=""&gt;
    &lt;link rel="icon" href="../../favicon.ico"&gt;

    &lt;title&gt;Starter Template for Bootstrap&lt;/title&gt;

    &lt;!-- Bootstrap core CSS --&gt;
    &lt;link href="./Libraries/bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet"&gt;

    &lt;!-- Custom styles for this template --&gt;
    &lt;link href="http://getbootstrap.com/examples/starter-template/starter-template.css" rel="stylesheet"&gt;

	&lt;!-- Leaflet resources --&gt;
		&lt;script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"&gt;&lt;/script&gt;

	&lt;link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /&gt;
	
  &lt;/head&gt;

  &lt;body&gt;

    &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
        &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
            &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;a class="navbar-brand" href="#"&gt;GEO 454 - LAB 2&lt;/a&gt;
        &lt;/div&gt;
        &lt;div id="navbar" class="collapse navbar-collapse"&gt;
          &lt;ul class="nav navbar-nav"&gt;
            &lt;li class="active"&gt;&lt;a href="#"&gt;Map&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#about"&gt;Impressum&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
      &lt;/div&gt;
    &lt;/nav&gt;

    &lt;div class="container"&gt;
		&lt;div class="row"&gt;
			&lt;div class="col-md-12"&gt;
			&lt;h2&gt;GEO454 - LAB2&lt;/h2&gt;
				&lt;div id="map" style="height:400px;"&gt;&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
    &lt;/div&gt;&lt;!-- /.container --&gt;

	&lt;script type="text/javascript"&gt;


		var map = L.map('map').setView([47.39707,8.54942], 11);
	
		L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
			attribution: 'Map tiles by &lt;a href="http://stamen.com"&gt;Stamen Design&lt;/a&gt;, under &lt;a href="http://creativecommons.org/licenses/by/3.0"&gt;CC BY 3.0&lt;/a&gt;. Data by &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt;, under &lt;a href="http://www.openstreetmap.org/copyright"&gt;ODbL&lt;/a&gt;.',
			maxZoom: 16
			}).addTo(map);
		
	&lt;/script&gt;

    &lt;!-- Bootstrap core JavaScript
    ================================================== --&gt;
    &lt;!-- Placed at the end of the document so the pages load faster --&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="./Libraries/bootstrap-3.3.2-dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;

Add a marker

Now an empty map is not all that interesting and the whole point of mapping in leaflet is so that one can use all the customising power leaflet provides us with. For starters we will add a marker to the map. Markers can easily be set using the leaflet API. Just insert L.marker([47.39707,8.54942]).addTo(map); after initialising the map and you will have created your first marker at the location set in the brackets ([47.39707,8.54942]

Now lets add a Popup to the created marker. Add .bindPopup('A pretty CSS3 popup. <br> Easily customizable.') to your marker code so that your code looks as follows:

L.marker([47.39707,8.54942]).addTo(map)
    .bindPopup('A pretty CSS3 popup. &lt;br&gt; Easily customizable.');

Change the text 'A pretty CSS3 popup. <br> Easily customizable.' to anything you feel like displaying. You can even use basic HTML markup. Now save your map.html and open it in any browser. You should see your custom placed marker and when you click on your marker your information should pop up, If you want your popup opened when the map is loaded, just add .openPopup() to your marker code. You can now add as many markers as you need:

		L.marker([47.39707,8.54942]).addTo(map)
		.bindPopup('A pretty CSS3 popup. &lt;br&gt; Easily customizable.');
		
		L.marker([47.39707,8.51942]).addTo(map)
		.bindPopup('Marker 2');
		
		L.marker([47.39707,8.57942]).addTo(map)
		.bindPopup('Marker 3');

Custom Marker Img

As I mentioned before, leaflet is a highly customisable mapping framework. It lets you define your own images and shadows to display as markers on the map. We will see further on that you can even use the power of javascript and other frameworks like D3.JS to dynamicly create markers out of a external datasets. But lets focus on the task at hand and use custom images as markers. The leaflet documentation is very helpful and should provaide all the information needed to add custom markers, have a look: http://leafletjs.com/examples/custom-icons.html.

As the documentation is thorough enough, I will just explain a few things:
First, a class is created, which stores information which is the same for all markers. This is practical, because if we would want to change something, we would only have to change it once. It is possible however to define every marker seperatly, but this is the way it should be done:

        var LeafIcon = L.Icon.extend({
            options: {
            
                shadowUrl: 'http://leafletjs.com/docs/images/leaf-shadow.png',
                
                iconSize:     [38, 95], // size of the icon
                shadowSize:   [50, 64], // size of the shadow
                iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
                shadowAnchor: [4, 62],  // the same for the shadow
                popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
                
                }
            });

This code basically says: Every custom icon we want to create should have:

  • The same shadow URL
  • A iconsize of 38px X 95px
  • A shadow size of 50 px X 64 px
  • The icon anchorshould be 22px from the left and 94px from the top. The icon anchor defines where the icon should always stay over the same point on the map. The pixels are counted from the top left corner. 22,94 means that from the top left corner, go 22 pixels to the right, and then 94 pixels down and set the anchor there.
  • The shadow anchor should be 4px from the left and 62px from the top. Keep in mind that here, the shadow image is taken and not the marker image.
  • The popup anchor should be 3px left and 76px up relative to the icon anchor position

Now with the options set, we can go on and create new custom markers. Seeing that we want to create different coloured leaves as markers, all the same size and with the same shadow, we can create them as such:

        var greenIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/docs/images/leaf-green.png'}),
            redIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/docs/images/leaf-red.png'}),
            orangeIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/docs/images/leaf-orange.png'});

What happens here is basically: we define new variables to store our different markers. Lets look at var greenIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/docs/images/leaf-green.png'}) for example. Here we tell leaflet to create a new variable greenIcon. In this variable we want a new instance of the LeafIcon (new LeafIcon({})). This means a new Icon is created with all the options set in the LeafIcon class, but with one additional piece of information: the image URL ({iconUrl: 'http://leafletjs.com/docs/images/leaf-green.png'})). As you can probably guess, the variable redIcon also gets the options from the LeafIcon class, but adds an image of a red leaf, and so on.

Now that we have all our different markers, it is a piece of cake to implement the custom marker images in our markers. Just take your marker code L.marker([47.39707,8.54942].addTo(map) and add a reference to our variable which is storing our custom marker: L.marker([47.39707,8.54942],{icon: greenIcon}).addTo(map).

Our script should now look as such:

    &lt;script type="text/javascript"&gt;

        // Initialise Map
        var map = L.map('map').setView([47.39707,8.54942], 11);
    
        // Load Tiles
        L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
            attribution: 'Map tiles by &lt;a href="http://stamen.com"&gt;Stamen Design&lt;/a&gt;, under &lt;a href="http://creativecommons.org/licenses/by/3.0"&gt;CC BY 3.0&lt;/a&gt;. Data by &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt;, under &lt;a href="http://www.openstreetmap.org/copyright"&gt;ODbL&lt;/a&gt;.',
            maxZoom: 16
            }).addTo(map);
            
        // Set custom marker options:
        var LeafIcon = L.Icon.extend({
            options: {
            
                shadowUrl: 'http://leafletjs.com/docs/images/leaf-shadow.png',
                
                iconSize:     [38, 95], // size of the icon
                shadowSize:   [50, 64], // size of the shadow
                iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
                shadowAnchor: [4, 62],  // the same for the shadow
                popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
                
                }
            });
            
        // Create different custom markers
        var greenIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/docs/images/leaf-green.png'}),
            redIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/docs/images/leaf-red.png'}),
            orangeIcon = new LeafIcon({iconUrl: 'http://leafletjs.com/docs/images/leaf-orange.png'});
        
        // Add markers to map
        L.marker([47.39707,8.54942],{icon: greenIcon}).addTo(map)            
        .bindPopup('A pretty CSS3 popup. &lt;br&gt; Easily customizable.');
        
        L.marker([47.39707,8.51942],{icon: redIcon}).addTo(map)
        .bindPopup('Marker 2');
        
        L.marker([47.39707,8.57942],{icon: orangeIcon}).addTo(map)
        .bindPopup('Marker 3');
        
    &lt;/script&gt;

Dynamically create markers

More often than not we want to create a number of markers out of external data. It would be a tedious and time consuming task to create each marker manually, so we use javascript to help us. This means we can use javascript to open a external file, get the information we need to create markers, create does markers and display them on the map. I will not comment this section as much as the above sections.

First we will include the D3.JS and the Queue.JS frameworks to help parse the data.

    &lt;!-- D3 Resources --&gt;
    &lt;script src="http://d3js.org/d3.v3.min.js" charset="utf-8"&gt;&lt;/script&gt;
    &lt;script src="http://d3js.org/queue.v1.min.js"&gt;&lt;/script&gt;

Now we should prepare some data which we would like to display. I have created a CSV with following format:

We will now go on and load the CSV with the queue.js:

        // Load the CSV file(s)
        queue()
        .defer(d3.csv, "Marker_Data/markers.csv")
        .await(load_markers); // When the CSV is fully loaded, call the function load_markers

As you might be able to see, the queue.js loads the CSV file and then calls a function. We will use the called function to create all our markers:

        // This function will load the CSV data and create the Markers out of the data
        function load_markers(error, markers){
            for(i in markers){
                var mCoords = [markers[i].ycoord,markers[i].xcoord]; // get the x and y coordinates out of the csv    
                var mName = markers[i].Name; // Get the name out of the csv. this will be used to define markercolour
                var mPopupText = "&lt;h4&gt;"+markers[i].Year + "&lt;/h4&gt;&lt;br&gt;" +"&lt;h2&gt;"+markers[i].School +"&lt;/h2&gt;&lt;br&gt;&lt;br&gt;"+markers[i].Comment; // Bake some popup text
            
                // Switch statement to give each user different icons.
                // This is hardcoded. It would be better to make this dynamic
                // aswell, but that would exeed this tutorial
                switch(markers[i].Name) {
                    case "mbaer":
                    var mIconType = {icon: orangeIcon};
                    break;
                    case "csieber":
                    var mIconType = {icon: greenIcon};
                    break;
                    case "lstrehlenberger":
                    var mIconType = {icon: redIcon};
                    break;
                } // End Switch
                
                // Now that we have all our information safely tucked away in variables, we can bake some markers...
                L.marker(mCoords, mIconType).addTo(map)
                        .bindPopup(mPopupText);
                
            } // End for
        } // End Function load_markers