Mapbox ile projemize harita eklemek

Merhabalar sayın bu yazıyı okuyan,

Bu yazı ilk blog yazım olduğu için hatalarım olabilir, affınıza sığınarak başlıyorum.

İlk olarak mapbox.com giriş yaptıktan sonra Mapbox adresinden access tokenimizi alıyoruz. Kopyaladığımız tokeni bir not defterine kaydetmenizi öneririm.

Adım 1 – Html sayfası hazırlanması.

İlk olarak boş bir .html sayfası oluşturalım ve gerekli mapbox kaynak dosyalarını ekleyelim.

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8" />
5    <title>Mapbox ile siteye harita eklemek.</title>
6
7    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
8    <script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
9    <link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
10
11    <style>
12      body {
13        margin: 0;
14        padding: 0;
15      }
16      #map {
17        position: absolute;
18        top: 0;
19        bottom: 0;
20        width: 100%;
21      }
22    </style>
23  </head>
24
25  <body></body>
26</html>

Adım 2 – Mapbox Entegresi

Body alanımıza bir div oluşturup id verelim. Mapbox gerekli kaynak ve çizimleri #map divine yansıtacaktır.

1<body>
2  <div id="map"></div>
3</body>

Sıra geldi javascript kodlarımıza:

İlk önce hangi koordinatlara marker ekleyeceğimizi belirlemek için https://epsg.io/map adresinden koordinatlarımızı belirleyelim.

1var place = [28.9741287, 41.0256678] // istanbul
2
3mapboxgl.accessToken = 'buraya tokenimizi yazıyoruz.'
4var map = new mapboxgl.Map({
5  container: 'map',
6  style: 'mapbox://styles/mapbox/streets-v11', // kullanacağımız tema (alt kısımda bu konuya değineceğim)
7  center: place, // istanbul
8  zoom: 11 // yakınlaşma derecesi
9})

Adım 3 – Marker ekleme işlemi

1var marker = new mapboxgl.Marker()
2  .setLngLat(place) //istanbul
3  .addTo(map)

Marker ekleme işlememiz başarı ile gerçekleşti.

Zoom seviyesi arttırıp azaltarak yakınlık ve uzaklığı ayarlayabilirsiniz.

Adım 4 – Marker’a tıklama işleminin ardından pop-up gösterme aksiyonu

Pop-up bileşeni oluşturalım:

1var popup = new mapboxgl.Popup({ offset: 25 }).setText('Bereketzade, Galata kulesi, 34421 Beyoğlu/İstanbul.')

Marker ekleme kodumuza ekstra olarak .setPopup ekleyelim.

1new mapboxgl.Marker()
2  .setLngLat(place)
3  .setPopup(popup)
4  .addTo(map)

Pop-up ekleme işlemimiz de tamamlandı.

Adım 5 – Tema Değişimi

https://docs.mapbox.com/api/maps/#styles bu adresten haritamıza yerleştireceğimiz stillere göz atabilirsiniz. Ben şu an için dark temasını kullanacağım. Url kısmını kopyalayıp kodumuzdaki style alanına yapıştırıyorum.

1var map = new mapboxgl.Map({
2  ...
3  style: 'mapbox://styles/mapbox/dark-v10',
4  ...
5});

Ve en son görüntümüz bu şekilde oluştu.

Mapbox Ücretlendirme Politikası : https://www.mapbox.com/pricing/

Mapbox web sürümünü 50.000 Api isteğine kader ücretsiz kullanabilirsiniz.

Api isteği : Web uygulamasının haritayı ilk başlattığı anda yaptığı işlem. Her harita başlangıcı bir işleme denk gelmektedir . Haritanın yüklenmesi sınırsız vector tiles ve raster tiles Api’sinin çalışmasını tetikler, yaptığımız isteğe bunlar dahil edilmez.

Kodlar: https://jsfiddle.net/burakalp/xqnd4bLr/

Sorularınız varsa, yorumda bahsederseniz mutlaka yardımcı olmak isterim.

Teşekkürler.

Ayla Sever Çalık‘a verdiği editoryal destek için ayrıca teşekkür ederim.

Mapbox ile projemize harita eklemek

Adım 1 – Html sayfası hazırlanması.

Adım 2 – Mapbox Entegresi

Adım 3 – Marker ekleme işlemi

Adım 4 – Marker’a tıklama işleminin ardından pop-up gösterme aksiyonu

Adım 5 – Tema Değişimi

More articles from Burak Alp

Frontend Resources

Mapbox ile projemize harita eklemek