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
|
---
layout: v2
---
<div class="announcement">Nov 17, 2019 — <a href="/2019/11/17/leaflet-1.6.0.html">Leaflet 1.6.0</a> has been released!</div>
<p>Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps.
Weighing just about <abbr title="38 KB gzipped — that's 133 KB minified and 378 KB in the source form, with 10 KB of CSS (2 KB gzipped) and 11 KB of images.">38 KB of JS</abbr>,
it has all the mapping <a href="#features">features</a> most developers ever need.</p>
<p>Leaflet is designed with <em>simplicity</em>, <em>performance</em> and <em>usability</em> in mind.
It works efficiently across all major desktop and mobile platforms,
can be extended with lots of <a href="plugins.html">plugins</a>,
has a beautiful, easy to use and <a title="Leaflet API reference" href="reference.html">well-documented API</a>
and a simple, readable <a title="Leaflet source code repository on GitHub" href="https://github.com/Leaflet/Leaflet">source code</a> that is a joy to
<a title="A guide to contributing to Leaflet" href="https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md">contribute</a> to.</p>
<div id="map" class="map map-home" style="height: 300px; margin-top: 50px"></div>
<p>Here we create a map in the <code>'map'</code> div, add <abbr title="Here we use OpenStreetMap tiles, but Leaflet doesn't force you to — use whatever works for you, it's open source!">tiles of our choice</abbr>, and then add a marker with some text in a popup:</p>
<pre class="basic-code javascript"><code>var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();</code></pre>
<p>Learn more with the <a href="examples/quick-start/">quick start guide</a>, check out <a href="examples.html">other tutorials</a>,
or head straight to the <a href="reference.html">API documentation</a>.
If you have any questions, take a look at the <a href="https://github.com/Leaflet/Leaflet/blob/master/FAQ.md">FAQ</a> first.</p>
</div>
<h2 class="usedby-title">Trusted by the best</h2>
<div class="usedby">
<div class="container">
<a class="logo logo-github" href="https://github.com">GitHub</a>
<a class="logo logo-foursquare" href="http://foursquare.com">foursquare</a>
<a class="logo logo-pinterest" href="https://www.pinterest.com">Pinterest</a>
<a class="logo logo-facebook" href="https://www.facebook.com/">Facebook</a>
<a class="logo logo-evernote" href="https://evernote.com">Evernote</a>
<a class="logo logo-etsy" href="https://www.etsy.com/">Etsy</a>
<a class="logo logo-flickr" href="https://www.flickr.com/">Flickr</a>
<a class="logo logo-500px" href="https://500px.com">500px</a>
<a class="logo logo-datagov" href="http://www.data.gov/">Data.gov</a>
<a class="logo logo-european-commission" href="http://ec.europa.eu/">European Commission</a>
<a class="logo logo-wpost" href="https://www.washingtonpost.com">The Washington Post</a>
<a class="logo logo-ftimes" href="http://www.ft.com">Financial Times</a>
<a class="logo logo-npr" href="http://www.npr.org">NPR</a>
<a class="logo logo-usatoday" href="http://www.usatoday.com">USA Today</a>
<a class="logo logo-nps" href="http://www.nps.gov/">National Park Service</a>
<a class="logo logo-ign" href="http://ign.com">IGN.com</a>
<a class="logo logo-openstreetmap" href="https://www.openstreetmap.org/">OpenStreetMap</a>
</div>
</div>
<div class="container">
<h2 id="features">Features</h2>
<p>Leaflet doesn't try to do everything for everyone. Instead it focuses on making <em>the basic things work perfectly</em>.</p>
<div class="features clearfix">
<div class="no-break">
<h3>Layers Out of the Box</h3>
<ul>
<li>Tile layers, WMS</li>
<li>Markers, Popups</li>
<li>Vector layers<span class="quiet">: polylines, polygons, circles, rectangles</span></li>
<li>Image overlays</li>
<li>GeoJSON</li>
</ul>
</div>
<div class="no-break">
<h3>Interaction Features</h3>
<ul>
<li>Drag panning with inertia</li>
<li>Scroll wheel zoom</li>
<li>Pinch-zoom on mobile</li>
<li>Double click zoom</li>
<li>Zoom to area <span class="quiet">(shift-drag)</span></li>
<li>Keyboard navigation</li>
<li>Events<span class="quiet">: click, mouseover, etc.</span></li>
<li>Marker dragging</li>
</ul>
</div>
<div class="no-break">
<h3>Visual Features</h3>
<ul>
<li>Zoom and pan animation</li>
<li>Tile and popup fade animation</li>
<li>Very nice default design <span class="quiet">for markers, popups and map controls</span></li>
<li>Retina resolution support</li>
</ul>
</div>
<div class="no-break">
<h3>Customization Features</h3>
<ul>
<li>Pure CSS3 popups and controls <span class="quiet">for easy restyling</span></li>
<li>Image- and HTML-based markers</li>
<li><span class="quiet">A simple interface for</span> custom map layers and controls</li>
<li>Custom map projections <span class="quiet">(with <code>EPSG:3857/4326/3395</code> out of the box)</span></li>
<li>Powerful OOP facilities <span class="quiet">for extending existing classes</span></li>
</ul>
</div>
<div class="no-break">
<h3>Performance Features</h3>
<ul>
<li>Hardware acceleration on mobile <span class="quiet"> makes it feel as smooth as native apps</span></li>
<li>Utilizing CSS3 features <span class="quiet">to make panning and zooming really smooth</span></li>
<li>Smart polyline/polygon rendering <span class="quiet">with dynamic clipping and simplification makes it very fast</span></li>
<li>Modular build system<span class="quiet"> for leaving out features you don't need</span></li>
<li>Tap delay elimination on mobile</li>
</ul>
</div>
<div class="no-break">
<h3>Map Controls</h3>
<ul>
<li>Zoom buttons</li>
<li>Attribution</li>
<li>Layer switcher</li>
<li>Scale</li>
</ul>
</div>
<div class="no-break">
<h3>Browser Support</h3>
<h4>Desktop</h4>
<ul>
<li>Chrome</li>
<li>Firefox</li>
<li>Safari 5+</li>
<li>Opera 12+</li>
<li>IE 7–11</li>
<li>Edge</li>
</ul>
</div>
<div class="no-break">
<h4>Mobile</h4>
<ul>
<li>Safari for iOS 7+</li>
<li>Android browser 2.2+, 3.1+, 4+</li>
<li>Chrome for mobile</li>
<li>Firefox for mobile</li>
<li>IE10+ for Win8 devices</li>
</ul>
</div>
<div class="no-break">
<h3>Misc</h3>
<ul>
<li>Extremely lightweight</li>
<li>No external dependencies</li>
</ul>
</div>
</div>
<p>If you find some feature really missing in Leaflet, first check if there's a <a href="plugins.html">plugin for it</a>
and if it's been discussed before already on <a href="https://github.com/Leaflet/Leaflet/issues">GitHub issues</a>.
If not, please open a new GitHub issue.</p>
<h2>Getting Involved</h2>
<p>Let's create the best mapping library in the world!
Leaflet was originally created by <a href="https://agafonkin.com">Vladimir Agafonkin</a>,
but is now developed by a big community of <a href="https://github.com/Leaflet/Leaflet/graphs/contributors">contributors</a>.
<a href="https://github.com/Leaflet/Leaflet">Pull requests</a> are always welcome.
However, there are many more ways to get involved with the development of Leaflet.</p>
<p>You can help the project tremendously by discovering and <a href="https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md#reporting-bugs">reporting bugs</a>, <a href="https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md#improving-documentation">improving documentation</a>,
helping others on <a href="https://stackoverflow.com/questions/tagged/leaflet">Stack Overflow</a>, <a href="https://gis.stackexchange.com/questions/tagged/leaflet">GIS Stack Exchange</a>
and <a href="https://github.com/Leaflet/Leaflet/issues">GitHub issues</a>,
tweeting to <a href="https://twitter.com/LeafletJS">@LeafletJS</a>
and spreading the word about Leaflet among your colleagues and friends.</p>
<p>Check out the <a href="https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md">contribution guide</a> for more information on getting involved with Leaflet development.</p>
<div class="social-buttons">
<iframe src="https://ghbtns.com/github-btn.html?user=Leaflet&repo=Leaflet&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="104px" height="20px"></iframe>
<a href="https://twitter.com/LeafletJS" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false">Follow @LeafletJS</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<iframe src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fleafletjs.com&layout=button_count&show_faces=false&width=93&action=like&font=arial&colorscheme=light&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:93px; height:20px;" allowTransparency="true"></iframe>
</div>
<script>
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
var map = L.map('map').setView([51.505, -0.159], 15).addLayer(osm);
L.marker([51.504, -0.159])
.addTo(map)
.bindPopup('A pretty CSS3 popup.<br />Easily customizable.')
.openPopup();
</script>
|
