Skip to content

48 create two column view #60

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
laurenholzman wants to merge 5 commits into
base: develop
Choose a base branch
from
Open

48 create two column view #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
248543b
Update map-item.html
laurenholzman Mar 3, 2023
a2521c1
Create map-layout.scss
laurenholzman Mar 3, 2023
8439b4b
Update main.scss
laurenholzman Mar 3, 2023
6248f67
Update canada-britishColumbia-yaletown.md
laurenholzman Mar 3, 2023
806b0f9
Update canada_britishColumbia_ubc.md
laurenholzman Mar 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 54 additions & 40 deletions _layouts/map-item.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,52 +11,67 @@
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<!-- Import Turf Module - Needed to calculate bounding boxes -->
<script src='https://api.mapbox.com/mapbox.js/plugins/turf/v2.0.2/turf.min.js'></script>
<link rel="stylesheet" href="{{site.baseurl}}/assets/map-layout.css">
</head>

<body>

<div class="mapinfowrapper">
<span class="mapinfo">Scale {{ page.scale }}</span>
<span class="mapinfo">Years {{ page.years_published }}</span>
<span class="mapinfo">{{ page.nosheets }} map sheets</span>
</div>

<h1 class="page-heading">{{ page.title }}</h1>
<div style=" position: sticky; padding-top: 3%; padding-bottom: 2%; top: 0%; left: 3%; background-color: #fdfdfd; z-index: 0; min-width: 90%">
<div class="mapinfowrapper">
<span class="mapinfo">Scale {{ page.scale }}</span>
<span class="mapinfo">Years {{ page.years_published }}</span>
<span class="mapinfo">{{ page.nosheets }} map sheets</span>
</div>
<h1 class="page-heading">{{ page.title }}</h1>

<div id="buttonWrapper">
<a href="{{ page.infourl }}" class="buttonlink" alt="Open Catalogue">Open Catalogue</a>
<button id="zoomto" class="btn-control" alt="Reset Map">Reset Map</button>
<a href="#openHelp" id="helpButton" class="buttonlink" alt="Help">&quest;</a>
</div>

<div id="openHelp" class="overlay">
<div id="helpContent">
<a href="#" id="closeHelp">&times;</a>
<div id="helpText">
<h2>How to Use the OpenIndexMap-O-Matic</h2>
<div id="scrollHelp">
<ul>
<li>Click and drag on the map to move the tool.</li>
<li>Zoom in and out by clicking the plus (+) or minus (-) buttons.</li>
<li>Click on an outlined shape to see what maps are in the collection. Information about the maps in that area will be displayed below the map tool.</li>
<li>Click the “Open Catalogue” button to navigate to the catalogue listing for the map series.</li>
<li>Click the “Reset Map” button to return the tool to its default state.</li>
<li>Click on each map listing to see more detail about a particular map.</li>
</ul>

<div class="row" style="width: 100%; float: left; min-width: 90%;">
Copy link
Copy Markdown
Contributor

@nickmmurphy nickmmurphy Mar 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's good practice to keep CSS out of any html files and in one place, so that they are easier to find and change later. "id" can be used for one-use styling, and "class" can be reused across multiple elements. I'd move the styling to the map-layout.sccs file that you made.

<div class="column" style="position: initial; padding-right: 3%; left: 0%; z-index:-1">

<div class="featurecontainer">
<div id="features"></div>
</div>

<span> </span>
</div>
<div class="column" style="position: sticky; padding-left: 3%; top: 29%; right: 0; float: right;">



<div id="openHelp" class="overlay">
<div id="helpContent">
<a href="#" id="closeHelp">&times;</a>
<div id="helpText">
<h2>How to Use the OpenIndexMap-O-Matic</h2>
<div id="scrollHelp">
<ul>
<li>Click and drag on the map to move the tool.</li>
<li>Zoom in and out by clicking the plus (+) or minus (-) buttons.</li>
<li>Click on an outlined shape to see what maps are in the collection. Information about the maps in that area will be displayed below the map tool.</li>
<li>Click the “Open Catalogue” button to navigate to the catalogue listing for the map series.</li>
<li>Click the “Reset Map” button to return the tool to its default state.</li>
<li>Click on each map listing to see more detail about a particular map.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mapcontainer">
<div id="map"></div>
</div>
<div id="buttonWrapper">

<button id="zoomto" class="btn-control" alt="Reset Map">Reset Map</button>
<a href="#openHelp" id="helpButton" class="buttonlink" alt="Help">&quest;</a>
</div>
</div>
</div>
</div>

