Survei Alat Pemetaan Online Terbaik untuk Pengembang Web: Peta Jalan Menuju Peta Jalan

Tidak ada yang seperti peta yang bagus dan berguna.

Saat ini, menggunakan peta online adalah proses yang mudah dan menarik. Membuat peta online Anda sendiri bukanlah pekerjaan besar lagi; kami memiliki berbagai alat pemetaan online yang tersedia, dari yang gratis dan sederhana, hingga fitur yang kaya dan kompleks untuk digunakan. Untuk pengembang web yang tidak terbiasa dengan pemetaan web, kesulitan memilih mungkin menakutkan. Anda ingin membuat peta, tetapi tidak tahu harus mulai dari mana atau alat apa yang harus digunakan. Saya di sini untuk membantu dengan daftar alat pemetaan terbaik ini.

Sedikit Sejarah

Sejak awal, teknologi telah mempengaruhi pembuatan peta dan bagaimana peta digunakan. Seiring kemajuan teknologi, proses kartografi dan pembuatan peta berkembang bersamanya, dari peta yang digambar secara manual di papirus hingga peta interaktif di web.

Paruh kedua abad ke-20 adalah titik balik kartografi. Komputer menjadi alat pilihan. Fotografi udara, citra satelit, dan penginderaan jauh mengubah cara pengumpulan data spasial. Sistem Informasi Geografis (SIG) lahir. Akhirnya, peta GIS mulai berpindah dari desktop ke web, dan vendor GIS besar mulai membuat kerangka kerja pertama untuk peta online.

Namun pemetaan GIS tidak mudah. Ini membutuhkan banyak teknologi sisi server, standar geospasial, dan protokol, bersama dengan implementasinya. Ini membutuhkan pemahaman data geospasial dan proyeksi peta, pengetahuan tentang cara mengumpulkan data, cara menampilkan data, warna apa yang digunakan, cara menggeneralisasi data ke skala tertentu, cara memberi label pada peta, cara mengatur server yang akan melayani peta, cara menggunakan basis data spasial, dan sebagainya. GIS penuh dengan singkatan, seperti WMS, WFS, EPSG, CRS, SLD, GML, TMS, hanya untuk beberapa nama, dan untuk mengetahui dan memahaminya, Anda perlu membaca buku, makalah akademis, dan artikel.

Evolusi Pemetaan Online

Peta web pertama biasanya hanya menampilkan satu gambar peta yang sangat kecil. Pada saat itu, panning dilaksanakan dengan memindahkan satu langkah, biasanya setengah dari ukuran peta, di salah satu dari delapan kemungkinan arah kompas - N, NW, W, SW, S, SE, E, NE. Setelah pengguna mengklik tombol pan atau zoom, gambar baru perlu ditampilkan di server peta, dimuat melalui jaringan, dan kemudian diproses oleh browser. Karena keterbatasan teknologi, peta hanya menempati bagian yang sangat kecil dari keseluruhan halaman web. Untuk mendapatkan interaksi yang lebih baik, peta awal memerlukan plugin seperti Flash atau plugin propriety berbasis Java, atau bahkan ActiveX, yang hanya berfungsi di Internet Explorer.

Google membalikkan dunia pemetaan ketika memperkenalkan Google Maps pada tahun 2005. Di antara inovasinya, Google memperkenalkan continuous panning dengan dragging. Solusi mereka adalah menampilkan peta yang diiris menjadi banyak gambar persegi yang lebih kecil yang disebut "ubin". Ubin ini dirender dan disajikan dari “server petak petak”, dan biasanya berukuran 256 x 256 piksel. Memperbesar dan menggeser sekarang hanya perlu memuat ubin peta baru alih-alih memuat ulang seluruh halaman web. Hasilnya adalah peta yang terlihat lebih besar yang menutupi lebih dari setengah jendela browser, dan menawarkan pengalaman yang mulus untuk menjelajahi peta. Karena kemampuan untuk "menyelipkan" peta dengan fungsi zooming dan panning yang mulus, peta baru ini disebut "peta licin". Google juga mengizinkan pembuatan skrip, sehingga pengguna dapat menempatkan peta Google di situs web mereka sendiri dan menambahkan data mereka sendiri ke peta. Ini menghasilkan istilah baru lainnya yang diciptakan: "Map mash-up."

