Leaflet Tips and Tricks
Leaflet Tips and Tricks
Minimum price
Suggested price
Leaflet Tips and Tricks

This book is 46% complete

Last updated on 2014-12-21

About the Book

Leaflet Tips and Tricks is under heavy development.

Leaflet Tips and Tricks, is in it's early stages (still only 160 pages or so) but the framework is in place and a good level of starting information is available.

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. It is very much the start of a book. Hopefully over the course of a year or so I will expand its content to highlight its awesomeness more.

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.

The awesome that is Open Source.

Please consider this an opportunity for you to contribute back to the Open Source community that makes products like leaflet.js possible. If you find something that can be improved about the book or think there's something that can be added, just let me know!

The book has a lot of information in it, but there's still more to come. Currently (at time writing) it counts up to only about 30 pages, so it's still a short read but I've tried to pitch it in sections so that if you find something interesting, you can read parts in isolation. I have a long list of additional material that I want to add, so I'm hoping that publishing using Leanpub will allow readers to get easy notification of when updates and improvements are made.

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 99 cents when you download it so that Leanpub get something for hosting the book and providing such an awesome service (50 cents is their flat cut of any book sales and 99 cents is the minimum (apart from $0) that they will allow for a sale).

(Don't be put off by the button at the top saying 'Buy the ebook now'. Once you click on it, you can select any price you want including $0!)


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 D3!

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

D3 Tips and Tricks v3.x
Leaflet Tips and Tricks
Suggested Price
Bundle Price
D3 Tips and Tricks v3.x
Leaflet Tips and Tricks
Raspberry Pi: Measure, Record, Explore.
Suggested 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
      • Where to get information on leaflet.js
        • leafletjs.com
        • Google Groups
        • Stack Overflow
        • Github
        • bl.ocks.org
        • Twitter
        • Books
  • 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
  • Working with GitHub, Gist and bl.ocks.org
    • General stuff about bl.ocks.org
    • Installing the plug-in for bl.ocks.org for easy block viewing
    • Loading a thumbnail into Gist for bl.ocks.org thumbnails
      • Setting the scene:
      • Enough of the scene setting. Let’s git going :-).
      • Wrap up.
  • 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.

Authors have earned$8,175,756writing, 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. Free App. 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), MOBI (for Kindle) and in the free Leanpub App (for Mac, Windows, iOS and Android). 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. It really is that easy.

Learn more about writing on Leanpub