Skip to content

Commit

Permalink
made the mobile sites overlay go down when we select the sites. remov…
Browse files Browse the repository at this point in the history 
…ed the references button from the main page and added it to about
  • Loading branch information
@ARRYTHEBEAST
ARRYTHEBEAST committed Aug 28, 2024
1 parent 590abc9 commit df79893
Show file tree
Hide file tree
Showing 5 changed files with 99 additions and 55 deletions.
17 changes: 15 additions & 2 deletions about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,20 @@ <h2>About:</h2>
This website was developed by Arjun Rajesh Khamkar, as a service to the wonderful city of Kolhapur.
<br>
<br>The webiste serves to index and organize the various 'sites'; which include everything from heritage, social importance, scenic importance and everythingthat needs documentation but isnt readily documented and even if it is, not properly index to enable quick search.

<div class="references">
<button id="references"> Show References</button>
</div>

</body>
</html>
</html>
<script>
const referenceButton = document.querySelector('.references button');

// Function to add click event listeners to buttons
const addButtonListener = (button, url) => {
button.addEventListener('click', () => window.location.href = url);
};

// Add click event listeners to buttons
addButtonListener(referenceButton, 'reference.html');
</script>
31 changes: 31 additions & 0 deletions aboutstyle.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,34 @@

}

.references {
position: absolute;
top: 85vh;
right: 2vw;
width: 20vw;
max-height: 80vh;
max-width: 100px;
overflow-y: auto;
padding: 5px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 20px;
box-shadow: 0 0 1.5vh rgba(0, 0, 0, 0.3);
z-index: 1000;

}

.references button {
font-size: medium;
padding: 5px 5px; /* Larger padding for a more spacious button */
background-color: #007bff;
color: white;
border: none;
border-radius: 20px; /* Rounded corners for buttons */
cursor: pointer;
text-align: center; /* Center text inside the button */
}

.references button:hover {
background-color: #0056b3;
}

4 changes: 2 additions & 2 deletions kolhapurIndex.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,9 @@ <h2>Sites</h2>
<h2 id="marker-title"></h2>
<p id="marker-info"></p>
</div>
<div class="references">
<!-- <div class="references">
<button id="references"> Show References</button>
</div>
</div> -->
</body>

</html>
Expand Down
97 changes: 48 additions & 49 deletions kolhapurScript.js
View file
Original file line number Diff line number Diff line change
@@ -1,105 +1,78 @@
// Map initialization
// Initialize the map centered on Kolhapur
const map = L.map('map').setView([16.686875, 74.2272], 14);

// Add the OpenStreetMap tile layer to the map
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

// Define time periods for categorization
var timePeriods = ['Old', 'Recent', 'Ancient', 'Mideaval']

