İnteraktif ve Özelleştirilmiş Haritalar Oluşturmak için 13 JavaScript Kütüphanesi

Önceden haritalar oluşturmanıza yardımcı olacak Google Harita Oluşturucusu ve diğer 10 aracı daha kullandık. Bununla birlikte, bunun yerine Javascript kitaplıklarını kullanmayı tercih ederseniz, gönderiyi biz sizin için aldık. Özel harita işaretleyicilerini göstermek, özel rota çizgileri çizmek ve hatta haritanın belirli noktalarına tıkladığınızda veya tıkladığınızda bir diyalog göstermek için kullanabileceğiniz JS kütüphaneleri.

Haritalarınızı istediğiniz şekilde kişiselleştirin - bazıları CSS ile stillendirilebilir - veya haritanızı istediğiniz kadar etkileşimli olacak şekilde özelleştirin. Harita verilerinin kaynağı, her bir kütüphanenin bağımlılıkları ve lisansları size kolaylık sağlamak için eklenmiştir..

Hongkiat hakkında daha fazlası:

• Google Haritalar’a nasıl stil verilir
• HTML5 Geolocation API'sı ile kullanıcı konumu alma
• Veri Görselleştirme: 20+ kullanışlı araç ve kaynak

GMaps

GMaps Google Haritalar'ı eklemeyi ve özelleştirmeyi çok kolaylaştırır. Harita eklemenin yanı sıra, bir rota çizmek için yararlı olabilecek poliller, özel bir menü kontrolü ve hatta HTML öğeleri gibi haritaya da birkaç şey ekleyebilirsiniz..

GMaps, haritanızı Foursquare gibi belirli bir uygulamayla entegre etmek için kullanabileceğiniz JSON formatındaki verilerle uyumludur.

• Harita Veri Kaynağı: Google Haritalar
• Bağımlılıklar: Yok
• Lisans: MIT Lisansı

jHere

5KB'de, JHERE size boyutun önemli olmadığını; hala bir avuç özelleştirme seçeneğiyle güçlü bir etkileşimli harita oluşturabilirsiniz. jHERE, Windows Phone için en popüler harita sağlayıcılarından biri olan HERE haritadan harita görselleştirmesini alıyor..

Kütüphane yeni işlevlerle genişletilebilir ve bu kütüphane için geliştirilen, şekiller, yollar ve özel işaretler eklemek için kullanılan birkaç uzantı vardır..

• Harita Veri Kaynağı: HERE Haritalar
• Bağımlılıklar: jQuery veya ZeptoJS
• Lisans: MIT Lisansı

Kartograph

Kartograph haritayı SVG formatında oluşturmak için Kartograph.ph ve haritanın üstüne etkileşimli öğeler eklemek için Kartograph.js olmak üzere iki dosyadan oluşur. Kartograph.js Raphael.js üzerine kurulu olduğundan harita IE7'ye kadar iyi çalışır. Kartograph'ın neler yapabileceğini keşfetmek için etkileşimli harita demolarına bakabilirsiniz..

• Harita Veri Kaynağı: Kartograf
• Bağımlılıklar: Kartograph.py, Raphael ve jQuery
• Lisans: AGPL ve LGPL

Mapael

jQuery Mapael Etkileşim yanı sıra zarif veri görselleştirme ile haritalar oluşturmanıza olanak sağlar. Örneğin, bir harita oluşturabilir ve haritadaki her bölgeyi bölgeye göre farklı renklerle atayabilirsiniz. Ayrıca bölgedeki araç ipucunu ve benzeri etkinlik işleyicileri de ekleyebilirsiniz. tık veya duraksamak.

Harita, SEO tarafından oluşturulan ve JavaScript oluşturulmuş içeriği tarama yeteneğine sahip olmayan arama motoru robotlarına alternatif içerik sağlayarak oluşturulmuştur..

• Harita Veri Kaynağı: Raphael.js
• Bağımlılıklar: jQuery
• Lisans: MIT Lisansı

D3js

d3.js HTML, SVG ve CSS ile verilerinizi hayata geçirecek kapsamlı bir JavaScript kütüphanesidir. D3 kullanımı oldukça etkileşimli bir harita oluşturmak da dahil olmak üzere oldukça çeşitlidir. Bu Dünya Bankası Küresel Gelişim haritasına bakın, D3.js ile yapabilecekleriniz neler olacak.

• Harita Veri Kaynağı: D3.js
• Bağımlılıklar: Yok
• Lisans: Tanımsız

DataMaps

