leaflet-environmental-layers
Version:
[](https://gitpod.io/#https://github.com/publiclab/leaflet-environmental-layers/) [](http
91 lines (71 loc) • 4.05 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:title" content="Leaflet Environmental Layers" />
<meta property="og:description" content="Collection of different environmental map layers in an easy to use Leaflet library."/>
<meta property="og:image" content="https://avatars2.githubusercontent.com/u/4621650?s=200&v=4"/>
<meta property="og:url" content="https://publiclab.github.io/leaflet-environmental-layers/example/#3/50.51/56.78/BL2"/>
<meta name="twitter:card" content="summary_large_image" />
<title>Leaflet Environmental Layers</title>
<!-- Required for PLpeople layer - must load before dist/LeafletEnvironmentalLayers.js -->
<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>
<!-- Required for all maps -->
<script src="../node_modules\jquery\dist\jquery.min.js"></script>
<script src="../dist/LeafletEnvironmentalLayers.js"></script>
<link href="../node_modules/leaflet/dist/leaflet.css" rel="stylesheet" />
<link href="../dist/LeafletEnvironmentalLayers.css" rel="stylesheet" />
<link href="../node_modules\@fortawesome\fontawesome-free\css\all.min.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>
<!-- Bootstrap - not needed if you use simpleLayerControl:true -->
<script src="../node_modules\bootstrap\dist\js\bootstrap.min.js"></script>
<link rel="stylesheet" href="../node_modules\bootstrap\dist\css\bootstrap.min.css">
<!-- Required for setting hash:true -->
<script src="../lib/leaflet-fullUrlHash.js"></script>
<!-- Required for search control -->
<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>
<!-- Required for purpleLayer -->
<script src="../node_modules/heatmap.js/build/heatmap.min.js"></script>
<script src="../node_modules/leaflet-heatmap/leaflet-heatmap.js"></script>
<!-- Required for wisconsin Layer -->
<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>
<!-- Required for windRose Layer -->
<script src="../src/windRoseLayer.js"></script>
<!-- Required for Unearthing Layer -->
<script src="../lib/glify.js"></script>
<!-- Set the size and position of the map on your page in your own css files -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="map"></div>
<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([43, -83], 3);
map.options.minZoom = 3;
var LEL = L.LayerGroup.EnvironmentalLayers({
// simpleLayerControl: true,
addLayersToMap: true,
//include: ['Territories', 'skytruth', 'odorreport', 'asian', 'wind', 'city', 'eonetFiresLayer', 'Unearthing', 'PLpeople'],
// exclude: ['mapknitter', 'clouds'],
// display: ['eonetFiresLayer'],
hash: true,
embed: true,
imageLoadingUrl: "https://raw.githubusercontent.com/buche/leaflet-openweathermap/master/owmloading.gif",
// hostname: 'domain name goes here'
});
LEL.addTo(map);
</script>
</body>
</html>