improve features page, more styling
This commit is contained in:
mourner
parent
b2ec1e086f
commit
7f812ad9ec
@ -53,9 +53,9 @@ h1 a:hover, h1 a:focus {
|
||||
|
||||
h2 {
|
||||
font-size: 1.8em;
|
||||
margin-top: 1em;
|
||||
margin-top: 1.3em;
|
||||
font-weight: bold;
|
||||
padding: 4px 12px 3px;
|
||||
padding: 3px 12px 2px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
background: #edeeef;
|
||||
@ -76,7 +76,7 @@ h2 {
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
|
||||
text-shadow: -1px -1px 0 #999;
|
||||
text-shadow: -1px -1px 1px rgba(0,0,0,0.3);
|
||||
}
|
||||
.api-page h2 {
|
||||
margin-top: 2.5em;
|
||||
|
||||
@ -3,7 +3,7 @@ layout: default
|
||||
title: Download
|
||||
---
|
||||
|
||||
### Download Leaflet
|
||||
## Download Leaflet
|
||||
|
||||
Besides the library itself, the download package contains full source
|
||||
code, unit tests, files for debugging and a build system. The production
|
||||
|
||||
@ -3,7 +3,7 @@ layout: default
|
||||
title: Tutorials
|
||||
---
|
||||
|
||||
### Leaflet Tutorials
|
||||
## Leaflet Tutorials
|
||||
|
||||
Every example here comes with step-by-step code explanation and is easy enough even for beginner JavaScript developers.
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ layout: default
|
||||
title: Features
|
||||
---
|
||||
|
||||
<h3>Leaflet Features</h3>
|
||||
<h2>Leaflet Features</h2>
|
||||
|
||||
<p>Leaflet doesn't try to do everything for everyone. Instead it focuses on making <em>the basic things work perfectly</em>. It should still satisfy the needs of the vast majority of map apps developers while being easily extended by <a href="plugins.html">third-party plugins</a>.</p>
|
||||
|
||||
@ -16,21 +16,27 @@ title: Features
|
||||
|
||||
<ul>
|
||||
<li>Tile layers</li>
|
||||
<li>Vector layers: polylines, polygons, circles, rectangles, circle markers</li>
|
||||
<li>Markers</li>
|
||||
<li>Popups</li>
|
||||
<li>Vector layers<span class="quiet">: polylines, polygons, circles, rectangles, circle markers</li>
|
||||
<li>Image overlays</li>
|
||||
<li>WMS layers</li>
|
||||
<li>GeoJSON</li>
|
||||
<li>Layer groups</li>
|
||||
<li>GeoJSON layers</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>Interaction Features</h3>
|
||||
|
||||
<h4>General</h4>
|
||||
|
||||
<ul>
|
||||
<li>Drag panning with inertia</li>
|
||||
</ul>
|
||||
|
||||
<h4>On Desktop Browsers</h4>
|
||||
|
||||
<ul>
|
||||
<li>Drag panning</li>
|
||||
<li>Scroll wheel zoom</li>
|
||||
<li>Double click zoom</li>
|
||||
<li>Shift-drag zoom to bounding box</li>
|
||||
@ -40,18 +46,18 @@ title: Features
|
||||
<h4>On Mobile Browsers (iOS, Android)</h4>
|
||||
|
||||
<ul>
|
||||
<li>Touch-drag panning</li>
|
||||
<li>Multi-touch zoom <nobr>(iOS and Android 4+)</nobr></li>
|
||||
<li>Multi-touch zoom <nobr><span class="quiet">(iOS and Android 4+)</span></nobr></li>
|
||||
<li>Double tap zoom</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h4>Other Features</h4>
|
||||
<h4>For Layers</h4>
|
||||
|
||||
<ul>
|
||||
<li>Panning inertia</li>
|
||||
<!--<li>Vector layers editing</li>-->
|
||||
<li>Various events<span class="quiet">: click (tap), mouseover, contextmenu, etc.</span></li>
|
||||
<li>Marker dragging</li>
|
||||
</ul>
|
||||
|
||||
<!--<li>Vector layers editing</li>-->
|
||||
</div>
|
||||
|
||||
<div class="span-9">
|
||||
@ -59,8 +65,8 @@ title: Features
|
||||
<h3>Visual Features</h3>
|
||||
|
||||
<ul>
|
||||
<li>Zoom animation on modern browsers <span class="quiet">(except IE) (<nobr>for all layers</nobr>, including markers and vector layers)</span></li>
|
||||
<li>Panning animation</li>
|
||||
<li>Zooming animation on modern browsers <span class="quiet">(except IE)</span></li>
|
||||
<li>Smooth continuous zoom on iOS</li>
|
||||
<li>Tile and popup fade animation</li>
|
||||
<li>Very nice default design for markers, popups and other map controls</li>
|
||||
@ -71,19 +77,22 @@ title: Features
|
||||
|
||||
<ul>
|
||||
<li>Pure CSS3 popups and controls <span class="quiet">for easy restyling</span></li>
|
||||
<li>Image- and HTML-based markers</li>
|
||||
<!-- <li>Customizable marker icons</li> -->
|
||||
<li><span class="quiet">A simple interface for implementing</span> custom map layers</li>
|
||||
<li><span class="quiet">The same for</span> custom map controls</li>
|
||||
<li>Custom map projections <span class="quiet">(with <code>EPSG:4326</code>, <code>EPSG:3857</code> and <code>EPSG:3395</code> out of the box)</span></li>
|
||||
<li>Powerful OOP facilities <span class="quiet">for extending existing classes</span></p>
|
||||
</ul>
|
||||
|
||||
<h3>Performance Features</h3>
|
||||
|
||||
<ul>
|
||||
<li>Hardware acceleration on iOS <span class="quiet">(and other modern browsers) makes it feel as smooth as native apps</span></li>
|
||||
<li><span class="quiet">Clever tricks to make</span> panning and zooming really smooth</li>
|
||||
<li>Smart polyline/polygon rendering <span class="quiet">makes it responsive even when displaying objects with thousands of points</span></li>
|
||||
<li>Modular design and a build system<span class="quiet"> allow you to reduce the size of the library by leaving out the code you don't need</span></li>
|
||||
<li>Utilizing CSS3 features <span class="quiet">like Transitions, Transforms, requestAnimationFrame where possible</span> to make panning and zooming really smooth</li>
|
||||
<li>Smart polyline/polygon rendering <span class="quiet">with dynamic clipping and simplification makes it responsive even when displaying objects with thousands of points</span></li>
|
||||
<li>Modular design and a build system<span class="quiet"> allow you to reduce the library size by leaving out features you don't need</span></li>
|
||||
<li>Tap delay elimination on mobile devices<span class="quiet"> makes controls and layers respond to taps immediately</span></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
@ -120,9 +129,18 @@ title: Features
|
||||
<li>Android browser 2.2+, 3.1+, 4+</li>
|
||||
<li>Chrome for Android 4+ and iOS</li>
|
||||
<li>Firefox for Android</li>
|
||||
<li>Other webkit-based browsers (webOS, Blackberry 6+, etc.)</li>
|
||||
<li>Other webkit-based browsers (webOS, Blackberry 7+, etc.)</li>
|
||||
<li class="noimpl">IE for Windows Phone 7</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3>Misc</h3>
|
||||
|
||||
<ul>
|
||||
<li>Extremely lightweight <span class="quiet">— around 26 KB of gzipped JS code</span></li>
|
||||
<li>No external dependencies</li>
|
||||
<li>Keeps your JS environment clean<span class="quiet"> — no global or native prototypes pollution</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
2
index.md
2
index.md
@ -31,7 +31,7 @@ L.marker([<span class="number">51.5</span>, -<span class="number">0.09</span>]).
|
||||
Learn more with the [quick start guide](examples/quick-start.html), check out [other tutorials](examples.html), or head straight to the [API documentation](reference.html).
|
||||
|
||||
|
||||
### Contributing to Leaflet
|
||||
## Contributing to Leaflet
|
||||
|
||||
The project is [hosted on GitHub][], waiting for your contributions --- just send your pull requests to [@mourner][] (Vladimir Agafonkin, Leaflet author and maintainer). Let’s make the best library for maps that can possibly exist!
|
||||
|
||||
|
||||
49
plugins.md
49
plugins.md
@ -3,12 +3,13 @@ layout: default
|
||||
title: Plugins
|
||||
---
|
||||
|
||||
### Notable Leaflet Plugins
|
||||
## Notable Leaflet Plugins
|
||||
|
||||
While Leaflet is meant to be as lightweight as possible, and focuses on a core set of features, an easy way to extend its functionality is to use third-party plugins. Thanks to the awesome community behind Leaflet, there are lots of nice plugins to choose from.
|
||||
|
||||
---
|
||||
|
||||
## Layers and Overlays
|
||||
### Layers and Overlays
|
||||
|
||||
<table class="plugins">
|
||||
<tr>
|
||||
@ -25,15 +26,6 @@ While Leaflet is meant to be as lightweight as possible, and focuses on a core s
|
||||
<a href="https://github.com/danzel">Dave Leaver</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="http://dynmeth.github.com/RaphaelLayer/">RaphaelLayer</a>
|
||||
</td><td>
|
||||
Allows you to use <a href="http://raphaeljs.com/">Raphael</a> as a layer on a Leaflet map for advanced animations and visualizations.
|
||||
</td><td>
|
||||
<a href="https://github.com/dynmeth">Dynamic Methods</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/jacobtoye/Leaflet.iconlabel">Leaflet.iconlabel</a>
|
||||
@ -43,6 +35,15 @@ While Leaflet is meant to be as lightweight as possible, and focuses on a core s
|
||||
<a href="https://github.com/jacobtoye">Jacob Toye</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="http://dynmeth.github.com/RaphaelLayer/">RaphaelLayer</a>
|
||||
</td><td>
|
||||
Allows you to use <a href="http://raphaeljs.com/">Raphael</a> as a layer on a Leaflet map for advanced animations and visualizations.
|
||||
</td><td>
|
||||
<a href="https://github.com/dynmeth">Dynamic Methods</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet">Overlapping Marker Spiderfier</a>
|
||||
@ -52,19 +53,10 @@ While Leaflet is meant to be as lightweight as possible, and focuses on a core s
|
||||
<a href="http://mackerron.com">George MacKerron</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/springmeyer/arc.js">arc.js</a>
|
||||
</td><td>
|
||||
Allows you to draw great circle routes between two points.
|
||||
</td><td>
|
||||
<a href="https://github.com/springmeyer">Dane Springmeyer</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
## Services, Providers and Formats
|
||||
### Services, Providers and Formats
|
||||
|
||||
<table class="plugins">
|
||||
<tr>
|
||||
@ -147,7 +139,7 @@ While Leaflet is meant to be as lightweight as possible, and focuses on a core s
|
||||
</table>
|
||||
|
||||
|
||||
## Controls
|
||||
### Controls and Interaction
|
||||
|
||||
<table class="plugins">
|
||||
<tr>
|
||||
@ -212,7 +204,7 @@ While Leaflet is meant to be as lightweight as possible, and focuses on a core s
|
||||
</table>
|
||||
|
||||
|
||||
## Other Plugins
|
||||
### Other Plugins and Libraries
|
||||
|
||||
<table class="plugins">
|
||||
<tr>
|
||||
@ -224,7 +216,7 @@ While Leaflet is meant to be as lightweight as possible, and focuses on a core s
|
||||
<td>
|
||||
<a href="http://flyjs.com/buildings/">OSM Buildings</a>
|
||||
</td><td>
|
||||
Amazing plugin for visualizing 3D OSM building data on top of Leaflet.
|
||||
Amazing JS library for visualizing 3D OSM building data on top of Leaflet.
|
||||
</td><td>
|
||||
<a href="http://flyjs.com/buildings/about.php">Jan Marsch</a>
|
||||
</td>
|
||||
@ -238,6 +230,15 @@ While Leaflet is meant to be as lightweight as possible, and focuses on a core s
|
||||
<a href="https://github.com/mlevans">Michael Lawrence Evans</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://github.com/springmeyer/arc.js">arc.js</a>
|
||||
</td><td>
|
||||
A JS library for drawing great circle routes that can be used with Leaflet.
|
||||
</td><td>
|
||||
<a href="https://github.com/springmeyer">Dane Springmeyer</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!--
|
||||
|
||||
@ -4162,13 +4162,27 @@ a.foo();</code></pre>
|
||||
MyClass.FOO; // 'bar'</code></pre>
|
||||
|
||||
|
||||
<h3>Class Factories</h3>
|
||||
|
||||
<p>You may have noticed that you can create Leaflet class instances in two ways — using the <code>new</code> keyword, or using lowercase factory method:</p>
|
||||
|
||||
<pre><code>new L.Map('map');
|
||||
L.map('map');</code></pre>
|
||||
|
||||
<p>The second way is implemented very easily, and you can do this for your own classes:</p>
|
||||
|
||||
<pre><code>L.map = function (id, options) {
|
||||
return new L.Map(id, options);
|
||||
};</code></pre>
|
||||
|
||||
|
||||
|
||||
<h2 id="browser">L.Browser</h2>
|
||||
|
||||
<p>A namespace with properties for browser/feature detection used by Leaflet internally.</p>
|
||||
|
||||
<pre><code>if (L.Browser.ie6) {
|
||||
alert('Upgrade your browser, dude!');
|
||||
alert('Upgrade your browser, dude!');
|
||||
}</code></pre>
|
||||
|
||||
<table>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user