daemon1024/lel-minimal.html

## lel-minimal.html
<!DOCTYPE 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."
    />

    <title>Leaflet Environmental Layers</title>

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/leaflet-environmental-layers@2.4.3/dist/LeafletEnvironmentalLayers.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/leaflet-environmental-layers@2.4.3/dist/LeafletEnvironmentalLayers.js"></script>

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css"
    />

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/leaflet-spin@1.1.2/leaflet.spin.min.js"></script>

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css"
    />

    <style>
      #map {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(51, 51, 51, 0.7);
        z-index: 10;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>

    <script>
      const params = new URLSearchParams(window.location.search);
      let include = [
        "skytruth",
        "odorreport",
        "asian",
        "wind",
        "city",
        "eonetFiresLayer",
        "Unearthing",
        "PLpeople",
      ];
      if (params.has("include")) {
        let inputs = params.get("include");
        include = inputs.split(" ");
      }
      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: include,
        // 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>
	<!DOCTYPE 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."
	/>

	<title>Leaflet Environmental Layers</title>

	<link
	rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/leaflet-environmental-layers@2.4.3/dist/LeafletEnvironmentalLayers.css"
	/>
	<script src="https://cdn.jsdelivr.net/npm/leaflet-environmental-layers@2.4.3/dist/LeafletEnvironmentalLayers.js"></script>

	<link
	rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css"
	/>

	<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

	<script src="https://cdn.jsdelivr.net/npm/leaflet-spin@1.1.2/leaflet.spin.min.js"></script>

	<link
	rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css"
	/>

	<style>
	#map {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(51, 51, 51, 0.7);
	z-index: 10;
	}
	</style>
	</head>

	<body>
	<div id="map"></div>

	<script>
	const params = new URLSearchParams(window.location.search);
	let include = [
	"skytruth",
	"odorreport",
	"asian",
	"wind",
	"city",
	"eonetFiresLayer",
	"Unearthing",
	"PLpeople",
	];
	if (params.has("include")) {
	let inputs = params.get("include");
	include = inputs.split(" ");
	}
	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: include,
	// 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>