Web Map

Build your self-host world map – Install mapnik & python-mapnik on MacOS

Mapnik is a mapping toolkit for developing mapping applications. it can generate map tiles with specific requirements based on the data in PostGIS generated by OSM. This article introduces how to install it and the python library “python-mapnik” for Python3 on Mac OS.

First, make sure you have installed homebrew on your Macbook. And it is updated:

%brew update

Then, install mapnik:

%brew install mapnik

After installed, Execute “brew info mapnik” to check the installed details, you can see the version 3.1.0 has been installed successfully as below:

Now, let us start to install “python-mapnik”:

First, clone the “python-mapnik” source code to the local directory and switch its version to “v3.0.x”, the reason for switching the version is because the master branch is not compatible with the previous installed mapnik’s version.

%git clone
%cd python-mapnik
%git checkout v3.0.x

You may encounter the issue: “library not found boost_python” when installing python-mapnik, to solve it, we need to install “boost-python3” firstly.

%brew install boost-python3

After installed “boost-python3”, execute the command

%ls -l /usr/local/lib/libboost_python*

to check the installed version, you can see libboost_python39 has been installed on my computer.

Now, start to install the “python-mapnik” library:

// "39" should be the install version as same as above
%export BOOST_PYTHON_LIB=boost_python39
%python3 install

After the installation is finished, you should see the below result.

You can execute the following commands to test if it is installed successfully:

%git submodule update —init
%python3 test

Now, we have installed “mapnik” and “python-mapnik” successfully in the system, you can execute a simple python code to get where the library is stored:

Welcome to comment if you have any questions.

Web Map

Build your self-host world map – Download and import map data into PostGIS

This article logs the process of building my on-premise web map and talks about I use OpenStreetMap to download world map data and import it into PostGIS for late use.

What is OpenStreetMap(OSM)

OpenStreetMap(OSM) is a collaborative project to create a free editable map of the world. The geodata underlying the map is considered the primary output of the project. The creation and growth of OSM have been motivated by restrictions on the use or availability of map data across much of the world, and the advent of inexpensive portable satellite navigation devices.

Where to download map data

You can download OSM data from the official website , or from a mirror website , and I suggest you download a small part such as a city for testing purpose. I downloaded the New Zealand data as below for testing:



We need to install the importing tool “osm2pgsql” and “PostGIS” on the computer. For installing “osm2pgsql”, please refer:, for PostGIS, you can refer to my previous post “Install PostgreSQL 13 with PostGIS and PgAdmin 4 with Docker on Mac” if your laptop is MacBook.

Let’s start the process

  1. Create new user “osmuser” without any database creation privileges in PostgreSQL
  2. Create the new database “osm” in PostgreSQL
  3. Add the extensions “postgis” and “hstore” in the database
  4. Import it into the database:
    osm2pgsql new-zealand-latest.osm.pbf -d osm -H localhost -U postgres -W

After executed successfully, you can see 4 tables have been created and OSM data have been inserted into the database.

Web Development

A console.log issue in Google Chrome

Found an interesting issue in Google Chrome today and have reported it to

The issue relates to change and print object value in a loop, you can reproduce it by executing the following code in Chrome Console.

