Salı 21 Mart 2023
Hakkında
Yazarlarımız
Reklam
Künye
İletişim
Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı

Bülten

Sosyal Medya Yasası Kabul Edildi

Binance ‘e Siber Saldırı

Webmaster.Kitchen – Türkiye'nin Webmaster MutfağıWebmaster.Kitchen – Türkiye'nin Webmaster Mutfağı
  • BAŞLARKEN
    • KOD
      • PHP
      • Asp.Net
      • Swift
      • MySQL
      • CMS
  • TASARIM
    • İpuçları
    • Çizim
    • Illustrator
    • Photoshop
    • Trendler
  • ARAYÜZ
    • JavaScript
    • HTML5
    • CSS
    • REACT
  • İPUÇLARI
    • API
    • Güvenlik
    • IDE
    • Framework
    • OS
    • Verimlilik
    • İçerik
      • Dökümantasyon
      • İpuçları
      • Nasıl Oluşturulur?
  • KAYNAKLAR
    • Tasarım
    • Kod
    • İş
  • GİRİŞİM
    • Finans
    • Girişimci
    • Nasıl yapılır?
  • ARAÇLAR
  1. Anasayfa
  2. CSS
  3. Özelleştirilmiş Haritalar Oluşturabileceğiniz JavaScript Kütüphaneleri
 Özelleştirilmiş Haritalar Oluşturabileceğiniz JavaScript Kütüphaneleri
CSS JavaScript

Özelleştirilmiş Haritalar Oluşturabileceğiniz JavaScript Kütüphaneleri

Yazar : Ali Sayar 24 Eylül 2018 3 Comments

İçindekiler

  • GMaps

  • Kartograph

  • Mapael

  • D3js

  • DataMaps

  • GeoChart

  • Maplace

  • GeoComplete

  • Map Tools

  • Leaflet

Projelerinizde kullanacağınız haritalarınızı istediğiniz şekilde CSS ile şekillendirebilir veya haritanızı istediğiniz kadar etkileşimli olacak şekilde özelleştirebilirsiniz. Özel harita işaretleyicileri göstermek, özel rota çizgilerini çizmek ve hatta haritanın belirli noktalarına geldiğinizde veya tıkladığınızda bir iletişim kutusu gösterebilmek için kullanabileceğiniz JS Kütüphanelerini sizler için derledik.

GMaps


GMaps, Google Maps’e yeni özellikler ekleyerek kullanıma sunar. Bir harita eklemenin yanı sıra, bir rota çizme, özel bir menü kontrolü ve hatta HTML öğeleri için yararlı olabilecek çokgenler gibi haritaya birkaç özellik daha ekleyebilirsiniz.
GMaps, haritanızı Foursquare gibi belirli bir uygulama ile entegre etmek için kullanabileceğiniz “JSON” formatlı verilerle uyumludur.

Kartograph


Kartograph, SVG formatında haritayı oluşturmak için “Kartograph.ph” ve haritanın üstüne interaktif elemanlar eklemek için “Kartograph.js” olmak üzere iki dosyadan oluşur. Kartograph.js, Raphael.js’ nin üzerine kurulduğundan bu yana, harita IE7’ye doğru güzel bir şekilde çalışacaktır. Kartograph’ ın neler yapabileceğini keşfetmek için interaktif harita sunumlarına bakabilirsiniz.

Mapael


jQuery Mapael, etkileşimli olmasının yanı sıra zarif veri görselleştirmesi ile haritalar oluşturmanıza olanak tanır. Örneğin, bir harita oluşturabilir ve haritadaki bölgelere göre farklı renkler belirtebilirsiniz. Ayrıca, araç ipucunun yanı sıra tıklama veya gezinme gibi etkinlik işleyicileri de ekleyebilirsiniz.
Harita, JavaScript’ in oluşturduğu içeriği tarayamayan arama motoru robotları için alternatif içerik sağlayarak “SEO” düşüncesiyle oluşturulmuştur.

D3js


D3.js, verilerinizi HTML, SVG ve CSS ile hayata geçirecek kapsamlı bir JavaScript kütüphanesidir. Son derece interaktif bir harita oluşturmak için D3 kullanımı oldukça çeşitlidir. World Bank Global Development‘ in bu haritasına bakın ve D3.js. ile neler yapabileceğinizi görün.

DataMaps


