leaflet-measure-ext
Version:
Coordinate, linear, and area measure tool for Leaflet maps
112 lines (107 loc) • 3.31 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>leaflet-measure</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""></script>
<link rel="stylesheet" href="leaflet-measure.css">
<style>
body {
font-size: 14px;
font-family: Helvetica, sans-serif;
font-weight: 400;
line-height: 1;
color: #222;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
body {
margin: 0 20px 20px;
}
h1, h2 {
margin: 20px 0 0;
font-size: 1.4em;
font-weight: normal;
line-height: 1;
}
h1 {
display: inline-block;
font-size: 1.4em;
}
h2 {
font-size: 1.1em;
}
pre {
line-height: 1.5em;
}
p.github {
display: inline-block;
margin: 20px 0 0 20px;
font-size: 1.2em;
}
a, a:visited, a:hover, a:active, a:focus {
text-decoration: none;
}
#map {
height: 500px;
margin: 20px 20px 0 0;
}
</style>
</head>
<body>
<h1>leaflet-measure</h1>
<p class="github"><a href="//github.com/ljagis/leaflet-measure">github.com/ljagis/leaflet-measure</a></p>
<div id="map"></div>
<h2><code>measurefinish</code> event data:</h2>
<pre id="eventoutput">...</pre>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="leaflet-measure.js"></script>
<script>
(function(L, document) {
var map = L.map('map', {
center: [29.749817, -95.080757],
zoom: 16,
// measureControl: true
});
L.control.measure({
labels: {
measureDistancesAndAreas: 'Measure Title',
}
}).addTo(map);
L.tileLayer('//server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
minZoom: 14,
maxZoom: 18,
attribution: '© Esri — Sources: Esri, DigitalGlobe, Earthstar Geographics, CNES/Airbus DS, GeoEye, USDA FSA, USGS, Getmapping, Aerogrid, IGN, IGP, swisstopo, and the GIS User Community'
}).addTo(map);
map.on('measurefinish', function(evt, a, b) {
writeResults(evt);
});
map.on('measurepopupshown', function(evt, a, b) {
console.log(evt, a, b);
});
function writeResults(results) {
document.getElementById('eventoutput').innerHTML = JSON.stringify(
{
area: results.area,
areaDisplay: results.areaDisplay,
lastCoord: results.lastCoord,
length: results.length,
lengthDisplay: results.lengthDisplay,
pointCount: results.pointCount,
points: results.points
},
null,
2
);
}
})(window.L, window.document);
</script>
</body>
</html>