D3.js ile bir harita oluşturmak çok zorsa, kullanabilirsiniz DataMaps. DataMaps aslında haritalar oluşturmak için özel olarak geliştirilmiş bir D3.js eklentisidir. D3.js yeteneklerinin çoğunu devralır, dolayısıyla basit veya çok özelleştirilmiş haritalar oluşturabilirsiniz. Haritanın duyarlı olduğunu söylemiş miydim??

• Harita Veri Kaynağı: D3.js
• Bağımlılıklar: D3.js ve TopoJSON
• Lisans: MIT Lisansı

GeoChart

GeoChart, küçük ayrıntılara sahip tam teşekküllü bir harita yerine bölgeyi, işaretleri ve metni oluşturan basitleştirilmiş bir Google Haritasıdır. Harita SVG'de üretilir ve bölge renklerini değiştirme, açılır pencere ekleme ve özel harita işaretleyicileri gibi birçok şekilde özelleştirilebilir.

• Harita Veri Kaynağı: Google Haritalar
• Bağımlılıklar: Yok
• Lisans: Google Haritalar TOS’u okuyun

Maplace

Maplace, Google Haritalar API v3 üzerinden harita oluşturmak için bir jQuery eklentisi. Maplace, IE6 dahil olmak üzere tüm tarayıcılarda çalışır. Bu nedenle, haritayı mümkün olan en kolay şekilde oluşturmak istiyorsanız dikkat etmeniz gereken bir başka harika eklenti..

• Harita Veri Kaynağı: Google Haritalar
• Bağımlılıklar: jQuery
• Lisans: MIT Lisansı

Görkemli

Görkemli bir şekilde ABD haritaları oluşturmak için geliştirilen JavaScript kitaplığıdır. Kütüphane, oluşturulan haritalarınızın üstüne etkileşimli öğeler ekleyebileceğinizi göz önünde bulundurarak oldukça hafiftir..

• Harita Veri Kaynağı: Görkemli / SVG
• Bağımlılıklar: Yok
• Lisans: MIT Lisansı

GeoComplete

GeoComplete kendi başına ayrı bir JavaScript kütüphanesidir. Kütüphane, haritanın yanı sıra yazdığınız şehirlerin, ülkelerin veya eyaletlerin önerilerini gösterecek bir giriş alanı ekleyecektir..

• Harita Veri Kaynağı: Google Haritalar
• Bağımlılıklar: jQuery
• Lisans: MIT Lisansı

Harita Araçları

Harita Araçları, Google Haritalar'ı eklemek için sezgisel bir API sağlar. Haritayı oluşturmak için TopoJSON ve GeoJSON gibi coğrafi formatlı JSON verilerinin yüklenmesini destekler. Bunun da ötesinde, haritayı daha canlı hale getireceğini düşündüğüm animasyonlu işaretleyiciler ekleyebilir, değişkenler veya yer tutucularla HTML içeriği ekleyebilirsiniz.

• Harita Veri Kaynağı: Google Haritalar
• Bağımlılıklar: GeoJSON / TopoJSON
• Lisans: MIT Lisansı

OpenLayers

OpenLayers Çeşitli harita hizmetlerini kullanarak etkileşimli haritalar oluşturmak için yüksek performanslı bir açık kaynaklı JavaScript çerçevesidir. Birkaç harita hizmetinden döşenmiş katmanı veya vektör katmanını kullanarak harita katmanı kaynağını seçebilirsiniz..

OpenLayer, cihazlar ve tarayıcılar arasında haritalar oluşturmak için uygun, kutudan hazır mobil geliyor. Haritanızın farklı bir görünüşü için CSS'yi kullanabilirsiniz. Haritayı OpenLayers kullanarak web’inize uygulamak için işte size yardımcı olacak bir eğitim.

• Harita Veri Kaynağı: OpenStreetMap
• Bağımlılıklar: Yok
• Lisans: Tanımsız

broşür

Geliştiriciler verdi broşür Temel işlevler kusursuz çalışır, boyutunu küçük tutar, mobil cihazlar için mükemmeldir. Belirli işlevler için, eklentileri kullanarak Leaflet'i genişletmeniz yeterli. Broşür ihtiyacınız olan en çok çevrimiçi harita özelliğine sahiptir: döşeme katmanları, açılır pencereler, işaretçiler ve poliller, çokgenler, daireler veya dikdörtgenler gibi ücretsiz vektör katmanları. Kolaylıkla CSS3 kullanarak stili özelleştirebilseniz de güzel varsayılan tasarımlarla gelir.

Leaflet, hem mobil hem de masaüstü tarayıcılar için en çok kullanılan etkileşim özelliklerine sahiptir.

• Harita Veri Kaynağı: OpenStreetMap
• Bağımlılıklar: Yok
• Lisans: Tanımsız