npmap.js
Version:
A JavaScript web mapping library, built as a Leaflet plugin, for the National Park Service.
93 lines (91 loc) • 2.29 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>Styling Vectors | Examples | NPMap.js</title>
<style>
body {
margin: 0;
padding: 0;
}
#map {
bottom: 0;
position: absolute;
top: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var NPMap = {
center: {
lat: 42.42,
lng: -104.71
},
div: 'map',
overlays: [{
name: 'National Parks',
popup: {
title: '<a href="http://www.nps.gov/{{toLowerCase Code}}">{{Name}}</a>'
},
styles: function(data) {
return {
point: {
'marker-size': 'small',
'marker-symbol': data.Code.slice(0, 1).toLowerCase()
}
};
},
type: 'geojson',
url: 'data/national_parks.geojson'
},{
cluster: true,
styles: {
point: {
'marker-color': '#5e9fd5',
'marker-size': 'small'
}
},
type: 'csv',
url: 'data/colorado_cities_simplestyle.csv'
},{
type: 'geojson',
url: 'data/simplestyle.geojson'
},{
popup: {
description: 'No attributes available'
},
styles: {
line: {
'stroke': '#03f',
'stroke-opacity': 0.8,
'stroke-width': 5
},
point: {
'marker-color': '#fd9126',
'marker-size': 'small'
},
polygon: {
'fill': '#03f',
'fill-opacity': 0.2,
'stroke': '#000',
'stroke-opacity': 0.8,
'stroke-width': 8
}
},
type: 'geojson',
url: 'data/utah_vectors.geojson'
}],
zoom: 6
};
(function() {
var s = document.createElement('script');
s.src = '../dist/npmap-bootstrap.js';
document.body.appendChild(s);
})();
</script>
</body>
</html>