Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vector docs #3101

Merged
merged 6 commits into from
Mar 6, 2015
Merged

Vector docs #3101

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b6cb8f7
remove multi shapes from ref, examples for polygon+polyline
patrickarlt Dec 22, 2014
894a0d5
update default path options
patrickarlt Dec 22, 2014
a078701
getCenter() docs
patrickarlt Dec 22, 2014
309faba
flip Circle/CircleMarker inheritance
patrickarlt Dec 22, 2014
47efc35
renderer docs and methods
patrickarlt Dec 22, 2014
6b4ddf5
polygon/polyline docs fixes and cleanup
mourner Mar 6, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
217 changes: 78 additions & 139 deletions reference.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,7 @@ <h4>Vector Layers</h4>
<ul>
<li><a href="#path">Path</a></li>
<li><a href="#polyline">Polyline</a></li>
<li><a href="#multipolyline">MultiPolyline</a></li>
<li><a href="#polygon">Polygon</a></li>
<li><a href="#multipolygon">MultiPolygon</a></li>
<li><a href="#rectangle">Rectangle</a></li>
<li><a href="#circle">Circle</a></li>
<li><a href="#circlemarker">CircleMarker</a></li>
Expand Down Expand Up @@ -212,6 +210,12 @@ <h4>Map State Options</h4>
<td><code>L.CRS.<br/>EPSG3857</code></td>
<td>Coordinate Reference System to use. Don't change this if you're not sure what it means.</td>
</tr>
<tr>
<td><code><b>renderer</b></code></td>
<td><code>Renderer</code></td>
<td><code>depends</code></td>
<td>The default method for drawing vector layers on the map. <code>L.SVG</code> or <code>L.Canvas</code> by default depending on browser support.</td>
</tr>
</table>

<h4>Interaction Options</h4>
Expand Down Expand Up @@ -868,6 +872,13 @@ <h3 id="map-stuff-methods">Methods for Layers and Controls</h3>
<td><code><span class="keyword">this</span></code></td>
<td>Removes the given control from the map.</td>
</tr>
<td><code><b>getRenderer</b>(
<nobr>&lt;<a href="#ilayer">ILayer</a>&gt; <i>layer</i>)</nobr>
</code></td>

<td><code><span class="keyword">Renderer</span></code></td>
<td>Returns the renderer for the given layer.</td>
</tr>
</table>


Expand Down Expand Up @@ -2331,19 +2342,19 @@ <h3 id="path-options">Options</h3>
<tr>
<td><code><b>color</b></code></td>
<td><code>String</code></td>
<td><code><span class="string">'#03f'</span></code></td>
<td><code><span class="string">'#3388ff'</span></code></td>
<td>Stroke color.</td>
</tr>
<tr>
<td><code><b>weight</b></code></td>
<td><code>Number</code></td>
<td><code><span class="number">5</span></code></td>
<td><code><span class="number">3</span></code></td>
<td>Stroke width in pixels.</td>
</tr>
<tr>
<td><code><b>opacity</b></code></td>
<td><code>Number</code></td>
<td><code><span class="number">0.5</span></code></td>
<td><code><span class="number">1</span></code></td>
<td>Stroke opacity.</td>
</tr>
<tr>
Expand Down Expand Up @@ -2373,13 +2384,13 @@ <h3 id="path-options">Options</h3>
<tr>
<td><code><b>lineCap</b></code></td>
<td><code>String</code></td>
<td><code><span class="literal">null</span></code></td>
<td><code><span class="string">'round'</span></code></td>
<td>A string that defines <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap">shape to be used at the end</a> of the stroke.</td>
</tr>
<tr>
<td><code><b>lineJoin</b></code></td>
<td><code>String</code></td>
<td><code><span class="literal">null</span></code></td>
<td><code><span class="string">'round'</span></code></td>
<td>A string that defines <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin">shape to be used at the corners</a> of the stroke.</td>
</tr>
<tr>
Expand All @@ -2388,11 +2399,17 @@ <h3 id="path-options">Options</h3>
<td><code><span class="literal">true</span></code></td>
<td>If <code><span class="literal">false</span></code>, the vector will not emit mouse events and will act as a part of the underlying map.</td>
</tr>
<tr>
<td><code><b>renderer</b></code></td>
<td><code>Renderer</code></td>
<td><code>depends</code></td>
<td><code>L.SVG</code> or <code>L.Canvas</code> by default depending on browser support.</td>
</tr>
<tr>
<td><code><b>pointerEvents</b></code></td>
<td><code>String</code></td>
<td><code><span class="literal">null</span></code></td>
<td>Sets the <code>pointer-events</code> attribute on the path if SVG backend is used.</td>
<td>Sets the <code>pointer-events</code> attribute on the path if SVG renderer is used.</td>
</tr>
<tr>
<td><code><b>className</b></code></td>
Expand Down Expand Up @@ -2587,11 +2604,29 @@ <h2 id="polyline">Polyline</h2>

