Part 1: HTML - Basics of Web Mapping Structure (Expanded)

Objective:

To understand the foundational structure of a web mapping application using HTML and the importance of each element in creating a functional and organized web page.

Task:

Create a basic HTML page that will host a web map, incorporating essential elements such as metadata, character encoding, and external resources.

1.1. Understanding Basic HTML Structure

Every HTML document starts with a DOCTYPE declaration which defines the document type and HTML version. This is followed by the main html element, which contains all the content of the page. Inside the html element, there are typically two main sections: head and body.

<!DOCTYPE html>
<html>
<head>
    <!-- Metadata and linking external resources go here -->
</head>
<body>
    <!-- Content of the page goes here -->
</body>
</html>

1.2. Head Element & Metadata

The head element contains metadata about the document and can link to scripts, stylesheets, and more. For web mapping, it’s often where we link to external mapping libraries.

Character Encoding: It’s important to set the character encoding to ensure characters display correctly. UTF-8 is a common choice. ```html

- **Viewport:** For responsive design (important for maps on mobile devices), set the viewport.
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Title: The title tag sets the title of the web page, visible in the browser tab. ```html

Web Mapping Basics

#### 1.3. **Adding Map Container**
The body element contains the actual content users will interact with. For our web map, we'll need a dedicated container, typically a div element.

