@wsdot/bridge-vc
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

Query Client for WSDOT Bridge Vertical Clearance ArcGIS Map Service

Not ready for production. Work-in-progress. Instructions may not yet be functional.

Install

npm install @wsdot/bridge-vc

Use

This sample demonstrates using this code via JavaScript Modules. You can also use Webpack (or a similar tool) to bundle your code and the imported modules together to be compatible with more browsers.

index.mjs

This is the code for the demo page's JavaScript Module.

// import functions
import { createControl, fetchCrossingInfo } from "./node_modules/@wsdot/bridge-vc/dist/esm/index.mjs";
// Get crossing location ID URL search parameter.
const urlSearchParams = new URLSearchParams(location.search);
const idString = urlSearchParams.get("id");
const crossingId = parseInt(idString);
// Write error message if ID is invalid.
if (isNaN(crossingId)) {
  const p = document.createElement("p");
  p.textContent = `invalid crossing id: ${idString}`;
  document.body.appendChild(p);
} else {
  // Query SOE for crossing location info,
  // then create control displaying that info.
  const mapServiceUrl =
    "https://www.example.com/arcgis/rest/services/Bridge/BridgeVerticalClearance/MapServer";
  fetchCrossingInfo(crossingId, mapServiceUrl).then(
    result => {
      const control = createControl(result);
      document.body.appendChild(control);
    },
    error => {
      const p = document.createElement("p");
      p.textContent = error.message;
      document.body.appendChild(p);
    }
  );
}

If using webpack and / or TypeScript, the import statement would be slightly different. Only the package name is used, instead of the path to the packages main module script file.

import { createControl, fetchCrossingInfo } from "@wsdot/bridge-vc";

index.html

This is the index page that references the JavaScript Module defined above.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./node_modules/@wsdot/bridge-vc/verticalclearance.css" />
    <link
      href="https://fonts.googleapis.com/css?family=Lato|Overpass"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <script type="module" src="index.mjs"></script>
  </body>
</html>

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.0.0
    0
    • latest

Version History

Package Sidebar

Install

npm i @wsdot/bridge-vc

Weekly Downloads

0

Version

1.0.0

License

Unlicense

Unpacked Size

56.7 kB

Total Files

27

Last publish

Collaborators

  • jeff-jacobson