Tiba-tiba, peta online menjadi populer; untuk menambahkan peta yang tampak bagus ke situs web Anda, Anda tidak perlu lagi menjadi kartografer, atau spesialis GIS. Di sayap gerakan "Web 2.0", dan membangun teknologi modern seperti HTML5, CSS3, dan SVG, yang memungkinkan pembuatan konten interaktif dengan mudah, peta interaktif kini menjalani kebangkitan baru.

Data Peta

Seperti disebutkan sebelumnya, peta online awal didasarkan pada kumpulan data GIS dan geodatabase spasialnya. Tidak banyak orang yang memiliki akses ke data itu, belum lagi label harganya. Google dan kumpulan data proyek OpenStreetMap (OSM) mengubahnya. Basis data Google bersifat pribadi dan dilengkapi dengan batasan, sedangkan OSM terinspirasi oleh konsep Wikipedia, sebagai proyek kolaboratif untuk membuat peta dunia gratis. OpenStreetMap dibangun oleh komunitas sukarelawan pembuat peta, yang berkontribusi dan memelihara data spasial.

Singkatnya, revolusi terbesar yang berkontribusi pada pembuatan peta yang mudah saat ini adalah bahwa masalah yang terkait dengan pemeliharaan server peta dan basis data spasial telah dihapus.

Memilih Kerangka Pemetaan Web

Jadi, dengan semua opsi, bagaimana kita memilih alat pemetaan online yang tepat? Di satu sisi, ada penyedia peta online komersial seperti Google, MapQuest, Microsoft, dan Nokia. Layanan ini menyediakan petak peta dan JavaScript API yang sesuai untuk melihatnya dan berinteraksi dengan peta. Di sisi lain, ada proyek pemetaan sumber terbuka yang menawarkan pemuatan ubin peta berbasis OpenStreetMap dengan mudah. Ini termasuk OpenLayers dan Leaflet. Dan kemudian ada proyek seperti MapBox dan CartoDB, yang mendasarkan model bisnis mereka pada perpustakaan sumber terbuka dan data OSM, dan memberikan nilai tambah tetapi tidak gratis.

Mari kita lihat beberapa contoh dari masing-masing kategori ini. Di sini, saya akan membahas beberapa alat pemetaan online ini, memberikan gambaran singkat tentang masing-masing alat, bersama dengan contoh kode, dan menimbang pro dan kontra. Kami juga menulis tutorial pemetaan D3.js yang mungkin menarik bagi Anda sebagai bacaan terpisah.

Google Maps

Mari kita mulai dengan pilihan yang paling jelas, Google Maps. Versi pertama Google Maps API diperkenalkan pada Februari 2005, dan Google Maps API v3 saat ini pada Juni 2009. Google Maps API bukan hanya titik akhir JavaScript API; ini mencakup lebih banyak proyek dan menawarkan beberapa cara berbeda untuk menyematkan Google Maps ke dalam halaman web dengan penyesuaian ekstensif.

Google Maps API yang tersedia saat ini meliputi:

• API Javascript Google Maps
• Google Static Maps API
• API Penyematan Google Maps
• SDK Google Maps untuk iOS
• Google Maps Android API v2

Untuk membantu Anda memilih API yang tepat, Google mengembangkan pemilih API.

Perlu dicatat bahwa meskipun API dasar gratis, ada beberapa batasan yang diberlakukan. Yang pertama adalah bahwa peta harus dapat diakses secara bebas dan publik oleh pengguna akhir. Kedua adalah batasan penggunaan: layanan ini gratis selama situs Anda tidak menghasilkan lebih dari 25.000 pemuatan peta setiap hari, selama periode 90 hari. Jika Anda membutuhkan skala yang lebih besar atau menginginkan peta pribadi, atau Anda menjalankan situs web perusahaan atau komersial, Anda harus mempertimbangkan untuk membayar Google Maps API for Work.

