@dam-atlas/map-component
v1.0.11
Published
This is a package with two custom elements destined for The Dam Atlas.
Downloads
39
Readme
@dam-atlas/map-component
This is a package with two custom elements destined for The Dam Atlas.
Usage
Using these web components is a three step process.
- Add the appropriate script tag to your head.
- Configure the custom element with HTML attributes and CSS properties.
- Add the custom element tag to your document.
Usage : Supporting Figure
For Supporting Figures, use this setup:
<html>
<head>
<!-- 1. Add the /bundle.js src to the head -->
<script type="module" src="https://esm.sh/@dam-atlas/map-component/bundle.js"></script>
<style>
/* 2. Configure the web font stack using these properties */
:root {
/* When using a variable font, configurating these is the same */
--da-map-font-body: "Archivo", Helvetica, sans-serif;
--da-map-font-body-semibold: "Archivo", Helvetica, sans-serif;
--da-map-font-body-bold: "Archivo", Helvetica, sans-serif;
/*
This will set the `font-weight` property
for the different body styles.
These are the default values, no need to set them again,
unless you are changing them from these.
*/
--da-map-font-weight-body: 400;
--da-map-font-weight-body-semibold: 600;
--da-map-font-weight-body-bold: 700;
}
body {
margin: 0;
padding: 0;
}
.stack {
display: flex;
flex-direction: column;
gap: 20px;
}
da-map-figure:first-child {
width: 80vw;
height: 80vh;
}
da-map-figure:nth-child(2) {
width: 80vw;
height: 80vh;
}
</style>
</head>
<body>
<div class="stack">
<!--
3. The `da-map-figure` element is exposed by the /figure.js script tag above. This tag has 3 customizable attributes
- csv = The URL to the Dams CSV
- legend-open = true | false, sets the initial state of the legend
- category = hazard | dam-height (more to come), sets the legend and symbology of the dams on the map.
-->
<da-map-figure
csv="https://rr-studio-assets.nyc3.cdn.digitaloceanspaces.com/dam-atlas/gis-data/dam-atlas-2.0.csv"
legend-open="true"
category="hazard"
></da-map-figure>
<da-map-figure
csv="https://rr-studio-assets.nyc3.cdn.digitaloceanspaces.com/dam-atlas/gis-data/dam-atlas-2.0.csv"
legend-open="false"
category="dam-height"
></da-map-figure>
</div>
</body>
</html>Usage : Interactive Map
For the full blown interactive map, use this setup:
<html>
<head>
<!-- 1. Add the /bundle.js src to the head -->
<script type="module" src="https://esm.sh/@dam-atlas/map-component/bundle.js"></script>
<style>
/* 2a. Configure the web font stack using these properties */
:root {
/* When using a variable font, configurating these is the same */
--da-map-font-body: "Archivo", Helvetica, sans-serif;
--da-map-font-body-semibold: "Archivo", Helvetica, sans-serif;
--da-map-font-body-bold: "Archivo", Helvetica, sans-serif;
/*
This will set the `font-weight` property
for the different body styles.
These are the default values, no need to set them again,
unless you are changing them from these.
*/
--da-map-font-weight-body: 400;
--da-map-font-weight-body-semibold: 600;
--da-map-font-weight-body-bold: 700;
}
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="stack">
<!-- 2b. Expose a function to open the info modal -->
<script>
function openMapInfoModal () {
// jQuery to open modal
}
// Place it on the window so that we can
// get to it from within our component.
window.openMapInfoModal = openMapInfoModal
</script>
<!--
4. The `da-map-interactive` element is exposed by the /interactive.js script tag above. This tag has 2 customizable attribute, and an available slot.
Attribute:
- csv = The URL to the Dams CSV
- toolInfoClick = A string of javascript to execute to open the
Info Modal.
Slot:
- nav, add an HTML element as the child of this component and give it the attribute `slot="nav"`, that will put your element in the full screen layout configured for the interactive map. Not including this will fallback to the non-interactive mockup element that defined as part of this package that is used just to fill the space in the UI.
-->
<da-map-interactive
csv="https://rr-studio-assets.nyc3.cdn.digitaloceanspaces.com/dam-atlas/gis-data/dam-atlas-2.0.csv"
toolInfoClick="window.openMapInfoModal()"
>
<nav slot="nav">Nav Trigger</nav>
</da-map-interactive>
</div>
</body>
</html>