<h3>Usage example</h3>
<pre><code class="javascript">// create a red polyline from an arrays of LatLng points
var latlngs = [
[-122.68, 45.51],
[-122.43, 37.77],
[-118.2, 34.04]
];

var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);

// zoom the map to the polyline
map.fitBounds(polyline.getBounds());</code></pre>

<p>You can also pass a multi-dimensional array to represent a <code>MultiPolyline</code> shape:</p>

<pre><code class="javascript">// create a red polyline from an array of arrays of LatLng points
var latlngs = [
[[-122.68, 45.51],
[-122.43, 37.77],
[-118.2, 34.04]],
[[-73.91, 40.78],
[-87.62, 41.83],
[-96.72, 32.76]]
];</code></pre>

<h3>Creation</h3>

<table data-id='polyline'>
Expand All @@ -2607,7 +2642,7 @@ <h3>Creation</h3>
</code></td>


<td>Instantiates a polyline object given an array of geographical points and optionally an options object.</td>
<td>Instantiates a polyline object given an array of geographical points and optionally an options object. You can create a <code>Polyline</code> object with multiple separate lines (<code>MultiPolyline</code>) by passing an array of arrays of geographic points.</td>
</tr>
</table>

Expand Down Expand Up @@ -2682,6 +2717,11 @@ <h3>Methods</h3>
<td><code><a href="#latlngbounds">LatLngBounds</a></code></td>
<td>Returns the LatLngBounds of the polyline.</td>
</tr>
<tr id="path-getcenter">
<td><code><b>getCenter</b>()</code></td>
<td><code><a href="#latlng">LatLng</a></code></td>
<td>Returns the center (<a href="http://en.wikipedia.org/wiki/Centroid">centroid</a>) of the polyline.</td>
</tr>
<tr id="polyline-togeojson">
<td><code><b>toGeoJSON</b>()</code></td>
<td><code>Object</code></td>
Expand All @@ -2690,80 +2730,42 @@ <h3>Methods</h3>
</table>


<h2 id="polygon">Polygon</h2>

<h2 id="multipolyline">MultiPolyline</h2>

<p>Extends <a href="#featuregroup">FeatureGroup</a> to allow creating multi-polylines (single layer that consists of several polylines that share styling/popup).</p>

<h3>Creation</h3>

<table data-id='multipolyline'>
<tr>
<th>Factory</th>

<th>Description</th>
</tr>
<tr>
<td><code><b>L.multiPolyline</b>(
<nobr>&lt;<a href="#latlng">LatLng</a>[][]&gt; <i>latlngs</i></nobr>,
<nobr>&lt;<a href="#polyline-options">Polyline options</a>&gt; <i>options?</i> )</nobr>
</code></td>



<td>Instantiates a multi-polyline object given an array of arrays of geographical points (one for each individual polyline) and optionally an options object.</td>
</tr>
</table>


<h3>Methods</h3>