D3.js ile bir harita oluşturmak çok zor geliyorsa, DataMaps‘i kullanabilirsiniz. DataMaps, esas olarak haritalar oluşturmak için geliştirilmiş bir D3.js eklentisidir. D3.js’nin bir çok özelliğini devralır, dolayısıyla basit veya çok özel haritalar oluşturabilirsiniz. Bu arada haritanız size yanıt veriyor.

GeoChart


GeoChart, küçük ayrıntıları olan tam teşekküllü bir harita yerine, bölge, işaretleyici ve metin oluşturan basitleştirilmiş bir Google Harita’ dır. Harita, SVG’ de oluşturulur ve bölge renklerinin değiştirilmesi, açılır pencere ve özel harita işaretleyicilerinin eklenmesi dahil bir çok şekilde özelleştirilebilir.

Maplace


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

GeoComplete


GeoComplete, kendi başına bir JavaScript kütüphanesidir. Kütüphane, haritayı yazarken şehirler, ülkeler veya eyaletlerin önerilerini gösteren bir giriş alanı ekleyecektir.

Map Tools


Map Tools, Google Maps’i eklemek için sezgisel API sağlar. Harita oluşturmak için “TopoJSON” ve “GeoJSON” gibi coğrafi formatlı JSON verilerinin yüklenmesini destekler. Bunun üzerine, haritayı daha canlı hale getireceğini düşündüğüm animasyonlu işaretler ekleyebilir, değişkenlere veya placeholder’ a sahip olan HTML öğeleri de ekleyebilirsiniz.

Leaflet


Geliştiriciler, mobil cihazlara uygun boyutta küçüklüğünü koruyarak, kusursuz çalışabilmek için Leaflet’ i oluşturdular. Belirli işlevler için, eklentileri kullanarak genişletebilirsiniz. İhtiyacınız olan çoğu çevrimiçi harita özelliğine sahiptir; işaretçiler, açılır pencereler, çokgenler gibi serbest vektör katmanları. CSS3′ ü kullanarak kolaylıkla özelleştirebileceğiniz gibi varsayılan tasarımlarda oldukça güzeldir. Hem mobil hem de masaüstü tarayıcıları için en çok kullanılan etkileşim özelliklerine sahiptir.

Bu yazımızda sizlere projelerinizde kullandığınız haritalarınıza, daha fazla özellik ekleyebileceğiniz JavaScript Kütüphaneleri’ nden bahsettik. Siz de bilgilerinizle yorum kısmından mutfağa katkıda bulunabilirsiniz.

Etiketler: Harita javascript JavaScript Harita js harita jskütüphaneleri jslibrary jsmaps maps özel harita oluşturma
Önceki Yazı
Sonraki Yazı

Ali Sayar

administrator

Web Programlama alanında çalışmalar yapıyorum.Bu alanda öğrendiğim yararlı ve pratik bilgileri mutfakta paylaşıyorum.Siz de yaptığınız çalışmaları, edindiğiniz bilgileri paylaşabilirsiniz. Yorum alanı ile mutfağa katkıda bulunun.

3 Yorumlar

  • Bulut ATAR says:
    22 Şubat 2019 at 18:51

    Merhaba,
    Türkiye bazlı, il ayrımlarınında yapılabileceğiz bir map varmı önerebileceğiniz acaba?

    Reply
    • Bilal UÇAR says:
      24 Şubat 2019 at 17:25

      Merhaba az önce bakınırken şunu buldum: https://github.com/dnomak/svg-turkiye-haritasi inceleyebilirsiniz.

      Reply
  • bahar özmen says:
    26 Ocak 2020 at 19:17

    wix sitesini kullanarak ben de kullanıcıların girdiği şehiri gösteren ve bu şehirin koordinatlarını veri tabanında tutan bir sayfa yapmaya çalışıyorum. Yeni olmam nedeniyle çok fazla hakim değilim. yardım edebilir misiniz.

    Reply

Yorum Yap Yorumu İptal Et.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Taze Yazılar
Güncel

Sosyal Medya Yasası Kabul Edildi

14 Ekim 2022
Blockchain

Binance ‘e Siber Saldırı

8 Ekim 2022
Blockchain

Binance ‘den Ücretsiz Eğitim

5 Ekim 2022
Güncel

Japonya için Yenilenen Corolla

4 Ekim 2022
© 2021 Webmaster Kitchen. Tüm Hakları Saklıdır.