Forum
Aktif konular
Üyeler
Kurallar
Arama
Web Sitesi İçin Globe Web Sitesi İçin Globe
-
Herkese İyi pazalar Umarım iyisinizdir .
1 tane web sitem var bu web sitesinin
-Anasayfasına globe eklmek istiyorum
- Sürekli dönen 3D dünya
- Ülkelerin sınır çizgileri - Başkentler üzerinde işaretleme (marker) , Başkent görselleri gösterimi , Arama (search) özelliği — ülke adıyla arama yapınca 3d olarak ülkenin belirginleşmesi , Başkent marker’ına tıklayınca URL yönlendirmesi kapsayacak şekilde eksiksiz tam liste ,
Hocalar bunu nasıl yapabiliriz veya yaptırmaya kalksak ne kadara mal olur
-
https://codepen.io/sohrabzia/pen/MWNwyYP
Şu tarz hazır bir dalavere bulup düzenlemeler için claude'dan yardım alabilirsin.
-
EnableTurk bunu yazdı
https://codepen.io/sohrabzia/pen/MWNwyYP
Şu tarz hazır bir dalavere bulup düzenlemeler için claude'dan yardım alabilirsin.
saol hocam bi kontrol edelim
-
hocalarım bu işi yapabilecek birisi olabilirmi
nekadar tutar ve ne kadar sürer -
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>TBT 3D</title> <style> body, html { margin: 0; padding: 0; overflow: hidden; width: 100%; height: 100%; background: #000; } #globeContainer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .controls { position: absolute; top: 20px; right: 20px; z-index: 5; background: rgba(0,0,0,0.7); padding: 15px; border-radius: 8px; color: #fff; font-family: Arial, sans-serif; max-width: 280px; } #search { width: 100%; padding: 8px; border: none; border-radius: 4px; margin-bottom: 10px; font-size: 14px; } #infoPanel { display: none; margin-top: 10px; font-size: 14px; } #infoPanel h3 { margin: 0 0 5px; font-size: 16px; } #infoPanel a { color: #3fc9ff; text-decoration: underline; font-size: 14px; } </style> </head> <body> <div id="globeContainer"></div> <div class="controls"> <input id="search" placeholder="Ülke ara..." /> <div id="infoPanel"> <h3 id="countryName"></h3> <p>Başkent: <span id="capital"></span></p> <a id="moreInfo" href="#" target="_blank">Detaylar</a> </div> </div> <script src="https://unpkg.com/globe.gl"></script> <script> const countryData = [ { name: "Türkiye", capital: "Ankara", lat: 39.9334, lng: 32.8597, url: "https://tr.wikipedia.org/wiki/Ankara" }, { name: "Almanya", capital: "Berlin", lat: 52.52, lng: 13.405, url: "https://tr.wikipedia.org/wiki/Berlin" }, { name: "Fransa", capital: "Paris", lat: 48.8566, lng: 2.3522, url: "https://tr.wikipedia.org/wiki/Paris" }, { name: "İtalya", capital: "Roma", lat: 41.9028, lng: 12.4964,url: "https://tr.wikipedia.org/wiki/Roma" }, { name: "İspanya",capital: "Madrid", lat: 40.4168, lng: -3.7038,url: "https://tr.wikipedia.org/wiki/Madrid" } ]; const world = Globe()(document.getElementById('globeContainer')) .globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg') .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png') .showAtmosphere(true).atmosphereColor('#3fc9ff') .pointsData(countryData) .pointLat(d => d.lat) .pointLng(d => d.lng) .pointColor(() => 'red') .pointAltitude(0.02) .pointRadius(0.6) .onPointClick(d => showInfo(d)); const controls = world.controls(); controls.autoRotate = true; controls.autoRotateSpeed = 0.5; function showInfo(d) { document.getElementById('countryName').textContent = d.name; document.getElementById('capital').textContent = d.capital; document.getElementById('moreInfo').href = d.url; document.getElementById('infoPanel').style.display = 'block'; controls.autoRotate = false; world.pointOfView({ lat: d.lat, lng: d.lng, altitude: 1.5 }, 1000); } document.getElementById('search').addEventListener('input', e => { const term = e.target.value.toLowerCase(); if (term.length > 2) { const found = countryData.find(c => c.name.toLowerCase().includes(term) || c.capital.toLowerCase().includes(term) ); if (found) showInfo(found); } }); window.addEventListener('resize', () => { world.width([window.innerWidth]); world.height([window.innerHeight]); }); </script> </body> </html> -
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/> <title>3D Dönen Dünya – Özel Başkent Linkleri</title> <link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet" /> <link href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.css" rel="stylesheet" /> <style> html, body { margin: 0; padding: 0; width: 100%; height: 100%; } #map { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; } .mapboxgl-ctrl-geocoder { max-width: 300px; } .marker { cursor: pointer; } </style> </head> <body> <div id="map"></div> <script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script> <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.min.js"></script> <script> const capitalData = { "Türkiye": { coords:[32.8597,39.9334], url:"https://tr.wikipedia.org/wiki/Ankara" }, "Almanya": { coords:[13.405,52.52], url:"https://tr.wikipedia.org/wiki/Berlin" }, "Fransa": { coords:[2.3522,48.8566], url:"https://tr.wikipedia.org/wiki/Paris" }, "İtalya": { coords:[12.4964,41.9028],url:"https://tr.wikipedia.org/wiki/Roma" }, "İspanya": { coords:[-3.7038,40.4168],url:"https://tr.wikipedia.org/wiki/Madrid" } }; mapboxgl.accessToken = 'pk.eyJ1IjoiY3liZXJtb2xlIiwiYSI6ImNtNXYzanMyNjAyeXIya3M5a3NoMGIzcDMifQ.dugw03J59aShwC2LRelpgw'; const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/light-v11', projection: 'globe', center: [0,20], zoom: 1.3, bearing: 0, pitch: 30 }); let rotating = true; function rotate() { if (!rotating) return; map.rotateTo(map.getBearing() + 0.05, { duration: 100 }); requestAnimationFrame(rotate); } map.on('style.load', () => { map.setFog({}); rotate(); }); const geocoder = new MapboxGeocoder({ accessToken: mapboxgl.accessToken, types: 'country', placeholder: 'Ülke ara…', mapboxgl: mapboxgl }); map.addControl(geocoder, 'top-left'); let currentMarker = null; geocoder.on('result', e => { const countryName = e.result.text; const bbox = e.result.bbox; const capInfo = capitalData[countryName]; rotating = false; if (bbox) { map.fitBounds(bbox, { padding:20, duration:2000 }); } else { map.flyTo({ center:e.result.center, zoom:2.5, duration:2000 }); } if (currentMarker) currentMarker.remove(); if (capInfo) { const el = document.createElement('div'); el.className = 'marker'; el.style.backgroundImage = 'url(https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png)'; el.style.width = '30px'; el.style.height = '40px'; el.style.backgroundSize = '100%'; currentMarker = new mapboxgl.Marker(el) .setLngLat(capInfo.coords) .addTo(map); el.addEventListener('click', () => { window.open(capInfo.url, '_blank'); }); } }); geocoder.on('clear', () => { if (currentMarker) currentMarker.remove(); if (!rotating) { rotating = true; rotate(); } map.flyTo({ center:[0,20], zoom:1.3, bearing:0, pitch:30, duration:2000 }); }); </script> </body> </html>benden bukadar :) benim api kodu kullanmada değiştirirsin heralde istediğin bu
-
blackbxo daha iyisini yaptı:
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/> <title>3D Dönen Dünya – Başkente Dönerek Git</title> <link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet" /> <link href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.css" rel="stylesheet" /> <style> html, body { margin:0; padding:0; width:100%; height:100%; } #map { position:absolute; top:0; left:0; width:100%; height:100%; } .mapboxgl-ctrl-geocoder { max-width:300px; } .marker { cursor:pointer; } </style> </head> <body> <div id="map"></div> <script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script> <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.2/mapbox-gl-geocoder.min.js"></script> <script> const capitalData = { "Türkiye": { coords: [32.8597, 39.9334], url: "https://tr.wikipedia.org/wiki/Ankara" }, "Almanya": { coords: [13.4050, 52.5200], url: "https://tr.wikipedia.org/wiki/Berlin" }, "Fransa": { coords: [2.3522, 48.8566], url: "https://tr.wikipedia.org/wiki/Paris" }, "İtalya": { coords: [12.4964, 41.9028], url: "https://tr.wikipedia.org/wiki/Roma" }, "İspanya": { coords: [-3.7038, 40.4168], url: "https://tr.wikipedia.org/wiki/Madrid" }, "Güney Kore": { coords: [126.9778, 37.5665], url: "https://tr.wikipedia.org/wiki/Seul" } }; mapboxgl.accessToken = 'pk.eyJ1IjoiY3liZXJtb2xlIiwiYSI6ImNtNXYzanMyNjAyeXIya3M5a3NoMGIzcDMifQ.dugw03J59aShwC2LRelpgw'; const map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/light-v11', projection: 'globe', center: [0,20], zoom: 1.3, bearing: 0, pitch: 30 }); let rotating = true; function rotate() { if (!rotating) return; map.rotateTo(map.getBearing() + 0.1, { duration: 100 }); requestAnimationFrame(rotate); } map.on('style.load', () => { map.setFog({}); rotate(); }); const geocoder = new MapboxGeocoder({ accessToken: mapboxgl.accessToken, types: 'country', placeholder: 'Ülke ara…', mapboxgl: mapboxgl }); map.addControl(geocoder, 'top-left'); let currentMarker = null; geocoder.on('result', e => { const name = e.result.text; const cap = capitalData[name]; rotating = false; if (currentMarker) currentMarker.remove(); if (cap) { map.flyTo({ center: cap.coords, zoom: 4.5, speed: 0.3, curve: 1.7, easing: t => t, essential: true }); map.once('moveend', () => { const el = document.createElement('div'); el.className = 'marker'; el.style.backgroundImage = 'url(https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png)'; el.style.width = '30px'; el.style.height = '40px'; el.style.backgroundSize = '100%'; currentMarker = new mapboxgl.Marker(el) .setLngLat(cap.coords) .addTo(map); el.addEventListener('click', () => window.open(cap.url, '_blank')); }); } }); geocoder.on('clear', () => { if (currentMarker) currentMarker.remove(); rotating = true; rotate(); map.flyTo({ center:[0,20], zoom:1.3, bearing:0, pitch:30, duration:2000 }); }); </script> </body> </html> -
cybermole bunu yazdı
benden bukadar :) benim api kodu kullanmada değiştirirsin heralde istediğin bu
hocam tam aradığıma çok yakın, çok saol ellerin dert görmesin ,
Birkaç işlem kaldı onlarıda çözebilirim umarım :/
otomatik rotate ülke yazmadıkça otomatik dönecek, ülke aratınca sınır çizgileri birleşecek işlem kaldı ücreti neyse yapabilirmiyiz hocam
birde gerçekçi bir dünya görüntüsü :) -
lacuradeamore bunu yazdı
Herkese İyi pazalar Umarım iyisinizdir .
1 tane web sitem var bu web sitesinin
-Anasayfasına globe eklmek istiyorum
- Sürekli dönen 3D dünya
- Ülkelerin sınır çizgileri - Başkentler üzerinde işaretleme (marker) , Başkent görselleri gösterimi , Arama (search) özelliği — ülke adıyla arama yapınca 3d olarak ülkenin belirginleşmesi , Başkent marker’ına tıklayınca URL yönlendirmesi kapsayacak şekilde eksiksiz tam liste ,
Hocalar bunu nasıl yapabiliriz veya yaptırmaya kalksak ne kadara mal olur
Hocam yapay zeka ile ücretsiz yapabilirsin. Buraya yazdıklarını biraz daha detaylandır ve chatgpt yada cursor'a at. Mis gibi yapıyor.
Çok benzeri bir projede yapmıştım kendime.
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Cevapla