<div class="mapcontainer">
<div id="map"></div>
</div>
<span> </span>
<div class="featurecontainer">
<div id="features"></div>
</div>

<script>
<script>
mapboxgl.accessToken = '{{ site.mapbox-access-token }}';

// Location of the geojson
Expand Down Expand Up @@ -98,7 +113,7 @@ <h2>How to Use the OpenIndexMap-O-Matic</h2>
touchZoomRotate: false,
projection: {
name: 'mercator'
}
}
});
map.addControl(new mapboxgl.NavigationControl({ showCompass: false }));
// Fit to bbox, overwrite the center/zoom
Expand Down Expand Up @@ -189,7 +204,7 @@ <h2>How to Use the OpenIndexMap-O-Matic</h2>
map.setFeatureState({
'source': 'Data Layer',
'id': ID

}, {
hover: false

Expand All @@ -202,7 +217,7 @@ <h2>How to Use the OpenIndexMap-O-Matic</h2>



//OIM names based on table pulled from OIM specifications; second array allows for searching
//OIM names based on table pulled from OIM specifications; second array allows for searching
const OIMnames= [
{
ELEMENT: "label",
Expand Down Expand Up @@ -455,7 +470,7 @@ <h2>How to Use the OpenIndexMap-O-Matic</h2>

//make it a hyperlink if it is the appropriate type
if (key == "websiteUrl" || key == "download" || key == "physHold" || key == "iiifURL" || key == "digHold") {

info = "<a href=\" " + features[i].properties[key] + "\">" + features[i].properties[key] + " </a>"

display = display + "<span><b>" + name + ": </b>" + info + "</span> <br>";
Expand Down Expand Up @@ -484,7 +499,7 @@ <h2>How to Use the OpenIndexMap-O-Matic</h2>
//add listeners
var coll = document.getElementsByClassName("collapsible");
var i;


for (i = 0; i < coll.length; i++) {

Expand Down Expand Up @@ -550,13 +565,12 @@ <h2>How to Use the OpenIndexMap-O-Matic</h2>




};

// Call mapData() to initalize the map
mapData();

</script>
</script>

</body>
</html>
19 changes: 18 additions & 1 deletion assets/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
}

#map canvas {
cursor: crosshair;
cursor: pointer;
}

.mapcontainer {
Expand Down Expand Up @@ -246,3 +246,20 @@ table, th, td {
.footer-link {
display: block;
}


.column {
float: left;
width: 47%;

}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}



20 changes: 20 additions & 0 deletions assets/map-layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
---

@import "{{ site.theme }}";






.wrapper {
Copy link
Copy Markdown
Contributor

@nickmmurphy nickmmurphy Mar 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The default header that we're using from Jekyll uses this class already; can you rename this so that it does not override that one?

max-width: 90% !important;
}

#buttonWrapper {
margin: 15px 0px 15px 0px;
position: relative;
display: flex;
align-items: center;
}
2 changes: 1 addition & 1 deletion canada_britishColumbia_ubc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@ years_published: 1980
location: University of British Columbia, Vancouver, BC
nosheets: 16
infourl: http://resolve.library.ubc.ca/cgi-bin/catsearch?bid=12149901
geojsonurl: https://github.com/ubc-lib-geo/spatial-indexes/blob/master/canada_britishColumbia_ubc.geojson
geojsonurl: https://ubc-lib-geo.github.io/spatial-indexes/north-america/canada_britishColumbia_ubc.geojson
Copy link
Copy Markdown
Contributor

@nickmmurphy nickmmurphy Mar 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The file URL was changed in the last commit, so it's fixed on develop already. This change can be safely removed.

---
2 changes: 1 addition & 1 deletion maps/canada-britishColumbia-yaletown.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@ years_published: 1967
location: Location
nosheets: 6
infourl: http://resolve.library.ubc.ca/cgi-bin/catsearch?bid=2802600
geojsonurl: https://github.com/ubc-lib-geo/spatial-indexes/blob/master/canada_britishColumbia_yaletown.geojson
geojsonurl: https://ubc-lib-geo.github.io/spatial-indexes/north-america/canada_britishColumbia_yaletown.geojson
Copy link
Copy Markdown
Contributor

@nickmmurphy nickmmurphy Mar 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The file URL was changed in the last commit, so it's fixed on develop already. This change can be safely removed.

---