leaflet-environmental-layers
Version:
[](https://gitpod.io/#https://github.com/publiclab/leaflet-environmental-layers/) [](http
98 lines (73 loc) • 3.6 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Leaflet Environmental Layers</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="../node_modules\bootstrap\dist\css\bootstrap.min.css">
<script src="../node_modules\jquery\dist\jquery.min.js"></script>
<script src="../node_modules\bootstrap\dist\js\bootstrap.min.js"></script>
<script src="../node_modules/leaflet/dist/leaflet.js"></script>
<script src="../node_modules/leaflet-blurred-location/dist/Leaflet.BlurredLocation.js"></script>
<script src="../node_modules/leaflet.blurred-location-display/dist/Leaflet.BlurredLocationDisplay.js"></script>
<script src="../dist/LeafletEnvironmentalLayers.js"></script>
<script src="../src/windRoseLayer.js"></script>
<script src="../node_modules/leaflet-fullhash/leaflet-fullHash.js"></script>
<script src="../node_modules/heatmap.js/build/heatmap.min.js"></script>
<script src="../node_modules/leaflet-heatmap/leaflet-heatmap.js"></script>
<link href="../node_modules/leaflet/dist/leaflet.css" rel="stylesheet" />
<link href="../dist/LeafletEnvironmentalLayers.css" rel="stylesheet" />
<script src="../node_modules/leaflet-spin/example/spin/dist/spin.min.js"></script>
<script src="../node_modules/leaflet-spin/example/leaflet.spin.min.js"></script>
<script src="https://unpkg.com/esri-leaflet@2.2.3/dist/esri-leaflet.js"></script>
<script src="https://unpkg.com/esri-leaflet-renderers@2.0.6"></script>
<script src="../lib/glify.js"></script>
<script src="../lib/leaflet-fullUrlHash.js"></script>
<link href="../node_modules\@fortawesome\fontawesome-free\css\all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="styles.css">
<script src="../node_modules/leaflet-google-places-autocomplete/src/js/leaflet-gplaces-autocomplete.js"></script>
<link rel="stylesheet" href="../node_modules/leaflet-google-places-autocomplete/src/css/leaflet-gplaces-autocomplete.css">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOLUQngEmJv0_zcG1xkGq-CXIPpLQY8iQ&libraries=places"></script>
</head>
<body>
<div id="map"></div>
<!--
<script src="../node_modules/mapbox-gl-leaflet/leaflet-mapbox-gl.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
-->
<!--
<script src="https://robertleeplummerjr.github.io/Leaflet.glify/glify.js"></script>
<script src="../node_modules/leaflet.glify/"></script>
-->
<script>
var bounds = new L.LatLngBounds(
new L.LatLng(84.67351257, -172.96875),
new L.LatLng(-54.36775852, 178.59375)
);
var map = L.map("map", {
maxBounds: bounds,
maxBoundsViscosity: 0.75
}).setView([41.83, -71.44], 10);
map.options.minZoom = 3;
var baselayer1 =L.tileLayer(
"https://a.tiles.mapbox.com/v3/jywarren.map-lmrwb2em/{z}/{x}/{y}.png",
{
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}
).addTo(map);
L.LayerGroup.EnvironmentalLayers({
baseLayers: {
'Grey-scale': baselayer1
},
addLayersToMap: true,
include: ['asian', 'clouds', 'Unearthing'],
// exclude: ['mapknitter', 'clouds'],
hash: true,
embed: true,
// hostname: 'domain name goes here'
}).addTo(map);
</script>
</body>
</html>