darrenwiens/COPC_3DEP

## COPC_3DEP
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>COPC 3DEP Example</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css"
      rel="stylesheet"
    />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 50%;
      }
      iframe {
        position: absolute;
        top: 0;
        height: 100%;
        width: 50%;
        left: 50%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <iframe
      src="https://viewer.copc.io/"
      title="COPC Viewer"
      id="iframe"
    ></iframe>
    <script>
      mapboxgl.accessToken = "<YOUR_MAPBOX_TOKEN>";
      const map = new mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/mapbox/satellite-streets-v11",
        zoom: 10,
        center: [-112.48332701, 38.12750163],
        projection: "globe",
      });

      map.on("load", () => {
        map.setFog({});
        map.addSource("footprints", {
          type: "geojson",
          data: null,
        });

        map.addLayer({
          id: "footprints",
          type: "fill",
          source: "footprints",
          layout: {},
          paint: {
            "fill-color": "#0080ff",
            "fill-opacity": 0.5,
          },
        });

        let collection_id = "3dep-lidar-copc";
        let token_endpoint = `https://planetarycomputer.microsoft.com/api/sas/v1/token/${collection_id}`;
        let search_endpoint =
          "https://planetarycomputer.microsoft.com/api/stac/v1/search";

        fetch(token_endpoint)
          .then((response) => response.json())
          .then((token_content) => {
            map.on("moveend", () => {
              let bnds = map.getBounds();
              let bbox = [
                bnds._sw.lng,
                bnds._sw.lat,
                bnds._ne.lng,
                bnds._ne.lat,
              ];

              let myHeaders = new Headers();
              myHeaders.append("Content-Type", "application/json");

              let raw = JSON.stringify({
                token: token_content.token,
                collections: [collection_id],
                bbox: bbox,
              });

              let requestOptions = {
                method: "POST",
                headers: myHeaders,
                body: raw,
                redirect: "follow",
              };

              fetch(search_endpoint, requestOptions)
                .then((response) => response.json())
                .then((result) => {
                  result.features.forEach((element) => {
                    element.properties.assets = element.assets;
                  });

                  let src = map.getSource("footprints");
                  src.setData(result);
                })
                .catch((error) => console.log("error", error));
            });

            map.on("click", "footprints", (e) => {
              let href = JSON.parse(e.features[0].properties.assets).data.href;
              let el = document.getElementById("iframe");
              let encodedHref = encodeURIComponent(
                `${href}?${token_content.token}`
              );
              el.src = `https://viewer.copc.io/?copc=${encodedHref}`;
            });
          });
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>COPC 3DEP Example</title>
	<meta
	name="viewport"
	content="initial-scale=1,maximum-scale=1,user-scalable=no"
	/>
	<link
	href="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css"
	rel="stylesheet"
	/>
	<script src="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js"></script>
	<style>
	body {
	margin: 0;
	padding: 0;
	}
	#map {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50%;
	}
	iframe {
	position: absolute;
	top: 0;
	height: 100%;
	width: 50%;
	left: 50%;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<iframe
	src="https://viewer.copc.io/"
	title="COPC Viewer"
	id="iframe"
	></iframe>
	<script>
	mapboxgl.accessToken = "<YOUR_MAPBOX_TOKEN>";
	const map = new mapboxgl.Map({
	container: "map",
	style: "mapbox://styles/mapbox/satellite-streets-v11",
	zoom: 10,
	center: [-112.48332701, 38.12750163],
	projection: "globe",
	});

	map.on("load", () => {
	map.setFog({});
	map.addSource("footprints", {
	type: "geojson",
	data: null,
	});

	map.addLayer({
	id: "footprints",
	type: "fill",
	source: "footprints",
	layout: {},
	paint: {
	"fill-color": "#0080ff",
	"fill-opacity": 0.5,
	},
	});

	let collection_id = "3dep-lidar-copc";
	let token_endpoint = `https://planetarycomputer.microsoft.com/api/sas/v1/token/${collection_id}`;
	let search_endpoint =
	"https://planetarycomputer.microsoft.com/api/stac/v1/search";

	fetch(token_endpoint)
	.then((response) => response.json())
	.then((token_content) => {
	map.on("moveend", () => {
	let bnds = map.getBounds();
	let bbox = [
	bnds._sw.lng,
	bnds._sw.lat,
	bnds._ne.lng,
	bnds._ne.lat,
	];

	let myHeaders = new Headers();
	myHeaders.append("Content-Type", "application/json");

	let raw = JSON.stringify({
	token: token_content.token,
	collections: [collection_id],
	bbox: bbox,
	});

	let requestOptions = {
	method: "POST",
	headers: myHeaders,
	body: raw,
	redirect: "follow",
	};

	fetch(search_endpoint, requestOptions)
	.then((response) => response.json())
	.then((result) => {
	result.features.forEach((element) => {
	element.properties.assets = element.assets;
	});

	let src = map.getSource("footprints");
	src.setData(result);
	})
	.catch((error) => console.log("error", error));
	});

	map.on("click", "footprints", (e) => {
	let href = JSON.parse(e.features[0].properties.assets).data.href;
	let el = document.getElementById("iframe");
	let encodedHref = encodeURIComponent(
	`${href}?${token_content.token}`
	);
	el.src = `https://viewer.copc.io/?copc=${encodedHref}`;
	});
	});
	});
	</script>
	</body>
	</html>