Shared processing and web map JS functions for TxDOT applications alongside shared styling properties
TxDOT uses a variety of shared functionality and styling across web applications and sites. This package serves as a toolbox with these JS functions and CSS styling properties for easy import and use.
The styling properties are created both from classic CSS and modern SCSS but unique and are not duplicated in either. They are each organized in their respective folders src/style/css and src/style/scss. Individual files in each folder are recognized via import in their folder's _index.scss file.
The JS tools available in this package are organized by subfolder under the primary package variable txdotToolbox. Call them via dot notation from the package variable. Their specific argument requirement documentation can be found in their specific function file (i.e. src/<subfolder>/<function file>.js).
They include:
└── txdotToolbox
└── spm
├── jumpToGoogle(lat, lon, level)
├── jumpToGoogleEsri(mapView)
├── jumpToSpm(lat, lon, level, points, routes)
├── jumpToSpmEsri(mapView, points, routes)
└── jumpToSrd(routeId, beginDfo, endDfo, attributes)npm install @txdot-gis/txdot-toolbox-js --save
import '@txdot-gis/txdot-toolbox-js/dist/main.css' // to make styling available, import main.css in entry .js file
...
<div id='scss-example'>
<button type='button' className='background text'>SCSS Example</button>
</div>
<div>
<button type='button' className='css-example'>CSS Example</button>
</div>import txdotToolbox from '@txdot-gis/txdot-toolbox-js' // all JS functions available under txdotToolbox variable
...
const latitude = 29.212940817521442
const longitude = -103.28362089838606
const zoomLevel = 9
txdotToolbox.spm.jumpToGoogle(latitude, longitude, zoomLevel)Notice CDN requires accessing the JS package subfolders via default
<head>
<link rel="stylesheet" href="https://unpkg.com/@txdot-gis/txdot-toolbox-js@latest/dist/main.css" /> <!-- source CSS -->
<script src="https://unpkg.com/@txdot-gis/txdot-toolbox-js@latest/dist/index.js"></script> <!-- source JS -->
<script >
const latitude = 29.212940817521442
const longitude = -103.28362089838606
const zoomLevel = 9
const jumpGoogleListener = document.querySelector('#jumpToGoogle')
jumpGoogleListener.addEventListener('click', (event) => {
txdotToolbox.default.spm.jumpToGoogle(latitude, longitude, zoomLevel)
})
</script>
</head>
<body>
<div id='scss-example'>
<button type='button' class='background text'>SCSS Example</button>
</div>
<div>
<button type='button' class='css-example'>CSS Example</button>
</div>
<br>
<button type="button" id="jumpToGoogle">Jump To Google</button>
</body>