React ve Mapbox Kullanarak Web'deki Haritalar

Web uygulamaları, kullanıcılara değerli konum tabanlı bilgiler sağlayan haritaların dahil edilmesinden büyük ölçüde yararlanmıştır. Haritalar, alışılmadık yerlerde gezinmekten yakındaki restoranları keşfetmeye kadar dünyayla etkileşimimizi dönüştürdü. Sonuç olarak, haritaların web sitelerine entegrasyonu son zamanlarda giderek daha popüler hale geldi. Bununla birlikte, hem işlevsel hem de kullanıcı dostu haritalar tasarlamak, özellikle bu alanda deneyimi olmayanlar için zorlayıcı olabilir. Bu yazımda tarayıcınızda etkili haritalar oluşturma konusunda faydalı ipuçları paylaşacağım.

Teknoloji yığını

Teknolojileri tartışalım. Haritalarla çalışırken genellikle üç katman kullanırız:

• Düğmeler ve formlar içeren kullanıcı arayüzünün oluşturulması. Bizim yığınımızda React bu rolü yerine getiriyor;

• Haritanın oluşturulması ve kullanıcı etkileşiminin etkinleştirilmesi. Bunun için Mapbox'ı kullanıyoruz;

• İşaretçiler veya çokgenler hakkındaki bilgiler gibi sunucudan veriler getiriliyor. Verileri almak için tarayıcının yerleşik getirme özelliğini kullanırız.

  
  

Haritalarla çalışırken teknoloji yığınımızı daha iyi anlamak için her bir öğeyi inceleyelim.

Tepki

Tepki kitaplık, sayfa öğeleriyle rahat ve verimli bir şekilde çalışmanıza olanak tanır. Facebook tarafından kendi kullanımları için geliştirilmiştir ve sayfalarda düğmeler, formlar ve diğer etkileşimli öğeler gibi çok sayıda bileşen içerir. Örneğin, Facebook bir uzlaşma algoritması Farklı durumları hızlı bir şekilde karşılaştırmak için.

Bir sayfadaki öğeleri değiştirmek bir tarayıcı için en pahalı işlem olduğundan, bunu mümkün olduğunca verimli bir şekilde yapmak çok önemlidir. Bu sorunu çözmek için Facebook mühendisleri, bir sayfada hızlı ve basit öğe değişikliklerine olanak tanıyan React kitaplığını geliştirdi. React, bir sayfada hızlı durum değişiklikleri sağlamanın yanı sıra, bunu doğrudan DOM öğeleriyle çalışmadan bildirimsel olarak yapmamıza da olanak tanır. Bunun yerine genellikle bir soyutlama kullanırız. JSX , HTML'ye benziyor. Bir örnek düşünelim:

 // It's our state. Is the user our friend or not? // false by default const [isFriend, setIsFriend] = useState(false) // Depending on the state, we show the text on the button const buttonText = isFriend ? 'Your my Friend' : 'Add as Friend' // There is JSX, syntax for UI // In this case, we display a button, when clicked, we change the state return ( <button onClick={() => setIsFriend(true)}>{buttonText}</button> )

Bileşenleri hiyerarşinin en altında formlar, düğmeler ve girişler gibi sıradan DOM öğeleriyle iç içe yerleştirmek mümkündür. Bu basit öğeleri bir araya getirerek tam bir form gibi daha karmaşık öğeler oluşturabiliriz:

 const Form = () => ( <form> <input name="Email"/> <input name="Password"/> </form> ) const App = () => ( <main> <h1>My form!</h1> <Form /> </main> )

React haritalar bağlamında bize nasıl yardımcı oluyor? Sayfadaki harita, bir düğmeye veya forma benzer şekilde etkileşimli olduğundan, haritaya tıklamalar gibi etkinlikler aracılığıyla haritanın oluşturulmasını ve etkileşimini optimize etmeyi amaçlıyoruz. React bu optimizasyonun elde edilmesine yardımcı olabilir. İşte nasıl çalıştığına dair bir örnek:

 // Use React to render the map with different event handlers // and render markers return ( <BaseMap onInitMap={() => console.log('I am alive!')} onClickMap={() => console.log('Click!')} onDestroyMap={() => console.log('Oh no!')} > <ClustersMarkers /> <PostsMarkers /> <ListingsMarkers /> </BaseMap> )

React ile çalışırken, sayfadaki öğelerin etkili bir şekilde manipülasyonuna, hızlı değişikliklere ve olaylar aracılığıyla onlarla etkileşime geçilmesine olanak tanıdığını unutmamak önemlidir. Bu, HTML'ye benzeyen bir soyutlama yoluyla elde edilir ve daha basit bileşenlerden karmaşık bileşenler oluşturmayı kolaylaştırır.

