Web Geliştiricileri için En İyi Çevrimiçi Haritalama Araçları Araştırması: Yol Haritalarına Giden Yol Haritası

İyi ve kullanışlı bir harita gibisi yoktur.

Bugün, çevrimiçi haritaları kullanmak kolay ve ilgi çekici bir süreçtir. Kendi çevrimiçi haritalarınızı yapmak artık büyük bir girişim değil; ücretsiz ve basitten zengin özelliklere sahip ve kullanımı karmaşık olan çok çeşitli çevrimiçi haritalama araçlarına sahibiz. Web haritalamaya aşina olmayan web geliştiricileri için seçim ıstırabı korkutucu olabilir. Harita yapmak istiyorsunuz ama nereden başlayacağınızı ve hangi araçları kullanacağınızı bilmiyorsunuz. En iyi haritalama araçlarının bu listesine yardımcı olmak için buradayım.

Biraz Tarih

Başlangıcından beri teknolojinin harita yapımı ve haritaların nasıl kullanıldığı üzerinde etkisi olmuştur. Teknoloji ilerledikçe, haritacılık ve harita yapma süreçleri, papirüs üzerinde elle çizilmiş haritalardan web üzerinde etkileşimli haritalara kadar gelişti.

20. yüzyılın ikinci yarısı haritacılık için bir dönüm noktasıydı. Bilgisayarlar tercih edilen bir araç haline geldi. Hava fotoğrafçılığı, uydu görüntüleri ve uzaktan algılama, mekansal verilerin toplanma şeklini değiştirdi. Coğrafi Bilgi Sistemleri (CBS) doğdu. Sonunda, CBS haritaları masaüstünden web'e geçmeye başladı ve büyük CBS satıcıları çevrimiçi haritalar için ilk çerçeveleri yapmaya başladı.

Ancak CBS haritalaması kolay değildir. Uygulamalarıyla birlikte birçok sunucu tarafı teknoloji, coğrafi standart ve protokol gerektirir. Jeo-uzamsal verileri ve harita projeksiyonlarını anlamayı, verilerin nasıl toplanacağını, verilerin nasıl görüntüleneceğini, hangi renklerin kullanılacağını, verilerin belirli ölçeklere nasıl genelleştirileceğini, haritaya etiketlerin nasıl yerleştirileceğini, bir haritanın nasıl kurulacağını bilmeyi gerektirir. haritalara hizmet edecek sunucu, uzamsal bir veritabanının nasıl kullanılacağı vb. CBS, WMS, WFS, EPSG, CRS, SLD, GML, TMS gibi kısaltmalarla doludur ve bunlardan sadece birkaçını bilmek ve anlamak için kitap, akademik makale ve makale okumanız gerekir.

Çevrimiçi Haritalamanın Evrimi

İlk web haritaları tipik olarak yalnızca tek, çok küçük bir harita görüntüsü gösteriyordu. O zaman, kaydırma, bir adım, genellikle harita boyutunun yarısı kadar, sekiz olası pusula yönünden birinde - K, NW, W, GB, G, SE, D, KD - hareket ettirilerek uygulandı. Kullanıcı kaydırma veya yakınlaştırma düğmesini tıkladıktan sonra, harita sunucusunda tamamen yeni bir görüntünün oluşturulması, ağ üzerinden yüklenmesi ve ardından tarayıcı tarafından işlenmesi gerekir. Teknolojinin kısıtlamaları nedeniyle, haritalar tüm web sayfasının yalnızca çok küçük bir bölümünü işgal etti. Daha iyi etkileşim elde etmek için, Flash gibi gerekli eklentileri veya Java tabanlı özel eklentileri ve hatta yalnızca Internet Explorer'da çalışan ActiveX'i ilk haritalar.