```html
<div id="map" style="width: 100%; height: 500px;"></div>

This div will act as a placeholder where our map will render. By giving it an id of “map”, we can easily reference it in our JavaScript code.

1.4. Including External Libraries

In web mapping, we often rely on external libraries to help us create and manage maps. For this exercise, we’re using the Leaflet library.

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.EasyButton/2.4.0/easy-button.js"></script>

Part 2: CSS - Styling Your Web Map (Expanded)

Objective:

Gain a deeper understanding of the role of CSS in creating visually appealing and user-friendly web maps. By the end of this section, you should be able to style various web elements and understand the importance of responsive design in web mapping.

Task:

Style the HTML page you created in the previous section, ensuring a consistent and responsive design.

2.1. Styling Basics

CSS (Cascading Style Sheets) is a stylesheet language used to describe the look and formatting of a document written in HTML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

2.2. Centering the Map on the Page

Centering content, especially a map, can improve the user experience. Here’s how you can center the map both horizontally and vertically.

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Viewport Height */
    margin: 0;
    font-family: Arial, sans-serif;
}

#map {
    border: 3px solid #000;
    border-radius: 8px;
}

2.3. Adding a Header

Headers can give context to the map, informing the user about the content.

h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #333; /* Dark gray color */
    background-color: #f4f4f4; /* Light gray background */
    padding: 10px;
    border-radius: 5px;
}

2.4. Responsive Design

With a variety of devices available today, your web map should look good on all screen sizes. Here’s a simple responsive design approach using media queries.

/* Styles for screens larger than 768px */
@media (min-width: 768px) {
    #map {
        width: 80%;
        height: 600px;
    }
}

/* Styles for screens smaller than 768px */
@media (max-width: 767px) {
    #map {
        width: 100%;
        height: 400px;
    }
}

2.5. Styling Map Controls

If you have map controls like zoom buttons or legends, you might want to style them for better aesthetics.

.leaflet-control {
    border: 1px solid #ddd;
    background-color: #f9f9f9;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

Part 3: JavaScript - Interactivity and Displaying the Map (Expanded)

Objective:

To understand the role of JavaScript in bringing a web map to life. With the Leaflet library, you’ll learn how to add various layers, controls, and interactive elements to your map.

Task:

Expand on the JavaScript code you’ve already written to showcase additional features and functionality.

3.1. Initialize the Map

To start, you need to initialize your map, setting a default view and zoom level.

var map = L.map('map').setView([51.505, -0.09], 13);

3.2. Adding Multiple Tile Layers

You can add multiple tile layers and give users the option to switch between them.

var osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors'
});

var satelliteLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Tiles &copy; Esri'
});

// Add default layer
osmLayer.addTo(map);

// Add layer control to switch between layers
L.control.layers({
    "OpenStreetMap": osmLayer,
    "Satellite": satelliteLayer
}).addTo(map);

3.3. Markers, Popups, and Circles

We’ve already added a simple marker. Let’s expand on this.

var marker = L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A marker for our web mapping exercise.')
    .openPopup();

// Adding a circle
var circle = L.circle([51.508, -0.11], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
}).addTo(map);

circle.bindPopup("I am a circle.");

3.4. Event Listeners

You can add event listeners to map elements. For instance, let’s log the coordinates when the map is clicked.

map.on('click', function(e) {
    alert("Map clicked at: " + e.latlng.toString());
});

3.5. GeoJSON Layers

Leaflet makes it easy to display GeoJSON data.

var geojsonData = {
    "type": "Feature",
    "properties": {
        "name": "Coors Field",
        "amenity": "Baseball Stadium",
        "popupContent": "Home of the Colorado Rockies"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-104.99404, 39.75621]
    }
};

L.geoJSON(geojsonData, {
    pointToLayer: function(feature, latlng) {
        return L.circleMarker(latlng, {
            radius: 8,
            fillColor: "#ff7800",
            color: "#000",
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8
        });
    }
}).addTo(map).bindPopup(function(layer) {
    return layer.feature.properties.popupContent;
}).openPopup();

3.6. Custom Controls

You can also add custom controls. Here’s a simple zoom-to-home button.

L.easyButton('fa-home', function(btn, map) {
    map.setView([51.505, -0.09], 13);
}).addTo(map);

(Note: This uses the leaflet-easybutton plugin and FontAwesome for the icon.)

Part 4: Final HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Mapping Basics</title>

    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />

    <!-- FontAwesome for icons (used in custom control) -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Internal Styles -->
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }

        #map {
            border: 3px solid #000;
            border-radius: 8px;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
            background-color: #f4f4f4;
            padding: 10px;
            border-radius: 5px;
        }

        @media (min-width: 768px) {
            #map {
                width: 80%;
                height: 600px;
            }
        }

        @media (max-width: 767px) {
            #map {
                width: 100%;
                height: 400px;
            }
        }

        .leaflet-control {
            border: 1px solid #ddd;
            background-color: #f9f9f9;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        }
    </style>
</head>

<body>

    <h1>My First Web Map</h1>
    <div id="map"></div>

    <!-- Leaflet JS -->
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

    <!-- EasyButton Plugin for Custom Control -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.EasyButton/2.4.0/easy-button.js"></script>

    <!-- Map Initialization and Interactivity -->
    <script>
        var map = L.map('map').setView([51.505, -0.09], 13);

        var osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap contributors'
        });

        var satelliteLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
            attribution: 'Tiles &copy; Esri'
        });

        osmLayer.addTo(map);

        L.control.layers({
            "OpenStreetMap": osmLayer,
            "Satellite": satelliteLayer
        }).addTo(map);

        var marker = L.marker([51.5, -0.09]).addTo(map)
            .bindPopup('A marker for our web mapping exercise.')
            .openPopup();

        var circle = L.circle([51.508, -0.11], {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0.5,
            radius: 500
        }).addTo(map);
        circle.bindPopup("I am a circle.");

        map.on('click', function(e) {
            alert("Map clicked at: " + e.latlng.toString());
        });

        var geojsonData = {
            "type": "Feature",
            "properties": {
                "name": "Coors Field",
                "amenity": "Baseball Stadium",
                "popupContent": "Home of the Colorado Rockies"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [-104.99404, 39.75621]
            }
        };

        L.geoJSON(geojsonData, {
            pointToLayer: function(feature, latlng) {
                return L.circleMarker(latlng, {
                    radius: 8,
                    fillColor: "#ff7800",
                    color: "#000",
                    weight: 1,
                    opacity: 1,
                    fillOpacity: 0.8
                });
            }
        }).addTo(map).bindPopup(function(layer) {
            return layer.feature.properties.popupContent;
        }).openPopup();

        L.easyButton('fa-home', function(btn, map) {
            map.setView([51.505, -0.09], 13);
        }).addTo(map);
    </script>

</body>

</html>

Jon