Gallipoli 3D Map

Kategori: Uncategorized

Hello world!

Ekim 10, 2026

Uncategorized

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
<link href='https://unpkg.com/maplibre-gl@4.0.2/dist/maplibre-gl.css' rel='stylesheet' />
<script src='https://unpkg.com/maplibre-gl@4.0.2/dist/maplibre-gl.js'></script>
<style>
#g3d-wrap{font-family:Inter,sans-serif;background:#0a0f1c;color:#fff;margin:-20px}
#map3d{width:100%;height:92vh}
.g3d-ui{position:absolute;z-index:5;top:20px;left:20px;background:rgba(0,0,0,0.75);backdrop-filter:blur(10px);padding:18px 20px;border-radius:16px;border:1px solid rgba(255,255,255,0.15);max-width:340px}
.g3d-ui h1{font-size:26px;font-weight:900;line-height:0.9;margin:0}
.g3d-ui h1 span{color:#ff3b30}
.g3d-ui p{font-size:13px;opacity:0.8;margin-top:8px}
.g3d-ui button{margin-top:12px;padding:10px 16px;border-radius:100px;border:0;font-weight:700;cursor:pointer}
.btnR{background:#ff3b30;color:#fff}
.btnW{background:#fff;color:#000;margin-left:6px}
.hero{position:relative}
</style>
<div id="g3d-wrap"><div class="hero"><div id="map3d"></div><div class="g3d-ui"><h1>GALLIPOLI<br><span>3D MAP</span></h1><p>Çanakkale Gelibolu - Gerçek 3D arazi. Döndür, eğ, keşfet.</p><button class="btnR" onclick="fly('anzac')">Anzac Koyu</button><button class="btnW" onclick="fly('all')">Genel Bakış</button></div></div></div>
<script>
const map=new maplibregl.Map({container:'map3d',style:'https://demotiles.maplibre.org/style.json',center:[26.28,40.23],zoom:11.2,pitch:65,bearing:-20,antialias:true});
map.addControl(new maplibregl.NavigationControl(),'top-right');
map.on('load',()=>{
map.addSource('terrain',{type:'raster-dem',tiles:['https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png'],encoding:'terrarium',tileSize:256});
map.setTerrain({source:'terrain',exaggeration:1.8});
[[26.289,40.253,"57. Alay"],[26.309,40.245,"Conkbayiri"],[26.275,40.229,"Anzac Koyu"],[26.22,40.05,"Sehitler Abidesi"]].forEach(c=>{const el=document.createElement('div');el.style.cssText='width:12px;height:12px;background:#ff3b30;border:2px solid #fff;border-radius:50%;box-shadow:0 0 12px #ff3b30';new maplibregl.Marker({element:el}).setLngLat([c[0],c[1]]).setPopup(new maplibregl.Popup().setText(c[2])).addTo(map);});
});
function fly(t){if(t==='anzac')map.flyTo({center:[26.28,40.23],zoom:13,pitch:70,bearing:25,duration:2500});else map.flyTo({center:[26.28,40.23],zoom:11.2,pitch:65,bearing:-20,duration:2500});}
</script>
Kategori: Uncategorized

Hello world!