Google, 2005 yılında Google Haritalar'ı tanıttığında harita dünyasını alt üst etti. Google, yenilikleri arasında sürükleyerek sürekli kaydırmayı da getirdi. Çözümleri, “fayans” adı verilen birçok küçük kare görüntüye bölünmüş bir haritayı görüntülemekti. Bu döşemeler bir "harita döşeme sunucusundan" oluşturuldu ve sunuldu ve genellikle 256 x 256 pikseldir. Yakınlaştırma ve kaydırma, artık tüm web sayfasını yeniden yüklemek yerine yalnızca yeni harita döşemelerinin yüklenmesini gerektiriyordu. Sonuç, tarayıcı penceresinin yarısından fazlasını kaplayan ve haritayı keşfetmek için sorunsuz bir deneyim sunan daha büyük bir görünür haritaydı. Düzgün yakınlaştırma ve kaydırma işlevleriyle haritayı "kaydırabilme" yeteneği nedeniyle, bu yeni haritalara "kaygan haritalar" adı verildi. Google ayrıca komut dosyası oluşturmaya da izin verdi, böylece kullanıcılar Google'ın haritalarını kendi web sitelerine koyabilir ve haritaya kendi verilerini ekleyebilir. Bu, başka bir yeni terimin ortaya çıkmasına neden oldu: "Harita mash-up'ları".

Birdenbire çevrimiçi haritalar popüler hale geldi; Web sitenize güzel görünen bir harita eklemek için artık haritacı veya CBS uzmanı olmanıza gerek yok. “Web 2.0” hareketinin kanatlarında ve etkileşimli içeriğin kolayca oluşturulmasını sağlayan HTML5, CSS3 ve SVG gibi modern teknolojilerin üzerine inşa edilen etkileşimli haritalar artık yeni bir rönesans yaşıyor.

Harita Verileri

Daha önce bahsedildiği gibi, erken çevrimiçi haritalar, CBS veri setlerine ve bunların mekansal coğrafi veritabanlarına dayanıyordu. Fiyat etiketi bir yana, pek çok kişinin bu verilere erişimi yoktu. Google ve OpenStreetMap (OSM) proje veri kümeleri bunu değiştirdi. Google'ın veritabanı özeldir ve kısıtlamalarla birlikte gelirken OSM, ücretsiz bir dünya haritası oluşturmak için ortak bir proje olarak Wikipedia kavramından ilham almıştır. OpenStreetMap, mekansal verilere katkıda bulunan ve bu verileri koruyan gönüllü haritacılar topluluğu tarafından oluşturulmuştur.

Kısacası, günümüzde kolay harita yapımına katkıda bulunan en büyük devrim, bir harita sunucusunun ve uzamsal veritabanının bakımıyla ilgili sıkıntıların ortadan kalkmış olmasıdır.

Web Haritalama Çerçevesi Seçme

Peki, tüm seçeneklerle doğru çevrimiçi haritalama aracını nasıl seçeriz? Bir yanda Google, MapQuest, Microsoft ve Nokia gibi ticari çevrimiçi harita sağlayıcıları var. Bu hizmetler, bunları görüntülemek ve bir haritayla etkileşim kurmak için harita döşemeleri ve özel JavaScript API'leri sağlar. Öte yandan, OpenStreetMap tabanlı harita döşemelerinin kolay yüklenmesini sağlayan açık kaynaklı haritalama projeleri vardır. Bunlara OpenLayers ve Leaflet dahildir. Bir de MapBox ve CartoDB gibi iş modellerini açık kaynak kitaplıklara ve OSM verilerine dayandıran, katma değer sağlayan ancak ücretsiz olmayan projeler var.

Bu kategorilerin her birinden bazı örneklere bir göz atalım. Burada, kod örnekleriyle birlikte her birine kısa bir genel bakış sağlayarak ve artılarını ve eksilerini tartarak bu çevrimiçi haritalama araçlarından birkaçını tartışacağım. Ayrıca, ayrı bir okuma olarak ilginç bulabileceğiniz bir D3.js haritalama öğreticisi yazdık.

Google Haritalar

En bariz seçenek olan Google Haritalar ile başlayalım. Google Haritalar API'sinin ilk sürümü Şubat 2005'te, mevcut Google Haritalar API'si v3 ise Haziran 2009'da tanıtıldı. Google Haritalar API'si yalnızca JavaScript API'si uç noktası değildir; daha fazla proje içerir ve kapsamlı özelleştirme ile Google Haritalar'ı web sayfalarına yerleştirmek için birkaç farklı yol sunar.

