File: /home/qhl5pt3kkb1d/public_html/tstp-old/our_reach.html
<!DOCTYPE html>
<html>
<head>
<title>TSTP | The Global Reach of Our Actions and Ideas</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
height: 100vh;
}
#sidebar {
width: 300px;
background: #f8f8f8;
overflow-y: auto;
border-right: 1px solid #ddd;
}
#map {
flex: 1;
}
.header {
text-align: center;
padding: 10px;
background: #333;
color: #fff;
}
.location-list {
list-style: none;
padding: 0;
margin: 0;
}
.location-list li {
padding: 10px;
border-bottom: 1px solid #ddd;
cursor: pointer;
}
.location-list li:hover {
background: #f0f0f0;
}
.expand-btn {
background: #333;
color: #fff;
padding: 10px;
cursor: pointer;
text-align: center;
}
.popup-content {
font-size: 14px;
color: #333;
}
.popup-title {
font-weight: bold;
margin-bottom: 5px;
font-size: 16px;
}
.popup-description {
margin: 0;
}
</style>
</head>
<body>
<div id="sidebar">
<div class="header">
<h1>Our Presence in the World</h1>
</div>
<!--<div class="expand-btn" onclick="toggleSidebar()">Expand/Collapse</div>-->
<ul class="location-list">
<li onclick="zoomToLocation([20.5937, 78.9629],5)">India</li>
<li onclick="zoomToLocation([37.0902, -95.7129],4)">USA</li>
<li onclick="zoomToLocation([-0.7893, 113.9213])">Indonesia</li>
<li onclick="zoomToLocation([36.2048, 138.2529])">Japan</li>
<li onclick="zoomToLocation([1.3733, 32.2903])">Uganda</li>
<li onclick="zoomToLocation([-1.2921, 36.8219])">Kenya</li>
<li onclick="zoomToLocation([55.3781, -3.4360])">UK</li>
<li onclick="zoomToLocation([39.3999, -8.2245])">Portugal</li>
<li onclick="zoomToLocation([23.4241, 53.8478])">UAE</li>
<li onclick="zoomToLocation([38.9637, 35.2433])">Turkiye</li>
<li onclick="zoomToLocation([23.0225, 72.5714])">Ahmedabad,India</li>
<li onclick="zoomToLocation([22.3039, 70.8022])">Rajkot,India</li>
<li onclick="zoomToLocation([23.6000, 72.4000])">Mehsana,India</li>
<li onclick="zoomToLocation([22.3174, 72.6195])">Khambhat,India</li>
<li onclick="zoomToLocation([23.2973, 72.3334])">Kadi,India</li>
<li onclick="zoomToLocation([22.3072, 73.1812])">Vadodara,India</li>
<li onclick="zoomToLocation([20.3851, 72.9106])">Vapi,India</li>
<li onclick="zoomToLocation([22.7196, 75.8577])">Indore,India</li>
<li onclick="zoomToLocation([28.7041, 77.1025])">Delhi,India</li>
<li onclick="zoomToLocation([26.9124, 75.7873])">Jaipur,India</li>
<li onclick="zoomToLocation([25.7553, 75.3794])">Deoli,India</li>
<li onclick="zoomToLocation([26.4499, 74.6399])">Ajmer,India</li>
<li onclick="zoomToLocation([12.9716, 77.5946])">Bangalore,India</li>
<li onclick="zoomToLocation([18.5204, 73.8567])">Pune,India</li>
<li onclick="zoomToLocation([17.3850, 78.4867])">Hyderabad,India</li>
<li onclick="zoomToLocation([30.3165, 78.0322])">Dehradun,India</li>
<li onclick="zoomToLocation([36.7783, -119.4179])">California, USA</li>
<li onclick="zoomToLocation([40.0583, -74.4057])">New Jersey, USA</li>
<li onclick="zoomToLocation([41.2033, -77.1945])">Pennsylvania, USA</li>
<li onclick="zoomToLocation([37.4316, -78.6569])">Virginia, USA</li>
<li onclick="zoomToLocation([40.7128, -74.0060])">New York, USA</li>
<li onclick="zoomToLocation([27.9944, -81.7603])">Florida, USA</li>
<li onclick="zoomToLocation([32.3182, -86.9023])">Alabama, USA</li>
<li onclick="zoomToLocation([26.0112, -80.1495])">South Florida, USA</li>
<li onclick="zoomToLocation([31.9686, -99.9018])">Texas, USA</li>
<li onclick="zoomToLocation([35.5175, -86.5804])">Tennessee, USA</li>
<li onclick="zoomToLocation([38.9108, -75.5277])">Delaware, USA</li>
<li onclick="zoomToLocation([34.4208, -119.6982])">Santa Barbara, California, USA</li>
</ul>
</div>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script>
var map = L.map('map').setView([20, 0], 2);
L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoidGhlc21hcnR0ZXN0cHJlcCIsImEiOiJjbHdveHAwMXcyYzEyMmpvOWJvYnQ5MjZiIn0.MLbHAhNXzqY2y1g8BHvJpw', {
attribution: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> contributors © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
tileSize: 512,
zoomOffset: -1
}).addTo(map);
var redIcon = L.icon({
iconUrl: 'https://thesmarttestprep.com/images/loader.png', // Replace with a suitable icon URL
iconSize: [21, 21],
iconAnchor: [10, 34],
popupAnchor: [1, -34],
});
var locations = [
{title: 'India', location: [20.5937, 78.9629], icon: redIcon},
{title: 'USA', location: [37.0902, -95.7129], icon: redIcon},
{title: 'Indonesia', location: [-0.7893, 113.9213], icon: redIcon},
{title: 'Japan', location: [36.2048, 138.2529], icon: redIcon},
{title: 'Uganda', location: [1.3733, 32.2903], icon: redIcon},
{title: 'Kenya', location: [-1.2921, 36.8219], icon: redIcon},
{title: 'UK', location: [55.3781, -3.4360], icon: redIcon},
{title: 'New Jersey, USA', location: [40.0583, -74.4057], icon: redIcon},
{title: 'Pennsylvania, USA', location: [41.2033, -77.1945], icon: redIcon},
{title: 'Virginia, USA', location: [37.4316, -78.6569], icon: redIcon},
{title: 'New York, USA', location: [40.7128, -74.0060], icon: redIcon},
{title: 'Florida, USA', location: [27.9944, -81.7603], icon: redIcon},
{title: 'Alabama, USA', location: [32.3182, -86.9023], icon: redIcon},
{title: 'South Florida, USA', location: [26.0112, -80.1495], icon: redIcon},
{title: 'Texas, USA', location: [31.9686, -99.9018], icon: redIcon},
{title: 'Tennessee, USA', location: [35.5175, -86.5804], icon: redIcon},
{title: 'Delaware, USA', location: [38.9108, -75.5277], icon: redIcon},
{title: 'Santa Barbara, California, USA', location: [34.4208, -119.6982], icon: redIcon},
{title: 'Portugal', location: [39.3999, -8.2245], icon: redIcon},
{title: 'UAE', location: [23.4241, 53.8478], icon: redIcon},
{title: 'Turkiye', location: [38.9637, 35.2433], icon: redIcon},
{title: 'Ahmedabad,India', location: [23.0225, 72.5714], icon: redIcon},
{title: 'Rajkot,India', location: [22.3039, 70.8022], icon: redIcon},
{title: 'Mehsana,India', location: [23.6000, 72.4000], icon: redIcon},
{title: 'Khambhat,India', location: [22.3174, 72.6195], icon: redIcon},
{title: 'Kadi,India', location: [23.2973, 72.3334], icon: redIcon},
{title: 'Vadodara,India', location: [22.3072, 73.1812], icon: redIcon},
{title: 'Vapi,India', location: [20.3851, 72.9106], icon: redIcon},
{title: 'Indore,India', location: [22.7196, 75.8577], icon: redIcon},
{title: 'Delhi,India', location: [28.7041, 77.1025], icon: redIcon},
{title: 'Jaipur,India', location: [26.9124, 75.7873], icon: redIcon},
{title: 'Deoli,India', location: [25.7553, 75.3794], icon: redIcon},
{title: 'Ajmer,India', location: [26.4499, 74.6399], icon: redIcon},
{title: 'Bangalore,India', location: [12.9716, 77.5946], icon: redIcon},
{title: 'Pune,India', location: [18.5204, 73.8567], icon: redIcon},
{title: 'Hyderabad,India', location: [17.3850, 78.4867], icon: redIcon},
{title: 'Dehradun,India', location: [30.3165, 78.0322], icon: redIcon}
];
locations.forEach(function(location) {
L.marker(location.location).addTo(map)
.bindPopup(location.title);
});
function zoomToLocation(latlng,zoomLevel = 8) {
map.setView(latlng, zoomLevel);
}
// function toggleSidebar() {
// var sidebar = document.getElementById('sidebar');
// sidebar.classList.toggle('collapsed');
//}
locations.forEach(function(location) {
var markerOptions = location.icon ? { icon: location.icon } : {};
var popupContent = `
<div class="popup-content">
<div class="popup-title">${location.title}</div>
<!-- <div class="popup-description">Welcome to our ${location.title}.</div> -->
</div>
`;
L.marker(location.location, markerOptions).addTo(map)
.bindPopup(popupContent);
});
</script>
<div/>
</body>
</html>