lots of docs updates for 0.5

This commit is contained in:
Vladimir Agafonkin 2013-01-17 15:55:13 +02:00
parent ce316f99d3
commit 851a85eb2e

View File

@ -96,7 +96,7 @@ bodyclass: api-page
<ul>
<li><a href="#domevent">DomEvent</a></li>
<li><a href="#domutil">DomUtil</a></li>
<li><a href="#transition">Transition</a></li>
<li><a href="#posanimation">PosAnimation</a></li>
<li><a href="#draggable">Draggable</a></li>
</ul>
</div>
@ -123,7 +123,7 @@ bodyclass: api-page
<!--<a href="#toc" id="back-to-top">&uarr;</a>-->
<hr />
<p>This reference reflects <strong>Leaflet 0.4.5</strong>. You can find docs for the in-progress master version in <code>reference.html</code> of <a href="https://github.com/Leaflet/Leaflet/zipball/gh-pages-master">gh-pages-master branch</a>.<!--<br />Older docs for version 0.3 can be <a href="https://github.com/Leaflet/Leaflet/zipball/7fde9938fa36070191f939c9948285d7ddc07368">downloaded here</a>--></p>
<p>This reference reflects <strong>Leaflet 0.5</strong>. You can find docs for the in-progress master version in <code>reference.html</code> of <a href="https://github.com/Leaflet/Leaflet/zipball/gh-pages-master">gh-pages-master branch</a>.<!--<br />Older docs for version 0.3 can be <a href="https://github.com/Leaflet/Leaflet/zipball/7fde9938fa36070191f939c9948285d7ddc07368">downloaded here</a>--></p>
<h2 id="map-class">L.Map</h2>
@ -266,8 +266,8 @@ var map = L.map('map', {
<tr>
<td><code><b>worldCopyJump</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="literal">true</span></code></td>
<td>With this option enabled, the map tracks when you pan to another "copy" of the world and moves all overlays like markers and vector layers there.</td>
<td><code><span class="literal">false</span></code></td>
<td>With this option enabled, the map tracks when you pan to another "copy" of the world and seamlessly jumps to the original one so that all overlays like markers and vector layers are still visible.</td>
</tr>
<tr>
<td><code><b>closePopupOnClick</b></code></td>
@ -577,14 +577,14 @@ var map = L.map('map', {
<td>Sets the zoom of the map.</td>
</tr>
<tr>
<td><code><b>zoomIn</b>()</code></td>
<td><code><b>zoomIn</b>( <nobr>&lt;Number&gt; delta? )</nobr></code></td>
<td><code><span class="keyword">this</span></code></td>
<td>Increases the zoom of the map by 1.</td>
<td>Increases the zoom of the map by <code>delta</code> (<code><span class="number">1</span></code> by default).</td>
</tr>
<tr>
<td><code><b>zoomOut</b>()</code></td>
<td><code><b>zoomOut</b>( <nobr>&lt;Number&gt; delta? )</nobr></code></td>
<td><code><span class="keyword">this</span></code></td>
<td>Decreases the zoom of the map by 1.</td>
<td>Decreases the zoom of the map by <code>delta</code> (<code><span class="number">1</span></code> by default).</td>
</tr>
<tr id="map-fitbounds">
<td><code><b>fitBounds</b>(
@ -891,6 +891,13 @@ var map = L.map('map', {
<td><code><a href="#map-panes">MapPanes</a></code></td>
<td>Returns an object with different map panes (to render overlays in).</td>
</tr>
<tr id="map-whenready">
<td><code><b>whenReady</b>(
<nobr>&lt;Function&gt; <i>fn</i></nobr>,
<nobr>&lt;Object&gt; <i>context?</i> )</nobr></code></td>
<td><code>this</code></td>
<td>Runs the given callback when the map gets initialized with a place and zoom, or immediately if it happened already, optionally passing a function context.</td>
</tr>
</table>
<h3 id="map-locate-options">Locate options</h3>
@ -1122,6 +1129,18 @@ var map = L.map('map', {
<td><code><span class="number">1.0</span></code></td>
<td>The opacity of the marker.</td>
</tr>
<tr>
<td><code><b>riseOnHover</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="literal">false</span></code></td>
<td>If <code><span class="literal">true</span></code>, the marker will get on top of others when you hover the mouse over it.</td>
</tr>
<tr>
<td><code><b>riseOffset</b></code></td>
<td><code>Number</code></td>
<td><code><span class="number">250</span></code></td>
<td>The z-index offset used for the <code>riseOnHover</code> feature.</td>
</tr>
</table>
<h3>Events</h3>
@ -1159,6 +1178,11 @@ var map = L.map('map', {
<td><code><a href="#mouse-event">MouseEvent</a></code>
<td>Fired when the mouse leaves the marker.</td>
</tr>
<tr>
<td><code><b>contextmenu</b></code></td>
<td><code><a href="#mouse-event">MouseEvent</a></code>
<td>Fired when the user right-clicks on the marker.</td>
</tr>
<tr>
<td><code><b>dragstart</b></code></td>
<td><code><a href="#event">Event</a></code>
@ -1382,6 +1406,12 @@ var map = L.map('map', {
</code></td>
<td>The margin between the popup and the edges of the map view after autopanning was performed.</td>
</tr>
<tr>
<td><code><b>zoomAnimation</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="literal">true</span></code></td>
<td>Whether to animate the popup on zoom. Disable it if you have problems with Flash content inside popups.</td>
</tr>
</table>
<h3>Methods</h3>
@ -2027,6 +2057,11 @@ L.imageOverlay(imageUrl, imageBounds).addTo(map);</code></pre>
<td><code><a href="#mouse-event">MouseEvent</a></code>
<td>Fired when the user pushes the right mouse button on the object, prevents default browser context menu from showing if there are listeners on this event.</td>
</tr>
<tr>
<td><code><b>add</b></code></td>
<td><code><a href="#event">Event</a></code>
<td>Fired when the path is added to the map.</td>
</tr>
<tr>
<td><code><b>remove</b></code></td>
<td><code><a href="#event">Event</a></code>
@ -2071,6 +2106,12 @@ L.imageOverlay(imageUrl, imageBounds).addTo(map);</code></pre>
<td><code><span class="keyword">this</span></code></td>
<td>Opens the popup previously bound by the <a href="#path-bindpopup">bindPopup</a> method in the given point, or in one of the path's points if not specified.</td>
</tr>
<tr id="path-closepopup">
<td><code><b>closePopup</b>()</code></td>
<td><code><span class="keyword">this</span></code></td>
<td>Closes the path's bound popup if it is opened.</td>
</tr>
<tr id="path-setstyle">
<td><code><b>setStyle</b>(
<nobr>&lt;<a href="#path-options">Path options</a>&gt; <i>object</i> )</nobr>
@ -2712,6 +2753,16 @@ map.fitBounds(bounds);</code></pre>
<td><code><a href="#mouse-event">MouseEvent</a></code>
<td>Fired when the user right-clicks on one of the layers.</td>
</tr>
<tr>
<td><code><b>layeradd</b></code></td>
<td><code><a href="#layer-event">LayerEvent</a></code>
<td>Fired when a layer is added to the group.</td>
</tr>
<tr>
<td><code><b>layerremove</b></code></td>
<td><code><a href="#layer-event">LayerEvent</a></code>
<td>Fired when a layer is removed from the map.</td>
</tr>
</table>
@ -2890,8 +2941,7 @@ map.panTo(new L.LatLng(50, 30));</code></pre>
<tr>
<td><code><b>L.LatLng</b>(
<nobr>&lt;Number&gt; <i>latitude</i></nobr>,
<nobr>&lt;Number&gt; <i>longitude</i></nobr>,
<nobr>&lt;Boolean&gt; <i>noWrap?</i> )</nobr>
<nobr>&lt;Number&gt; <i>longitude</i> )</nobr>
</code></td>
<td class="factory-usage">
@ -2900,7 +2950,7 @@ map.panTo(new L.LatLng(50, 30));</code></pre>
<code>L.latLng([<span class="comment">&hellip;</span>])</code>
</td>
<td>Creates an object representing a geographical point with the given latitude and longitude. Wraps longitude to lie between <code>-180</code> and <code>180</code> and clamps longitude between <code>-90</code> and <code>90</code> by default &mdash; you can disable this with the <code>noWrap</code> argument.</td>
<td>Creates an object representing a geographical point with the given latitude and longitude.</td>
</tr>
</table>
@ -2953,6 +3003,15 @@ map.panTo(new L.LatLng(50, 30));</code></pre>
<td><code>String</code></td>
<td>Returns a string representation of the point (for debugging purposes).</td>
</tr>
<tr>
<td><code><b>wrap</b>(
<nobr>&lt;Number&gt; <i>left</i></nobr>,
<nobr>&lt;Number&gt; <i>right</i> )</nobr>
</code></td>
<td><code><a href="#latlng">LatLng</a></code></td>
<td>Returns a new <code>LatLng</code> object with the longitude wrapped around <code>left</code> and <code>right</code> boundaries (<code><span class="number">-180</span></code> to <code><span class="number">180</span></code> by default).</td>
</tr>
</table>
<h3>Constants</h3>
@ -3248,6 +3307,14 @@ map.panBy(new L.Point(200, 300));</code></pre>
<td><code><a href="#point">Point</a></code></td>
<td>Returns a copy of the current point with rounded coordinates.</td>
</tr>
<tr>
<td><code><b>equals</b>(
<nobr>&lt;<a href="#point">Point</a>&gt; <i>otherPoint</i> )</nobr>
</code></td>
<td><code>Boolean</code></td>
<td>Returns <code><span class="literal">true</span></code> if the given point has the same coordinates.</td>
</tr>
<tr>
<td><code><b>toString</b>()</code></td>
<td><code>String</code></td>
@ -3370,12 +3437,17 @@ map.panBy(new L.Point(200, 300));</code></pre>
<td>Returns <code><span class="literal">true</span></code> if the rectangle intersects the given bounds.</td>
</tr>
<tr>
<td><code><b>isValid</b>()</nobr>
</code></td>
<td><code><b>isValid</b>()</code></td>
<td><code>Boolean</code></td>
<td>Returns <code><span class="literal">true</span></code> if the bounds are properly initialized.</td>
</tr>
<tr>
<td><code><b>getSize</b>()</code></td>
<td><code><a href="#point">Point</a></code></td>
<td>Returns the size of the given bounds.</td>
</tr>
</table>
@ -3888,6 +3960,27 @@ L.control.layers(baseLayers, overlays).addTo(map);</code></pre>
"&lt;someName2&gt;": layer2
}</code></pre>
<p>The layer names can contain HTML, which allows you to add additional styling to the items:</p>
<pre><code>{"&lt;img src='my-layer-icon' /&gt; &lt;span class='my-layer-item'&gt;My Layer&lt;/span&gt;": myLayer}</code></pre>
<h3>Events</h3>
<p>You can subscribe to the following events using <a href="#events">these methods</a>.</p>
<table>
<tr>
<th class="width100">Event</th>
<th class="width100">Data</th>
<th>Description</th>
</tr>
<tr>
<td><code><b>baselayerchange</b></code></td>
<td><code><a href="#layer-event">LayerEvent</a></code>
<td>Fired when the base layer is changed through the control.</td>
</tr>
</table>
<h2 id="control-scale">L.Control.Scale</h2>
@ -4387,6 +4480,19 @@ L.map('map');</code></pre>
};</code></pre>
<h3>Constructor Hooks</h3>
<p>If you're a plugin developer, you often need to add additional initialization code to existing classes (e.g. editing hooks for <code>L.Polyline</code>). Leaflet comes with a way to do it easily using the <code>addInitHook</code> method:</p>
<pre><code>MyClass.addInitHook(function () {
// ... do something in constructor additionally
// e.g. add event listeners, set custom properties etc.
});</code></pre>
<p>You can also use the following shortcut when you just need to make one additional method call:</p>
<pre><code>MyClass.addInitHook('methodName', arg1, arg2, &hellip;);</code></pre>
<h2 id="browser">L.Browser</h2>
@ -4412,6 +4518,11 @@ L.map('map');</code></pre>
<td><code>Boolean</code></td>
<td><code><span class="literal">true</span></code> for Internet Explorer 6.</td>
</tr>
<tr>
<td><code><b>ie7</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="literal">true</span></code> for Internet Explorer 6.</td>
</tr>
<tr>
<td><code><b>webkit</b></code></td>
<td><code>Boolean</code></td>
@ -4422,7 +4533,7 @@ L.map('map');</code></pre>
<td><code>Boolean</code></td>
<td><code><span class="literal">true</span></code> for webkit-based browsers that support CSS 3D transformations.</td>
</tr>
<tr>
<!--<tr>
<td><code><b>gecko</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="literal">true</span></code> for Gecko-based browsers like Firefox and Mozilla.</td>
@ -4431,12 +4542,17 @@ L.map('map');</code></pre>
<td><code><b>opera</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="literal">true</span></code> for Opera.</td>
</tr>
</tr>-->
<tr>
<td><code><b>android</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="literal">true</span></code> for Android mobile browser.</td>
</tr>
<tr>
<td><code><b>android23</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="literal">true</span></code> for old Android stock browsers (2 and 3).</td>
</tr>
<tr>
<td><code><b>mobile</b></code></td>
<td><code>Boolean</code></td>
@ -4457,6 +4573,11 @@ L.map('map');</code></pre>
<td><code>Boolean</code></td>
<td><code><span class="literal">true</span></code> for all browsers on touch devices.</td>
</tr>
<tr>
<td><code><b>msTouch</b></code></td>
<td><code>Boolean</code></td>
<td><code><span class="literal">true</span></code> for browsers with Microsoft touch model (e.g. IE10).</td>
</tr>
<tr>
<td><code><b>retina</b></code></td>
<td><code>Boolean</code></td>
@ -4484,7 +4605,7 @@ L.map('map');</code></pre>
</code></td>
<td><code>Object</code></td>
<td>Merges the properties of the <code>src</code> object (or multiple objects) into <code>dest</code> object and returns the latter.</td>
<td>Merges the properties of the <code>src</code> object (or multiple objects) into <code>dest</code> object and returns the latter. Has an <code>L.extend</code> shortcut.</td>
</tr>
<tr>
<td><code><b>bind</b>(
@ -4493,12 +4614,12 @@ L.map('map');</code></pre>
</code></td>
<td><code>Function</code></td>
<td>Returns a function which executes function <code>fn</code> with the given scope <code>obj</code> (so that <code><span class="keyword">this</span></code> keyword refers to <code>obj</code> inside the function code).</td>
<td>Returns a function which executes function <code>fn</code> with the given scope <code>obj</code> (so that <code><span class="keyword">this</span></code> keyword refers to <code>obj</code> inside the function code). Has an <code>L.bind</code> shortcut.</td>
</tr>
<tr>
<td><code><b>stamp</b>( &lt;Object&gt; <i>obj</i></nobr> )<nobr></code></td>
<td><code>String</code></td>
<td>Applies a unique key to the object and returns that key.</td>
<td>Applies a unique key to the object and returns that key. Has an <code>L.stamp</code> shortcut.</td>
</tr>
<!-- TODO Commented out for the time being:
https://github.com/Leaflet/Leaflet/pull/793#discussion_r1134904
@ -4553,7 +4674,7 @@ L.map('map');</code></pre>
</code></td>
<td><code>Object</code></td>
<td>Merges the given properties to the <code>options</code> of the <code>obj</code> object, returning the resulting options. See <a href="#class-options">Class options</a>.</td>
<td>Merges the given properties to the <code>options</code> of the <code>obj</code> object, returning the resulting options. See <a href="#class-options">Class options</a>. Has an <code>L.setOptions</code> shortcut.</td>
</tr>
<tr>
<td><code><b>getParamString</b>(
@ -4571,6 +4692,14 @@ L.map('map');</code></pre>
<td><code>String</code></td>
<td>Simple templating facility, creates a string by applying the values of the <code>data</code> object of a form <code>{a: 'foo', b: 'bar', &hellip;}</code> to a template string of the form <code><span class="string">'Hello {a}, {b}'</span></code> &mdash; in this example you will get <code><span class="string">'Hello foo, bar'</span></code>.</td>
</tr>
<tr>
<td><code><b>isArray</b>(
<nobr>&lt;Object&gt; <i>obj</i> )</nobr>
</code></td>
<td><code>Boolean</code></td>
<td>Returns <code><span class="literal">true</span></code> if the given object is an array.</td>
</tr>
</table>
<h3>Properties</h3>
@ -5001,13 +5130,12 @@ L.map('map');</code></pre>
<h2 id="transition">L.Transition</h2>
<h2 id="posanimation">L.PosAnimation</h2>
<p>Used internally for most animations, utilizing CSS3 Transitions for modern browsers and a timer fallback for IE6-9.</p>
<p>Used internally for panning animations, utilizing CSS3 Transitions for modern browsers and a timer fallback for IE6-9.</p>
<pre><code class="javascript">var fx = new L.Transition(el, {duration: 0.5});
fx.run({left: '300px', top: '500px'});</code></pre>
<pre><code class="javascript">var fx = new L.PosAnimation();
fx.run(el, [300, 500], 0.5);</code></pre>
<h3>Constructor</h3>
@ -5018,52 +5146,34 @@ fx.run({left: '300px', top: '500px'});</code></pre>
<th>Description</th>
</tr>
<tr>
<td><code><b>L.Transition</b>(
<nobr>&lt;HTMLElement&gt; <i>element</i>,</nobr>
<nobr>&lt;<a href="#transition-options">Transition options</a>&gt; <i>options?</i> )</nobr>
</code></td>
<td><code><b>L.PosAnimation</b>()</code></td>
<td class="factory-usage">
<code><span class='keyword'>new</span> L.Transition(<span class="comment">&hellip;</span>)</code><!--<br />
<code>L.transition(<span class="comment">&hellip;</span>)</code>-->
<code><span class='keyword'>new</span> L.PosAnimation()</code>
</td>
<td>Creates a Transition object tied to a particular element with the given options.</td>
<td>Creates a PosAnimation object.</td>
</tr>
</table>
<h3 id="transition-options">Options</h3>
<h3>Methods</h3>
<table>
<tr>
<th>Option</th>
<th>Type</th>
<th>Default</th>
<th>Method</th>
<th>Returns</th>
<th>Description</th>
</tr>
<tr>
<td><code><b>duration</b></code></td>
<td><code>Number</code></td>
<td><code><span class="number">0.5</span></code></td>
<td>Duration of the animation in seconds.</td>
</tr>
<tr>
<td><code><b>easing</b></code></td>
<td><code>String</code></td>
<td><code><span class="string">'ease'</span></code></td>
<td>One of the <a href="https://developer.mozilla.org/en/CSS/timing-function">timing functions</a> for the animation.</td>
</tr>
<tr>
<td><code><b>fps</b></code></td>
<td><code>Number</code></td>
<td><code><span class="number">50</span></code></td>
<td>Frames per second for the timer fallback (IE6-9).</td>
</tr>
<tr>
<td><code><b>fakeStepInterval</b></code></td>
<td><code>Number</code></td>
<td><code><span class="number">100</span></code></td>
<td>How often to fire the <code>step</code> event during transition with a timer (as native transitions don't support such events).</td>
<td><code><b>run</b>(
<nobr>&lt;HTMLElement&gt; <i>element</i>,</nobr>
<nobr>&lt;<a href="#point">Point</a>&gt; <i>newPos</i></nobr>,
<nobr>&lt;Number&gt; <i>duration?</i></nobr>,
<nobr>&lt;Number&gt; <i>easeLinearity?</i> )</nobr>
</code></td>
<td><code><span class="keyword">this</span></code></td>
<td>Run an animation of a given element to a new position, optionally setting duration in seconds (<code><span class="number">0.25</span></code> by default) and easing linearity factor (3rd argument of the <a href="http://cubic-bezier.com/#0,0,.5,1">cubic bezier curve</a>, <code><span class="number">0.5</span></code> by default)</td>
</tr>
</table>
@ -5094,35 +5204,6 @@ fx.run({left: '300px', top: '500px'});</code></pre>
</tr>
</table>
<h3>Methods</h3>
<table>
<tr>
<th>Method</th>
<th>Returns</th>
<th>Description</th>
</tr>
<tr>
<td><code><b>run</b>(
<nobr>&lt;Object&gt; <i><a href="#transition-properties">properties</a></i> )</nobr>
</code></td>
<td><code><span class="keyword">this</span></code></td>
<td>Run the animation with the given set of properties and their end values.</td>
</tr>
</table>
<h3 id="transition-properties">Transition Properties</h3>
<p>An object literal of the following form:</p>
<pre><code>{
'&lt;style-property-1&gt;': '&lt;value-1&gt;',
'&lt;style-property-2&gt;': '&lt;value-2&gt;'
// ...
}</code></pre>
<h2 id="draggable">L.Draggable</h2>
@ -5208,7 +5289,7 @@ draggable.enable();
</tr>
</table>
<h3>Static Properties</h3>
<!--<h3>Static Properties</h3>
<table>
<tr>
@ -5231,7 +5312,7 @@ draggable.enable();
<td><code>String</code></td>
<td>Name of the DOM event that ends dragging. <code><span class="string">'mouseup'</span></code> for desktop browsers, <code><span class="string">'touchend'</span></code> for mobile devices.</td>
</tr>
</table>
</table>-->
@ -5573,7 +5654,7 @@ map.addControl(new MyControl());
<tr>
<td><code><b>L.CRS.Simple</b></code></td>
<td>A simple CRS that maps longitude and latitude into <code>x</code> and <code>y</code> directly. May be used for maps of flat surfaces (e.g. game maps).</td>
<td>A simple CRS that maps longitude and latitude into <code>x</code> and <code>y</code> directly. May be used for maps of flat surfaces (e.g. game maps). Note that the <code>y</code> axis should still be inverted (going from bottom to top).</td>
</tr>
</table>
@ -5598,7 +5679,7 @@ map.addControl(new MyControl());
</tr>
<tr>
<td><code><b>L_NO_TOUCH</b></code></td>
<td>Forces Leaflet to not use touch events even if it detects them. Particularly useful if you embed Leaflet inside a QT WebView (which exposes touch events even on desktop PCs).</td>
<td>Forces Leaflet to not use touch events even if it detects them.</td>
</tr>
<tr>
<td><code><b>L_DISABLE_3D</b></code></td>
@ -5622,4 +5703,4 @@ var Leaflet = L.noConflict();
<p>A constant that represents the Leaflet version in use.<p>
<pre><code>L.version // returns "0.4" (or whatever version is currently in use)</code></pre>
<pre><code>L.version // returns "0.5" (or whatever version is currently in use)</code></pre>