Add Baidu Map to the page with Leaflet

Jen-Hsuan Hsieh (Sean)
A Layman
Published in
3 min readAug 14, 2020

--

Introduction

Leaflet is a well-known open-source JavaScript library for rendering maps like OpenStreetMap, Baidu Map, …etc. It’s kindly to beginners who have requirements to put maps on pages due to the rich documents and active discussions on the internet.

That’s introduce to use Baidu map with leaflet and basic knowledges. There are three steps.

  1. Preparations
  2. Make new projection with proj4leaflet (if needed)
  3. Fetch Baidu tiles for the map

1. Preparations

  1. Go through the Preparing your page and the Setting up the map section from Leaflet Quick Start Guide.
  2. Install proj4leaflet for making new coordinate referencing system

2. Make new projection with proj4leaflet (if needed)

What is ESPG 3857?

ESPG 3857 is a Spherical Mercator projection coordinate system popularized by web services. It uses WGS 1984 as the datum but treat Earth as a sphere (also called Auxiliary Sphere). The affect for calculation bases on treating the map as a flat plane.

It’s also called Web Mercator projection, ESPG 900913(Google) which is popular for web services like…

--

--

Jen-Hsuan Hsieh (Sean)
A Layman

Frontend Developer🚀 Angular • React • Nest • Electron • Micro-frontend • Monorepo Architecture • https://daily-learning.herokuapp.com/