13 Perpustakaan JavaScript untuk Membuat Peta Interaktif & Khusus

Kami sebelumnya menampilkan Google Pencipta Peta dan 10 alat lain untuk membantu Anda membuat peta. Namun, jika Anda lebih suka menggunakan pustaka Javascript sebagai gantinya, sudahkah kami mendapatkan kiriman untuk Anda. Berikut adalah pustaka JS yang dapat Anda gunakan untuk menunjukkan penanda peta khusus, menggambar garis rute khusus atau bahkan menampilkan dialog saat Anda mengarahkan kursor atau mengklik titik peta tertentu.

Personalisasikan peta Anda dengan gaya yang Anda inginkan - beberapa di antaranya dapat ditata dengan CSS - atau sesuaikan peta Anda untuk menjadi seinteraktif yang Anda inginkan. Sumber data peta, dependensi, dan lisensi masing-masing perpustakaan telah dimasukkan untuk kenyamanan Anda.

Lebih lanjut tentang Hongkiat:

Bagaimana cara mendesain Google Maps
Memperoleh lokasi pengguna dengan API Geolokasi HTML5
Visualisasi Data: 20+ alat dan sumber daya yang bermanfaat

GMaps

GMaps membuat menambah dan menyesuaikan Google Maps menjadi mudah. Selain menambahkan peta, Anda juga bisa memasukkan beberapa hal ke dalam peta, seperti polyline yang mungkin berguna untuk menggambar rute, kontrol menu khusus, dan bahkan elemen HTML.

GMaps kompatibel dengan data berformat JSON yang dapat Anda manfaatkan untuk mengintegrasikan peta Anda dengan aplikasi tertentu, seperti Foursquare.

Sumber Data Peta: Google Maps
Ketergantungan: tidak ada
Lisensi: Lisensi MIT

di sini

Pada 5KB, jHERE menunjukkan kepada Anda bahwa ukuran tidak masalah; Anda masih dapat membangun peta interaktif yang kuat dengan beberapa opsi penyesuaian. jHERE memperoleh visualisasi peta dari peta HERE, yang merupakan salah satu penyedia peta paling populer untuk Windows Phone.

Perpustakaan dapat diperluas dengan fungsionalitas baru, dan ada beberapa ekstensi yang dikembangkan untuk perpustakaan ini termasuk satu untuk menambahkan bentuk, rute, dan spidol khusus.

Sumber Data Peta: SINI Maps
Ketergantungan: jQuery atau ZeptoJS
Lisensi: Lisensi MIT

Kartograf

Kartograf terdiri dari dua file, Kartograph.ph untuk menghasilkan peta dalam format SVG, dan Kartograph.js untuk menambahkan elemen interaktif di atas peta. Karena Kartograph.js dibangun di atas Raphael.js peta akan bekerja dengan baik hingga ke IE7. Anda dapat melihat demo peta interaktif untuk mengetahui apa yang dapat dilakukan Kartograph.

Sumber Data Peta: Kartograph
Ketergantungan: Kartograph.py, Raphael, dan jQuery
Lisensi: AGPL dan LGPL

Mapael

jQuery Mapael memungkinkan Anda membuat peta dengan visualisasi data yang elegan serta interaktivitas. Anda dapat, misalnya, membuat peta dan menentukan masing-masing wilayah pada peta dengan warna berbeda berdasarkan wilayah. Anda juga dapat menambahkan tooltip di wilayah tersebut, serta penangan acara suka klik atau melayang.

Peta ini dibangun dengan mempertimbangkan SEO dengan menyediakan konten alternatif untuk robot mesin pencari yang tidak mampu merayapi konten yang dihasilkan JavaScript.

Sumber Data Peta: Raphael.js
Ketergantungan: jQuery
Lisensi: Lisensi MIT

D3js

D3.js adalah pustaka JavaScript komprehensif yang akan menghidupkan data Anda melalui HTML, SVG, dan CSS. Penggunaan D3 cukup bervariasi termasuk untuk membangun peta yang sangat interaktif. Lihat peta Perkembangan Global Bank Dunia ini dan Anda akan melihat kemungkinan apa yang dapat Anda bangun dengan D3.js.

Sumber Data Peta: D3.js
Ketergantungan: tidak ada
Lisensi: Tidak terdefinisi