Penerapan

Berikut adalah contoh bagaimana menerapkan peta Google sederhana dalam kode. Ini menunjukkan cara membuat peta sederhana menggunakan API, menempatkan penanda pada peta, dan membuka popup dengan klik mouse.

 <!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>

Peta yang dihasilkan terlihat seperti ini:

kelebihan

• Dikembangkan dan dikelola oleh Google.
• Banyak API berbeda untuk menyertakan peta di situs web atau aplikasi Anda.
• Komunitas besar pengguna.
• Dokumentasi API yang sangat bagus, dengan banyak contoh.

Kontra

• Apakah kami yakin bahwa kami tidak akan melihat penambahan di beberapa titik?
• Semua orang menggunakannya; semua peta (kebanyakan) terlihat sama.
• API tertutup dan kepatutan.
• Tidak ada plugin selain yang dikembangkan secara resmi oleh Google.
• Harga yang tidak jelas untuk Google Maps for Work.

OpenLayers

OpenLayers dikembangkan oleh MetaCarta sebagai sumber terbuka yang setara dengan Google Maps, dan versi pertama diterbitkan pada Juni 2006. OpenLayers adalah alat pemetaan online yang mengimplementasikan API JavaScript untuk membangun aplikasi geografis berbasis web yang kaya, dengan API yang mirip dengan Google Maps API. OpenLayers mendapatkan banyak daya tarik dengan sangat cepat, dan pengembangan pada awalnya sangat cepat. OpenLayers 2 dirilis hanya dua bulan setelah versi 1, pada Agustus 2006. Pustaka terus dikembangkan, dan versi baru dengan fitur baru terus ditambahkan. Kelemahan dari kemajuan pesat ini adalah pustaka versi 2 menjadi sangat besar dan kikuk, akhirnya mencapai ukuran 1MB dan berisi lebih dari 100.000 baris kode! Meskipun hadir dengan banyak fitur, tidak semuanya dibutuhkan oleh pengguna biasa.

Ini adalah alasan utama untuk menulis ulang perpustakaannya secara komprehensif. Tujuannya adalah untuk menargetkan fitur HTML5 dan CSS3 terbaru, dengan fungsi yang sama dari OpenLayers 2, seperti dukungan untuk proyeksi, protokol standar, dan fungsi pengeditan. Fokus utamanya adalah pada peningkatan kinerja, build yang lebih ringan, komponen visual yang lebih cantik, dan API yang lebih baik. OpenLayers 3 yang jauh lebih baik ini diterbitkan pada Agustus 2014.

Penerapan

Mari kita lihat bagaimana mapnya sama seperti pada contoh sebelumnya, kali ini menggunakan OpenLayers 3.

 <!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>

Dan hasilnya:

kelebihan

• Gratis dan sumber terbuka.
• Pustaka penuh fitur untuk kebutuhan pemetaan Anda.
• Banyak contoh.
• Dukungan untuk berbagai tipe data dan standar GIS.
• Dukungan bawaan untuk proyeksi peta dan fitur pengeditan.

Kontra

• Versi 3 masih dalam pengembangan yang berat, dan API masih berubah dengan setiap rilis poin.
• Sintaks API yang rumit.
• Dokumentasi versi 3 saat ini tidak selengkap yang seharusnya.

selebaran

Dapat dikatakan bahwa Leaflet lahir sebagai reaksi terhadap kembung, kesemrawutan, dan kerumitan OpenLayers. Vladimir Agafonkin diminta untuk membuat pembungkus di sekitar OpenLayers, tetapi ia malah membuat alternatif OpenLayers yang sederhana dan ringan, dan pada Mei 2011 Leaflet lahir. Vladimir berfokus pada kesederhanaan, kinerja, dan kegunaan untuk alat peta online ini. Pustaka inti hanya memiliki fungsionalitas dasar, yang cukup untuk sebagian besar kasus penggunaan di kehidupan nyata. Namun, Leaflet dapat diperluas dengan sejumlah besar plugin yang mudah dikembangkan dan ditambahkan di atas pustaka inti. Selain itu, Leaflet dikembangkan dari awal dengan mempertimbangkan dukungan seluler.

