leaflet.freedraw
Version:
Zoopla inspired freehand polygon creation using Leaflet.js.
68 lines (48 loc) • 3.01 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Leaflet FreeDraw</title>
<link rel="stylesheet" href="css/default.css" />
<link rel="stylesheet" href="css/leaflet.css" />
<script type="text/javascript" src="js/build.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body ng-app="leafletApp" ng-controller="MapController">
<section class="map" data-mode="mode">
<section class="overlay"></section>
<section class="information" ng-mousedown="stopPropagation($event)">
<img src="media/logo.png" alt="FreeDraw">
<h2>Plugin by <a href="https://github.com/Wildhoney">Adam Timberlake</a>.</h2>
<p class="description">FreeDraw allows you to draw a freehand polygon on the map – which is then converted to a normalised polygon which can be manipulated.</p>
<h3 class="modes">Modes</h3>
<p class="description">Since FreeDraw uses bitwise operators to determine the current mode, you are able to combine modes – such as <strong>only</strong> allowing a user to create, or allowing a combination of both edit and delete – or all modes at once!</p>
<label class="toggle-modes">Let's toggle some modes:</label>
<span class="current-mode"><strong>Developers</strong>: Current bitwise mode is {{mode}}.</span>
<ul class="controls">
<li ng-class="{ disabled: isDisabled(MODES.CREATE) }">
<a ng-click="toggleMode(MODES.CREATE)">Create</a>
<span class="only" ng-click="setModeOnly(MODES.CREATE)">only</span>
</li>
<li ng-class="{ disabled: isDisabled(MODES.EDIT) }">
<a ng-click="toggleMode(MODES.EDIT)">Edit Polygons</a>
<span class="only" ng-click="setModeOnly(MODES.EDIT)">only</span>
</li>
<li ng-class="{ disabled: isDisabled(MODES.APPEND) }">
<a ng-click="toggleMode(MODES.APPEND)">Attach Elbows</a>
<span class="only" ng-click="setModeOnly(MODES.APPEND)">only</span>
</li>
<li ng-class="{ disabled: isDisabled(MODES.DELETE) }">
<a ng-click="toggleMode(MODES.DELETE)">Delete</a>
<span class="only" ng-click="setModeOnly(MODES.DELETE)">only</span>
</li>
</ul>
<section class="git-hub">
<img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Logo.png" />
<p class="description">As with <a href="https://github.com/Wildhoney?tab=repositories">all of my open-source projects</a> – <a href="https://github.com/Wildhoney/Leaflet.FreeDraw">FreeDraw is on GitHub.com</a>. See you there!</p>
</section>
</section>
</section>
</body>
</html>