Mevcut mevcut Google Haritalar API'leri şunları içerir:

• Google Haritalar Javascript API'si
• Google Statik Haritalar API'sı
• Google Haritalar Yerleştirme API'sı
• iOS için Google Haritalar SDK'sı
• Google Haritalar Android API v2

Google, doğru API'yi seçmenize yardımcı olmak için bir API seçici geliştirdi.

Temel API'ler ücretsiz olsa da, bazı sınırlamaların getirildiğini belirtmekte fayda var. Birincisi, haritaların son kullanıcılar tarafından özgürce ve kamuya açık olması gerektiğidir. İkincisi, kullanım sınırlamalarıdır: siteniz herhangi bir 90 günlük süre boyunca her gün 25.000'den fazla harita yüklemesi oluşturmadığı sürece hizmet ücretsizdir. Daha büyük ölçeklere ihtiyacınız varsa veya özel bir harita istiyorsanız ya da kurumsal veya ticari bir web sitesi işletiyorsanız, Google Maps API for Work için ödeme yapmayı düşünmelisiniz.

uygulama

İşte kodda basit bir Google haritasının nasıl uygulanacağına dair bir örnek. API kullanarak basit bir haritanın nasıl oluşturulacağını, haritaya bir işaretçinin nasıl yerleştirileceğini ve fare tıklamasıyla bir açılır pencerenin nasıl açılacağını gösterir.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> </head> <body> <div></div> <script type="text/javascript"> var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: new google.maps.LatLng(45.8167, 15.9833), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow(); var marker = new google.maps.Marker({ position: new google.maps.LatLng(45.8167, 15.9833), map: map }); google.maps.event.addListener(marker, 'click', (function(marker) { return function() { infowindow.setContent("Zagreb"); infowindow.open(map, marker); } })(marker)); </script> </body> </html>

Ortaya çıkan harita şöyle görünür:

Artıları

• Google tarafından geliştirildi ve bakımı yapıldı.
• Web sitenize veya uygulamanıza bir harita eklemek için birçok farklı API.
• Büyük kullanıcı topluluğu.
• Çok sayıda örnek içeren çok iyi API belgeleri.

Eksileri

• Bir noktada ek görmeyeceğimizden emin miyiz?
• Herkes kullanıyor; tüm haritalar (çoğunlukla) aynı görünüyor.
• Kapalı ve özel API.
• Google tarafından resmi olarak geliştirilenlerin dışında eklenti yok.
• Google Maps for Work için net olmayan fiyatlandırma.

Açık Katmanlar

OpenLayers, MetaCarta tarafından Google Haritalar'a eşdeğer bir açık kaynak olarak geliştirildi ve ilk sürüm Haziran 2006'da yayınlandı. OpenLayers, zengin web tabanlı coğrafi uygulamalar oluşturmak için JavaScript API'sini uygulayan çevrimiçi bir haritalama aracıdır. Google Haritalar API'sı. OpenLayers çok hızlı bir şekilde çok fazla çekiş kazandı ve başlangıçta geliştirme hızlıydı. OpenLayers 2, sürüm 1'den sadece iki ay sonra, Ağustos 2006'da yayınlandı. Kütüphane sürekli olarak geliştiriliyordu ve sürekli olarak yeni özelliklere sahip yeni sürümler ekleniyordu. Bu hızlı ilerlemenin dezavantajı, sürüm 2 kitaplığının çok büyük ve hantal hale gelmesi, sonunda 1 MB boyutuna ulaşması ve 100.000'den fazla kod satırı içermesiydi! Pek çok özellikle birlikte gelmesine rağmen, normal kullanıcılar tarafından hepsine ihtiyaç duyulmadı.

Bu, kütüphanesinin kapsamlı bir şekilde yeniden yazılmasının ana nedeniydi. Amaç, projeksiyon desteği, standart protokoller ve düzenleme işlevi gibi OpenLayers 2'deki aynı işlevsellikle en son HTML5 ve CSS3 özelliklerini hedeflemekti. Ana odak, performans iyileştirmeleri, daha hafif yapılar, daha güzel görsel bileşenler ve daha iyi bir API idi. Bu çok geliştirilmiş OpenLayers 3, Ağustos 2014'te yayınlandı.

