npmap.js
Version:
A JavaScript web mapping library, built as a Leaflet plugin, for the National Park Service.
123 lines (116 loc) • 3.51 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>ArcGIS Legend | Examples | NPMap.js</title>
<style>
body {
margin: 0;
padding: 0;
}
#map {
bottom: 0;
position: absolute;
top: 0;
width: 100%;
}
.leaflet-container img {
margin-bottom: -5px;
}
h1.layer.name,
h2.legend-title,
.leaflet-container h2 {
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var NPMap = {
baseLayers: [
'stamen-toner'
],
div: 'map',
hooks: {
preinit: function(callback) {
L.npmap.util._.reqwest({
success: function(response) {
var html = '',
name = 'National Park Info',
i;
for (i = 0; i < response.layers.length; i++) {
var layer = response.layers[i],
legend = layer.legend,
title = layer.layerName;
if (title.indexOf('Labels') !== -1) {
html = '';
} else {
html += '<h2 class="legend-title"><em>' + title + '</em></h2><ul class="legend-labels">';
}
if (html !== '') {
for (i = 0; i < legend.length; i++) {
var item = legend[i],
image = item.imageData,
imgType = item.contentType,
label = item.label;
if (label === '') {
html = '<ul class="legend-labels"><li><img src="data:' + imgType + ';base64,' + image + '"> ' + title + '</li>';
} else {
html += '<li><img src="data:' + imgType + ';base64,' + image + '"> ' + label + '</li>';
}
}
}
}
NPMap.config.legendControl = {
html: '<h1 class="layer name">' + name + '</h1>' + html + '</ul>',
position: 'bottomright'
}
callback();
},
type: 'jsonp',
url: 'http://mapservices.nps.gov/arcgis/rest/services/LandResourcesDivisionTractAndBoundaryService/MapServer/legend?f=json'
});
}
},
overlays: [{
attribution: 'Esri',
layers: '0',
name: name,
opacity: 0.5,
popup: {
description: {
fields: [
'',
''
],
format: 'table'
}
},
tiled: false,
type: 'arcgisserver',
url: 'http://mapservices.nps.gov/arcgis/rest/services/LandResourcesDivisionTractAndBoundaryService/MapServer'
}],
zoom: 7
};
(function() {
var s = document.createElement('script');
s.src = '../dist/npmap-bootstrap.js';
document.body.appendChild(s);
})();
</script>
<style>
.leaflet-container img {
margin-bottom: -5px;
}
h1.layer.name {
margin: 0;
}
h2.legend-title,
.leaflet-container h2 {
margin: 10px 0;
}
</style>
</body>
</html>