Home About Me

Building a Personal Travel Footprint Map with a Leaflet-Style Approach

2025-11-14

Getting the idea onto the page

I had known about footprint maps for a long time, but never really found a practical way to put one on my own site. I liked map plugins such as Marker Pro, though only from a distance. What finally made the idea feel workable was Leaflet, the open-source JavaScript library built for interactive maps and especially friendly to mobile devices.

In practice, though, using the same setup everywhere is not always the easiest choice. Since the blog is hosted in mainland China, switching the map tiles to a domestic provider felt like the safer and simpler route. I ended up using AMap. The underlying logic is close enough, so the general idea still works.

What follows is a simplified method: create a dedicated page template and let the map live on its own standalone page.

The basic setup

1. Prepare the footprint data

Create a file named footprint.js. This file should hold the data for every location you want to mark on the map. Upload it to the js directory inside your theme, for example:

/wp-content/themes/your-theme/js/footprint.js

The contents of footprint.js can look like this:

const footprint = [ ["<b>银川</b><i>Yinchuan</i><a href='https://www.duanxiansen.com/84.html/'>银川镇北堡西部影视城三日游</a>", 38.46667, 106.26667], ["<b>榆中</b><i>Yuzhong</i><a href='https://www.duanxiansen.com/1303.html/'>记第一次滑雪</a>", 36.0620781, 103.8318566], ["<b>白银</b><i>Baiyin</i><a href='https://www.duanxiansen.com/1115.html/'>游黄河石林景区(公司第一次团建)</a>", 36.5340173, 104.1467575], // 添加更多点 ];

Each entry contains the popup content plus the latitude and longitude for that stop. Add as many points as you need.

2. Create a custom page template

Next, create a file named page-map.php and place it in your theme’s page template directory.

<?php
/*
Template Name: 足迹地图
*/

get_header(); ?>

<style>
#map {
    width: 100%;
    max-width: 1200px;
    height: 500px;
    margin: 0 auto;
}
</style>

<div id="map" class="other-map"></div>

<script src="https://webapi.amap.com/maps?v=1.4.15&key=您的高德地图API密钥"></script>

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/footprint.js"></script>

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    var map = new AMap.Map('map', {
        center: [116.397128, 39.916527],
        zoom: 4
    });

    if (typeof footprint !== 'undefined' && footprint.length > 0) {
        for (let i = 0; i < footprint.length; i++) {
            const [popupText, lat, lng] = footprint[i];

            var marker = new AMap.Marker({
                position: new AMap.LngLat(lng, lat),
                map: map
            });

            marker.on('click', function() {
                var infoWindow = new AMap.InfoWindow({
                    content: popupText,
                    offset: new AMap.Pixel(0, -30)
                });
                infoWindow.open(map, marker.getPosition());
            });
        }
    } else {
        console.error('footprint array is undefined or empty');
    }
});
</script>

<?php get_footer(); ?>

You will need to apply for your own AMap API key.

Also pay attention to the JavaScript path in the template:

/js/footprint.js"

If that path does not match your theme structure, the map data will not load.

A few trade-offs compared with Leaflet

The full process can feel a bit messy, so the steps above are already a trimmed-down version. Once the files are in place, though, the actual operation is fairly straightforward.

That said, this still does not feel as polished as using Leaflet directly. There are several rough edges.

For example, when clicking a marker, Leaflet can automatically generate a thumbnail for the linked article image. Here, the image would show in its original size instead, which is why removing image display altogether is the cleaner choice.

There is also a difference in interaction. With Leaflet, hovering over a marker can automatically reveal the related post. In this version, the user has to click the marker. After opening one info window, it also has to be closed manually before moving on to the next marker. Leaflet handles this more elegantly: clicking on an empty part of the map is enough to dismiss it.

So while this approach is workable and easy enough to put into a standalone page, Leaflet still delivers the smoother and more complete experience overall.

Related Posts