uygulama

Bakalım bu sefer OpenLayers 3 kullanarak bir önceki örnektekiyle aynı harita.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://openlayers.org/en/v3.2.1/build/ol.js"></script> <link rel="stylesheet" href="http://openlayers.org/en/v3.2.1/css/ol.css" type="text/css"> <script src="http://openlayers.org/en/v3.2.1/resources/jquery.min.js"></script> <script src="http://openlayers.org/en/v3.2.1/resources/bootstrap/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://openlayers.org/en/v3.2.1/resources/bootstrap/css/bootstrap.min.css" type="text/css"> </head> <body> <div class="map"> <div></div> </div> <script type="text/javascript"> var iconFeature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.transform([15.9833, 45.8167], 'EPSG:4326', 'EPSG:3857')), name: 'Zagreb', }); var iconStyle = new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', opacity: 0.75, src: 'http://ol3js.org/en/master/examples/data/icon.png' })) }); iconFeature.setStyle(iconStyle); var vectorSource = new ol.source.Vector({ features: [iconFeature] }); var vectorLayer = new ol.layer.Vector({ source: vectorSource }); var map = new ol.Map({ target: document.getElementById('map'), layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer ], controls: ol.control.defaults(), view: new ol.View({ center: ol.proj.transform([15.9833, 45.8167], 'EPSG:4326', 'EPSG:3857'), zoom: 10 }) }); var element = document.getElementById('popup'); var popup = new ol.Overlay({ element: element, positioning: 'bottom-center', stopEvent: false }); map.addOverlay(popup); map.on('click', function(evt) { var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) { return feature; }); if (feature) { var geometry = feature.getGeometry(); var coord = geometry.getCoordinates(); popup.setPosition(coord); $(element).popover({ 'placement': 'top', 'html': true, 'content': feature.get('name') }); $(element).popover('show'); } else { $(element).popover('destroy'); } }); map.on('pointermove', function(e) { if (e.dragging) { $(element).popover('destroy'); return; } var pixel = map.getEventPixel(e.originalEvent); var hit = map.hasFeatureAtPixel(pixel); map.getTarget().style.cursor = hit ? 'pointer' : ''; }); </script> </body> </html>

Ve sonuç:

Artıları

• Ücretsiz ve açık kaynak.
• Eşleme ihtiyaçlarınız için özelliklerle dolu kitaplık.
• Bol örnek.
• Bir dizi veri türü ve GIS standardı için destek.
• Harita projeksiyonları ve düzenleme özellikleri için yerleşik destek.

Eksileri

• Sürüm 3 hala yoğun geliştirme aşamasındadır ve API, her nokta sürümünde hala değişmektedir.
• Karmaşık API sözdizimi.
• Sürüm 3 belgeleri şu anda olabileceği kadar kapsamlı değil.

broşür

Leaflet'in OpenLayers'ın şişkinliği, dağınıklığı ve karmaşıklığına bir tepki olarak doğduğunu söylemek yanlış olmaz. Vladimir Agafonkin'den OpenLayers'ın etrafına bir sarmalayıcı inşa etmesi istendi, ancak o bunun yerine basit ve hafif bir OpenLayers alternatifi yarattı ve Mayıs 2011'de Leaflet doğdu. Vladimir bu çevrimiçi harita aracı için basitlik, performans ve kullanılabilirliğe odaklandı. Çekirdek kitaplık, yalnızca gerçek hayattaki kullanım durumlarının çoğu için yeterli olan temel işlevselliğe sahiptir. Yine de, Leaflet, geliştirmesi ve çekirdek kitaplığın üzerine eklenmesi kolay çok sayıda eklentiyle genişletilebilir. Ek olarak, Leaflet mobil destek düşünülerek sıfırdan geliştirildi.

Broşürün kullanımı kolaydır ve GitHub'da bulunan basit kaynak koduyla birlikte iyi belgelenmiş bir API'ye sahiptir. Performans, kullanılabilirlik, basitlik, küçük boyut ve mobil desteğe odaklanmasının bir sonucu olarak, OpenLayers'tan önemli ölçüde daha az karmaşıktır.

