Unleashing Leaflet Map Magic: Elevating User Experience with a Polished Touch

2024-02-04

In the fast-paced world of web development, we're always striving to make websites easier to use and more enjoyable. Recently, my team has been focused on making our map page better. This page is super important for our website because it helps users find what they're looking for. Drawing from my experience working on the Geo Game App project here: https://chimerical-meringue-763758.netlify.app/, where I used Leaflet Map, I felt ready to tackle this task. I knew both the good and the not-so-good things about Leaflet Map. So, I started by going back to the Leaflet Map instructions to make sure I was on the right track.

Recap and Documentation Review:

To ensure a comprehensive understanding of Leaflet Map's capabilities, I undertook a systematic review of its documentation. This involved revisiting fundamental concepts and exploring advanced functionalities, enabling me to discern nuanced approaches for our current objectives. Such a meticulous approach not only reaffirmed my existing knowledge but also unveiled new avenues for innovation within the framework.

Here's some of the User Stories for Desktop:

As a User, I am able to mouse hover on the layers, I can see the layer is set to 100% opacity.
As a User, when I mouse out from the layer, I can see the layer is back to its normal state.
As a User, I can click on the layer, I can see the layer is set to 100% opacity and the side panel slide from the left off the screen and read the information shown on the side panel.

Here's an example of a Leaflet Map code for the User Stories above:

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

// Add a base tile layer
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);

// Define some GeoJSON data
var geojson = {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {
            "name": "Layer 1"
        },
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [-0.09, 51.5],
                    [-0.09, 51.52],
                    [-0.06, 51.52],
                    [-0.06, 51.5],
                    [-0.09, 51.5]
                ]
            ]
        }
    }, {
        "type": "Feature",
        "properties": {
            "name": "Layer 2"
        },
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [-0.07, 51.49],
                    [-0.07, 51.51],
                    [-0.04, 51.51],
                    [-0.04, 51.49],
                    [-0.07, 51.49]
                ]
            ]
        }
    }]
};

// Add GeoJSON layer to the map
var geojsonLayer = L.geoJSON(geojson, {
    onEachFeature: function (feature, layer) {
        layer.on({
            mouseover: function (e) {
                e.target.setStyle({
                    opacity: 1
                });
            },
            mouseout: function (e) {
                e.target.setStyle({
                    opacity: 0.5 // Change opacity back to original value
                });
            },
            click: function (e) {
                // Open side panel here
                console.log("Clicked on " + feature.properties.name);
                
                // Reset styles of previously clicked layers
                geojsonLayer.eachLayer(function (layer) {
                    layer.setStyle({
                        opacity: 0.5 // Reset opacity for all layers
                    });
                });

                // Set clicked layer to 100% opacity
                e.target.setStyle({
                    opacity: 1
                });
            }
        });
    }
}).addTo(map);

What this code does:

We create a Leaflet map and add a base tile layer. GeoJSON data representing two polygons (layers) is defined.
We add a GeoJSON layer to the map and define event listeners for mouseover, mouseout, and click events on each layer.
When the mouse hovers over a layer, its opacity is set to 100%. - When the mouse moves away, the opacity is reset to its original value (0.5 in this case).
When a layer is clicked, its opacity is set to 100%, and the styles of all other layers are reset to their original opacity.
Additionally, we can handle opening a side panel within the click event handler.

Conclusion:

In conclusion, the journey of refining the map page functionality underscored the intrinsic value of adopting a professional approach rooted in meticulous documentation review and strategic implementation. Through the utilization of Leaflet Map, we were able to orchestrate significant enhancements that not only elevate user experience but also reinforce the platform's commitment to innovation and user-centric design. As we continue to iterate and refine our offerings, Leaflet Map remains an indispensable ally, empowering us to chart new frontiers in web-based cartography and interactive mapping solutions.

Once again here's my Geo Game App: https://chimerical-meringue-763758.netlify.app/. Enjoy playing :D!

Also on codewithkatyrosli.com

Leaflet Map: Adding Drawing Functionality, 2024-02-10

In this post, I'll share my journey of implementing drawing functionality on a Leaflet map, from initial research to overcoming challenges and finally achieving success. Drawing from my experience working on the Geo Game App project here: https://chimerical-meringue-763758.netlify.app/, where I used Leaflet Map, I felt ready to tackle this task.

Research and Preparation: My journey began with thorough research, diving into Leaflet's documentation and scouring the web for examples and tutorials. Armed with this knowledge, I was ready to embark on the implementation process.

Read More