├── .gitignore ├── bin ├── compile └── leanpub ├── book.md ├── chapters ├── 01-introduction.md ├── 02-first-map.md ├── 03-leaflet-and-browserify.md ├── 04-basic-elements.md ├── 05-alternate-tiles.md ├── 06-leaflet-plugins.md ├── 07-drawing.md ├── Book.txt └── work-in-progress.md ├── package.json └── readme.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | notes.md 3 | releases 4 | tmp 5 | book 6 | node_modules 7 | dist -------------------------------------------------------------------------------- /bin/compile: -------------------------------------------------------------------------------- 1 | #! /usr/bin/env node 2 | 3 | var ReadmeBuilder = require('manuscript-builder'); 4 | 5 | var readme = new ReadmeBuilder({ 6 | target: '/book.md', 7 | bookDir: '/chapters/', 8 | tableOfContents: '/chapters/Book.txt' 9 | }); 10 | 11 | readme.build(); 12 | 13 | console.log('creating book.md'); -------------------------------------------------------------------------------- /bin/leanpub: -------------------------------------------------------------------------------- 1 | #! /usr/bin/env node 2 | 3 | var fs = require('fs'); 4 | 5 | var book = fs.readFileSync('book.md'); 6 | book = book.toString().replace(/```/g, '\n~~~~~~~~\n'); 7 | fs.writeFileSync('book/chapters.txt', book); -------------------------------------------------------------------------------- /book.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 | ## Thank you. 4 | I really appreciate the support you’ve given by purchasing this book. 5 | I welcome you to help guide the direction of this book and the Learn.js series of javascript books. If there are particular libraries, development tools, or programming patterns that you'd like to see covered, please email me at [hi@learnjs.io](mailto:hi@learnjs.io). 6 | 7 | The Learn.js series is highly inspired by the lean publishing model ([read more about it](https://leanpub.com/manifesto)) proposed by Peter Armstrong, founder of leanpub.com. It has proven successful as a way to receive feedback from you, the readers, so that together we can make the best book about javascript tools and libraries possible. 8 | 9 | You’ll get updates about upcoming books in the series, and I’d love to hear your thoughts on what would be most useful. 10 | 11 | ## Tools we'll use in this book 12 | 13 | Many of the tools used in this book are covered in detail in one of my other books, Development Environments for Beginners. 14 | 15 | If you’re feeling like you could use more information about what a development environment is and how best to set one up, you can purchase the Development Environments book at [superbigtree.com/books/dev-envs](http://superbigtree.com/books/dev-envs). 16 | 17 | If needed you can check out the Development Environments book on GitHub for free here: [github.com/sethvincent/dev-envs-book](http://github.com/sethvincent/dev-envs-book). 18 | 19 | ### Sublime text editor 20 | 21 | Sublime is a popular text editor with versions for Mac, Windows, and Linux. 22 | 23 | You can download an evaluation copy for free, and pay for a license when you're ready. 24 | 25 | In this book we'll be using version 2 of Sublime, in future updates to the book we'll switch to version 3. 26 | 27 | ### Install 28 | Go to [sublimetext.com](http://www.sublimetext.com/) and click the download button. 29 | 30 | ### Terminal 31 | 32 | You'll be using the terminal (or command-line) for many of the tutorials in this book. [The Terminal chapter in Development Environments for Beginners](https://github.com/sethvincent/dev-envs-book/blob/master/manuscript/terminal.md) will help you get started. 33 | 34 | ### Node.js 35 | 36 | We'll be using node.js mostly to get at npm, node's bundled package manager. 37 | 38 | We will also write modules in the style of node.js. 39 | 40 | Our code written for the browser will utilize the node.js style of modules thanks to browserify, a tool for bundling node modules for the browser. 41 | 42 | This means that we won’t cover the RequireJS/AMD toolset for javascript development, but will focus on node/CommonJS modules whenever possible. 43 | 44 | You’ll learn more about this later in the book as we go into depth with using Leaflet.js alongside browserify. 45 | 46 | ### npm 47 | 48 | npm is the package manager that comes bundled with node.js. Sometimes people call it the node package manager, but I prefer a term used by programmer Max Ogden: "node packaged modules". The idea is that we can store whatever modules we want on npm. Leaflet.js is an example. 49 | 50 | In each chapter we'll explore npm a little more, and by the end of the book you'll have learned it pretty thoroughly. 51 | 52 | ### git 53 | 54 | For many of the examples we'll use git as our version control software. If you're new to git, learn more about it in this [Git chapter of the Development Environments book](http://git-scm.com/book), the [Try Git interactive tutorial](http://try.github.io/), and the [Pro Git book that's available for free on the git website](http://git-scm.com/book). 55 | 56 | ### GitHub Pages 57 | 58 | All of the examples we work through in the book can be hosted using GitHub Pages. I recommend that put each map you make while reading this book up on GitHub Pages. It'll be good practice if you're new to git and GitHub. 59 | 60 | Learn more about GitHub pages in the [related chapter of the Development Environments book](https://github.com/sethvincent/dev-envs-book/blob/master/manuscript/github.md), and on [GitHub's Help section](https://help.github.com/categories/20/articles). 61 | 62 | ## Chapters 63 | 64 | Here's the progress I've made so far on chapters. As you likely know, I'm releasing this book in pieces, a few chapters at a time, and you're essentially subscribed to those chapter releases. The upcoming chapter list is somewhat revisable. I'm particularly interested in hearing your thoughts on what chapters would be valuable to you. Email me at seth@superbigtree.com to let me know what types of Leaflet.js content you would find useful. 65 | 66 | ### Completed: 67 | - The simplest possible map you can make 68 | - html file 69 | - Remote script and stylesheet files 70 | - A map with one marker 71 | - Put the map on GitHub Pages 72 | - Getting started with Leaflet.js using node.js, npm, and browserify 73 | - Using alternate tilesets 74 | 75 | ### Started: 76 | 77 | - Useful Leaflet.js plugins 78 | - Leaflet.markercluster 79 | - Leaflet.label 80 | - Leaflet.awesome-markers 81 | - Leaflet.TextPath 82 | - leaflet-hash 83 | - L.GeoSearch 84 | - Leaflet.draw 85 | - leaflet-search 86 | 87 | ### Upcoming: 88 | - Data visualization styles you can use in your maps 89 | - Customizing your maps 90 | - Markers 91 | - Controls 92 | - Drawing shapes on maps 93 | - Advanced layer types 94 | - GeoJSON & Leaflet.js 95 | - TopoJSON 96 | - Using remote data in your maps 97 | - Google Spreadsheet and Tabletop.js 98 | - Twitter 99 | - Instagram 100 | - LocalWiki 101 | - Using D3.js with Leaflet.js 102 | - Additional resources directory 103 | 104 | Please feel free to suggest topics or chapters by emailing me at seth@superbigtree.com, 105 | 106 | ## Who are you? Who am I? What is this? 107 | 108 | ### The book 109 | This book is meant as an introductory text that will get people up to speed for building interactive maps with Leaflet.js. 110 | 111 | This book is an introductory text. I aim for this book to be a conversational and low-barrier approach to learning javascript and Leaflet. Everything we work on in this book can be done with just a browser, a terminal, and a text editor. 112 | 113 | ### The reader 114 | I expect that the ideal reader for this book is someone who likes exploring, imagining, and inventing for themselves. You might even have some experience with javascript already. And that’s OK, because practicing, and even repetition is an important part of learning. 115 | 116 | ### The author 117 | I’m Seth Vincent. I write code, stories, and music. 118 | 119 | I’m an independent programmer, designer and writer that is passionate about news, publishing and civic technology – particularly as it applies to local issues. 120 | 121 | I’m a co-organizer of [seattle.io](http://seattle.io), [Code for Seattle](http://codeforseattle.org/), and [SeattleWiki](http://seattlewiki.net/). 122 | 123 | In case you couldn’t tell, I currently live in Seattle, Washington. 124 | 125 | I write books like the one you’re reading, and build things like [crtrdg.js, a toolkit for 2d games](http://crtrdg.github.io/) at [Super Big Tree](http://superbigtree.com/). 126 | 127 | ## Setting up a development environment 128 | There’s a lot of wind-up to getting started programming. You should understand things like git, github, the terminal, and more. 129 | 130 | Instead of baking that information into each book in the series, I created a book called Development Environments for Beginners that helps you set up a javascript development environment (as well as ruby and python, but you can skip those sections if needed). 131 | 132 | From that book you’ll learn how to install node.js, work with version control and testing tools, best practices for automating tasks and other programming tips and tricks. 133 | 134 | If you’re feeling like you could use more information about what a development environment is and how best to set one up, you can purchase the Development Environments book at [superbigtree.com/books/dev-envs](http://superbigtree.com/books/dev-envs). 135 | 136 | If needed you can check out the Development Environments book on GitHub for free here: [github.com/sethvincent/dev-envs-book](http://github.com/sethvincent/dev-envs-book). 137 | 138 | Though, if you’re feeling generous and able to purchase the book, that’ll get you pdf, epub, and mobi versions, as well as support my work. 139 | 140 | 141 | 142 | 143 | 144 | # The simplest possible map you can make 145 | 146 | ## Get a MapBox account and map ID 147 | 148 | For a number of examples in this book we'll use map tiles from MapBox. Create an account at [mapbox.com](http://mapbox.com/), create a project, and use the map ID from that project for these examples. 149 | 150 | ## Create an index.html file 151 | 152 | Here's the full index.html file we're using in this example. As you can see there's a minimal amount of work involved in creating a basic map. If you're new to some of these concepts keep reading, we'll go over this code in detail. 153 | 154 | ``` 155 | 156 | 157 | 158 | Simple Leaflet Example 159 | 160 | 161 | 164 | 165 | 169 | 170 | 171 |
172 | 173 | 174 | 175 | 189 | 190 | 191 | ``` 192 | 193 | ## The full index.html file explained in detail 194 | 195 | ### Get started 196 | 197 | Give your html file the HTML5 doctype, open the `` and `` sections, and give your page a title. 198 | 199 | ``` 200 | 201 | 202 | 203 | Simple Leaflet Example 204 | ``` 205 | 206 | ### Add Leaflet style 207 | 208 | Include the Leaflet.js stylesheets from the leafletjs.com servers. The ` 1245 | 1246 | 1247 | 1248 |
1249 | 1250 | 1251 | 1252 | ``` 1253 | 1254 | Note that the css is being pulled directly from the dependencies in the node_modules folder. This means that you should add the entire node_modules folder to a .gitignore file if you're using git. 1255 | 1256 | ## Edit index.js 1257 | 1258 | ### Require the leaflet modules 1259 | 1260 | ``` 1261 | var L = require('leaflet'); 1262 | require('leaflet-draw'); 1263 | require('leaflet-providers'); 1264 | ``` 1265 | 1266 | Note that leaflet-draw and leaflet-providers are being added to the global scope when they are required without setting them to a variable. This makes it so they can add methods to Leaflet's `L` object. 1267 | 1268 | ### Set Leaflet images path 1269 | 1270 | ``` 1271 | L.Icon.Default.imagePath = 'node_modules/leaflet/dist/images/'; 1272 | ``` 1273 | 1274 | Leaflet needs to know that the images are in this folder. 1275 | 1276 | ### Create map 1277 | 1278 | ``` 1279 | var map = L.map('map'); 1280 | ``` 1281 | 1282 | Create the map using the `L.map` method. 1283 | 1284 | ### Set the latitude, longitude, and zoom of the map 1285 | 1286 | ``` 1287 | map.setView([47.63, -122.32], 11); 1288 | ``` 1289 | 1290 | The `map.setView` method sets the latitude, longitude, and zoom level. 1291 | 1292 | ### Use `L.tileLayer.provider()` method to add Stamen Watercolor tiles and add tile layer to map 1293 | 1294 | ``` 1295 | var layer = L.tileLayer.provider('Stamen.Watercolor'); 1296 | layer.addTo(map); 1297 | ``` 1298 | 1299 | The Watercolor tileset from Stamen is super pretty, so it's a fun example to use. Note that the `provider` method was added because we required the leaflet-providers module. 1300 | 1301 | ### Initialize a geoJson layer to save the features drawn on the map 1302 | 1303 | ``` 1304 | var drawnItems = L.geoJson() 1305 | map.addLayer(drawnItems); 1306 | ``` 1307 | 1308 | This initializes a `drawnItems` object which we'll use to track the features you draw on the map. 1309 | 1310 | ### Create draw controls and add them to the map 1311 | 1312 | ``` 1313 | var drawControl = new L.Control.Draw({ 1314 | edit: { featureGroup: drawnItems } 1315 | }); 1316 | 1317 | map.addControl(drawControl); 1318 | ``` 1319 | 1320 | Adding leaflet-draw controls to the map is pretty easy. By default we'll be able to draw polygons, circles, rectangles, lines, and points. 1321 | 1322 | ### Create features array for storing an array fo GeoJSON features 1323 | 1324 | ``` 1325 | var features = []; 1326 | ``` 1327 | 1328 | The features array is something you might use for storing all the GeoJSON layers for sending back to a server. 1329 | 1330 | ### Listen for the `draw:created` event 1331 | ``` 1332 | map.on('draw:created', function (e) { 1333 | drawnItems.addLayer(e.layer); 1334 | var layers = drawnItems._layers; 1335 | for (var key in layers) features.push(layers[key].toGeoJSON()); 1336 | console.log(drawnItems) 1337 | }); 1338 | ``` 1339 | 1340 | Every time a feature is drawn on to the map, the `draw:created` event will fire, and we'll store the layer in both `drawnItems` and `features`. 1341 | 1342 | Instead of using `console.log()`, this is where you might send a request to your server to save the features. 1343 | 1344 | ### Listen for the `draw:edited` event 1345 | ``` 1346 | map.on('draw:edited', function (e) { 1347 | var layers = drawnItems._layers; 1348 | for (var key in layers) features.push(layers[key].toGeoJSON()); 1349 | console.log(drawnItems) 1350 | }); 1351 | ``` 1352 | 1353 | Every time a feature is edited on the map, the `draw:edited` event will fire, and we'll update the layer in both `drawnItems` and `features`. 1354 | 1355 | Instead of using `console.log()`, this is where you might send a request to your server to save the features. 1356 | 1357 | ### Full JavaScript example: 1358 | 1359 | ``` 1360 | var L = require('leaflet'); 1361 | require('leaflet-draw'); 1362 | require('leaflet-providers'); 1363 | 1364 | L.Icon.Default.imagePath = 'node_modules/leaflet/dist/images/'; 1365 | 1366 | var map = L.map('map'); 1367 | map.setView([47.63, -122.32], 11); 1368 | var layer = L.tileLayer.provider('Stamen.Watercolor'); 1369 | layer.addTo(map); 1370 | 1371 | var drawnItems = L.geoJson(); 1372 | map.addLayer(drawnItems); 1373 | 1374 | var drawControl = new L.Control.Draw({ 1375 | edit: { featureGroup: drawnItems } 1376 | }); 1377 | 1378 | map.addControl(drawControl); 1379 | 1380 | var features = []; 1381 | map.on('draw:created', function (e) { 1382 | drawnItems.addLayer(e.layer); 1383 | var layers = drawnItems._layers; 1384 | for (var key in layers) features.push(layers[key].toGeoJSON()); 1385 | console.log(drawnItems) 1386 | }); 1387 | 1388 | map.on('draw:edited', function (e) { 1389 | var layers = drawnItems._layers; 1390 | for (var key in layers) features.push(layers[key].toGeoJSON()); 1391 | console.log(drawnItems) 1392 | }); 1393 | ``` 1394 | 1395 | 1396 | # A Work in progress 1397 | 1398 | I'm releasing this book a few chapters at a time in part to get feedback from you about what topics you'd like to see in the book. 1399 | 1400 | ## The planned upcoming chapters: 1401 | 1402 | - Data visualization styles you can use in your maps 1403 | - Customizing your maps 1404 | - Map tiles 1405 | - CloudMade 1406 | - MapBox 1407 | - Stamen 1408 | - Markers 1409 | - Controls 1410 | - Drawing shapes on maps 1411 | - Advanced layer types 1412 | - GeoJSON & Leaflet.js 1413 | - TopoJSON 1414 | - Using remote data in your maps 1415 | - Google Spreadsheet and Tabletop.js 1416 | - Twitter 1417 | - Instagram 1418 | - LocalWiki 1419 | - Using D3.js with Leaflet.js 1420 | - Additional resources directory 1421 | 1422 | By purchasing the book you're basically subscribed to the upcoming chapter releases. The above list is somewhat revisable. I'm interested in hearing your thoughts on what chapters would be valuable to you. Email me at seth@superbigtree.com to let me know what types of Leaflet.js content you would find useful. 1423 | 1424 | 1425 | -------------------------------------------------------------------------------- /chapters/01-introduction.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 | ## Thank you. 4 | I really appreciate the support you’ve given by purchasing this book. 5 | I welcome you to help guide the direction of this book and the Learn.js series of javascript books. If there are particular libraries, development tools, or programming patterns that you'd like to see covered, please email me at [hi@learnjs.io](mailto:hi@learnjs.io). 6 | 7 | The Learn.js series is highly inspired by the lean publishing model ([read more about it](https://leanpub.com/manifesto)) proposed by Peter Armstrong, founder of leanpub.com. It has proven successful as a way to receive feedback from you, the readers, so that together we can make the best book about javascript tools and libraries possible. 8 | 9 | You’ll get updates about upcoming books in the series, and I’d love to hear your thoughts on what would be most useful. 10 | 11 | ## Tools we'll use in this book 12 | 13 | Many of the tools used in this book are covered in detail in one of my other books, Development Environments for Beginners. 14 | 15 | If you’re feeling like you could use more information about what a development environment is and how best to set one up, you can purchase the Development Environments book at [superbigtree.com/books/dev-envs](http://superbigtree.com/books/dev-envs). 16 | 17 | If needed you can check out the Development Environments book on GitHub for free here: [github.com/sethvincent/dev-envs-book](http://github.com/sethvincent/dev-envs-book). 18 | 19 | ### Sublime text editor 20 | 21 | Sublime is a popular text editor with versions for Mac, Windows, and Linux. 22 | 23 | You can download an evaluation copy for free, and pay for a license when you're ready. 24 | 25 | In this book we'll be using version 2 of Sublime, in future updates to the book we'll switch to version 3. 26 | 27 | ### Install 28 | Go to [sublimetext.com](http://www.sublimetext.com/) and click the download button. 29 | 30 | ### Terminal 31 | 32 | You'll be using the terminal (or command-line) for many of the tutorials in this book. [The Terminal chapter in Development Environments for Beginners](https://github.com/sethvincent/dev-envs-book/blob/master/manuscript/terminal.md) will help you get started. 33 | 34 | ### Node.js 35 | 36 | We'll be using node.js mostly to get at npm, node's bundled package manager. 37 | 38 | We will also write modules in the style of node.js. 39 | 40 | Our code written for the browser will utilize the node.js style of modules thanks to browserify, a tool for bundling node modules for the browser. 41 | 42 | This means that we won’t cover the RequireJS/AMD toolset for javascript development, but will focus on node/CommonJS modules whenever possible. 43 | 44 | You’ll learn more about this later in the book as we go into depth with using Leaflet.js alongside browserify. 45 | 46 | ### npm 47 | 48 | npm is the package manager that comes bundled with node.js. Sometimes people call it the node package manager, but I prefer a term used by programmer Max Ogden: "node packaged modules". The idea is that we can store whatever modules we want on npm. Leaflet.js is an example. 49 | 50 | In each chapter we'll explore npm a little more, and by the end of the book you'll have learned it pretty thoroughly. 51 | 52 | ### git 53 | 54 | For many of the examples we'll use git as our version control software. If you're new to git, learn more about it in this [Git chapter of the Development Environments book](http://git-scm.com/book), the [Try Git interactive tutorial](http://try.github.io/), and the [Pro Git book that's available for free on the git website](http://git-scm.com/book). 55 | 56 | ### GitHub Pages 57 | 58 | All of the examples we work through in the book can be hosted using GitHub Pages. I recommend that put each map you make while reading this book up on GitHub Pages. It'll be good practice if you're new to git and GitHub. 59 | 60 | Learn more about GitHub pages in the [related chapter of the Development Environments book](https://github.com/sethvincent/dev-envs-book/blob/master/manuscript/github.md), and on [GitHub's Help section](https://help.github.com/categories/20/articles). 61 | 62 | ## Chapters 63 | 64 | Here's the progress I've made so far on chapters. As you likely know, I'm releasing this book in pieces, a few chapters at a time, and you're essentially subscribed to those chapter releases. The upcoming chapter list is somewhat revisable. I'm particularly interested in hearing your thoughts on what chapters would be valuable to you. Email me at seth@superbigtree.com to let me know what types of Leaflet.js content you would find useful. 65 | 66 | ### Completed: 67 | - The simplest possible map you can make 68 | - html file 69 | - Remote script and stylesheet files 70 | - A map with one marker 71 | - Put the map on GitHub Pages 72 | - Getting started with Leaflet.js using node.js, npm, and browserify 73 | - Using alternate tilesets 74 | 75 | ### Started: 76 | 77 | - Useful Leaflet.js plugins 78 | - Leaflet.markercluster 79 | - Leaflet.label 80 | - Leaflet.awesome-markers 81 | - Leaflet.TextPath 82 | - leaflet-hash 83 | - L.GeoSearch 84 | - Leaflet.draw 85 | - leaflet-search 86 | 87 | ### Upcoming: 88 | - Data visualization styles you can use in your maps 89 | - Customizing your maps 90 | - Markers 91 | - Controls 92 | - Drawing shapes on maps 93 | - Advanced layer types 94 | - GeoJSON & Leaflet.js 95 | - TopoJSON 96 | - Using remote data in your maps 97 | - Google Spreadsheet and Tabletop.js 98 | - Twitter 99 | - Instagram 100 | - LocalWiki 101 | - Using D3.js with Leaflet.js 102 | - Additional resources directory 103 | 104 | Please feel free to suggest topics or chapters by emailing me at seth@superbigtree.com, 105 | 106 | ## Who are you? Who am I? What is this? 107 | 108 | ### The book 109 | This book is meant as an introductory text that will get people up to speed for building interactive maps with Leaflet.js. 110 | 111 | This book is an introductory text. I aim for this book to be a conversational and low-barrier approach to learning javascript and Leaflet. Everything we work on in this book can be done with just a browser, a terminal, and a text editor. 112 | 113 | ### The reader 114 | I expect that the ideal reader for this book is someone who likes exploring, imagining, and inventing for themselves. You might even have some experience with javascript already. And that’s OK, because practicing, and even repetition is an important part of learning. 115 | 116 | ### The author 117 | I’m Seth Vincent. I write code, stories, and music. 118 | 119 | I’m an independent programmer, designer and writer that is passionate about news, publishing and civic technology – particularly as it applies to local issues. 120 | 121 | I’m a co-organizer of [seattle.io](http://seattle.io), [Code for Seattle](http://codeforseattle.org/), and [SeattleWiki](http://seattlewiki.net/). 122 | 123 | In case you couldn’t tell, I currently live in Seattle, Washington. 124 | 125 | I write books like the one you’re reading, and build things like [crtrdg.js, a toolkit for 2d games](http://crtrdg.github.io/) at [Super Big Tree](http://superbigtree.com/). 126 | 127 | ## Setting up a development environment 128 | There’s a lot of wind-up to getting started programming. You should understand things like git, github, the terminal, and more. 129 | 130 | Instead of baking that information into each book in the series, I created a book called Development Environments for Beginners that helps you set up a javascript development environment (as well as ruby and python, but you can skip those sections if needed). 131 | 132 | From that book you’ll learn how to install node.js, work with version control and testing tools, best practices for automating tasks and other programming tips and tricks. 133 | 134 | If you’re feeling like you could use more information about what a development environment is and how best to set one up, you can purchase the Development Environments book at [superbigtree.com/books/dev-envs](http://superbigtree.com/books/dev-envs). 135 | 136 | If needed you can check out the Development Environments book on GitHub for free here: [github.com/sethvincent/dev-envs-book](http://github.com/sethvincent/dev-envs-book). 137 | 138 | Though, if you’re feeling generous and able to purchase the book, that’ll get you pdf, epub, and mobi versions, as well as support my work. 139 | 140 | -------------------------------------------------------------------------------- /chapters/02-first-map.md: -------------------------------------------------------------------------------- 1 | 2 | # The simplest possible map you can make 3 | 4 | ## Get a MapBox account and map ID 5 | 6 | For a number of examples in this book we'll use map tiles from MapBox. Create an account at [mapbox.com](http://mapbox.com/), create a project, and use the map ID from that project for these examples. 7 | 8 | ## Create an index.html file 9 | 10 | Here's the full index.html file we're using in this example. As you can see there's a minimal amount of work involved in creating a basic map. If you're new to some of these concepts keep reading, we'll go over this code in detail. 11 | 12 | ``` 13 | 14 | 15 | 16 | Simple Leaflet Example 17 | 18 | 19 | 22 | 23 | 27 | 28 | 29 |
30 | 31 | 32 | 33 | 47 | 48 | 49 | ``` 50 | 51 | ## The full index.html file explained in detail 52 | 53 | ### Get started 54 | 55 | Give your html file the HTML5 doctype, open the `` and `` sections, and give your page a title. 56 | 57 | ``` 58 | 59 | 60 | 61 | Simple Leaflet Example 62 | ``` 63 | 64 | ### Add Leaflet style 65 | 66 | Include the Leaflet.js stylesheets from the leafletjs.com servers. The ` 92 | 93 | 94 | 95 |
96 | 97 | 98 | 99 | ``` 100 | 101 | Note that the css is being pulled directly from the dependencies in the node_modules folder. This means that you should add the entire node_modules folder to a .gitignore file if you're using git. 102 | 103 | ## Edit index.js 104 | 105 | ### Require the leaflet modules 106 | 107 | ``` 108 | var L = require('leaflet'); 109 | require('leaflet-draw'); 110 | require('leaflet-providers'); 111 | ``` 112 | 113 | Note that leaflet-draw and leaflet-providers are being added to the global scope when they are required without setting them to a variable. This makes it so they can add methods to Leaflet's `L` object. 114 | 115 | ### Set Leaflet images path 116 | 117 | ``` 118 | L.Icon.Default.imagePath = 'node_modules/leaflet/dist/images/'; 119 | ``` 120 | 121 | Leaflet needs to know that the images are in this folder. 122 | 123 | ### Create map 124 | 125 | ``` 126 | var map = L.map('map'); 127 | ``` 128 | 129 | Create the map using the `L.map` method. 130 | 131 | ### Set the latitude, longitude, and zoom of the map 132 | 133 | ``` 134 | map.setView([47.63, -122.32], 11); 135 | ``` 136 | 137 | The `map.setView` method sets the latitude, longitude, and zoom level. 138 | 139 | ### Use `L.tileLayer.provider()` method to add Stamen Watercolor tiles and add tile layer to map 140 | 141 | ``` 142 | var layer = L.tileLayer.provider('Stamen.Watercolor'); 143 | layer.addTo(map); 144 | ``` 145 | 146 | The Watercolor tileset from Stamen is super pretty, so it's a fun example to use. Note that the `provider` method was added because we required the leaflet-providers module. 147 | 148 | ### Initialize a geoJson layer to save the features drawn on the map 149 | 150 | ``` 151 | var drawnItems = L.geoJson() 152 | map.addLayer(drawnItems); 153 | ``` 154 | 155 | This initializes a `drawnItems` object which we'll use to track the features you draw on the map. 156 | 157 | ### Create draw controls and add them to the map 158 | 159 | ``` 160 | var drawControl = new L.Control.Draw({ 161 | edit: { featureGroup: drawnItems } 162 | }); 163 | 164 | map.addControl(drawControl); 165 | ``` 166 | 167 | Adding leaflet-draw controls to the map is pretty easy. By default we'll be able to draw polygons, circles, rectangles, lines, and points. 168 | 169 | ### Create features array for storing an array fo GeoJSON features 170 | 171 | ``` 172 | var features = []; 173 | ``` 174 | 175 | The features array is something you might use for storing all the GeoJSON layers for sending back to a server. 176 | 177 | ### Listen for the `draw:created` event 178 | ``` 179 | map.on('draw:created', function (e) { 180 | drawnItems.addLayer(e.layer); 181 | var layers = drawnItems._layers; 182 | for (var key in layers) features.push(layers[key].toGeoJSON()); 183 | console.log(drawnItems) 184 | }); 185 | ``` 186 | 187 | Every time a feature is drawn on to the map, the `draw:created` event will fire, and we'll store the layer in both `drawnItems` and `features`. 188 | 189 | Instead of using `console.log()`, this is where you might send a request to your server to save the features. 190 | 191 | ### Listen for the `draw:edited` event 192 | ``` 193 | map.on('draw:edited', function (e) { 194 | var layers = drawnItems._layers; 195 | for (var key in layers) features.push(layers[key].toGeoJSON()); 196 | console.log(drawnItems) 197 | }); 198 | ``` 199 | 200 | Every time a feature is edited on the map, the `draw:edited` event will fire, and we'll update the layer in both `drawnItems` and `features`. 201 | 202 | Instead of using `console.log()`, this is where you might send a request to your server to save the features. 203 | 204 | ### Full JavaScript example: 205 | 206 | ``` 207 | var L = require('leaflet'); 208 | require('leaflet-draw'); 209 | require('leaflet-providers'); 210 | 211 | L.Icon.Default.imagePath = 'node_modules/leaflet/dist/images/'; 212 | 213 | var map = L.map('map'); 214 | map.setView([47.63, -122.32], 11); 215 | var layer = L.tileLayer.provider('Stamen.Watercolor'); 216 | layer.addTo(map); 217 | 218 | var drawnItems = L.geoJson(); 219 | map.addLayer(drawnItems); 220 | 221 | var drawControl = new L.Control.Draw({ 222 | edit: { featureGroup: drawnItems } 223 | }); 224 | 225 | map.addControl(drawControl); 226 | 227 | var features = []; 228 | map.on('draw:created', function (e) { 229 | drawnItems.addLayer(e.layer); 230 | var layers = drawnItems._layers; 231 | for (var key in layers) features.push(layers[key].toGeoJSON()); 232 | console.log(drawnItems) 233 | }); 234 | 235 | map.on('draw:edited', function (e) { 236 | var layers = drawnItems._layers; 237 | for (var key in layers) features.push(layers[key].toGeoJSON()); 238 | console.log(drawnItems) 239 | }); 240 | ``` -------------------------------------------------------------------------------- /chapters/Book.txt: -------------------------------------------------------------------------------- 1 | 01-introduction.md 2 | 02-first-map.md 3 | 03-leaflet-and-browserify.md 4 | 04-basic-elements.md 5 | 05-alternate-tiles.md 6 | 06-leaflet-plugins.md 7 | 07-drawing.md 8 | work-in-progress.md -------------------------------------------------------------------------------- /chapters/work-in-progress.md: -------------------------------------------------------------------------------- 1 | # A Work in progress 2 | 3 | I'm releasing this book a few chapters at a time in part to get feedback from you about what topics you'd like to see in the book. 4 | 5 | ## The planned upcoming chapters: 6 | 7 | - Data visualization styles you can use in your maps 8 | - Customizing your maps 9 | - Map tiles 10 | - CloudMade 11 | - MapBox 12 | - Stamen 13 | - Markers 14 | - Controls 15 | - Drawing shapes on maps 16 | - Advanced layer types 17 | - GeoJSON & Leaflet.js 18 | - TopoJSON 19 | - Using remote data in your maps 20 | - Google Spreadsheet and Tabletop.js 21 | - Twitter 22 | - Instagram 23 | - LocalWiki 24 | - Using D3.js with Leaflet.js 25 | - Additional resources directory 26 | 27 | By purchasing the book you're basically subscribed to the upcoming chapter releases. The above list is somewhat revisable. I'm interested in hearing your thoughts on what chapters would be valuable to you. Email me at seth@superbigtree.com to let me know what types of Leaflet.js content you would find useful. -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "03-leaflet", 3 | "description": "Mapping with leaflet.js", 4 | "version": "0.2.0", 5 | "repository": { 6 | "url": "git://github.com/learn-js/03-leaflet.git" 7 | }, 8 | "scripts": { 9 | "leanpub": "./bin/leanpub", 10 | "compile": "./bin/compile", 11 | "dist": "./bin/dist" 12 | }, 13 | "dependencies": {}, 14 | "devDependencies": { 15 | "manuscript-builder": "0.0.3", 16 | "ebook-convert": "0.0.2" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Making maps with Leaflet.js 2 | > Learn.js is a series of guidebooks to building projects with javascript. 3 | 4 | This book is the third in a series about building projects with javascript. Learn more at [learnjs.io](http://learnjs.io). 5 | 6 | Like the book? You can purchase it at [learnjs.io](http://learnjs.io). You can help guide the development of the book by submitting errata and topic requests to [the book's issues queue](https://github.com/learn-js/learnjs-03-leaflet/issues). 7 | 8 | You can also [support the book by donating via gittip](https://www.gittip.com/sethvincent). 9 | 10 | --------------------------------------------------------------------------------