Leaflet'in geleceği de ilginç görünüyor. Vladimir'e göre, bir sonraki büyük sürümün daha da basit olmasını, performansların daha da iyileştirilmesini ve eklenti altyapısını yükseltmesini planlıyor.

uygulama

İşte daha önce olduğu gibi aynı harita, bu sefer Leaflet kullanılarak uygulandı.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> </head> <body> <div></div> <script type="text/javascript"> var map = L.map('map').setView([45.8167, 15.9833], 10); var mbUrl = 'https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png'; L.tileLayer(mbUrl, {id: 'examples.map-i875mjb7'}).addTo(map); var marker = L.marker([45.8167, 15.9833]).bindPopup("Zagreb").addTo(map); </script> </body> </html> 

Artıları

• Ücretsiz ve açık kaynak.
• Küçük ve hızlı.
• Basit ve kolay API sözdizimi.
• Mobil dostu.
• Hızlı ve kolay bir şekilde çevrimiçi bir harita oluşturmak için iyi.
• Çok iyi belgelere sahip birçok örnek.

Eksileri

• Gelişmiş işlevsellik eksikliği.

Harita Kutusu

MapBox adlı bir girişim, daha iyi görünen, daha çok yönlü çevrimiçi haritalar oluşturma hedefiyle çevrimiçi kartografik pazarda devrim yaratmaya çalışıyor. MapBox JavaScript API, Leaflet kullanır ve bir Leaflet eklentisi olarak yazılmıştır. Leaflet işlevselliğini genişletir ve kullanıcı tarafından oluşturulan özel haritalar ve veri kümeleri için MapBox barındırma dahil olmak üzere diğer MapBox web hizmetleriyle bütünleşir. JavaScript API'sinin yanı sıra, MapBox aşağıdaki bağlı hizmetleri içerir:

• Mobil iOS ve Android SDK'ları.
• Bir dizi önceden tasarlanmış harita.
• Haritalama kitaplığına ihtiyaç duymadan görüntülenebilen statik haritalar.
• Bir GeoCoding hizmeti.
• Bir Yol Tarifi hizmeti.

MapBox yalnızca haritalama hizmetini sunmakla kalmaz, aynı zamanda özel olarak elde edilen uydu görüntüleri, NASA'dan açık veriler ve OpenStreetMap'ten topluluk odaklı dünya verileri de dahil olmak üzere verilere erişim sunar. Veri stili, MapBox tarafından CSS ve LESS stil çerçevesine dayalı olarak oluşturulan bir stil formatı olan CartoCSS kullanılarak yapılır. MapBox hizmeti ücretsiz bir katman sunsa da, bant genişliği ve depolama açısından sınırlıdır ve herhangi bir ciddi kullanım için hizmetin ödenmesi gerekir.

Birçok büyük şirket, MapBox'ın sağladığı faydaları fark etti ve kendi sitelerinde kullanıyor. Foursquare, Evernote, Pinterest, The Financial Times, GitHub ve Etsy bunlardan birkaçıdır.

CartoCSS

Burada, MapBox tasarımcıları tarafından oluşturulan Pirates adlı bir stil kullanan kaygan bir MapBox haritası örneği verilmiştir. MapBox, Leaflet'in üzerinde çalıştığından, bunu web sayfanıza yerleştirmek için gereken kod, yukarıdaki Leaflet örneğine benzer olacaktır:

Yukarıda bahsedildiği gibi, CartoCSS, MapBox'ta vektör döşemelerine stil vermek için kullanılır. Bu, aynı zamanda açık kaynak olan MapBox Studio kullanılarak yapılır. MapBox Studio ile sıfırdan kendi harita stillerinizi oluşturmak veya diğer tasarımcılar tarafından oluşturulan mevcut stilleri değiştirmek ve genişletmek mümkündür. Özel haritanız MapBox hesabınıza yüklendikten sonra, MapBox API'sini kullanarak sitenize yerleştirebilirsiniz.

