Skip to content
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

Add support to open/close information window #1

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add support to open/close information window #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b4ce164
add logical support for toggling information window
pmacMaps Feb 25, 2019
6aa64b3
add logic to hide and open info window
pmacMaps Feb 26, 2019
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
18 changes: 18 additions & 0 deletions assets/info-window.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
.toggle-info-window-container {
position: fixed;
z-index: 500;
top: 50%;
left: 240px;
padding: 10px;
background: #fff;
}
#toggle-icon {
height: 25px;
width: 25px;
}
div.w3-sidebar.closed {
left: -240px;
}
div.toggle-info-window-container.closed {
left: 0px;
}
51 changes: 51 additions & 0 deletions assets/toggle-window.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
'use strict';

// map container
var mapContainer = document.getElementById('map');
// information window
var infoWindow = document.getElementById('info-window');
// container for toggle button
var toggleContainer = document.getElementById('toggle-div');
// button to toggle information window
var toggleInfoWindowButton = document.getElementById('toggle-info-window');
// toggle image
var toggleIcon = document.getElementById('toggle-icon');
// add click event listener
toggleInfoWindowButton.addEventListener('click', toggleInfoWindow);

function toggleInfoWindow() {
// get listing of CSS classes
var infoWindowClassList = infoWindow.classList;
var toggleContainerClassList = toggleContainer.classList;

// run logic based upon info window being open or closed
if (infoWindowClassList.contains('open')) {
// remove open class
infoWindowClassList.remove('open');
toggleContainerClassList.remove('open');
// add closed class
infoWindowClassList.add('closed');
toggleContainerClassList.add('closed');
// move info window off of screen to the left - css
mapContainer.style.left = '0px';
// refresh map to prevent blank space
map.invalidateSize();
// change toggle icon to open button
toggleIcon.src = '../img/open-arrow.png'
toggleIcon.title = 'Click to open information window';
} else {
// remove closed class
infoWindowClassList.remove('closed');
toggleContainerClassList.remove('closed');
// add open class
infoWindowClassList.add('open');
toggleContainerClassList.add('open');
// move info window to original location
mapContainer.style.left = '240px';
// refresh map to prevent blank space
map.invalidateSize();
// change toggle icon to close button
toggleIcon.src = '../img/close-arrow.png'
toggleIcon.title = 'Click to hide information window';
}
}
Binary file added img/close-arrow.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/open-arrow.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 8 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,14 @@
<meta name="keywords" content="vector, vector GIS editor, vector GIS, vector GIS data editor, GIS data editing, GIS viewer, GIS editing, data editing">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.pm.css" />
<link rel="stylesheet" href="assets/info-window.css" />
<link rel="stylesheet" href="assets/w3.css" />
<link rel="stylesheet" href="assets/style.css" />
<link rel="icon" type="image/png" href="img/favicon.png" />
</head>
<body>
<!--SIDEBAR-->
<div class="w3-sidebar w3-card">
<div id="info-window" class="w3-sidebar w3-card open">
<span class="w3-small w3-blue-text" style="position:fixed;top:2px;left:200px;">beta</span>
<img src="img/logo-main.svg" style="height:36px;display:block; margin:auto; margin-top:5px;">
<hr>
Expand All @@ -27,6 +28,11 @@
</div>
<div id="layer-container"></div>
</div>
<div id="toggle-div" class="toggle-info-window-container open">
<button id="toggle-info-window" title="Click to hide information window">
<img id="toggle-icon" alt="arrow key pointing to the left" src="img/close-arrow.png" />
</button>
</div>
<!--MAP-->
<div id="map"></div>
<!--EDIT PANE-->
Expand Down Expand Up @@ -223,5 +229,6 @@ <h3 class="w3-blue-text line-hide">Fill</h3>
<script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js" integrity="sha512-YZ6b5bXRVwipfqul5krehD9qlbJzc6KOGXYsDjU9HHXW2gK57xmWl2gU6nAegiErAqFXhygKIsWPKbjLPXVb2g==" crossorigin=""></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.pm.min.js"></script>
<script src="assets/app.js"></script>
<script src="assets/toggle-window.js"></script>
</body>
</html>
7 changes: 4 additions & 3 deletions info.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,9 @@
<h3 class="w3-blue-text">About</h3>
<hr>
<p>Vector is a free GIS viewer and editing tool. It is intended for GIS users who create and manage their data in <a href="https://www.esri.com/en-us/home" target="_blank">Esri</a>'s <a href="http://enterprise.arcgis.com/en/server/latest/get-started/windows/what-is-arcgis-for-server-.htm" target="_blank">ArcServer</a> and/or <a href="https://www.esri.com/en-us/arcgis/products/arcgis-online/overview" target="_blank">ArcGIS Online</a>. If you use public or private <a href="https://enterprise.arcgis.com/en/server/latest/publish-services/linux/what-is-a-feature-service-.htm" target="_blank">Feature Services</a>, <a href="http://enterprise.arcgis.com/en/server/latest/publish-services/linux/what-is-a-map-service.htm" target="_blank">Map Services</a>, or <a href="https://doc.arcgis.com/en/arcgis-online/manage-data/publish-features.htm" target="_blank">Hosted Feature Services</a> this tool is for you.</p>
<p>Vector exists not to replace fully-featured desktop GIS software. Instead, it is intended to be an alternative experience for viewing and editing your data over the web. It provides a simple interface to create and edit both geometry and attribute data. Vector does not have the complete editing tools of desktop software, but it is a great option for most editing situations.</p>
<p>Vector exists not to replace fully-featured desktop GIS software. Instead, it is intended to be an alternative experience for viewing and editing your data over the web. It provides a simple interface to create and edit both geometry and attribute data. Vector does not have the complete editing tools of desktop software, but it is a great option for most editing situations.</p>
<p>Vector was built using the open source libraries of <a href="https://leafletjs.com/" target="_blank">Leaflet</a>, <a href="http://esri.github.io/esri-leaflet/" target="_blank">Esri Leaflet</a>, and <a href="https://github.com/codeofsumit/leaflet.pm" target="_blank">Leaflet PM</a>. These are all awesome projects. A big thank you goes out to the creators and maintainers of them. <a href="https://twitter.com/SteveClineBird" target="_blank">Steve Cline</a> created Vector and maintains this site.</p>
<p>Arrow icons for toggling the information window created by <a href="https://www.flaticon.com/authors/smashicons" title="Smashicons">Smashicons</a>, and can be downloaded from <a href="https://www.flaticon.com/" title="Flaticon">FlatIcon</a>. Icons are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a> FlatIcon.</p>
<h3 class="w3-blue-text">Help</h3>
<hr>
<p><b>Connecting to your Services</b><p>
Expand Down Expand Up @@ -66,8 +67,8 @@ <h3 class="w3-blue-text">Legal</h3>
<p>This site does not store any of your data, URLs, metadata, user names, or passwords. It simply offers a way for you to interact with Esri services. This site does not use cookies. To restore sessions, this site uses your browser's <a href="https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage" target="_blank">Local Storage</a> to store service URLs, layer styles, and desired fields for non-protected services. Tokens and passwords are not stored, so protected services will not be restored after the browser window is closed.</p>
<div class="w3-center w3-blue-text" style="padding-bottom:100px;">
<a href="https://vector.rocks">Vector GIS Data Editor</a>
</div>
</div>
</div>
</div>
</body>
</html>
</html>