Leaflet Exercise Part 2: Mapping Places of Interest

Objective:

To create an interactive map displaying places of interest around a city of your choice using Leaflet.js.

Requirements:

Basic knowledge of HTML, CSS, and JavaScript.
A modern web browser and a text editor.

Steps:

Setup:

Create a new HTML file named leaflet-exercise.html. Add the basic structure of an HTML document. Include the Leaflet CSS and JS files:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

Map Container:
Add a div element to your HTML to serve as the map container:
```
<div id="mapid" style="width: 100%; height: 500px;"></div>
```

Initialize the Map:

Use the following JavaScript to initialize a map centered on New York City (you can change the city if you want):

var map = L.map('mapid').setView([40.7128, -74.0060], 13);
   
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

Add Places of Interest:

Now, let’s add some places of interest. You’ll add markers for:

Statue of Liberty
Central Park
Empire State Building

For each place, add a marker, bind a popup with its name, and display it on the map:

L.marker([40.6892, -74.0445]).addTo(map)
    .bindPopup('Statue of Liberty')
    .openPopup();

L.marker([40.7851, -73.9683]).addTo(map)
    .bindPopup('Central Park')
    .openPopup();

L.marker([40.7488, -73.9857]).addTo(map)
    .bindPopup('Empire State Building')
    .openPopup();

Interactive Feature:

Let’s add interactivity! Allow users to click anywhere on the map to add a marker and name their own place of interest.

function onMapClick(e) {
    var placeName = prompt("Enter name of the place:");
    if (placeName && placeName.trim() !== "") {
        L.marker(e.latlng).addTo(map)
            .bindPopup(placeName)
            .openPopup();
    }
}

map.on('click', onMapClick);

Styling (Optional):
If time permits, explore the Leaflet documentation[UPDATED LINK] to style your markers or use different map tile layers.

Wrap-up:

Once you’ve completed the above steps, you should have an interactive map where you can view pre-defined places of interest and add your own! This exercise introduces you to the basics of Leaflet.js, including map initialization, adding markers, and handling user interaction.

Remember, the possibilities with Leaflet are vast. You can extend this exercise by exploring different plugins, adding more layers, or integrating with other web technologies. Happy mapping!

Final HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet Exercise: Places of Interest</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <style>
        /* Optional: Add some basic styling to center the content */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f4;
        }
    </style>
</head>
<body>

<div id="mapid" style="width: 80%; height: 80%;"></div>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script>
    var map = L.map('mapid').setView([40.7128, -74.0060], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    // Places of Interest
    L.marker([40.6892, -74.0445]).addTo(map)
        .bindPopup('Statue of Liberty')
        .openPopup();

    L.marker([40.7851, -73.9683]).addTo(map)
        .bindPopup('Central Park')
        .openPopup();

    L.marker([40.7488, -73.9857]).addTo(map)
        .bindPopup('Empire State Building')
        .openPopup();

    // Interactive feature
    function onMapClick(e) {
        var placeName = prompt("Enter name of the place:");
        if (placeName && placeName.trim() !== "") {
            L.marker(e.latlng).addTo(map)
                .bindPopup(placeName)
                .openPopup();
        }
    }

    map.on('click', onMapClick);

</script>
</body>
</html>

Jon