leaflet-measure
Version:
Coordinate, linear, and area measure tool for Leaflet maps
53 lines • 1.54 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>leaflet-measure</title>
<link rel="stylesheet" href="../bower_components/normalize.css/normalize.css">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<link rel="stylesheet" href="../dist/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: 20px;
}
h1 {
margin: 0;
font-size: 1.4em;
font-weight: normal;
line-height: 1;
}
#map {
height: 500px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>leaflet-measure</h1>
<div id="map"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="../dist/leaflet-measure.js"></script>
<script>
(function (L) {
var map = L.map('map', {
measureControl: true,
layersControl: true
}).setView([29.7491289, -95.0807104], 16);
L.tileLayer('http://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);
})(window.L);
</script>
</body>
</html>