Aşağıda, Pirates temel katmanını almak için kullanılan bir CartoCSS örneği verilmiştir:

 @name: '[name_en]'; @name_arrr: "[name_en].replace('([Aa]r)','\1rr')"; @land: #fff8f0; @water: #cdd; @park: #cda; Map { background-color:@land; background-image:url(img/noise.png); } #admin[maritime=0][zoom>=3] { line-join: round; line-color: #478; comp-op:multiply; // Countries [admin_level=2] { line-cap:round; line-width: 0.8; [zoom>=6] { line-width: 2; } [zoom>=8] { line-width: 4; } [disputed=1] { line-dasharray: 4,4; line-cap:butt; } } // States / Provices / Subregions [admin_level>=3] { line-width: 0.4; line-dasharray: 10,3,3,3; [zoom>=6] { line-width: 1; } [zoom>=8] { line-width: 2; } [zoom>=12] { line-width: 3; } } } @water_line:lighten(@water,8); #water { ::b { polygon-pattern-file:url(img/water.png); polygon-pattern-alignment:global; } polygon-fill: mix(@water,#fff,50); polygon-gamma: 0.6; comp-op:multiply; a/line-color:@water_line; a/line-width:-0.4; a/line-comp-op:multiply; a/line-smooth:2; b/line-color:@water_line; b/line-width:-0.4; b/line-comp-op:multiply; b/line-smooth:4; c/line-color:@water_line; c/line-width:-0.4; c/line-comp-op:multiply; c/line-smooth:6; [zoom>=12] { a/line-width:0.8; b/line-width:0.8; c/line-width:0.8; } } #waterway { comp-op:multiply; [type='river'], [type='canal'] { line-color: @water; line-width: 0.5; [zoom>=12] { line-width: 1; } [zoom>=14] { line-width: 2; } [zoom>=16] { line-width: 3; } } [type='stream'] { line-color: @water; line-width: 0.5; [zoom>=14] { line-width: 1; } [zoom>=16] { line-width: 2; } [zoom>=18] { line-width: 3; } } } #landuse { ::glow { comp-op:multiply; [class='park'],[class='pitch'],[class='school'] { line-width:2; line-join:round; [class='park'] { line-color:#ddb; } [class='pitch'] { line-color:#eed; } [class='school'] { line-color:#edb; } } } ::main[zoom>=0] { comp-op:multiply; [class='park'] { polygon-pattern-file:url(img/park.png); polygon-pattern-alignment:global; } [class='school'] { polygon-fill:#ed9; polygon-opacity:0.5; } } ::wood[class='wood'] { line-color:#C3CFB4; line-opacity:0.33; line-width:3; line-join:round; polygon-pattern-file:url(img/forest.png); polygon-pattern-alignment:global; comp-op:multiply; opacity:0.5; } } #building { polygon-fill:#efe8d8; comp-op:multiply; [zoom>=15] { line-color:#efe8d8 * 0.9; [zoom>=15] { line-width:0.2; } [zoom>=16] { line-width:0.4; } [zoom>=17] { line-width:0.8; } } } #tunnel { opacity: 0.5; } #road, #tunnel, #bridge { ['mapnik::geometry_type'=2] { line-width: 1; line-color:#edc; line-comp-op:multiply; [class='motorway'], [class='main'], [class='motorway_link']{ line-color:#dba; [zoom>=10] { line-width: 1; } [zoom>=12] { line-width: 2; } [zoom>=14] { line-width: 3; } [zoom>=16] { line-width: 5; } } [class='street'], [class='street_limited'] { [zoom>=13] { line-width: 1.4; } [zoom>=14] { line-width: 2; } [zoom>=16] { line-width: 3; } } [class='street_limited'] { line-dasharray: 4,1; } [class='path'] { line-dasharray: 3,2; } } }

Ah, dostum!

Diğer önceden tasarlanmış MapBox stillerinden bazılarına buradan göz atın.

Artıları

• Broşürü uzatır.
• Ayrıntılı ve bulutsuz uydu görüntülerinin büyük deposu.
• Ayrıntılı arazi verileri.
• Çok sayıda bağlantılı hizmet.
• Kutudan çıktığı gibi güzel tasarlanmış haritalar.
• Mevcut haritaları şekillendirmek ve özelleştirmek için grafik arayüz.

Eksileri

