leaflet.freedraw
Version:
Zoopla inspired freehand polygon creation using Leaflet.js.
95 lines (75 loc) • 4.8 kB
HTML
<html>
<head>
<title>Leaflet.FreeDraw</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Aesthetics! -->
<link rel="stylesheet" type="text/css" href="css/Default.css" />
<link rel="stylesheet" type="text/css" href="css/Map.css" />
<link rel="stylesheet" type="text/css" href="css/Planes.css" />
<link rel="stylesheet" type="text/css" href="js/vendor/leaflet/dist/leaflet.css" />
<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic" rel="stylesheet" type="text/css" />
<!-- Behaviour! -->
<script type="text/javascript" src="js/vendor/d3/d3.js"></script>
<script type="text/javascript" src="js/vendor/evispa-timo-jsclipper/clipper_unminified.js"></script>
<script type="text/javascript" src="js/vendor/graham_scan/graham_scan.min.js"></script>
<script type="text/javascript" src="js/vendor/angular/angular.js"></script>
<script type="text/javascript" src="js/vendor/hammerjs/hammer.js"></script>
<script type="text/javascript" src="js/vendor/concavehull/dist/concavehull.js"></script>
<script type="text/javascript" src="js/vendor/leaflet/dist/leaflet-src.js"></script>
<script type="text/javascript" src="js/vendor/leaflet.freedraw/FreeDraw.js"></script>
<script type="text/javascript" src="js/vendor/leaflet.freedraw/Options.js"></script>
<script type="text/javascript" src="js/vendor/leaflet.freedraw/Utilities.js"></script>
<script type="text/javascript" src="js/vendor/leaflet.freedraw/Memory.js"></script>
<script type="text/javascript" src="js/vendor/leaflet.freedraw/Hull.js"></script>
<!-- Application! -->
<script type="text/javascript" src="js/Example.js"></script>
</head>
<body ng-app="leafletApp" ng-controller="MapController">
<section class="map" data-mode="mode">
<section class="planes">
<img class="plane first" src="images/airplane8.png" />
<div class="rotate first">
<img class="plane second" src="images/rocket20.png" />
</div>
<img class="plane third" src="images/airplane47.png" />
<div class="rotate second">
<img class="plane fourth" src="images/small116.png" />
</div>
</section>
<section class="overlay"></section>
<section class="information">
<h1>Leaflet.FreeDraw</h1>
<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>