// Add your markers
// Define an array of markers with their coordinates, names, descriptions, and categories
var markersData = [
{
coords: [16.6868981, 74.2245119], name: "ShivaMandir 1",
data: "This temple is placed in the corner of a already isolated and 'sketchy' place. This temple is mostly closed and only open on core festive days for the local shiva bhakts. With average aesthic value this place does not call for a detour just to visit it. "
, categories: ['Temple', 'Recent', 'Architecture']
coords: [16.6868981, 74.2245119],
name: "ShivaMandir 1",
data: "This temple is placed in the corner of a already isolated and 'sketchy' place. This temple is mostly closed and only open on core festive days for the local shiva bhakts. With average aesthic value this place does not call for a detour just to visit it. ",
categories: ['Temple', 'Recent', 'Architecture']
},

{
coords: [16.6878053, 74.2268129], name: "RadhaKrishna Mandir Old Maratha Architecture",
data: "This temple ", categories: ['Temple', 'Mideaval', 'Architecture', 'Religious']
coords: [16.6878053, 74.2268129],
name: "RadhaKrishna Mandir Old Maratha Architecture",
data: "This temple ",
categories: ['Temple', 'Mideaval', 'Architecture', 'Religious']
},

{ coords: [16.6876496, 74.2272880], name: "Padmavati Mandir", categories: ['Temple', 'Mideaval', 'Religious'] },

{ coords: [16.6880179, 74.2272511], name: "GajaGanesh",categories:['Temple', 'Recent'] },

{ coords: [16.6875259, 74.2285171], name: "Jayprabha Studio", categories:['Heritage', 'Old'] },

{ coords: [16.6840401, 74.2319141], name: "Renuka Mandir s.1840" },

{ coords: [16.692538, 74.224976], name: "Mirajkar Tikti" },

{ coords: [16.692193, 74.224434], name: "Nurshimha Mandir 1" },

{ coords: [16.6918619, 74.2243293], name: "Onkareshwar Mandir Southern Script(raja Bhoj?)", data: "this is data" },

{ coords: [16.6916495, 74.2307380], name: "Sathmari" },

{ coords: [16.690646, 74.229167], name: "Belbag Chowk" },

{ coords: [16.6923981, 74.2202060], name: "ardha shivaji putala" },

{ coords: [16.6929595, 74.2198519], name: "Brahmeshwar Park" },

{ coords: [16.6929733, 74.2182406], name: "Mahakali mandir 1" },

{ coords: [16.6944673, 74.2143604], name: "rankala tower" },

{ coords: [16.6994986, 74.2117278], name: "anugamini mandir" },

{ coords: [16.6966896, 74.2139182], name: "Old Washing Place (dhobi)" },

{ coords: [16.6999160, 74.1945288], name: "Laksheswar Mandir(waterfront)" },

{ coords: [16.7037394, 74.2177601], name: "sangramsinha gaikwad statue" },

{ coords: [16.7032927, 74.2177269], name: "gaikwad samadhi" },

{ coords: [16.7036107, 74.2182610], name: "maratha architecture (wooden work) temple?" },

{ coords: [16.717409, 74.1837], name: "Shingnapur Bridge" },

{ coords: [16.707178, 74.217496], name: "Shivaji Pul" },

{ coords: [16.69181, 74.214733], name: "Sandhya Math" },

{ coords: [16.691476, 74.214250], name: "Ancient Grinding Wheel (Chuna/Lime)" },

{ coords: [16.690777, 74.242741], name: "Shahunagar Shahu Maharaj" },

{ coords: [16.686661, 74.242467], name: "Pansare Statue" },

{ coords: [16.685677063690296, 74.24476721211819], name: "Jain Peace Fountain(not functional)" },

{ coords: [16.678112528032145, 74.25650613438248], name: "University Shivaji Maharaj Statue" },

{ coords: [16.68045203668232, 74.25650030391819], name: "Bhaurao Patil Statue" },

{ coords: [16.683335386532963, 74.25358169487988], name: "University Lake Point" },

{ coords: [16.695784408048777, 74.25683864460689], name: "Maratha Light Infantry, Kolhapur Command Entry" },

{ coords: [16.6993747349747, 74.25449822924905], name: "Tank, Fighter Jet, WarShip scale models" },

{ coords: [16.691389103423028, 74.24460943217142], name: "Bai Cha Putala, Mauli Putala" },

{ coords: [16.69368046074615, 74.236330895537], name: "Koteshwar Mandir, LakeView" },

{ coords: [16.68687874452764, 74.22941512409949], name: "Arya Samaj School, 1928" },

{ coords: [16.791012471115316, 74.19121417050346], name: "Pohale Caves" },

];

// Get references to navbar buttons
const [homeButton, aboutButton, mapButton] = document.querySelectorAll('.navbar button');
const referenceButton = document.querySelector('.references button');
//const referenceButton = document.querySelector('.references button');

// Function to add click event listeners to buttons
const addButtonListener = (button, url) => {
button.addEventListener('click', () => window.location.href = url);
};

addButtonListener(referenceButton, 'reference.html');
// Add click event listeners to buttons
//addButtonListener(referenceButton, 'reference.html');
addButtonListener(aboutButton, 'about.html');
addButtonListener(homeButton, 'index.html');

// Create a tile layer for satellite view
const tileLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}');

