<!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>
