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
- 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...
Earn $8 on a $10 Purchase, and $16 on a $20 Purchase
We pay 80% royalties on purchases of $7.99 or more, and 80% royalties minus a 50 cent flat fee on purchases between $0.99 and $7.98. You earn $8 on a $10 sale, and $16 on a $20 sale. So, if we sell 5000 non-refunded copies of your book 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