Harita kutusu

Şimdi haritanın kendisini tartışalım. Harita oluşturmak ve kullanmak zorlu olabilir ve yalnızca birkaç ürün şirketi haritaları sıfırdan tasarlayabilir. Tipik olarak çoğu kişi, denenmiş ve test edilmiş, kullanıcı dostu bir API içeren önceden hazırlanmış kitaplıklara güvenir.

Google Haritalar, Leaflet, Bing Haritalar, Mapbox ve daha fazlası dahil olmak üzere çok sayıda dinamik harita sağlayıcı mevcuttur. Ancak şuna odaklanacağız: Harita kutusu Kapsamlı özellikleri ve uygun fiyat politikası nedeniyle. Örneğin, Google Haritalar ücretleri 700$ ayda 100.000 harita görüntülemesi için, Mapbox ise yalnızca ücret alır 250$ . Üstelik Mapbox ayda 50.000'e kadar harita görünümüne ücretsiz erişim sunuyor.

Harita kutusu teklifleri Harita Kutusu Stüdyosu haritalar için genellikle Photoshop'la karşılaştırılan bir araç. Bu araçla tasarımcılar özel stiller oluşturabilir, gereksiz harita öğelerini gizleyebilir ve ev görüntülerini kaldırabilir. Faydalarından biri görünürlüğü artırma yeteneğidir. İlgi noktaları . Diğer bir avantaj ise harita stilini kurumsal renklerde deneme fırsatıdır. Ancak kullanıcı deneyimini göz önünde bulundurmak ve yeşil çimen ve mavi su dahil tanıdık bir renk paletini korumak önemlidir. Mapbox Studio'nun en iyi yanı, gereksinimleri geliştirme ve aktarma ihtiyacını ortadan kaldırarak harita tasarım sürecini basitleştirmesi ve sonuçta haritalarla çalışma maliyetini düşürmesidir.

Ek olarak, Mapbox şunları sağlar: coğrafi kodlama aracı Adresleri koordinatlara veya tam tersini dönüştürebilen bu özellik, harita üzerinde noktaların yerini belirleme işlemini basitleştiriyor. Ancak aracın dünya çapında kapsama yetersiz kalarak bazı projelerde zorluklara yol açabilir. Mapbox veri topluyor çok sayıda kaynak hükümetler, OpenStreetMap gibi açık veri girişimleri ve özel şirketler gibi.

Mapbox çeşitli seçenekler sunar pratik örnekler , rağmen dokümantasyon bazı iyileştirmelerden faydalanabilir. Örneğin, işaretleyici işlevselliğini dahil ederken örnekler, belgelerden daha bilgilendirici olabilir. Ayrıca birden fazla bileşeni birleştirirken işaretçi kümeleri, özel veri yükleme, normalleştirme ve işaretçi durumu değişiklikleri gibi zorluklar ortaya çıkabilir.

Mapbox haritalarını tekrar gözden geçirelim. Ne yapar Harita Kutusu API'si Yapmak?

• Haritayı sayfadaki bir HTML öğesinde başlatır;

• Haritayı oluşturan görselleri yükler ve işler;

• Giriş verisi olarak GeoJson'u kullanarak işaretleyiciler gibi ek öğeler çizer;

• Tıklamalar veya yakınlaştırma değişiklikleri gibi yönetilebilecek olaylar üretir.

  
  

Bu öğelerin her birine daha yakından bakalım.

Mapbox, döşemeleri kullanarak harita oluşturma konusunda uzmanlaşmıştır. Döşemeler, daha büyük haritayı oluşturan küçük kare resimlerdir. Bir döşemenin varsayılan boyutu 512x512 pikseldir ve ikisinden biri olabilir: vektör veya raster . Vektör kutucuklar yolları, binaları, İlgi Çekici Noktaları (PoI) ve daha fazlasını görüntülemek için kullanılır. Dinamik olarak şekillendirilebilirler, hafiftirler ve haritayla sorunsuz etkileşime olanak tanırlar. Raster fayanslar ise uydu görüntülerinin görüntülenmesi için kullanılır.

Bildiğiniz gibi, Mapbox Studio harita döşemelerine dahil etmek istediğimiz belirli verileri seçmemize olanak tanır. Bu fayanslar daha sonra bir yere yerleştirilir. tuval Web'deki görüntüleri ve diğer grafik öğelerini görüntüleyen, tarayıcıda bulunan özel bir DOM öğesidir. Size bir fikir vermek gerekirse, Google Dokümanlar'da dokümanların tuvalde görüntülenmesine benzer.

 <canvas width="100" height="100" />

