Leaflet Tips and Tricks
Minimum price
Minimum paid price

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).


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!

About the Author

Malcolm Maclean
Malcolm Maclean

I'm a person who has a passion for knowledge and I realise that part of the responsibility of gathering knowledge is being able to advance the state of the human condition in some way.

My aims using Leaflet and in writing this book were to build on the previous success of writing D3 Tips and Tricks, play with software and try something new for fun. It also helps that I think maps and the visual representation of data rock in serious ways.

I don't have a formal coding background and I didn't learn JavaScript in a structured way. I learnt a little bit of JavaScript as a result of using d3.js, so the way I explain things is focussed on trying to impart that understanding in a simple but functional way.

I'm totally in awe of the Open Source community that has made this type of work possible, which is why you can download Leaflet Tips and Tricks for free.

Feel free to follow me on Twitter (@d3noob), I find it a great service to get alerted to what's going on with Leaflet and D3.

Bundles that include this book

Minimum price
Bundle Price
Minimum price
Bundle Price

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
        • Twitter
        • 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
  • 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
  • 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?
  • 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
  • Appendices
    • Full Screen Map
    • Leaflet.draw plugin with options.
    • OSMGeocoder plugin with options.

The Leanpub 60 Day 100% Happiness Guarantee

Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.

Now, this is technically risky for us, since you'll have the book or course files either way. But we're so confident in our products and services, and in our authors and readers, that we're happy to offer a full money back guarantee for everything we sell.

You can only find out how good something is by trying it, and because of our 100% money back guarantee there's literally no risk to do so!

So, there's no reason not to click the Add to Cart button, is there?

See full terms...

80% Royalties. Earn $16 on a $20 book.

We pay 80% royalties. That's not a typo: you earn $16 on a $20 sale. If we sell 5000 non-refunded copies of your book or course for $20, you'll earn $80,000.

(Yes, some authors have already earned much more than that on Leanpub.)

In fact, authors have earnedover $13 millionwriting, publishing and selling on Leanpub.

Learn more about writing on Leanpub

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) and EPUB (for phones, tablets and 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

Write and Publish on Leanpub

You can use Leanpub to easily write, publish and sell in-progress and completed ebooks and online courses!

Leanpub is a powerful platform for serious authors, combining a simple, elegant writing and publishing workflow with a store focused on selling in-progress ebooks.

Leanpub is a magical typewriter for authors: just write in plain text, and to publish your ebook, just click a button. (Or, if you are producing your ebook your own way, you can even upload your own PDF and/or EPUB files and then publish with one click!) It really is that easy.

Learn more about writing on Leanpub