Istanbul District Distance Calculator
<\/p>\n\n\n\n
<div class=\"mb-5\">\n <label for=\"originDistrict\" class=\"block text-gray-700 text-sm font-semibold mb-2\">Origin District:<\/label>\n <select id=\"originDistrict\" class=\"w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50 text-gray-800\">\n <!-- Districts will be populated here by JavaScript -->\n <\/select>\n <\/div>\n\n <div class=\"mb-6\">\n <label for=\"destinationDistrict\" class=\"block text-gray-700 text-sm font-semibold mb-2\">Destination District:<\/label>\n <select id=\"destinationDistrict\" class=\"w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50 text-gray-800\">\n <!-- Districts will be populated here by JavaScript -->\n <\/select>\n <\/div>\n\n <button id=\"calculateBtn\" class=\"w-full bg-blue-600 text-white font-bold py-3 px-4 rounded-lg hover:bg-blue-700 transition duration-300 ease-in-out shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75\">\n Calculate Distance\n <\/button>\n\n <div id=\"result\" class=\"mt-8 p-4 bg-blue-100 border border-blue-200 text-blue-800 rounded-lg text-center font-semibold text-lg hidden\">\n <!-- Result will be displayed here -->\n <\/div>\n\n <div id=\"errorMessage\" class=\"mt-8 p-4 bg-red-100 border border-red-200 text-red-800 rounded-lg text-center font-semibold text-lg hidden\">\n Please select different districts.\n <\/div>\n<\/div>\n\n<script>\n \/\/ Define Istanbul districts with approximate coordinates\n \/\/ These coordinates are approximate and may not represent the exact center of each district.\n \/\/ For more precise results, a dedicated mapping service API would be required.\n const districts = [\n { name: \"Adalar\", lat: 40.875, lon: 29.12 },\n { name: \"Arnavutk\u00f6y\", lat: 41.20, lon: 28.75 },\n { name: \"Ata\u015fehir\", lat: 40.98, lon: 29.10 },\n { name: \"Avc\u0131lar\", lat: 40.98, lon: 28.70 },\n { name: \"Ba\u011fc\u0131lar\", lat: 41.03, lon: 28.85 },\n { name: \"Bah\u00e7elievler\", lat: 40.99, lon: 28.87 },\n { name: \"Bak\u0131rk\u00f6y\", lat: 40.98, lon: 28.80 },\n { name: \"Ba\u015fak\u015fehir\", lat: 41.08, lon: 28.78 },\n { name: \"Bayrampa\u015fa\", lat: 41.03, lon: 28.90 },\n { name: \"Be\u015fikta\u015f\", lat: 41.05, lon: 29.00 },\n { name: \"Beykoz\", lat: 41.10, lon: 29.20 },\n { name: \"Beylikd\u00fcz\u00fc\", lat: 41.00, lon: 28.65 },\n { name: \"Beyo\u011flu\", lat: 41.03, lon: 28.97 },\n { name: \"B\u00fcy\u00fck\u00e7ekmece\", lat: 41.02, lon: 28.57 },\n { name: \"\u00c7atalca\", lat: 41.15, lon: 28.35 },\n { name: \"\u00c7ekmek\u00f6y\", lat: 41.02, lon: 29.20 },\n { name: \"Esenler\", lat: 41.03, lon: 28.88 },\n { name: \"Esenyurt\", lat: 41.03, lon: 28.68 },\n { name: \"Ey\u00fcpsultan\", lat: 41.07, lon: 28.92 },\n { name: \"Fatih\", lat: 41.01, lon: 28.95 },\n { name: \"Gaziosmanpa\u015fa\", lat: 41.05, lon: 28.92 },\n { name: \"G\u00fcng\u00f6ren\", lat: 41.02, lon: 28.86 },\n { name: \"Kad\u0131k\u00f6y\", lat: 40.98, lon: 29.03 },\n { name: \"Ka\u011f\u0131thane\", lat: 41.07, lon: 28.97 },\n { name: \"Kartal\", lat: 40.90, lon: 29.20 },\n { name: \"K\u00fc\u00e7\u00fck\u00e7ekmece\", lat: 41.00, lon: 28.75 },\n { name: \"Maltepe\", lat: 40.92, lon: 29.15 },\n { name: \"Pendik\", lat: 40.88, lon: 29.23 },\n { name: \"Sancaktepe\", lat: 40.97, lon: 29.23 },\n { name: \"Sar\u0131yer\", lat: 41.17, lon: 29.05 },\n { name: \"Silivri\", lat: 41.07, lon: 28.25 },\n { name: \"Sultanbeyli\", lat: 40.93, lon: 29.27 },\n { name: \"Sultangazi\", lat: 41.08, lon: 28.90 },\n { name: \"\u015eile\", lat: 41.18, lon: 29.60 },\n { name: \"\u015ei\u015fli\", lat: 41.06, lon: 28.99 },\n { name: \"Tuzla\", lat: 40.82, lon: 29.30 },\n { name: \"\u00dcmraniye\", lat: 41.02, lon: 29.15 },\n { name: \"\u00dcsk\u00fcdar\", lat: 41.02, lon: 29.02 },\n { name: \"Zeytinburnu\", lat: 40.99, lon: 28.90 }\n ];\n\n const originDistrictSelect = document.getElementById('originDistrict');\n const destinationDistrictSelect = document.getElementById('destinationDistrict');\n const calculateBtn = document.getElementById('calculateBtn');\n const resultDiv = document.getElementById('result');\n const errorMessageDiv = document.getElementById('errorMessage');\n\n \/\/ Populate dropdowns\n function populateDistricts() {\n districts.forEach(district => {\n const option1 = document.createElement('option');\n option1.value = district.name;\n option1.textContent = district.name;\n originDistrictSelect.appendChild(option1);\n\n const option2 = document.createElement('option');\n option2.value = district.name;\n option2.textContent = district.name;\n destinationDistrictSelect.appendChild(option2);\n });\n }\n\n \/\/ Convert degrees to radians\n function toRadians(degrees) {\n return degrees * Math.PI \/ 180;\n }\n\n \/\/ Calculate distance using Haversine formula\n function calculateDistance(lat1, lon1, lat2, lon2) {\n const R = 6371; \/\/ Radius of Earth in kilometers\n\n const dLat = toRadians(lat2 - lat1);\n const dLon = toRadians(lon2 - lon1);\n\n const a =\n Math.sin(dLat \/ 2) * Math.sin(dLat \/ 2) +\n Math.cos(toRadians(lat1)) * Math.cos(toRadians(lat2)) *\n Math.sin(dLon \/ 2) * Math.sin(dLon \/ 2);\n const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));\n\n const distance = R * c; \/\/ Distance in kilometers\n return distance;\n }\n\n \/\/ Event listener for the calculate button\n calculateBtn.addEventListener('click', () => {\n const originName = originDistrictSelect.value;\n const destinationName = destinationDistrictSelect.value;\n\n \/\/ Hide previous messages\n resultDiv.classList.add('hidden');\n errorMessageDiv.classList.add('hidden');\n\n if (originName === destinationName) {\n errorMessageDiv.classList.remove('hidden');\n return;\n }\n\n const origin = districts.find(d => d.name === originName);\n const destination = districts.find(d => d.name === destinationName);\n\n if (origin && destination) {\n const distance = calculateDistance(origin.lat, origin.lon, destination.lat, destination.lon);\n resultDiv.textContent = `Distance between ${originName} and ${destinationName}: ${distance.toFixed(2)} km`;\n resultDiv.classList.remove('hidden');\n } else {\n \/\/ This case should ideally not happen if dropdowns are populated correctly\n errorMessageDiv.textContent = \"An error occurred. Please try again.\";\n errorMessageDiv.classList.remove('hidden');\n }\n });\n\n \/\/ Initialize the app\n populateDistricts();\n<\/script><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"Istanbul District Distance Calculator Istanbul District Distance Calculator<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/expotil.com\/src\/index.php\/wp-json\/wp\/v2\/posts\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/expotil.com\/src\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/expotil.com\/src\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/expotil.com\/src\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/expotil.com\/src\/index.php\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":1,"href":"https:\/\/expotil.com\/src\/index.php\/wp-json\/wp\/v2\/posts\/6\/revisions"}],"predecessor-version":[{"id":7,"href":"https:\/\/expotil.com\/src\/index.php\/wp-json\/wp\/v2\/posts\/6\/revisions\/7"}],"wp:attachment":[{"href":"https:\/\/expotil.com\/src\/index.php\/wp-json\/wp\/v2\/media?parent=6"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/expotil.com\/src\/index.php\/wp-json\/wp\/v2\/categories?post=6"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/expotil.com\/src\/index.php\/wp-json\/wp\/v2\/tags?post=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}