Leaflet mudah digunakan dan memiliki API yang terdokumentasi dengan baik, bersama dengan kode sumber sederhana yang tersedia di GitHub. Sebagai hasil dari fokusnya pada kinerja, kegunaan, kesederhanaan, ukuran kecil, dan dukungan seluler, ini jauh lebih mudah daripada OpenLayers.

Masa depan Leaflet juga terlihat menarik. Menurut Vladimir, ia berencana untuk rilis besar berikutnya menjadi lebih sederhana, meningkatkan kinerja lebih lanjut, dan meningkatkan infrastruktur plugin.

Penerapan

Berikut peta yang sama seperti sebelumnya sekali lagi, kali ini diimplementasikan menggunakan Leaflet.

 <!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> 

kelebihan

• Gratis dan sumber terbuka.
• Kecil dan cepat.
• Sintaks API sederhana dan mudah.
• Ramah seluler.
• Baik untuk mendapatkan peta online dengan cepat dan mudah.
• Banyak contoh dengan dokumentasi yang sangat baik.

Kontra

• Kurangnya fungsionalitas tingkat lanjut.

Kotak Peta

Sebuah startup bernama MapBox sedang mencoba untuk merevolusi pasar kartografi online, dengan tujuan membangun peta online yang lebih baik dan lebih serbaguna. MapBox JavaScript API menggunakan Leaflet, dan ditulis sebagai plugin Leaflet. Ini memperluas fungsionalitas Leaflet, dan terintegrasi dengan layanan web MapBox lainnya, termasuk hosting MapBox untuk peta dan kumpulan data yang dibuat pengguna. Selain JavaScript API, MapBox menyertakan layanan terhubung berikut:

• SDK iOS dan Android seluler.
• Satu set peta yang telah dirancang sebelumnya.
• Peta statis yang dapat ditampilkan tanpa memerlukan perpustakaan pemetaan.
• Layanan GeoCoding.
• Sebuah layanan Arah.

MapBox tidak hanya menawarkan layanan pemetaan, tetapi juga akses ke data, termasuk citra satelit yang diperoleh secara pribadi, data terbuka dari NASA, dan data dunia berbasis komunitas dari OpenStreetMap. Penataan gaya data dilakukan menggunakan CartoCSS, format gaya yang dibuat oleh MapBox, berdasarkan CSS dan kerangka penataan gaya KURANG. Meskipun layanan MapBox menawarkan tingkat gratis, bandwidth dan penyimpanannya terbatas, dan untuk penggunaan serius apa pun, layanan ini harus dibayar.

Banyak perusahaan besar telah mengakui manfaat yang disediakan MapBox, dan menggunakannya di situs mereka sendiri. Mereka termasuk Foursquare, Evernote, Pinterest, The Financial Times, GitHub, dan Etsy, untuk beberapa nama.

CartoCSS

Berikut adalah contoh peta MapBox yang apik menggunakan gaya yang disebut Pirates , yang dibuat oleh desainer MapBox. Karena MapBox berjalan di atas Leaflet, kode untuk menyematkannya di halaman web Anda akan serupa dengan contoh Leaflet di atas:

Seperti disebutkan di atas, CartoCSS digunakan untuk menata ubin vektor di MapBox. Ini dilakukan dengan menggunakan MapBox Studio mereka, yang juga open source. Dengan MapBox Studio, dimungkinkan untuk membuat gaya peta Anda sendiri dari awal, atau mengubah dan memperluas gaya yang sudah ada yang dibuat oleh desainer lain. Setelah peta khusus Anda diunggah ke akun MapBox Anda, Anda dapat menyematkannya di situs Anda menggunakan MapBox API.