var book = {info:{}};
for(var i = 0; i < 3; i++){ = i;

The expected result “id” in the object book should be 0, 1, 2 however it prints 2, 2, 2 as below. The code executes as expected in Safari.

I assume the issue is encountered by the cache rule of speeding up console.log only checks whether the top level of the variable is changed in a loop so caused the issue.


Got the reply from Chromium that they won’t fix it:

Working as intended. If you hover over the [ i ] icon for more information, it will tell you that the variable content was evaluated at the point when you expanded the log entry.

Web Map

Install PostgreSQL 13 with PostGIS and PgAdmin 4 with Docker on Mac

PostGIS is the best Geospatial DB solution for applications besides the geographic world. This article is a guide for building the environment of PostgreSQL 13 with PostGIS and PgAdmin 4 using Docker on Mac. I assume you have already installed Docker on your Mac so just introduce how to install PostGIS and PgAdmin 4.

  1. Create a new Docker network
$docker network create --driver bridge postgis-network

2. Create the new PostGIS Docker container with the above network

docker run --name postgis -p 5432:5432 -e POSTGRES_PASSWORD=123456 --hostname postgis --network postgis-network --detach postgis/postgis

3. Create the new PgAdmin4 Docker container with the above network

docker run --name pgadmin4 -p 5050:80 -e "" -e "PGADMIN_DEFAULT_PASSWORD=123456" --hostname pgadmin4 --network postgis-network --detach dpage/pgadmin4

4. Open the installed PgAdmin in the browser, then login and connect the PostGIS server.

Execute the query “SELECT * FROM pg_available_extensions;”, we can then available PostGIS extensions in the list.

Open PostGIS extension in the specific database

CREATE EXTENSION postgis_raster;
-- Enable Topology
CREATE EXTENSION postgis_topology;
-- Enable PostGIS Advanced 3D
-- and other geoprocessing algorithms
-- sfcgal not available with all distributions
CREATE EXTENSION postgis_sfcgal;
-- fuzzy matching needed for Tiger
CREATE EXTENSION fuzzystrmatch;
-- rule based standardizer
CREATE EXTENSION address_standardizer;
-- example rule data set
CREATE EXTENSION address_standardizer_data_us;
-- Enable US Tiger Geocoder
CREATE EXTENSION postgis_tiger_geocoder;

Now, you have successfully opened PostGIS in the database, you can execute the following query to check

SELECT postgis_full_version();

Web Development

The best solution to build your website for developers

Review the process of building this website and I hope this article could be helpful for you to save money in building your website.

I know there already have a lot of websites providing easy solutions for creating your own website but still some reasons you want to create by yourself because of saving money or easily customization solutions or even just because you are a programmer. I write down my solution I think the best for your reference.

My solution is using the free Linux operation system and opensource software WordPress to build a website and deploying in Google Cloud which I estimate will just cost no more than NZD$100 annual fee ideally fulfills all your various requirements in your website’s early stage. Google Cloud has a low/free host plan calling “f1-micro” in GCE(Google Compute Engine) available in its some zones and you can spend tiny coins in extra disk space and a static IP or snap services to improve the flexibility and reliability of your website. Let’s talk about the details of my plan:


I applied my domain in Google Domains and it costs me NZD$22 a year, you are free to hide your registration info which is a charged service in GoDaddy. Another advantage is you can easily set SSL certificates in Google Cloud Platform with Google Domains.


As I mentioned above, I chose the plan “f1-micro (1 vCPU, 0.6 GB memory)” is free and an extra 10G hard disk and a static IP which only costs you just a few bucks per month.


Choose Ubuntu 20.04 as the operating system because it’s free, stable, and easily maintaining, Nginx as the webserver, WordPress as the website tool.


Use Let’s Encrypt‘s free SSL solution to apply SLL certificate by installing certbot on your server. there are very detailed documents for various operating systems in the certbot’s website. the whole process is as easy as a piece of cake.


WordPress has a lot of free plugins for your use. Google as well, for example, you can use Google Analytics to analyze your website’s visits, use Google Firebase for your site’s authentication solutions.

In summary

The solution will probably just cost you between $20 to $40 a year, then, you have a whole virtual machine, domain with SSL certificate, and website, so I think it’s the best for all developers, please comment if you have any questions or a better solution.

Web Development

Customize Zurb Foundation CSS in ReactJS

Use Zurb Foundation Layout Framework in ReactJS project and customize CSS by your requirements.

Add Foundation into your ReactJS project

Add foundation-sites and jquery into your project, the reason for adding jQuery is there are some Foundation javascript animations require Foundation initiation using jQuery.

$npm i foundation-sites jquery

Copy the default setting sass file from foundation-sites to your project, and you can customize any elements styles in _settings.css later.

$cp node_modules/foundation-sites/scss/settings/_settings.scss _settings.scss

Edit _settings.scss


@import 'util/util';  

// Change the above line to follow:
@import '~foundation-sites/scss/util/util';


Include the default settings in your sass file, then you can use the foundation HTML class in your JSX file.

// App.scss
@import "settings";
@import "~foundation-sites/scss/foundation";
@include foundation-everything;

// Example of changing the top bar background colour
.top-bar {
  background: #ff0000;
  .menu {
    background: #ff0000;

There are some Foundation components using javascript so you need to activate the foundation HTML code by initiating it as below

import React, {useCallback, useEffect} from 'react';
import $ from 'jquery';
import Foundation from 'foundation-sites';

export default function () {

    const foundationTopNav = useCallback(node => {
        if ( node !== null ) {
            $(node).foundation();  // Initiate Foundation code at here.

    return (
        <div ref={foundationTopNav}>
            <div className="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium">
                <button className="menu-icon" type="button" data-toggle="responsive-menu"></button>
                <div className="title-bar-title">Menu</div>
            <div className="top-bar" id="responsive-menu">
                <div className="top-bar-left">
                    <ul className="dropdown menu"  data-responsive-menu="drilldown medium-dropdown">
                        <li className="menu-text">Site T1itle</li>
                            <a href="#">One1</a>
                            <ul className="menu vertical">
                                <li><a href="#">One</a></li>
                                <li><a href="#">Two</a></li>
                                <li><a href="#">Three</a></li>
                        <li><a href="#">Two</a></li>
                        <li><a href="#">Thre1e</a></li>
                <div className="top-bar-right">
                    <ul className="menu">
                        <li><input type="search" placeholder="Search" /></li>
                            <button type="button" className="button">Search</button>

Coming soon.