Nanfeng

Notes on software development, code, and curious ideas

Adding a jVectorMap Travel Map to a Hexo Blog

In
Configure map data, colors, markers, and a standalone travel-map page that can be linked from any Hexo theme.

This approach is theme-independent because the map can live in a standalone static page:

Travel footprint map

Demo

The historical implementation uses the jQuery-based jVectorMap project. Its original site and old dependencies may no longer be maintained, so self-host pinned files, review them before use, and consider a maintained SVG mapping library for a new project.

Get the example

1
git clone https://github.com/HelloWuJiaYi/jVectorMap-Footprint
jVectorMap project files

Include one map-data file together with jQuery, the library, and its stylesheet:

1
2
3
4
5
6
<link rel="stylesheet" href="js/jquery-jvectormap-1.2.2.css">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery-jvectormap-1.2.2.min.js"></script>
<script src="js/jquery-jvectormap-cn-merc-en.js"></script>

<div id="map" style="height: 560px"></div>

Avoid loading several incompatible map definitions under the same name. Configure the map and markers:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$('#map').vectorMap({
  map: 'cn_merc_en',
  backgroundColor: 'transparent',
  zoomMin: 0.9,
  zoomMax: 2.4,
  regionStyle: {
    initial: {
      fill: '#e5e5e5',
      'fill-opacity': 1,
      stroke: 'none'
    },
    hover: {
      fill: '#cccccc',
      'fill-opacity': 0.8
    },
    selected: {
      fill: '#ffd54f'
    }
  },
  markerStyle: {
    initial: {
      fill: '#fd8888',
      stroke: '#ffffff'
    },
    hover: {
      fill: '#fd2020',
      stroke: '#ffffff'
    }
  },
  markers: [
    { latLng: [39.9042, 116.4074], name: 'Beijing' },
    { latLng: [31.2304, 121.4737], name: 'Shanghai' }
  ]
});

Replace the coordinates and names with places you want to publish. Consider privacy before revealing precise home, workplace, or real-time travel locations.

Copy the finished static map under Hexo’s source/ directory with rendering disabled for its raw assets, or place it in another static directory preserved by your deployment. Add a normal menu link to the generated map page.

+