13 Perpustakaan JavaScript untuk Membuat Peta yang Interaktif dan Disesuaikan

Kami sebelumnya menampilkan Google Pencipta Peta dan 10 alat lainnya untuk membantu Anda membuat peta . Namun, jika Anda lebih suka menggunakan pustaka Javascript, sudahkah kami mendapatkan postingannya untuk Anda.

Berikut adalah pustaka JS yang dapat Anda gunakan untuk menampilkan penanda peta khusus, menggambar garis rute khusus, atau bahkan menampilkan dialog saat Anda mengarahkan kursor atau mengklik titik tertentu dari peta.

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

GMaps

GMaps memudahkan penambahan dan penyesuaian Google Maps. Selain menambahkan peta, Anda juga dapat menambahkan beberapa hal ke dalam peta, seperti polylines yang mungkin berguna untuk menggambar rute, kontrol menu khusus, dan bahkan elemen HTML.
GMaps kompatibel dengan data berformat JSON yang dapat Anda gunakan untuk mengintegrasikan peta Anda dengan aplikasi tertentu, seperti Foursquare.
  • Sumber Data Peta : Google Maps
  • Dependensi : tidak ada
  • Lisensi : Lisensi MIT
js-libraries-custom-maps

jSini

Pada 5KB, jHERE menunjukkan kepada Anda bahwa ukuran tidak penting; Anda masih dapat membuat 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.
Pustaka dapat diperluas dengan fungsionalitas baru, dan ada beberapa ekstensi yang dikembangkan untuk pustaka ini termasuk satu untuk menambahkan bentuk, rute, dan penanda khusus.
  • Sumber Data Peta : HERE Maps
  • Dependensi : jQuery atau ZeptoJS
  • Lisensi : Lisensi MIT
js-libraries-custom-maps

Kartograf

Kartograph 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 : Kartograf
  • Dependensi : Kartograph.py, Raphael, dan jQuery
  • Lisensi : AGPL dan LGPL
js-libraries-custom-maps

Mapael

jQuery Mapael memungkinkan Anda membuat peta dengan visualisasi data yang elegan serta interaktivitas. Anda dapat, misalnya, membuat peta dan menentukan setiap wilayah di peta dengan warna berbeda berdasarkan wilayah. Anda juga dapat menambahkan keterangan alat di wilayah tersebut, serta penangan acara seperti clickatau hover.
Peta dibuat dengan mempertimbangkan SEO dengan menyediakan konten alternatif untuk robot mesin pencari yang tidak mampu merayapi konten yang dibuat oleh JavaScript.
  • Sumber Data Peta : Raphael.js
  • Dependensi : jQuery
  • Lisensi : Lisensi MIT
js-libraries-custom-maps

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
  • Dependensi : tidak ada
  • Lisensi : Tidak ditentukan
js-libraries-custom-maps

DataMaps

Jika membuat peta dengan D3.js terlalu banyak, Anda dapat menggunakan DataMaps . DataMaps pada dasarnya adalah plugin D3.js yang dikembangkan khusus untuk membangun peta. Ini mewarisi banyak kemampuan D3.js, oleh karena itu Anda dapat membuat peta sederhana atau sangat disesuaikan dengannya. Apakah saya menyebutkan bahwa peta itu responsif?
  • Sumber Data Peta : D3.js
  • Dependensi : D3.js dan TopoJSON
  • Lisensi : Lisensi MIT
js-libraries-custom-maps

GeoChart

GeoChart adalah Peta Google yang disederhanakan yang menampilkan wilayah, penanda, dan teks, bukan peta lengkap dengan detail kecil. Peta dibuat dalam SVG, dan dapat disesuaikan dengan berbagai cara termasuk mengubah warna wilayah, menambahkan munculan, dan penanda peta khusus.
js-libraries-custom-maps

Maplace

Maplace , plugin jQuery untuk membuat peta melalui Google Maps API v3. Maplace bekerja di semua browser, termasuk IE6. Jadi ini adalah plugin hebat lainnya yang patut Anda perhatikan jika Anda ingin membuat peta dengan cara termudah.
  • Sumber Data Peta : Google Maps
  • Dependensi : jQuery
  • Lisensi : Lisensi MIT
js-libraries-custom-maps

Megah

Stately adalah perpustakaan JavaScript yang dikembangkan untuk menghasilkan peta AS. Pustaka ini sebanding ringan mengingat Anda dapat menambahkan elemen interaktif di atas peta yang Anda buat.
  • Sumber Data Peta : Stately / SVG
  • Dependensi : tidak ada
  • Lisensi : Lisensi MIT
js-libraries-custom-maps

GeoComplete

GeoComplete adalah pustaka JavaScript tersendiri. Perpustakaan akan menambahkan bidang masukan bersama dengan peta, yang akan menunjukkan saran kota, negara atau negara bagian saat Anda mengetik.
  • Sumber Data Peta : Google Maps
  • Dependensi : jQuery
  • Lisensi : Lisensi MIT
js-libraries-custom-maps

Alat Peta

Alat Peta menyediakan API intuitif untuk menambahkan Google Maps. Ini mendukung pemuatan data JSON berformat geografis seperti TopoJSON dan GeoJSON untuk merender peta. Selain itu, Anda juga 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
  • Dependensi : GeoJSON / TopoJSON
  • Lisensi : Lisensi MIT
js-libraries-custom-maps

OpenLayers

OpenLayers adalah kerangka kerja JavaScript sumber terbuka berkinerja 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 sudah siap untuk seluler, cocok untuk membuat peta di seluruh perangkat dan browser. Anda dapat menggunakan CSS untuk tampilan berbeda dari peta Anda.
  • Sumber Data Peta : OpenStreetMap
  • Dependensi : tidak ada
  • Lisensi : Tidak ditentukan
js-libraries-custom-maps

Leaflet

Pengembang memberi fungsi dasar Leaflet agar berfungsi dengan sempurna, menjaga ukurannya tetap kecil, cocok untuk perangkat seluler. Untuk fungsi tertentu, cukup kembangkan Leaflet menggunakan plugin .
Leaflet memiliki sebagian besar fitur peta online yang Anda butuhkan: lapisan ubin, munculan, penanda, dan lapisan vektor gratis seperti polylines, poligon, lingkaran, atau persegi panjang. Muncul dengan desain default yang bagus meskipun Anda dapat menyesuaikan gayanya menggunakan CSS3 dengan mudah.
Leaflet memiliki fitur interaksi penggunaan terbanyak baik untuk browser seluler dan desktop.
  • Sumber Data Peta : OpenStreetMap
  • Dependensi : tidak ada
  • Lisensi : Tidak ditentukan
js-libraries-custom-maps

0 Komentar