DataMaps

Jika membuat peta dengan D3.js luar biasa, Anda dapat menggunakannya DataMaps. DataMaps pada dasarnya adalah plugin D3.js yang dikembangkan khusus untuk membangun peta. Ini mewarisi banyak kemampuan D3.js, maka Anda dapat membangun peta sederhana atau sangat khusus dengannya. Apakah saya menyebutkan bahwa peta responsif?

Sumber Data Peta: D3.js
Ketergantungan: D3.js dan TopoJSON
Lisensi: Lisensi MIT

GeoChart

GeoChart adalah Google Map yang disederhanakan yang merender wilayah, penanda, dan teks, alih-alih peta lengkap dengan detail kecil. Peta dibuat dalam SVG, dan dapat dikustomisasi dalam banyak cara termasuk mengubah warna wilayah, menambahkan sembulan, dan penanda peta khusus.

Sumber Data Peta: Google Maps
Ketergantungan: tidak ada
Lisensi: Baca TOS Google Maps

Maplace

Maplace, plugin jQuery untuk menghasilkan peta melalui Google Maps API v3. Maplace berfungsi di semua browser, termasuk IE6. Jadi ini adalah plugin lain yang layak Anda perhatikan jika Anda ingin membangun peta dengan cara termudah.

Sumber Data Peta: Google Maps
Ketergantungan: jQuery
Lisensi: Lisensi MIT

Megah

Stately adalah perpustakaan JavaScript yang dikembangkan untuk menghasilkan peta AS. Perpustakaan ini relatif ringan mengingat Anda dapat menambahkan elemen interaktif di atas peta yang Anda buat.

Sumber Data Peta: Megah / SVG
Ketergantungan: tidak ada
Lisensi: Lisensi MIT

GeoComplete

GeoComplete adalah pustaka JavaScript tersendiri. Perpustakaan akan menambahkan bidang input bersama dengan peta, yang akan menampilkan saran kota, negara, atau negara bagian saat Anda mengetik.

Sumber Data Peta: Google Maps
Ketergantungan: jQuery
Lisensi: Lisensi MIT

Alat Peta

Map Tools menyediakan API intuitif untuk menambahkan Google Maps. Ini mendukung pemuatan data JSON berformat geografis seperti TopoJSON dan GeoJSON untuk membuat peta. Selain itu, Anda dapat menambahkan penanda animasi yang menurut saya akan membuat peta lebih hidup, memasukkan konten HTML dengan variabel atau placeholder ala Handlebars.

Sumber Data Peta: Google Maps
Ketergantungan: GeoJSON / TopoJSON
Lisensi: Lisensi MIT

OpenLayers

OpenLayers adalah framework JavaScript sumber terbuka kinerja tinggi untuk membangun peta interaktif menggunakan berbagai layanan pemetaan. Anda dapat memilih sumber lapisan peta menggunakan lapisan ubin atau lapisan vektor dari sejumlah layanan peta.

OpenLayer menjadi ponsel yang siap digunakan, cocok untuk membuat peta di seluruh perangkat dan browser. Anda dapat menggunakan CSS untuk tampilan peta yang berbeda. Untuk mengimplementasikan peta di web Anda menggunakan OpenLayers, berikut ini adalah tutorial yang akan membantu.

Sumber Data Peta: OpenStreetMap
Ketergantungan: tidak ada
Lisensi: Tidak terdefinisi

Leaflet

Pengembang memberi Leaflet fungsi dasar untuk bekerja dengan sempurna, menjaga ukurannya kecil, sempurna untuk perangkat seluler. Untuk fungsi tertentu, cukup rentangkan Leaflet menggunakan plugin. Leaflet memiliki sebagian besar fitur peta online yang Anda butuhkan: layer tile, popup, marker, dan layer vektor gratis seperti polyline, poligon, lingkaran, atau persegi panjang. Muncul dengan desain default yang bagus meskipun Anda dapat menyesuaikan gaya menggunakan CSS3 dengan mudah.

Leaflet memiliki fitur interaksi penggunaan paling banyak untuk peramban seluler dan desktop.

Sumber Data Peta: OpenStreetMap
Ketergantungan: tidak ada
Lisensi: Tidak terdefinisi