<p>MultiPolylines accept all <a href="#polyline">Polyline methods</a> but
have different behavior around their coordinate contents since they can contain
multiple line features:</p>
<p>A class for drawing polygon overlays on a map. Extends <a href="#polyline">Polyline</a>. Use <a href="#map-addlayer">Map#addLayer</a> to add it to the map.</p>

<table data-id='multipolyline'>
<tr>
<th class="width250">Method</th>
<th>Returns</th>
<th>Description</th>
</tr>
<tr>
<td><code><b>setLatLngs</b>(
<nobr>&lt;<a href="#latlng">LatLng</a>[][]&gt; <i>latlngs</i> )</nobr>
</code></td>
<p>Note that points you pass when creating a polygon shouldn't have an additional last point equal to the first one &mdash; it's better to filter out such points.</p>

<td><code><span class="keyword">this</span></code></td>
<td>Replace all lines and their paths with the given array of arrays of
geographical points.</td>
</tr>
<tr>
<td><code><b>getLatLngs</b>()</td>
<h3>Usage example</h3>
<pre><code class="javascript">// create a red polygon from an array of LatLng points
var latlngs = [[-111.03, 41],[-111.04, 45],[-104.05, 45],[-104.05, 41]];

<td><code><nobr>&lt;<a href="#latlng">LatLng</a>[][]&gt; <i>latlngs</i></nobr>
</code></td>
<td>Returns an array of arrays of geographical points in each line.</td>
</tr>
<tr>
<td><code><b>openPopup</b>()</td>
var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);

<td><code>this</code></td>
<td>Opens the popup previously bound by <a href="#path-bindpopup">bindPopup</a>.</td>
</tr>
<tr id="multipolyline-togeojson">
<td><code><b>toGeoJSON</b>()</code></td>
<td><code>Object</code></td>
<td>Returns a <a href="http://en.wikipedia.org/wiki/GeoJSON">GeoJSON</a> representation of the multipolyline (GeoJSON MultiLineString Feature).</td>
</tr>
</table>
// zoom the map to the polygon
map.fitBounds(polygon.getBounds());</code></pre>

<p>You can also pass an array of arrays of latlngs, with the first array representing the outer shape and the other arrays representing holes in the outer shape:</p>

<pre><code class="javascript">
var latlngs = [
[[-111.03, 41],[-111.04, 45],[-104.05, 45],[-104.05, 41]], // outer ring
[[-108.58,37.29],[-108.58,40.71],[-102.50,40.71],[-102.50,37.29]] // hole
];</code></pre>

<h2 id="polygon">Polygon</h2>
<p>Additionally, you can pass a multi-dimensional array to represent a <code>MultiPolygon</code> shape.</p>

<p>A class for drawing polygon overlays on a map. Extends <a href="#polyline">Polyline</a>. Use <a href="#map-addlayer">Map#addLayer</a> to add it to the map.</p>
<pre><code class="javascript">
var latlngs = [
[ // first polygon
[[-111.03, 41],[-111.04, 45],[-104.05, 45],[-104.05, 41]], // outer ring
[[-108.58,37.29],[-108.58,40.71],[-102.50,40.71],[-102.50,37.29]] // hole
],
[ // second polygon
[[-109.05, 37],[-109.03, 41],[-102.05, 41],[-102.04, 37],[-109.05, 38]]
]
];</code></pre>

<p>Note that points you pass when creating a polygon shouldn't have an additional last point equal to the first one &mdash; it's better to filter out such points.</p>

<h3>Creation</h3>

Expand All @@ -2780,7 +2782,7 @@ <h3>Creation</h3>
</code></td>


<td>Instantiates a polygon object given an array of geographical points and optionally an options object (the same as for Polyline). You can also create a polygon with holes by passing an array of arrays of latlngs, with the first latlngs array representing the exterior ring while the remaining represent the holes inside.</td>
<td>Instantiates a polygon object given an array of geographical points and optionally an options object (the same as for Polyline). You can also create a polygon with holes by passing an array of arrays of latlngs, with the first latlngs array representing the exterior ring while the remaining represent the holes inside. You can create a a <code>Polygon</code> with multiple separate shapes (<code>MultiPolygon</code>) by passing an array of <code>Polygon</code> coordinates.</td>
</tr>
</table>