Berikut ini adalah contoh CartoCSS yang digunakan untuk mendapatkan baselayer Pirates :

 @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; } } }

Arrgh, sobat!

Lihatlah beberapa gaya MapBox pradesain lainnya di sini.

kelebihan

• Perpanjangan Leaflet.
• Repositori besar gambar satelit yang mendetail dan tidak berawan.
• Data medan terperinci.
• Banyak layanan yang terhubung.
• Peta yang dirancang dengan indah di luar kotak.
• Antarmuka grafis untuk menata dan menyesuaikan peta yang ada.

Kontra

• Barangnya tidak gratis.
• Harga lebih didasarkan pada lalu lintas daripada fitur.

KartoDB

Untuk visualisasi dan analisis data geospasial yang lebih kompleks, CartoDB adalah salah satu alat terbaik di luar sana. Ini adalah layanan cloud yang menyimpan data geografis dalam basis data yang diaktifkan secara spasial di cloud yang disebut PostGIS, menyediakan alat untuk mengakses data, menganalisisnya menggunakan kekuatan spasial dan geolokasi PostGIS, dan menampilkannya menggunakan Leaflet.

CartoDB dibuat karena kurangnya alternatif untuk visualisasi dan penyimpanan data geospasial yang mudah. Akibatnya, CartoDB dapat dianggap sebagai alternatif untuk Fusion Tables Google. Pengguna dapat mengimpor kumpulan data dalam berbagai format, termasuk tabel CSV, KML atau Excel, dan melapisinya di atas peta dari sumber umum seperti Google, Here (Nokia), atau OpenStreetMap. Karena semua geodata disimpan dalam database nyata, data dapat diakses dan dikueri dengan SQL, dan kemudian ditata dengan CSS.

Layanan CartoDB ditawarkan sebagai “freemium;” pengguna yang membiarkan data mereka terbuka untuk umum dapat meng-host proyek mereka di situs web CartoDB secara gratis. Untuk menyimpan data pribadi, mengimpor lebih dari 5 MB data atau menggunakan lebih dari lima tabel, pengguna harus berlangganan paket premium.

GeoJSON

CartoDB adalah alat untuk visualisasi data, sehingga digunakan sedikit berbeda dari contoh alat pemetaan online lainnya. Peta CartoDB Anda akan secara otomatis memvisualisasikan data apa pun yang memiliki koordinat georeferensi di peta. Jadi kita bisa menampilkan label untuk Zagreb hanya dengan menambahkannya ke database PostGIS kita. Berikut ini contoh yang diformat dalam GeoJSON:

 { "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" } } ] } 

Namun, untuk benar-benar memahami kemampuan CartoDB, lihat galeri mereka.

kelebihan

• Bagus untuk mengelola dan menyimpan data geospasial.
• Mendukung banyak format data dan kumpulan data besar.
• Berdasarkan produk open source yang telah terbukti, seperti Leaflet dan PostGIS.
• model freemium.

Kontra

• Tidak gratis.
• Harga didasarkan pada ukuran data yang disimpan, yang bisa menjadi mahal jika kumpulan data yang digunakan sangat besar.

Opsi Lain untuk Pengembang Web

Ini adalah kerangka kerja pemetaan paling populer yang tersedia saat ini, tetapi ada opsi lain yang kurang dikenal di alam liar. Jika Anda terikat dengan ekosistem Microsoft, mereka menawarkan API yang mirip dengan Google Maps yang disebut Bing Maps API.

Dan, kita tidak bisa pergi tanpa menyebut dinosaurus di dunia pemetaan online, MapQuest. Itu masih ada dan menawarkan Alat Pemetaan MapQuest.

Jika Anda mencari pendekatan yang sedikit berbeda dalam pembuatan peta, Kartograph menarik karena dibuat dengan mempertimbangkan kebutuhan desainer dan jurnalis data.

Menata Peta Anda

