-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
688 lines (588 loc) · 28.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Tutorial</title>
<link rel='shortcut icon' href='imgs/moto.png' type='image/x-icon' />
<link rel="stylesheet" href="css/site.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/github.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<!-- <script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.2.4"></script> -->
<script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"
integrity="sha512-6LVib9wGnqVKIClCduEwsCub7iauLXpwrd5njR2J507m3A2a4HXJDLMiSZzjcksag3UluIfuW1KzuWVI5n/cuQ=="
crossorigin=""></script>
<script src="./lib/plugins/leaflet-polygon.fillPattern.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
<meta charset="utf-8">
</head>
<body>
<header>
<h1>SHRUG: leaflet.js</h1>
<div id='header_map'>
</div>
</header>
<div class='section'>
<h1>Let's make a map with Leaflet.js!</h1>
<p>In this tutorial, we will learn about some basic HTML, CSS, and JavaScript (specifically, the Leaflet.js
library) to create a series of progressively complex web maps.</p>
</div>
<div class='section'>
<h2>So, what exactly is Leaflet?</h2>
<p><a href='http://leafletjs.com/'>Leaflet</a> is an open-source JavaScript library that gives us code to create
interactive, mobile friendly web maps. Think of it as a collection (or library) of prewritten JavaScript
that does some of the heavy lifting/scripting of web map stuff for us. We will interact with the library
through its well documented <a href='http://leafletjs.com/reference.html'>API</a>. It has a small file size
but is packed with useful <a href='http://leafletjs.com/features.html'>features</a> and can be extended even
further with <a href='http://leafletjs.com/plugins.html'>plugins</a>. Leaflet was created by <a
href="https://agafonkin.com/">Vladimir Agafonkin</a> (currently at <a
href="https://www.mapbox.com">MapBox</a>)</aa>
</p>
<p>In essence:</p>
<ul>
<li>An open source web mapping library</li>
<li>Small filesize footprint and optimized for performance</li>
<li>Plugin centric for extending functionality</li>
</ul>
<h4>What Leaflet is:</h4>
<ul>
<li>Free! (and open source) and great for low budget projects</li>
<li>Tile base (<a href="https://wiki.openstreetmap.org/wiki/Slippy_Map">slippy maps</a>)</li>
<li>Mobile friendly</li>
<li>Fully customizable with plugins</li>
</ul>
<p>"Slippy" maps with tile based layers with zooming, panning, and feature layers that dev supplies. It handles
various basic overhead tasks like converting data to map layers and mouse interactions, and it's easy to
extend with plugins. It will also work well across most types of mobile and non-mobile devices.</p>
<p>Leaflet is a great low budget option for those that need web mapping capabilities, but don't necessarily have
a fully fledged GIS license where they can leverage the online capabilities.</p>
<h4>What Leaflet is not:</h4>
<ul>
<li>A GIS</li>
<li>A data provider, you must source that yourself (even the basemap)</li>
</ul>
<p>Leaflet is also not GIS, although it can perform some GIS-like functions. It can combined with tools like
CartoDB for GIS-like capabilities. If you need total freedom of form, interaction,
transitions, and map projections, consider working with something like <a href="http://d3js.org/">D3.js</a>.
</p>
<p>Leaflet is also not point and click software, you need to know some basics about programming to get up and
running.</p>
</div>
<div class='section'>
<h2>Web mapping options:</h2>
<p>There are a wealth of options out there (<a href="https://www.arcgis.com/index.html">ArcGIS Online</a>, <a
href="https://doc.arcgis.com/en/web-appbuilder/">Web AppBuilder for ArcGIS</a>, <a
href="https://developers.arcgis.com/javascript/">ArcGIS JavaScript API</a>, <a
href="https://openlayers.org/">OpenLayers</a>, <a href="https://leafletjs.com">Leaflet</a>,
<a href="https://www.mapbox.com">Mapbox</a>, <a href="https://carto.com">Carto</a>, <a
href="https://d3js.org">D3.js</a>, <a href="https://cloud.google.com/maps-platform/">Google Maps</a> and
more) to achieve this dream...but today we will look at
Leaflet.js</p>
</div>
<div class='section'>
<h2>Anatomy of a webmap (and websites)</h2>
<p><a href='https://en.wikipedia.org/wiki/HTML'>HTML (HyperText Markup Language)</a> allows us to structure
content for our web page. Our map will be contained in an element within an HTML file.</p>
<p><a href='https://en.wikipedia.org/wiki/Cascading_Style_Sheets'>CSS (Cascading Style Sheets)</a> gives us
control of the style and visual presentation of our web page. We use it to determine the placement and
sizing of
the map and to customize some Leaflet elements.</p>
<p><a href='https://en.wikipedia.org/wiki/JavaScript'>JS (JavaScript)</a> gives us the ability to add
interactivity to our web page. We will use it to pull in map tiles to our web page, add data (or content
layers), and handle user interaction with the map.</p>
</div>
<div class='section'>
<h2>Setup</h2>
<p>BEFORE YOU START!</p>
<p>We're going to need a few things to get going.</p>
<p>You'll want a proper text editor (none of that notepad nonsense!). I am going to be using <a
href="https://code.visualstudio.com">Visual Studio Code</a> but other alternatives are <a
href="http://www.sublimetext.com/">Sublime Text</a>, <a href="https://atom.io/">Atom
Editor</a>, <a href="https://notepad-plus-plus.org/">Notepad++</a> (if you like the barebones approach),
or even <a href="https://www.vim.org/">Vim</a> if you're super daring</p>
<p>To display our maps, it is useful to have a local server running on our machine. Today, I will be using a VS
Code <a href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer">Live server</a>
plugin. For today, this isn't totally necessary, but very nice to have.</p>
<p>To display your map, it is useful to have a local server running on your computer. There are many ways to
create a local server on your machine, but one that I prefer is the <a
href="https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer">Live Server</a> plugin
for VSCode because it's a single click solution to starting and displaying your HTML files.</p>
<p>Last, to set up some chronological history of development we should implement some source control with Git.
</p>
</div>
<div class='section'>
<h2>Basic map of Tallahassee Centered on the FSU Campus</h2>
<p>Here is the base map we'll build first:</p>
<div id='basicMap' class='map'></div>
<p class='small'><em>view </em><a href='examples/basicMap.html'>example</a></p>
</div>
<div class='section'>
<h2>Create a basic HTML document</h2>
<p>Open a text editor (<a href="https://code.visualstudio.com">vscode</a>) --> Create a new file --> Save the
file using a .html extension.</p>
<p>Next, set up the structure of the web page by adding the following markup to the file:</p>
<pre><code class="language-markup">
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quick Start - Leaflet</title>
<style>
</style>
</head>
<body>
<script>
</script>
</body>
</html>
</code></pre>
</div>
<div class='section'>
<h2>Reference the Leaflet CSS and JavaScript Files</h2>
<p>Next, in order to use the Leaflet library, we need to reference its CSS and JavaScript files in the HTML
file.</p>
<p>There are a few ways that you can reference these files:</p>
<ol>
<li>Reference the hosted Leaflet files (by its CDN)</li>
<li>Download copies and host them locally from a libary folder within our project</li>
</ol>
<p>For simplicity's sake, we are going to references the hosted files. To do this, insert the code below into
the <head> section of the HTML page:</p>
<pre><code class="language-markup">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />
</code></pre>
<p>Next, include Leaflet's JavaScript file <strong>after</strong> Leaflet's CSS file</p>
<pre><code>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
</code></pre>
</div>
<div class='section'>
<h2>Add the map div and give it some style</h2>
<p>Leaflet requires a <div> element to contain the map and that that <div> element have a set
height.</p>
<p>Create a <div> element with the id of "map" to contain the map by adding the following to the
HTML <strong><body></strong>:</p>
<pre><code>
<div id="map"></div>
</code></pre>
<p>To create a map that is 800 px by 600 px add the following CSS code between the <style> tags in the
<head> section of the HTML page:</p>
<pre><code>
#map {
width: 800px;
height: 600px;
}
</code></pre>
<p>Now that the HTML and CSS are set, we have set up the basic structure and style of our web map. Next, all we
need to do is
add some JavaScript and we'll have a web map!</p>
<p>Easy, right?</p>
</div>
<div class='section'>
<h2>Initialize the map!</h2>
<p>The first script we will write pulls in some map tiles and configures a few basic map settings.</p>
<p>Enter the following JavaScript between the <script> tags of the HTML file.</p>
<pre><code>
<script>
var map = L.map('map',{
center: [30.4383, -84.2807],
zoom: 15
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>;
}).addTo(map);
</script>
</code></pre>
<p>The code is now complete so the file should now look like this:</p>
<pre><code>
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quick Start - Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<style>
#map {
width: 960px;
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map',{
center: [30.4383, -84.2807],
zoom: 15
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>'
}).addTo(map);
</script>
</body>
</html>
</code></pre>
<h4>Let's break this all down:</h4>
<ol>
<li>Create the map variable to house the map object</li>
<li>Use <a href='http://leafletjs.com/reference.html#map-constructor'>L.map()</a> to initialize
the map object, then pass it the id of where we want the map to go within our HTML document. We also
added a latitude, longitude, and zoom level to give our map an initial center point and zoom on first
load.
<ul>
<li>
Additionally, we can use the <a
href="http://leafletjs.com/reference.html#map-setview">setView()</a> method to also define
our starting point and zoom level</li>
</ul>
</li>
</ol>
<p>First, the code within the <strong><script></script></strong> creates the 'map' variable, assigns
it a new <a href='http://leafletjs.com/reference.html#map-constructor'>L.map</a> object, then passes it the
id (‘map’in this case) of the div element in which the map is to be contained. The script goes on to pass
some options that set an initial center point and zoom level for the map. Essentially, this creates a map on
the page that we can manipulate.</p>
<p>Next, the script creates a new <a href='http://leafletjs.com/reference.html#tilelayer'>L.tileLayer</a>
object, specifying a particular set of tiles to be loaded into the map container and passes in an
'attribution' option. In this case <a href='http://www.openstreetmap.org'>OpenStreetMap</a> tiles are used
but there are many <a href='https://leaflet-extras.github.io/leaflet-providers/preview/index.html'>map tile
providers.</a> Experiment with different sets and remember to always properly attribute
the data and imagery used!</p>
<p>Finally, the <a href='http://leafletjs.com/reference.html#tilelayer-addto'>addTo()</a> method is used to add
the tile layer to the map.</p>
<br>
<p>Side note: </p>
<p>Alternatively, instead of using the <a href='http://leafletjs.com/reference.html#tilelayer-addto'>addTo()</a>
method to individually add our layers, we can define our layers ahead of time, and include them into the map
declaration, see example below:</p>
<pre><code>
const map = L.map('map',{
center: [43.64701, -79.39425],
zoom: 15,
layers: [citiesLayer, statesLayer] // adding our layers as a group
});
</code></pre>
<p>Make sure to save your file and open your map on your local server.</p>
<p>Hopefully, you will see leaflet map showing the FSU campus!</p>
</div>
<div class='section'>
<h2>Modify the Base Map</h2>
<p>One minor modification that we can make to this map is removing the scrolling mouse scroll capabilities for
our map. This forces the user to press the zoom buttons to scroll the map closer and farther.</p>
<div id='mapa' class='map'></div>
<p class='small'><em>view </em><a href='examples/example2.html'>example</a></p>
<pre><code>
<script>
var map = L.map('map'<span class="newCode">,{scrollWheelZoom:false}).setView([43.64701, -79.39425], 15)</span>;
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
</script>
</code></pre>
<p>First, remove the 'center' and 'zoom' options from the L.map constructor.</p>
<p>Next, modify the script to deactivate the <a
href='http://leafletjs.com/reference.html#map-scrollwheelzoom'>scrollWheelZoom</a> interactivity option
so that we don't accidentally zoom the map when we are trying to scroll down the page. This is done by
passing 'scrollWheelZoom: false' as an option to L.map(). This can be a particularly important usability
issue if the map is large or if there is content above and/or below it.</p>
<p>Finally, set the initial center and zoom level with the <a
href='http://leafletjs.com/reference.html#map-setview'>setView()</a> method.</p>
<p>The map should look just like our first one but we can't control the zoom level by scrolling and the code is
a bit streamlined.</p>
<p>Now we have a customized base map with which to build on.</p>
</div>
<div class='section'>
<h2>Add a simple marker and popup</h2>
<p>This next bit won't be practical right away. It may not seem very useful to add a single marker to a map, but
we will explore a useful concept of binding a popup to data. Next, we will add a simple point marker to our
map and bind a popup for some description.</p>
<p>We will be exploring the L.marker and bindPopup() functionality ** reword this!</p>
<pre><code>
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quick Start - Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<style>
#map {
width: 960px;
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map',{
center: [30.4383, -84.2807],
zoom: 15
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>'
}).addTo(map);
// Add a single marker
const singleMarkerPopupMarker = L.marker([30.4383, -84.2807]);
singleMarkerPopupMarker.bindPopup('Hello world');
singleMarkerPopupMarker.addTo(map);
</script>
</body>
</html>
</code></pre>
<div id='singleMarkerPopup' class='map'></div>
<p class='small'><em>view </em><a href='examples/singleMarkerPopup.html'>example</a></p>
</div>
<div class='section'>
<h2>Add some data</h2>
<p>Next, let's explore one way to add some data to our map...</p>
<p>Let's take some local GeoJSON data of Pace Bike Racks around Tallahassee and put them into our map using the
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch">fetch API</a> and
Leaflet's GeoJSON functionality,
<a href="https://leafletjs.com/reference-1.5.0.html#geojson">L.GeoJSON()</a>.
</p>
<p>First, we are going to use the fetch API to grab our data:</p>
<pre><code class="language-markup">
fetch('./Pace_Bike_Racks_View.json')
.then(response => {
if (response.ok === true) {
return response.json();
} else {
alert('Geojson request failed.');
}
});
</code></pre>
<p>Let's unpack this a bit, the fetch API will let us give a reference to the location of our GeoJSON data file.
Once we receive the response, we ask if the response came back okay (request was successful), we return the
contents of that response and convert to JSON format with response.json()</p>
<p>Next, let's add the request contents to our map with <a
href="https://leafletjs.com/reference-1.5.0.html#geojson">L.GeoJSON()</a>.</p>
<p>Here's the whole code snippit:</p>
<pre><code>
<script>
const basemapLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a>',
});
var map = L.map('map', {
center: [30.4383, -84.2807],
zoom: 13,
layers: [basemapLayer]
});
// Let's add some data of pace bike racks in Tallahassee
fetch('../data/Pace_Bike_Racks_View.json')
.then(response => {
if (response.ok === true) {
return response.json(); // our data was fetched successfully
} else {
alert('Geojson request failed.');
}
});
.then(bikeRacks => {
L.geoJSON(bikeRacks).addTo(map);
});
</script>
</code></pre>
<div id='paceBikes' class='map'></div>
<p class='small'><em>view </em><a href='examples/paceBikes.html'>example</a></p>
</div>
<div class='section'>
<h2>Style the data</h2>
<p>We can also leverage the <a href="https://leafletjs.com/reference.html#icon">L.icon</a> class to style our
markers </p>
<pre><code>
<script>
const basemapLayer = L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
attribution: "© <a href="http://osm.org/copyright">OpenStreetMap</a>",
});
var map = L.map("map", {
center: [30.4383, -84.2807],
zoom: 13,
layers: [basemapLayer]
});
var paceBikeIcon = new L.Icon({
iconSize: [35, 27],
iconAnchor: [13, 27],
popupAnchor: [1, -24],
iconUrl: "../images/bicycle.png"
});
// Let"s add some data of pace bike racks in Tallahassee
fetch("../Pace_Bike_Racks_View.json")
.then(response => {
if (response.ok === true) {
return response.json(); // our data was fetched successfully
} else {
alert("Geojson request failed.");
}
})
.then(bikeRacks => {
L.geoJSON(bikeRacks, {
pointToLayer: function (feature, latlng) {
const popup = L.popup().setContent("I'm a hippity hoppity pace bike docking location");
const marker = L.marker(latlng, {
icon: paceBikeIcon
});
marker.bindPopup(popup);
return marker;
}
}).addTo(map);
});
</script>
</code></pre>
<div id='styledPaceBikes' class='map'></div>
<p class='small'><em>view </em><a href='examples/styledPaceData.html'>example</a></p>
</div>
<div class='section'>
<h1>Plugins!</h1>
<p>One of the cool things about Leaflet is that it's built to be completely extendable with and there are an
abundance of <a href="https://leafletjs.com/plugins.html">plugins</a> to be used and modified. It's also
completely necessary because Leaflet gives you very little functionality out of the box.</p>
<p>One "plugin" (really like a small library of functionality) that we will look at today is <a
href="https://esri.github.io/esri-leaflet/"></a>ESRI Leaflet that
will help us interface with ESRI's data services.</p>
</div>
<div class='section'>
<h2>ESRI Leaflet</h2>
<p>ESRI is pervasive throughout the GIS industry, and there is a good chance that your organization uses their
technologies. </p>
<p>To bring in ESRI Leaflet, all we need to do is include Leaflet's CDN in our html file</p>
<pre><code>
<script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"
integrity="sha512-6LVib9wGnqVKIClCduEwsCub7iauLXpwrd5njR2J507m3A2a4HXJDLMiSZzjcksag3UluIfuW1KzuWVI5n/cuQ=="
crossorigin=""></script>
</code></pre>
<p>Next, we can bring in a FeatureLayer by using the <a
href="https://esri.github.io/esri-leaflet/api-reference/layers/feature-layer.html">L.esri.featureLayer()</a>
method. Let's bring in some TLCGIS data:</p>
<div id='esriLeaflet' class='map'></div>
<pre><code>
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quick Start - Leaflet</title>
// load Leaflet css
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />
// load Leaflet JavaScript
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
// load ESRI Leaflet
<script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"
integrity="sha512-6LVib9wGnqVKIClCduEwsCub7iauLXpwrd5njR2J507m3A2a4HXJDLMiSZzjcksag3UluIfuW1KzuWVI5n/cuQ=="
crossorigin=""></script>
<style>
#map {
width: 960px;
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map', {
center: [30.4383, -84.2807],
zoom: 15
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a>'
}).addTo(map);
// add our esri feature layer
L.esri.featureLayer({
url: 'https://services.arcgis.com/ptvDyBs1KkcwzQNJ/arcgis/rest/services/Pace_Bike_Racks/FeatureServer/0'
}).addTo(map);
</script>
</body>
</html>
</code></pre>
</div>
<div class='section'>
<h1>More examples:</h1>
</div>
<div class='section'>
<h2>Florida Maternal Mental Health Collaborative:</h2>
<p><a href="https://flmomsmhresources.org/map">Mental Health Facility Locator Map</a></p>
<img src="./images/COMmap.png" alt="Mental Health map" class='map'>
</div>
<div class='section'>
<h2>Storm map with hover effects</h2>
<div id='stormTracks' class='map'></div>
</div>
<div class='section'>
<h2>Custom fill of polygons</h2>
<div id='customPolygonFill' class='map'></div>
</div>
<div class='section'>
<h2>Go forth and Prosper!</h2>
<p>We've only scratched the surface of what you can do with Leaflet maps. Tinker around with these examples and
see what you can come up with!</p>
<p>While we focused on simply making maps today, there is much to be said about map design. If you're familiar
with the <a href="https://github.com/Esri/calcite-maps">Calcite Maps</a> framework often used with the <a
href="https://developers.arcgis.com/javascript/">ArcGIS JavaScript API</a>, there is a Leaflet
adaptation as well.</p>
<p>One of the awesome things about Leaflet is that there are tons of resources out there for learning in
addition to their documentation. I used many of these resources to prepare this tutorial for <a
href="http://shrug-gis.org/workshop/2019/">SHRUG</a>. </p>
<p>Leaflet documentation: <a href="https://leafletjs.com/reference-1.5.0.html"></a></p>
<p><a href='http://leafletjs.com/examples.html'>Leaflet tutorials</a> on the official Leaflet website.</p>
<p>A <a href="http://maptimeboston.github.io/leaflet-intro/">Leaflet tutorial</a> written for maptime boston by
Andy Woodruff and Ryan Mullins that gets into
some of the more complicated functionality and techniques.</p>
<p>a <a href="http://duspviz.mit.edu/web-map-workshop/leaflet-js/">Leaflet tutorial</a> written for DUSPViz
(MIT’s Department of Urban Studies & Planning) that
covers the basics, but also adds things like mouseclick events to trigger actions on the map.</p>
<p><a href='http://maptime.io/anatomy-of-a-web-map/#0'>Anatomy of a Web Map</a>, by Alan McConchie and Beth
Schechter of <a href='http://maptime.io/'>Maptime</a> and <a href='http://stamen.com/'>Stamen.</a></p>
<p><a href='https://www.packtpub.com/web-development/leafletjs-essentials'>Leaflet.js Essentials</a>, a book by
Paul Crickard III.</p>
<p><a
href='https://github.com/geografa/foss4g2014-workshops/blob/master/Leaflet-and-Mapbox-JavaScript-API-Fundamentals.pdf'>Leaflet
and Mapbox JavaScript API Fundamentals</a>, a presentation by Mapbox's Rafa Gutierrez.</p>
<p><a href='http://lyzidiamond.com/maptimepdx/leaflet'>Leaflet Intro</a>, a Maptime PDX presentation by Lyzi
Diamond.</p>
<p><a href='http://luxembourgjs.github.io/leaflet-demo/#/'>Leaflet.JS Introduction</a>, by Thierry Nicola
for JS Luxembourg.</p>
<p><a href="http://leaflet-extras.github.io/leaflet-providers/preview/index.html">Leaflet provider</a> map,
an open source Leaflet extension that contains configurations for various free tile providers.</p>
<p><a href="https://www.mapbox.com/guides">Mapbox Guides</a> and <a
href='https://www.mapbox.com/mapbox.js/examples/'>examples</a> are great for learning about web maps
in general in addition to Mapbox.js, which is built on top of Leaflet.</p>
</div>
<div class='foot'>
<hr />
<p><span class='left'>Find a mistake? Submit an <a
href="https://github.com/clintonlunn/shrug-leaflet-presentation/issues/new">Issue</a> on
Github!</span><a href='#'>Back to Top</a></p>
</div>
<script src='js/site.js'></script>
</body>
</html>