• Hediyeler bedava değil.
• Fiyatlandırma, özelliklerden çok trafiğe dayalıdır.

CartoDB

Daha karmaşık coğrafi veri görselleştirme ve analizi için CartoDB, mevcut en iyi araçlardan biridir. Coğrafi verileri, PostGIS adlı bulutta uzamsal olarak etkinleştirilmiş bir veritabanında depolayan, verilere erişmek, PostGIS'in mekansal ve coğrafi konum güçlerini kullanarak analiz etmek ve Leaflet kullanarak görüntülemek için araçlar sağlayan bir bulut hizmetidir.

CartoDB, kolay coğrafi veri görselleştirmeleri ve depolaması için alternatiflerin eksikliğinin bir sonucu olarak oluşturuldu. Sonuç olarak, CartoDB, Google'ın Füzyon Tablolarına bir alternatif olarak düşünülebilir. Kullanıcılar, CSV, KML veya Excel tabloları dahil olmak üzere çeşitli biçimlerdeki veri kümelerini içe aktarabilir ve bunları Google, Here (Nokia) veya OpenStreetMap gibi yaygın kaynaklardan gelen haritalar üzerinde katmanlayabilir. Tüm coğrafi veriler gerçek bir veritabanında saklandığından, verilere SQL ile erişilebilir ve sorgulanabilir ve ardından CSS ile stillendirilebilir.

CartoDB hizmeti “freemium” olarak sunulmaktadır; verilerini halka açık bırakan kullanıcılar, projelerini CartoDB web sitesinde ücretsiz olarak barındırabilirler. Özel verileri depolamak, 5 MB'den fazla veriyi içe aktarmak veya beşten fazla tablo kullanmak için kullanıcıların bir premium plana abone olmaları gerekir.

GeoJSON

CartoDB, veri görselleştirme aracıdır, bu nedenle diğer çevrimiçi haritalama aracı örneklerinden biraz farklı kullanılır. CartoDB haritanız, harita üzerinde coğrafi referanslı koordinatlara sahip tüm verileri otomatik olarak görselleştirecektir. Böylece, sadece PostGIS veritabanımıza ekleyerek Zagreb için bir etiket gösterebiliriz. İşte GeoJSON'da biçimlendirilmiş bir örnek:

 { "type": "FeatureCollection", "features": [ { "type":"Feature", "geometry": { "type":"Point", "coordinates":[15.9833,45.8167] }, "properties": { "cartodb_id":1, "name":"Zagreb", "description":null, "created_at":"2015-02-20T21:02:16Z", "updated_at":"2015-02-20T21:03:59Z" } } ] } 

Ancak, CartoDB'nin neler yapabileceğini gerçekten anlamak için galerilerine bakın.

Artıları

• Jeo-uzamsal verileri yönetmek ve depolamak için harika.
• Çok sayıda veri formatını ve büyük veri setlerini destekler.
• Leaflet ve PostGIS gibi kanıtlanmış açık kaynaklı ürünlere dayanmaktadır.
• Ücretsiz model.

Eksileri

• Ücretsiz değil.
• Fiyatlandırma, çok büyük veri kümeleri kullanıldığında pahalı olabilen depolanan veri boyutuna bağlıdır.

Web Geliştiricileri için Diğer Seçenekler

Bunlar şu anda mevcut olan en popüler haritalama çerçeveleridir, ancak doğada daha az bilinen başka seçenekler de vardır. Microsoft ekosistemine bağlıysanız, Bing Haritalar API'si adı verilen Google Haritalar'a benzer bir API sunarlar.

Ve çevrimiçi haritalama dünyası MapQuest'te bir dinozordan bahsetmeden geçemeyiz. Hala etrafta ve MapQuest Haritalama Araçları sunuyor.

Harita oluşturmaya biraz farklı bir yaklaşım arıyorsanız, Kartograph ilginçtir çünkü tasarımcıların ve veri gazetecilerinin ihtiyaçları düşünülerek oluşturulmuştur.

Haritalarınızı Şekillendirme

Tüm bu çerçeveler, haritalarınızın stilini ve görünümünü özelleştirmenin bir yolunu sunar. MapBox ve CartoDB, CSS veya bir CSS varyasyonu kullanarak stil sunar.

