From df79893e9db49df8dbf6bca051917c52a1955f63 Mon Sep 17 00:00:00 2001 From: ARRYTHEBEAST Date: Wed, 28 Aug 2024 10:13:38 +0530 Subject: [PATCH] made the mobile sites overlay go down when we select the sites. removed the references button from the main page and added it to about --- about.html | 17 +++++++- aboutstyle.css | 31 +++++++++++++++ kolhapurIndex.html | 4 +- kolhapurScript.js | 97 +++++++++++++++++++++++----------------------- kolhapurStyle.css | 5 ++- 5 files changed, 99 insertions(+), 55 deletions(-) diff --git a/about.html b/about.html index 0652263..c77e79b 100644 --- a/about.html +++ b/about.html @@ -13,7 +13,20 @@

About:

This website was developed by Arjun Rajesh Khamkar, as a service to the wonderful city of Kolhapur.

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. - +
+ +
- \ No newline at end of file + + \ No newline at end of file diff --git a/aboutstyle.css b/aboutstyle.css index 63d7cb6..99058a1 100644 --- a/aboutstyle.css +++ b/aboutstyle.css @@ -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; +} + diff --git a/kolhapurIndex.html b/kolhapurIndex.html index ccab6f1..5926a74 100644 --- a/kolhapurIndex.html +++ b/kolhapurIndex.html @@ -32,9 +32,9 @@

Sites

-
+ diff --git a/kolhapurScript.js b/kolhapurScript.js index c223636..291e0cb 100644 --- a/kolhapurScript.js +++ b/kolhapurScript.js @@ -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 @@ -127,6 +100,7 @@ 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'); @@ -134,10 +108,18 @@ 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; @@ -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], @@ -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', @@ -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'); @@ -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 = ''; @@ -205,6 +194,7 @@ 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], @@ -212,22 +202,31 @@ const posMarker = L.icon({ 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'; } diff --git a/kolhapurStyle.css b/kolhapurStyle.css index acc6d0c..4d094da 100644 --- a/kolhapurStyle.css +++ b/kolhapurStyle.css @@ -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 */ @@ -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;