Leaflet Tips and Tricks
Leaflet Tips and Tricks
Interactive Maps Made Easy
About the Book
Leaflet Tips and Tricks is currently being updated to align it with the 1.x release version. The content is still good and relevant even while it is being updated, so feel free to download a copy and check frequently to get the latest (free!) updates.
leaflet.js can help you make the interactive maps YOU want.
Laeflet Tips and Tricks is a book written to help those who may be unfamiliar with JavaScript or web page creation get started bringing their map vision to the World.
Maps and geographic information is the new medium of choice for presenting compelling information and providing location context on the Internet and leaflet.js is an extraordinary library for presentation of maps on a web page.
Is this book for you?
It's not written for experts. It's put together as a guide to get you started if you're unsure what leaflet.js can do. It reads more like a story as it leads the reader through the basics of a simple map with advice on getting started and the sort of things that will help you expand your knowledge.
This book was originally written and published in 2014. Since then Leaflet has continued to grow in popularity. The plan is for me to update the book for the 1.x release of Leaflet
Why was Leaflet Tips and Tricks written?
Because in the process of learning things, it's a great way to remember them if you write them down :-).
As a result, learning how to do cool stuff with maps and Leaflet meant that I accumulated a sizeable number ways to help me out when the going got tricky. Then I realised that these could be useful for others who were trying out leaflet.js and who were at a similar knowledge level.
So here we are! A collection of tips and tricks for leaflet.js written by a noob for people who might consider that they're in the same situation :-).
What's in the book?
I've captured the appropriate code (in cool looking coloured text) and added in illustrations of what's going on so that you will get more traction at the start of your learning process than I did.
Download the whole book just to try it out!
I'm making the book available for free because I think it's a great way to give something back to the community as a whole, but if you find some value in the book, please consider contributing $4.99 when you download it so that Leanpub get something for hosting the book and providing such an awesome service (50 cents + 20% is their cut of any book sales and $4.99 is the minimum (apart from $0) that they will allow for a sale).
Enjoy.
So I hope you get something out of the book, please excuse the sometimes light-hearted conversational manner in which I approach the topic and enjoy Leaflet!
Bundles that include this book
Table of Contents
-
Acknowledgements
- Make sure you get the most up to date copy of Leaflet Tips and Tricks
- Introduction
- What is leaflet.js?
-
What do you need to get started?
- HTML
- JavaScript
- Cascading Style Sheets (CSS)
- Web Servers
- PHP
-
Other Useful Stuff
- Text Editor
- Getting Leaflet
- Access Leaflet via a CDN (Content Delivery Network)
-
Where to get information on leaflet.js
- leafletjs.com
- Google Groups
- Stack Overflow
- Github
- bl.ocks.org
- Tutorials
-
Start With a Simple Map
- HTML
-
JavaScript
- Declaring the starting parameters for the map
- Declaring the source for the map tiles
- And there’s your map!
-
Leaflet Features
-
Adding a marker to our map
- Adding a popup to our marker
-
Marker options
- Drag a marker
- Add a title to a marker
- Adjust the markers transparency
- Adding multiple markers to our map
-
Adding a line to our map
- Adding options to our polyline
- Using multiple tile layers on your map
- Overlaying information interactively on your map
-
Adding a marker to our map
-
Leaflet Plugins
-
Leaflet.draw
- Leaflet.draw code description
-
Leaflet.draw configuration options
- Object colours
- Polygon line intersection
- Show and measure an area
- Repeating a drawing option automatically
- Place an alternative marker
- Place the Leaflet.draw toolbar in another position
-
OSMGeocoder Search
- OSMGeocoder code description
- OSMGeocoder configuration options
-
Leaflet.FileLayer load local GPX, KML, GeoJSON files
- Leaflet.FileLayer code description
-
Generate a heatmap with Leaflet.heat
- Leaflet.heat code description
-
radius
configuration option -
blur
configuration option -
maxZoom
configuration option
-
Leaflet.draw
-
Assorted Leaflet Tips and Tricks
- Make your map full screen
-
Importing external data into leaflet.js
- Importing data as a JavaScript file
-
Importing data from MySQL via php
- Extracting data from MySQL with php
-
Making maps with d3.js and leaflet.js combined
- d3.js Overview
- Leaflet map with d3.js objects that scale with the map
- Leaflet map with d3.js elements that are overlaid on a map
-
Tile servers that can be used with Leaflet
- URL Template
- Usage Policy
- Attribution
-
Open Street Map OSM Mapnik
- URL Template
- Usage policy
- Attribution
- Usage example
-
Open Street Map Black and White
- URL Template
- Usage policy
- Attribution
- Usage example
-
Open Cycle Map
- URL Template
- Usage policy
- Attribution
- Usage example
-
Outdoors
- URL Template
- Usage policy
- Attribution
- Usage example
-
Transport
- URL Template
- Usage policy
- Attribution
- Usage example
-
Landscape
- URL Template
- Usage policy
- Attribution
- Usage example
-
MapQuest Open Aerial
- URL Template
- Usage policy
- Attribution
- Usage example
-
MapQuest-OSM
- URL Template
- Usage policy
- Attribution
- Usage example
-
Stamen.Watercolor
- URL Template
- Usage policy
- Attribution
- Usage example
-
Esri World Imagery
- URL Template
- Usage policy
- Attribution
- Usage example
-
Map Tips and Tricks
-
How do maps get presented on a web page?
-
Vectors and bitmaps.
- Vector graphics
- Bitmap graphics
- Vectors and bitmaps for maps.
- Map tiles and zoom levels
- How are the tiles on a map server organised?
-
Vectors and bitmaps.
-
How do maps get presented on a web page?
-
MySQL Tips and Tricks for leaflet.js
-
Using a MySQL database as a source of data.
- PHP is our friend
- phpMyAdmin
- Create your database
- Importing your data into MySQL
- Querying the Database
- Using php to extract json from MySQL
- Getting the data into leaflet.js
-
Using a MySQL database as a source of data.
-
Appendices
- A Simple Map
- Full Screen Map
- Map with Marker and Features
- Map with polyline and options
- A Leaflet map with base layer (tile selection) controls
- A Leaflet map with overlay layer (and base layer) controls
- Leaflet.draw plugin with options.
- OSMGeocoder plugin with options.
Other books by this author
Authors have earned$10,052,337writing, publishing and selling on Leanpub, earning 80% royalties while saving up to 25 million pounds of CO2 and up to 46,000 trees.
Learn more about writing on Leanpub
The Leanpub 45-day 100% Happiness Guarantee
Within 45 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.
See full terms
Free Updates. DRM Free.
If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).
Most Leanpub books are available in PDF (for computers), EPUB (for phones and tablets) and MOBI (for Kindle). The formats that a book includes are shown at the top right corner of this page.
Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.
Learn more about Leanpub's ebook formats and where to read them
Top Books
C++ Best Practices
Jason TurnerLevel up your C++, get the tools working for you, eliminate common problems, and move on to more exciting things!
Digital-First Events
Joep Piscaer and Jana BorutaThe only resource you will ever need to launch your digital events program.
Algebra-Driven Design
Sandy MaguireA how-to field guide on building leak-free abstractions and algebraically designing real-world applications.
Ansible for DevOps
Jeff GeerlingAnsible is a simple, but powerful, server and configuration management tool. Learn to use Ansible effectively, whether you manage one server—or thousands.
R Programming for Data Science
Roger D. PengThis book brings the fundamentals of R programming to you, using the same material developed as part of the industry-leading Johns Hopkins Data Science Specialization. The skills taught in this book will lay the foundation for you to begin your journey learning data science. Printed copies of this book are available through Lulu.
Continuous Delivery Pipelines
Dave FarleyThis practical handbook provides a step-by-step guide for you to get the best continuous delivery pipeline for your software.
Cloud Strategy
Gregor Hohpe“Strategy is the difference between making a wish and making it come true.” A successful migration to the cloud can transform your organization, but it shouldn’t be driven by wishes. This book tells you how to develop a sound strategy guided by frameworks and decision models without being overly abstract nor getting lost in product details.
node-opcua by example
Etienne RossignonGet the best out of node-opcua through a set of documented examples by the author himself that will allow you to create stunning OPCUA Servers or Clients.
Technical leadership and the balance with agility
Simon BrownA developer-friendly, practical and pragmatic guide to lightweight software architecture, technical leadership and the balance with agility.
Everyday Rails - RSpecによるRailsテスト入門
Junichi Ito (伊藤淳一), AKIMOTO Toshiharu, 魚振江, and Aaron SumnerRSpecを使ってRailsアプリケーションに信頼性の高いテストを書く実践的なアドバイスを提供します。詳細で丁寧な説明は本書のオリジナルコンテンツです。また、説明には実際に動かせるサンプルアプリケーションも使用します。本書は2017年版にアップデートされ、RSpec 3.6やRails 5.1といった新しい環境に対応しています!さあ、自信をもってテストできるようになりましょう!
Top Bundles
- #1
Software Architecture for Developers: Volumes 1 & 2 - Technical leadership and communication
2 Books
"Software Architecture for Developers" is a practical and pragmatic guide to modern, lightweight software architecture, specifically aimed at developers. You'll learn:The essence of software architecture.Why the software architecture role should include coding, coaching and collaboration.The things that you really need to think about before... - #2
CCIE Service Provider Ultimate Study Bundle
2 Books
Piotr Jablonski, Lukasz Bromirski, and Nick Russo have joined forces to deliver the only CCIE Service Provider training resource you'll ever need. This bundle contains a detailed and challenging collection of workbook labs, plus an extensively detailed technical reference guide. All of us have earned the CCIE Service Provider certification... - #3
Modern C++ by Nicolai Josuttis
2 Books
- #4
Django for Beginners/APIs/Professionals
3 Books
- #5
Modern Management Made Easy
3 Books
Read all three Modern Management Made Easy books. Learn to manage yourself, lead and serve others, and lead the organization. - #6
Cisco CCNA 200-301 Complet
4 Books
Ce lot comprend les quatre volumes du guide préparation à l'examen de certification Cisco CCNA 200-301. - #7
Mastering Containers
2 Books
Docker and Kubernetes are taking the world by storm! These books will get you up-to-speed fast! Docker Deep Dive is over 400 pages long, and covers all objectives on the Docker Certified Associate exam.The Kubernetes Book includes everything you need to get up and running with Kubernetes! - #8
The Python Craftsman
3 Books
The Python Craftsman series comprises The Python Apprentice, The Python Journeyman, and The Python Master. The first book is primarily suitable for for programmers with some experience of programming in another language. If you don't have any experience with programming this book may be a bit daunting. You'll be learning not just a programming... - #9
CCDE Practical Studies (All labs)
3 Books
CCDE lab - #10
Linux Administration Complet
4 Books
Ce lot comprend les quatre volumes du Guide Linux Administration :Linux Administration, Volume 1, Administration fondamentale : Guide pratique de préparation aux examens de certification LPIC 1, Linux Essentials, RHCSA et LFCS. Administration fondamentale. Introduction à Linux. Le Shell. Traitement du texte. Arborescence de fichiers. Sécurité...