// Function to toggle map view and update localStorage
Expand Down Expand Up @@ -127,17 +100,26 @@ if (savedMapView === 'satellite') {
// Add click event listener to toggle map view
mapButton.addEventListener('click', toggleMapView);

// Get references to DOM elements
const markerNamesList = document.getElementById('markerNames');
const infoOverlay = document.getElementById('info-overlay');
const markerTitle = document.getElementById('marker-title');
const markerInfo = document.getElementById('marker-info');
const backButton = document.getElementById('back-button');
const closeButton = document.getElementById('close-button');

// Variable to store the currently selected marker
let currentMarker = null;

// Function to zoom to a marker and show its information overlay
function zoomToMarkerAndShowOverlay(markerData, marker) {
const zoomLevel = Math.max(map.getZoom(), 16);

toggleMobileOverlay();


//if (window.innerWidth > 767 || window.orientation !== 0) {
//setTimeout(() => {
const zoomLevel = Math.max(map.getZoom(), 18);
map.setView(markerData.coords, zoomLevel, { animate: true, duration: 1 });

currentMarker = markerData.name;
Expand All @@ -146,6 +128,7 @@ function zoomToMarkerAndShowOverlay(markerData, marker) {
markerInfo.textContent = markerData.data || "No additional information available.";
infoOverlay.style.display = 'block';

// Create an enlarged icon for the selected marker
const enlargedIcon = L.icon({
iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png',
iconSize: [35, 55],
Expand All @@ -158,6 +141,7 @@ function zoomToMarkerAndShowOverlay(markerData, marker) {

marker.setIcon(enlargedIcon);

// Reset the marker icon to its original size after a short delay
setTimeout(() => {
marker.setIcon(L.icon({
iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png',
Expand All @@ -168,12 +152,15 @@ function zoomToMarkerAndShowOverlay(markerData, marker) {
shadowSize: [41, 41],
shadowAnchor: [12, 41]
}));
}, 500);
}, 700);
//}, 1000);
}

// Add markers to the map and create list items for each marker
markersData.forEach(markerData => {
const marker = L.marker(markerData.coords).addTo(map);
marker.on('click', () => {
toggleMobileOverlay();
zoomToMarkerAndShowOverlay(markerData, marker);
if (window.innerWidth <= 767 && window.orientation === 0) {
markerList.classList.remove('show');
Expand All @@ -188,9 +175,11 @@ markersData.forEach(markerData => {
listItem.addEventListener('click', () => zoomToMarkerAndShowOverlay(markerData, marker));
});

// Add event listeners to close and back buttons
closeButton.addEventListener('click', () => infoOverlay.style.display = 'none');
backButton.addEventListener('click', () => infoOverlay.style.display = 'none');

// Add event listener for search input
document.getElementById('searchInput').addEventListener('input', e => {
const searchQuery = e.target.value.toLowerCase();
markerNamesList.innerHTML = '';
Expand All @@ -205,29 +194,39 @@ document.getElementById('searchInput').addEventListener('input', e => {
});
});

// Create a custom icon for the user's position
const posMarker = L.icon({
iconUrl: 'https://toppng.com/uploads/preview/button-icon-bluesky-google-current-location-ico-11562972550n6hrlknyqo.png',
iconSize: [15, 15],
iconAnchor: [7, 11],
popupAnchor: [-3, -76]
});

// Add a marker for the user's position (currently hardcoded)
L.marker([16.69, 74.23], { icon: posMarker }).addTo(map);

// Add this at the beginning of your script
// Get references to mobile toggle button and marker list
const mobileToggle = document.getElementById('mobile-toggle');
const markerList = document.getElementById('marker-list');

// Function to toggle mobile overlay
function toggleMobileOverlay() {
markerList.classList.toggle('show');
mobileToggle.textContent = markerList.classList.contains('show') ? 'Hide Sites' : 'Show Sites';
}



// Add click event listener to mobile toggle button
// This allows users to show/hide the list of sites on mobile devices
mobileToggle.addEventListener('click', toggleMobileOverlay);

// Add a resize event listener to handle orientation changes
// This ensures proper display when switching between portrait and landscape modes
window.addEventListener('resize', () => {
// Check if the screen width is greater than 767px (tablet/desktop) or if the device is in landscape mode
if (window.innerWidth > 767 || window.orientation !== 0) {
// Hide the mobile overlay and reset the button text
markerList.classList.remove('show');
mobileToggle.textContent = 'Show Sites';
}
Expand Down
5 changes: 3 additions & 2 deletions kolhapurStyle.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ body, html {
position: absolute; /* Position navbar over the map */
top: 2vh; /* Distance from the top of the viewport */
right: 2vw; /*Distance from the left of the viewport */
bottom: 90vh;
padding: 5px; /* Add padding inside the navbar for a spacious look */
border-radius: 20px; /* High border radius for rounded corners */
background-color: rgba(255, 255, 255, 0.9); /* Optional: Add a semi-transparent background */
Expand Down Expand Up @@ -91,11 +92,11 @@ body, html {

.info-overlay {
position: absolute;
top: 10vh;
top: 11vh;
right: 2vw;
width: auto;
height: auto;
max-width: 20vw;
max-width: 30vw;
max-height: 80vh;
overflow-y: auto;
padding: 2vh;
Expand Down

0 comments on commit df79893

Please sign in to comment.