293 lines
9.0 KiB
Handlebars
293 lines
9.0 KiB
Handlebars
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Leaflet Draw Documentation</title>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="./css/normalize.css"/>
|
||
|
|
<link rel="stylesheet" href="./css/main.css"/>
|
||
|
|
<script src="./highlight/highlight.pack.js"></script>
|
||
|
|
<link rel="stylesheet" href="./highlight/styles/github-gist.css"/>
|
||
|
|
|
||
|
|
<script src="./examples/libs/leaflet-src.js"></script>
|
||
|
|
<link rel="stylesheet" href="./examples/libs/leaflet.css"/>
|
||
|
|
|
||
|
|
<script src="../src/leaflet.draw.js"></script>
|
||
|
|
<link rel="stylesheet" href="../src/leaflet.draw.css"/>
|
||
|
|
</head>
|
||
|
|
<body class='api-page'>
|
||
|
|
<div class='container'>
|
||
|
|
|
||
|
|
<h2>Leaflet Draw API reference</h2>
|
||
|
|
<div id="toc" class="clearfix">
|
||
|
|
<div class="toc-col map-col">
|
||
|
|
<h4>Draw</h4>
|
||
|
|
<ul>
|
||
|
|
<li><a href="#l-draw">Usage example</a></li>
|
||
|
|
<li><a href="#l-drawlocal">Local Options</a></li>
|
||
|
|
<li><a href="#options">Options</a></li>
|
||
|
|
<li><a href="#l-draw-event">Events</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="toc-col">
|
||
|
|
<h4>Controls</h4>
|
||
|
|
<ul>
|
||
|
|
<li><a href="#l-draw-toolbar">Draw.Toolbar</a></li>
|
||
|
|
</ul>
|
||
|
|
<h4>Examples</h4>
|
||
|
|
<ul>
|
||
|
|
<li><a href="#leaflet-1-0-examples">Leaflet 1.0.x</a></li>
|
||
|
|
<li><a href="#leaflet-0-7-examples">Leaflet 0.7.x</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="toc-col">
|
||
|
|
<h4>Draw Handlers</h4>
|
||
|
|
<ul>
|
||
|
|
<li><a href="#l-draw-feature">Draw.Feature</a></li>
|
||
|
|
<li><a href="#l-draw-simpleshape">Draw.SimpleShape</a></li>
|
||
|
|
<li><a href="#l-draw-marker">Draw.Marker</a></li>
|
||
|
|
<li><a href="#l-draw-circle">Draw.Circle</a></li>
|
||
|
|
<li><a href="#l-draw-polyline">Draw.Polyline</a></li>
|
||
|
|
<li><a href="#l-draw-rectangle">Draw.Rectangle</a></li>
|
||
|
|
<li><a href="#l-draw-polygon">Draw.Polygon</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="toc-col">
|
||
|
|
<h4>Edit Handler</h4>
|
||
|
|
<ul>
|
||
|
|
<li><a href="#l-edit-simpleshape">Edit.SimpleShape</a></li>
|
||
|
|
<li><a href="#l-edit-marker">Edit.Marker</a></li>
|
||
|
|
<li><a href="#l-edit-circle">Edit.Circle</a></li>
|
||
|
|
<li><a href="#l-edit-poly">Edit.Poly</a></li>
|
||
|
|
<li><a href="#l-edit-rectangle">Edit.Rectangle</a></li>
|
||
|
|
<li><a href="#l-edittoolbar-edit">EditToolbar.Edit</a></li>
|
||
|
|
<li><a href="#l-edittoolbar-delete">EditToolbar.Delete</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="toc-col last-col">
|
||
|
|
<h4>Utility</h4>
|
||
|
|
<ul>
|
||
|
|
<li><a href="#l-geometryutil">GeometryUtil</a></li>
|
||
|
|
<li><a href="#l-latlngutil">LatLngUtil</a></li>
|
||
|
|
<li><a href="#l-lineutil">LineUtil</a></li>
|
||
|
|
<li><a href="#l-polygon">Polygon</a></li>
|
||
|
|
<li><a href="#l-polyline">Polyline</a></li>
|
||
|
|
<li><a href="#l-map-touchextend">TouchExtend</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<p> This documentation is has been transcribed from the original README.MD to jsdoc's or natural docs style for
|
||
|
|
use with <a href="https://github.com/Leaflet/Leafdoc">Leafdoc</a>. If you identify a typo or have a
|
||
|
|
suggestion for this documentation, please feel free toedit the js comment blocks in the src directory,
|
||
|
|
build with 'jake docs' and submit a pull request.</p>
|
||
|
|
|
||
|
|
<a anchor="leaflet-1-0-examples"></a>
|
||
|
|
<h2 id="leaflet-1-0-examples">Leaflet 1.0+ Examples</h2>
|
||
|
|
<ul>
|
||
|
|
<li><a href="./examples/full.html">Full Demo</a></li>
|
||
|
|
<li><a href="./examples/popup.html">Popup</a></li>
|
||
|
|
<li><a href="./examples/snapping.html">Snapping</a></li>
|
||
|
|
<li><a href="./examples/edithandlers.html">Edit Handlers</a></li>
|
||
|
|
</ul>
|
||
|
|
<a anchor="leaflet-0-7-examples"></a>
|
||
|
|
<h2 id="leaflet-0-7-examples">Leaflet 0.7+ Examples</h2>
|
||
|
|
<ul>
|
||
|
|
</li>
|
||
|
|
<li><a href="./examples-0.7.x/full.html">Full Demo</a></li>
|
||
|
|
<li><a href="./examples-0.7.x/popup.html">Popup</a></li>
|
||
|
|
<li><a href="./examples-0.7.x/snapping.html">Snapping</a></li>
|
||
|
|
<li><a href="./examples-0.7.x/edithandlers.html">Edit Handlers</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{{{ body }}}
|
||
|
|
|
||
|
|
<div class="footer">
|
||
|
|
<p>© 2012 - 2017 <a href="http://leafletjs.com/">Leaflet</a> and <a href="https://github.com/Leaflet">Leaflet
|
||
|
|
Organization</a></br>
|
||
|
|
Thanks to all our <a
|
||
|
|
href="https://github.com/Leaflet/Leaflet.draw/graphs/contributors">Contributors</a></br>
|
||
|
|
Documentation generated with <a href="https://github.com/Leaflet/Leafdoc">Leafdoc</a></p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="./js/docs.js"></script>
|
||
|
|
<script>
|
||
|
|
hljs.configure({tabReplace: ' '});
|
||
|
|
hljs.initHighlightingOnLoad();
|
||
|
|
|
||
|
|
var elems = document.querySelectorAll('h2, h3, h4, tr');
|
||
|
|
|
||
|
|
for (var i = 0, len = elems.length; i < len; i++) {
|
||
|
|
var el = elems[i];
|
||
|
|
|
||
|
|
if (el.id) {
|
||
|
|
var anchor = document.createElement('a');
|
||
|
|
anchor.setAttribute('anchor', el.id);
|
||
|
|
if (!el.children.length) {
|
||
|
|
// For headers, insert the anchor before.
|
||
|
|
el.parentNode.insertBefore(anchor, el);
|
||
|
|
} else {
|
||
|
|
// For table rows, insert the anchor inside the first <td>
|
||
|
|
el.querySelector('td').appendChild(anchor);
|
||
|
|
|
||
|
|
// Clicking on the row (meaning "the link icon on the ::before)
|
||
|
|
// jumps to the item
|
||
|
|
el.parentNode.onclick = function (hash) {
|
||
|
|
return function (ev) {
|
||
|
|
if (ev.offsetX < 0) {
|
||
|
|
window.location.hash = '#' + ev.target.parentNode.id;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}(el.id);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
elems = document.querySelectorAll('div.accordion');
|
||
|
|
for (var i = 0, len = elems.length; i < len; i++) {
|
||
|
|
var el = elems[i];
|
||
|
|
|
||
|
|
el.querySelector('label').addEventListener('click', function (c) {
|
||
|
|
return function () {
|
||
|
|
if (c.className === 'accordion expanded') {
|
||
|
|
c.className = 'accordion collapsed';
|
||
|
|
} else {
|
||
|
|
c.className = 'accordion expanded';
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}(el));
|
||
|
|
|
||
|
|
// el.className = 'accordion collapsed';
|
||
|
|
// el.querySelector('.accordion-content').style.display = 'none';
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
margin-top: 2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
h3 {
|
||
|
|
margin-top: 1em;
|
||
|
|
margin-bottom: .5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.accordion {
|
||
|
|
width: 100%;
|
||
|
|
/* overflow: hidden; */
|
||
|
|
}
|
||
|
|
|
||
|
|
div.accordion-overflow {
|
||
|
|
width: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
label,
|
||
|
|
section > h4 {
|
||
|
|
display: block;
|
||
|
|
font-weight: 500;
|
||
|
|
margin: 1em 0 0.25em;
|
||
|
|
}
|
||
|
|
|
||
|
|
label {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.accordion > div.accordion-overflow > div.accordion-content {
|
||
|
|
max-height: 0;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.accordion.collapsed > div.accordion-overflow > div.accordion-content {
|
||
|
|
animation-duration: 0.4s;
|
||
|
|
animation-name: collapse;
|
||
|
|
/* height: 0; */
|
||
|
|
max-height: 0;
|
||
|
|
display: block;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.accordion.expanded > div.accordion-overflow > div.accordion-content {
|
||
|
|
animation-duration: 0.4s;
|
||
|
|
animation-name: expand;
|
||
|
|
/* height: auto; */
|
||
|
|
max-height: none;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes collapse {
|
||
|
|
0% {
|
||
|
|
max-height: 100vh;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
max-height: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes expand {
|
||
|
|
0% {
|
||
|
|
max-height: 0;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
max-height: 100vh;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* div.accordion > div.accordion-content {
|
||
|
|
transition: max-height 0.4s ease-out 0s;
|
||
|
|
}*/
|
||
|
|
|
||
|
|
div.accordion.expanded > label > span.expander {
|
||
|
|
transform: rotate(90deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
div.accordion > label > span.expander {
|
||
|
|
transition: transform 0.4s ease-out 0s;
|
||
|
|
display: inline-block;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
table {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Markdown renders some spurious <p>s inside the table cells */
|
||
|
|
td > p {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* This just looks bad (with the current grey headers for sections which Vlad doesn't really like, so might have to change this) */
|
||
|
|
section.collapsable > div.section-comments > p {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.section-comments {
|
||
|
|
margin-bottom: 0.25em;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* section.collapsable div.section-comments {
|
||
|
|
margin: 1em;
|
||
|
|
font-size: 12px;
|
||
|
|
}*/
|
||
|
|
|
||
|
|
section.collapsable pre {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
section {
|
||
|
|
margin-left: 0.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
section h4, section.collapsable h4 {
|
||
|
|
margin-left: -0.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</body>
|
||
|
|
</html>
|