Mapbox, döşemelerin yüklenmesini, eklenmesini ve güncellenmesini yönetir. Tek yapmamız gereken, haritanın nerede görüntülenmesini istediğimizi ve yakınlaştırma düzeyi veya haritanın koordinatları gibi başlangıç koşullarını belirtmektir. Mapbox'ı kullanmak için bir erişim belirteci Mapbox hesabınızda bulunabilecek benzersiz bir anahtardır. Temel bir harita oluşturmak için işte kısa bir örnek; ancak daha fazla bilgi için şuraya göz atın: bağlantı tedarik edilen:

 mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; const map = new mapboxgl.Map({ container: 'map', // we can use an Id or an element style: 'mapbox://styles/mapbox/streets-v11', // URL for styles center: [-74.5, 40], // initial coordinates [lng, lat] zoom: 9, // initial zoom });

Bundan sonra sayfada 'map' kimliğine sahip bir öğede bir harita elde edeceğiz.

Kullanıcılara harita üzerinde daha fazla bilgi sağlamak için genellikle belirli bir kuruluşun konumunu veya belirli bir alanın sınırlarını görüntüleriz. Bunu başarmak için, adı verilen özel bir veri formatını kullanıyoruz. GeoJSON ve Mapbox'a bu verilerin nasıl sergileneceği konusunda talimat verin.

GeoJSON, coğrafi yapıların haritalarda saklanmasına yönelik standart formattır. Adresler, konumlar, caddeler, otoyollar, sınırlar, ülkeler, eyaletler gibi coğrafi nesneleri tanımlayan çeşitli ilkel türleri ve bunların çok parçalı olarak bilinen kombinasyonlarını depolayabilir. GeoJSON 2008'de tanıtıldı ve şu şekilde temsil edildi:

 { "type": "Feature", // also can be FeatureCollection, it's collection of Feature "geometry": { "type": "Point", // also can be LineString, Polygon, MultiPolygon "coordinates": [125.6, 10.1] // for other types you can use Array with coordinates }, "properties": { // it's metadata, we can you that to show something on the map "name": "Dinagat Islands" } }

Mapbox'ta kullanılan koordinat sisteminden bahsedelim. Mapbox varsayılan olarak şunları kullanır: EPSG 3857 Bu, fayanslarla çalışmak için Dünya'yı düz bir yüzeye yansıtmanın bir yoludur. Bu, Web Mercator olarak bilinir ve çevrimiçi haritalar için standarttır. Ancak işaretleyiciler ve çokgenler hakkındaki verilerle uğraşırken, adı verilen farklı bir koordinat sistemi kullanır. EPSG4326 . Bu sistem, Dünya'nın elipsoidindeki koordinatları tanımlamak için enlem ve boylamdan yararlanır. Mapbox ve diğer harita sağlayıcılar, koordinatları otomatik olarak EPSG 4326'dan EPSG 3857'ye dönüştürür. projeksiyonlar map.setProjection metodunu kullanabiliriz.

Şimdi GeoJSON’un harita üzerinde nasıl görüntüleneceğini tartışacağız. Mapbox yararlı bulacağımız iki varlık sunar:

• Kaynak — Bu veri tohumudur. GeoJSON verileriyle yeni bir kaynak oluşturabilir ve bunu, örneğin özellik koleksiyonundaki her özellik için bir kimlik oluşturacak şekilde yapılandırabiliriz.

• Katman — Bu veri temsilidir. Kaynaktan gelen verileri sınırları göstermek gibi farklı şekillerde görüntüleyebiliriz.

  
  

Harita üzerinde poligon veya işaretleyicilerin görüntülenmesi için sunucudan GeoJson formatındaki verileri almamız gerekmektedir. Daha sonra bir kaynak oluşturuyoruz, verileri ona giriyoruz ve onu gerekli katmana bağlıyoruz.

 const geoJsonFeature = { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [ [-67.13734, 45.13745], [-66.96466, 44.8097], [-68.03252, 44.3252], [-67.13734, 45.13745] ] } } // Create source with our data map.addSource('ourSource', { 'type': 'geojson', 'data': geoJsonFeature }); // Add layer for background map.addLayer({ 'id': 'background', 'type': 'fill', 'source': 'ourSource', // название нашего source 'layout': {}, 'paint': { 'fill-color': '#0080ff', 'fill-opacity': 0.5 } }); // Add layer for border map.addLayer({ 'id': 'border', 'type': 'line', 'source': 'ourSource', 'layout': {}, 'paint': { 'line-color': '#000', 'line-width': 3 } });

Bu kodu çalıştırdıktan sonra şu sonucu elde ederiz:

Bu konu hakkında daha fazla bilgi edinmek için şu adrese başvurabilirsiniz: dokümantasyon Mapbox tarafından sağlanmıştır. Bu eğitimde haritayı başlatma ve verilerimizi sunma sürecini ele aldık. Daha sonra tıklama, sürükleme ve yakınlaştırma gibi olayların nasıl ele alınacağını keşfedeceğiz. Örneğin, olayları izlemek ve kullanıcı imlecini harita üzerinde hareket ettirdikçe koordinatları konsolda görüntülemek için Mapbox'ı kullanabiliriz. Bunu başarmak için, DOM öğeleriyle çalışma şeklimize benzer şekilde, istediğimiz olay türüyle on yöntemini çağırmamız yeterlidir.

 map.on('mousemove', (e) => { console.log(JSON.stringify(e.point)); }); // Result: {"x":330,"y":49}

Özetle neyi hatırlamamız gerekiyor? Mapbox, bir haritayı görüntülememize, verilerimizi onun üzerine çizmemize ve harita olaylarını işlememize olanak tanır. Mapbox aynı zamanda görsellerin (döşemelerin) yüklenmesi ve görüntülenmesiyle de ilgilenir.

Gidip getirmek

Hakkında bir kelime gidip getirmek . Verileri bir harita üzerinde nasıl oluşturacağımızı zaten gördük, ancak önce onu sunucudan almamız gerekiyor. Sayfayı yeniden yüklemeden arka planda sunucudan dinamik olarak veri talep ettiğimizde buna yaklaşım diyoruz. AJAX (“Eşzamanlı bir J avaScript ve X ML”). Verileri sunucudan eşzamansız olarak yüklemek için Axios veya XMLHttpRequest (yerel) gibi birçok araç vardır.

Neyi hatırlamalı? Sunucudan veri alıyoruz ve bunun için birçok kütüphane var ama biz fetch kullanacağız. Daha sonra, nüanslar olduğu için bunu özellikle haritalarla çalışırken nasıl yaptığımıza bakacağız.

React + Harita Kutusu

Şimdi yukarıda açıklanan teknolojilerin birlikte nasıl çalıştığını görelim. Öncelikle fetch kullanarak çokgeni görüntülemek için gereken verileri alacağız. Daha sonra haritanın başlatıldığını ilan edeceğiz ve yüklendikten sonra poligonu haritaya ekleyeceğiz.

Ayrıca çalışan bir örnek de bulabilirsiniz. bağlantı tedarik edilen.

 const useFetch = () => { /* Our data { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [ [ [-67.13734, 45.13745], [-68.03252, 44.3252], [-68.90478, 47.18479], [-67.13734, 45.13745], ] ] } } */ const [data, setData] = useState(null) useEffect(() => { fetch('https://our-api.com/polygon') .then(response => response.json()) .then(setData) .catch(e => { console.error(e) }) }, [setData]) return { data } } const BaseMap = () => { // Use the hook to fetch data const { data } = useFetch(GET_REGION); // Map instance const map = useRef(null); // DOM element const mapContainer = useRef(null); // Main logic - init the map and add the event useEffect(() => { if (map.current) { return; // initialize map only once } mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; map.current = new mapboxgl.Map({ container: mapContainer.current, style: 'mapbox://styles/mapbox/light-v10', // style URL (it's Mapbox's core style) center: [-68.137343, 45.137451], // starting position zoom: 5 // starting zoom }); // Handle event map.on('load', () => { const sourceId = 'source-region' // Add a data source containing GeoJSON data map.addSource(sourceId, { 'type': 'geojson', 'data': data.region // our data from Apollo }); // Add a new layer to visualize the polygon map.addLayer({ 'id': 'background', 'type': 'fill', 'source': sourceId, // reference the data source 'paint': { 'fill-color': '#0080ff', // blue color fill 'fill-opacity': 0.5 } }); // Add a black outline around the polygon map.addLayer({ 'id': 'outline', 'type': 'line', 'source': sourceId, 'paint': { 'line-color': '#000', 'line-width': 3 } }); }); }); return <div ref={mapContainer} />; } 

Çözüm

Gelecekteki mimarimizi destekleyen teknoloji yığınına baktık. Sonraki makalede, bir harita mimarisi tasarlamaya yardımcı olan ilkeleri, maksimum düşük bağlantı ve modüllerin yüksek uyumunun nasıl elde edileceğini ve ölçeklenebilir bir harita sisteminin nasıl sürdürülüp geliştirileceğini tartışacağız.

İlginiz için çok teşekkür ederim! İyi günler.