Expand All @@ -2802,69 +2804,6 @@ <h3>Methods</h3>
</table>


<h2 id="multipolygon">MultiPolygon</h2>

<p>Extends <a href="#featuregroup">FeatureGroup</a> to allow creating multi-polygons (single layer that consists of several polygons that share styling/popup).</p>

<h3>Creation</h3>

<table data-id='multipolygon'>
<tr>
<th>Factory</th>

<th>Description</th>
</tr>
<tr>
<td><code><b>L.multiPolygon</b>(
<nobr>&lt;<a href="#latlng">LatLng</a>[][]&gt; <i>latlngs</i></nobr>,
<nobr>&lt;<a href="#polyline-options">Polyline options</a>&gt; <i>options?</i> )</nobr>
</code></td>


<td>Instantiates a multi-polygon object given an array of latlngs arrays (one for each individual polygon) and optionally an options object (the same as for MultiPolyline).</td>
</tr>
</table>

<h3>Methods</h3>

<p>MultiPolygons accept all <a href="#polyline">Polyline methods</a> but
have different behavior around their coordinate contents since they can contain
multiple polygon features:</p>

<table data-id='multipolygon'>
<tr>
<th class="width250">Method</th>
<th>Returns</th>
<th>Description</th>
</tr>
<tr>
<td><code><b>setLatLngs</b>(
<nobr>&lt;<a href="#latlng">LatLng</a>[][]&gt; <i>latlngs</i> )</nobr>
</code></td>

<td><code><span class="keyword">this</span></code></td>
<td>Replace all polygons and their paths with the given array of arrays of
geographical points.</td>
</tr>
<tr>
<td><code><b>getLatLngs</b>()</td>

<td><code><nobr>&lt;<a href="#latlng">LatLng</a>[][]&gt; <i>latlngs</i></nobr>
</code></td>
<td>Returns an array of arrays of geographical points in each polygon.</td>
</tr>
<tr>
<td><code><b>openPopup</b>()</td>

<td><code>this</code></td>
<td>Opens the popup previously bound by <a href="#path-bindpopup">bindPopup</a>.</td>
</tr>
<tr id="multipolygon-togeojson">
<td><code><b>toGeoJSON</b>()</code></td>
<td><code>Object</code></td>
<td>Returns a <a href="http://en.wikipedia.org/wiki/GeoJSON">GeoJSON</a> representation of the multipolygon (GeoJSON MultiPolygon Feature).</td>
</tr>
</table>

<h2 id="rectangle">Rectangle</h2>

Expand Down Expand Up @@ -2922,7 +2861,7 @@ <h3>Methods</h3>

<h2 id="circle">Circle</h2>

<p>A class for drawing circle overlays on a map. Extends <a href="#path">Path</a>. Use <a href="#map-addlayer">Map#addLayer</a> to add it to the map.</p>
<p>A class for drawing circle overlays on a map. Extends <a href="#circlemarker">CircleMarker</a>. Use <a href="#map-addlayer">Map#addLayer</a> to add it to the map.</p>

<pre><code class="javascript">L.circle([50.5, 30.5], 200).addTo(map);</pre></code>

Expand Down Expand Up @@ -2991,7 +2930,7 @@ <h3>Methods</h3>

<h2 id="circlemarker">CircleMarker</h2>

<p>A circle of a fixed size with radius specified in pixels. Extends <a href="#circle">Circle</a>. Use <a href="#map-addlayer">Map#addLayer</a> to add it to the map.</p>
<p>A circle of a fixed size with radius specified in pixels. Extends <a href="#path">Path</a>. Use <a href="#map-addlayer">Map#addLayer</a> to add it to the map.</p>

<h3>Creation</h3>

Expand Down