Google cephesinde, Google Haritalar API'sinin 3. sürümü özel tasarımlı haritaları tanıttı. Bu nihayet geliştiricilere, özellikle de tasarımcılara, her yerde görülen varsayılan Google Haritalar tasarımını özelleştirmek ve bir web sitesinin genel görsel temasıyla daha uyumlu hale getirmek için daha fazla alan sağladı. Zengin Google Haritalar topluluğu içinde birkaç stil kaynağı doğdu. En dikkate değer olanı, Google Haritalar için özel stiller oluşturan ve bunları ücretsiz olarak paylaşan bir topluluk olan Snazzy Maps'tir.

OpenLayers veya Leaflet ile gitmeye karar verdiyseniz, önceden oluşturulmuş harita döşemeleriyle sınırlısınız. Neyse ki, Google, Nokia, Bing veya varsayılan OSM döşemelerinden Stamen gibi tasarımcılar tarafından özel olarak oluşturulanlara kadar seçilebilecek farklı harita döşemeleri var. Kaç tane kullanılabilir harita döşemesi bulunduğuna veya birbirleriyle karşılaştırıldığında nasıl göründüklerine dair bir fikir edinmek için Streetmap Smackdown veya Harita karşılaştırma sitelerini ziyaret edin.

Web Haritalarının ve Haritalama Araçlarının Geleceği

Harita dünyasının geleceği ilginç görünüyor. İşte sadece birkaç yıl önce bilim kurgu gibi görünebilecek bazı yeni teknolojiler:

• Yalnızca Vektör - D3.js ile raster görüntüler yerine vektör haritalarının kullanılması, standart çerçeveler kullanılarak mümkün olmayan yeni bir özellikler dünyası getiriyor. MapBox da OpenGL tabanlı MapBox GL ile bu yönde ilerliyor.
• 3D - Üç boyutlu arazi ve binalar artık haritalarda gösteriliyor ve OpenLayers v3, Sezyum için yerleşik destekle birlikte geliyor.
• Web tarayıcısında CBS ve mekansal analiz - Turf kullanarak zaten mümkün. Turf, tümü tarayıcı içinde uzamsal ve istatistik işlemlerini, veri sınıflandırmasını ve GeoJSON veri oluşturmayı destekleyen bir JavaScript kitaplığıdır.

Sarmak

Burada listelenen en iyi çevrimiçi haritalama araçlarının her birinin güçlü ve zayıf yönleri vardır. Örneğin, kod örnekleri, OpenLayers'ın getirdiği karmaşıklığa karşı Leaflet kullanmanın basitliğini gösterir. Ancak Leaflet, OpenLayers'ın çözeceği karmaşık uzamsal problemlerinizi çözmeyecektir. Seçim, ihtiyaçlarınızın ne olduğuna bağlıdır.

Özetlemek:

• Google Haritalar - Google'ın (ün) ünlü olduğu tüm güçlerle birlikte, özellikle geliştirici olmayanların web'de temel bir harita elde etmeleri için çok yönlü, yerleşik haritalama çözümü.
• OpenLayers - Diğer haritalama çerçevelerinin uzamsal analiz problemlerinizi çözemediği durumlar için.
• Broşür - Şu anda, özellikle MapBox veya CartoDB'nin sağladığı ek hizmetlere ihtiyacınız yoksa, genel haritalama amaçları için kolayca en iyi haritalama çerçevesi.
• MapBox - Harita stili üzerinde daha fazla kontrol sahibi olmak istediğinizde veya ayrıntılı uydu görüntüleri, coğrafi kodlama veya yol tarifleri gibi başkalarının sağlamadığı hizmetlere ihtiyaç duyduğunuzda hızlı büyüyen ve pazar değiştiren haritalama çözümü.
• CartoDB - Farklı veri formatlarında depolanmış ağır veri kümeleriniz varsa, başka yere bakmayın.

Toptal Mühendislik Blogunda Daha Fazla Okuma:

• Daha Akıllı Önbelleğe Alma Kullanarak Harita Kümelerine 50 Kat Daha Hızlı Hizmet Verin