Nuxt.js Projesine Mapbox Harita Servisi Nasıl Eklenir?

Bir projem için Google Maps dışında harita servisi araştırırken Mapbox’a denk geldim. Biraz inceleyince projem için uygun olduğunu görüp kullanmaya karar verdim.

Benim projem Nuxt projesi olduğu için onun üzerinde kullanımı göstermeye çalışacağım.

Gogole gibi Mapbox’da kendi servislerini kullanabilmemiz için kayıt olup API key almamızı istiyor. Bu linkten kayıt olup key API key aldıktan sonra aşağıdaki işlemlere geçebilirsiniz.

API key aldıktan sonra ilk olarak paketi sisteme dahil ederek başlayalım.

npm install mapbox-gl

1	npm install mapbox-gl

veya

yarn add mapbox-gl

1	yarn add mapbox-gl

Ardından nuxt.config.js içine aşağıdaki gibi CSS eklemesini yapalım.

head: {
    link: [
        {
            rel: 'stylesheet',
            href: 'https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css',
        },
    ],
},

head: {

link: [

{

rel: 'stylesheet',

href: 'https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css',

Gerekli ön hazırlığı bitirdikten sonra haritayı görüntülemek istediğiniz sayfayı açarak aşağıdaki kodu ekleyelim.

mounted() {
    const mapboxgl = require('mapbox-gl')
    new mapboxgl.Map({
        accessToken: 'API_KEY_BURAYA_GELMELI',
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        center: [35.75810533644403, 39.2794712542655], // [longitude, latitude ]
        zoom: 6,
    })
},

mounted() {

const mapboxgl = require('mapbox-gl')

new mapboxgl.Map({

accessToken: 'API_KEY_BURAYA_GELMELI',

container: 'map',

style: 'mapbox://styles/mapbox/streets-v9',

center: [35.75810533644403, 39.2794712542655], // [longitude, latitude ]

zoom: 6,

})

Son olarak haritamızın görüntüleneceği div elemanını template içine ekleyelim.

<div id="map" class="map"></div>

1	<div id="map" class="map"></div>

İşlem başarıyla tamamlandı. Eğer CSS tarafında bir sorununuz olmazsa harita görüntülemek istediğiniz yerde sorunsuz görüntülenmeli.

Bazı durumlarda CSS çakışmalarından dolayı veya z-index farkından dolayı harita görünmeyebilir. Bu gibi durumlarda biraz müdahale etmeniz gerekecektir.

CSS sorunu olmadan çalışan örneğini buradan alabilirsiniz.

<template>
    <div id="map" class="map"></div>
</template>

<script>
    export default {
        name: 'Index',
        mounted() {
            const mapboxgl = require('mapbox-gl')
            new mapboxgl.Map({
                accessToken: 'API_KEY_BURAYA_GELMELI',
                container: 'map',
                style: 'mapbox://styles/mapbox/streets-v9',
                center: [35.75810533644403, 39.2794712542655], // [longitude, latitude ]
                zoom: 6,
            })
        },
    }
</script>

<style lang="scss" scoped>
    .map {
        position: absolute;
        z-index: 9999;
        display: block;
        width: 100%;
        height: 100%;
    }
</style>

</template>

export default {

name: 'Index',

mounted() {

const mapboxgl = require('mapbox-gl')

new mapboxgl.Map({

accessToken: 'API_KEY_BURAYA_GELMELI',

container: 'map',

style: 'mapbox://styles/mapbox/streets-v9',

center: [35.75810533644403, 39.2794712542655], // [longitude, latitude ]

zoom: 6,

})

}

</script>

.map {

position: absolute;

z-index: 9999;

display: block;

width: 100%;

height: 100%;

}

</style>

Herhangi bir sorunuz olursa yorum yoluyla ulaşabilirsiniz.

Faydalı olması dileğiyle..

Nuxt.js Projesine Mapbox Harita Servisi Nasıl Eklenir?

İlk Yorumu Siz Yapın

Bir yanıt yazın Yanıtı iptal et