Semua kerangka kerja ini menawarkan cara untuk menyesuaikan gaya dan tampilan peta Anda. MapBox dan CartoDB menawarkan penataan menggunakan CSS atau variasi CSS.

Di bagian depan Google, versi 3 dari Google Maps API memperkenalkan peta bergaya khusus. Hal ini akhirnya memungkinkan pengembang, terutama desainer, lebih banyak ruang untuk menyesuaikan desain Google Maps default yang terlihat di mana-mana, dan membuatnya lebih sesuai dengan tema visual keseluruhan situs web. Dalam komunitas Google Maps yang kaya, beberapa sumber daya gaya telah lahir. Yang paling menonjol adalah Snazzy Maps, komunitas orang-orang yang membuat gaya khusus untuk Google Maps dan membagikannya secara gratis.

Jika Anda memutuskan untuk menggunakan OpenLayers atau Leaflet, maka Anda terbatas pada petak peta yang telah dirender sebelumnya. Untungnya, ada rentang ubin peta yang berbeda untuk dipilih, dari ubin Google, Nokia, Bing atau OSM default, hingga ubin yang dibuat khusus oleh desainer, seperti Stamen. Untuk mengetahui berapa banyak ubin peta yang tersedia, atau bagaimana tampilannya dibandingkan satu sama lain, kunjungi situs Streetmap Smackdown atau Perbandingan peta.

Masa Depan Peta Web dan Alat Pemetaan

Masa depan dunia pemetaan terlihat menarik. Berikut adalah beberapa teknologi baru yang terlihat seperti fiksi ilmiah beberapa tahun yang lalu:

• Vector-Only - Menggunakan peta vektor alih-alih gambar raster dengan D3.js menghadirkan dunia fitur baru yang tidak mungkin dilakukan menggunakan kerangka kerja standar. MapBox juga bergerak ke arah ini, dengan MapBox GL, berdasarkan OpenGL.
• 3D - Medan dan bangunan tiga dimensi sekarang muncul di peta, dan OpenLayers v3 dikirimkan dengan dukungan bawaan untuk Cesium.
• GIS dan analisis spasial di browser web - Sudah dimungkinkan menggunakan Turf. Turf adalah pustaka JavaScript yang mendukung operasi spasial dan statistik, klasifikasi data, dan pembuatan data GeoJSON, semuanya dalam browser.

Bungkus

Masing-masing alat pemetaan online terbaik yang tercantum di sini memiliki kekuatan dan kelemahannya. Misalnya, contoh kode menunjukkan kesederhanaan penggunaan Leaflet, versus kerumitan yang dibawa OpenLayers. Tetapi Leaflet tidak akan menyelesaikan masalah spasial kompleks Anda di mana OpenLayers akan melakukannya. Pilihannya tergantung pada apa kebutuhan Anda.

Untuk meringkas:

• Google Maps - Solusi pemetaan yang lengkap dan mapan, terutama bagi non-pengembang untuk mendapatkan peta dasar di web, bersama dengan semua kekuatan yang (di) terkenal dari Google.
• OpenLayers - Untuk situasi ketika kerangka kerja pemetaan lain tidak dapat menyelesaikan masalah analisis spasial Anda.
• Leaflet - Saat ini, framework pemetaan terbaik dengan mudah untuk tujuan pemetaan umum, terutama jika Anda tidak memerlukan layanan tambahan yang disediakan MapBox atau CartoDB.
• MapBox - Solusi pemetaan yang berkembang pesat dan mengubah pasar saat Anda menginginkan kontrol lebih besar atas penataan peta atau membutuhkan layanan yang tidak disediakan orang lain, seperti gambar satelit terperinci, geocoding, atau petunjuk arah.
• CartoDB - Jika Anda memiliki kumpulan data yang berat, disimpan dalam format data yang berbeda, tidak perlu mencari lagi.

Bacaan Lebih Lanjut di Blog Teknik Toptal:

• Melayani Kluster Peta 50x Lebih Cepat Menggunakan Caching yang Lebih Cerdas