Stilli Haritalar

Maps Static API'yi kullanırken kendi stillerinizi uygulayarak standart Google haritasının sunumunu özelleştirin. Yollar, parklar, yerleşim alanları ve diğer önemli yerler gibi özelliklerin görsel görüntüsünü değiştirebilirsiniz. Belirli içerikleri vurgulamak, sayfadaki diğer içerikleri tamamlamak veya hatta özellikleri tamamen gizlemek için renklerini ya da stillerini değiştirin.

Örnekler

Aşağıdaki örnekte, yerel yolları parlak yeşil, yerleşim alanlarını siyah renkte gösterecek şekilde stilize edilmiş ABD, Brooklyn haritası gösterilmektedir. Ayrıca, koyu arka planda daha iyi öne çıkabilmeleri için etiketlerin açıklığını tersine çevirir. Şu çalışan örneğin URL kodlaması kullandığını unutmayın:

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=15&center=Brooklyn&style=feature:road.local%7Celement:geometry%7Ccolor:0x00ff00&style=feature:landscape%7Celement:geometry.fill%7Ccolor:0x000000&style=element:labels%7Cinvert_lightness:true&style=feature:road.arterial%7Celement:labels%7Cinvert_lightness:false&key=YOUR_API_KEY&signature=YOUR_SIGNATURE
Brooklyn'in stilize edilmiş haritası.

Aşağıdaki örnekte, ABD yol atlasının görünümüne benzer bir görünüm elde etmek için stil işlemleri ve basitleştirmeler kullanılmıştır:

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=12&center=Chicago&format=png&style=feature:road.highway%7Celement:geometry%7Cvisibility:simplified%7Ccolor:0xc280e9&style=feature:transit.line%7Cvisibility:simplified%7Ccolor:0xbababa&style=feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff&key=YOUR_API_KEY&signature=DITIGAL_SIGNATURE
ABD Yol Atlası Harita Stili.

Stil söz dizimi

Özelleştirilmiş bir stil haritası oluşturmak için istek URL'sine bir veya daha fazla style parametresi ekleyin.

Her style bildirimi, dikey çizgi karakterleriyle ("|") ayrılmış aşağıdaki bağımsız değişkenleri içerebilir:

  • feature (isteğe bağlı), bu stil değişikliği için seçilecek özellikleri belirtir. Haritadaki yollar, parklar veya diğer önemli yerler gibi öğeler özelliklere dahildir. feature bağımsız değişkeni yoksa belirtilen stil tüm özellikler için geçerli olur.
  • element (isteğe bağlı), bu stil değişikliği için seçilecek belirtilen özelliğin öğelerini gösterir. Öğeler, bir özelliğin geometri veya etiketler gibi özellikleridir. element bağımsız değişkeni yoksa stil, belirtilen özelliğin tüm öğeleri için geçerli olur.
  • Belirtilen özelliklere ve öğelere uygulanacak bir dizi stil kuralı (zorunlu). API, kuralları style beyanında göründükleri sırayla uygular. Maps Static API'nin normal URL uzunluğu kısıtlamaları dahilinde istediğiniz sayıda kural ekleyebilirsiniz.
style=feature:myFeatureArgument|element:myElementArgument|myRule1:myRule1Argument|myRule2:myRule2Argument

Özellikler

Aşağıdaki style beyanı, haritadaki tüm yolları renklendirir:

style=feature:road|color:0xffffff

Sık kullanılan özelliklerden bazıları şunlardır:

  • feature:all (varsayılan), haritanın tüm özelliklerini seçer.
  • feature:road, haritada tüm yolları seçer.
  • feature:road.local tüm yerel yolları seçer.

Özellikler veya özellik türleri; yollar, parklar, su kütleleri, işletmeler vb. dahil haritadaki coğrafi niteliklerdir.

Özellikler, kökü all olan bir kategori ağacı oluşturur. Bir özellik belirtmezseniz tüm özellikler seçilir. all özelliğini belirtmek de aynı etkiye sahiptir.

Bazı özellikler, nokta gösterimi kullanarak belirttiğiniz alt özellikler içerir. Örneğin, landscape.natural veya road.local. Yalnızca road gibi üst özelliği belirtirseniz üst öğe için belirttiğiniz stiller, road.local ve road.highway gibi tüm alt öğelere uygulanır.

Üst özelliklerin, tüm alt özelliklerine dahil edilmeyen bazı öğeler içerebileceğini unutmayın.

Aşağıdaki özellikler kullanılabilir:

  • all (varsayılan) tüm özellikleri seçer.
  • administrative tüm idari bölgeleri seçer. Stil, coğrafi sınırları veya dolguyu değil, yalnızca idari bölgelerin etiketlerini etkiler.
    • administrative.country ülkeleri seçer.
    • administrative.land_parcel, arsaları seçer.
    • administrative.locality, yerellikleri seçer.
    • administrative.neighborhood mahalleleri seçer.
    • administrative.province il seçtiğinde
  • landscape tüm manzaraları seçer.
    • landscape.man_made, binalar ve diğer yapılar gibi insan yapımı özellikleri seçer.
    • landscape.natural dağ, nehir, çöl ve buzul gibi doğal özellikleri seçer.
    • landscape.natural.landcover, orman, çayır, sulak alan ve çıplak zemin gibi dünya yüzeyini kaplayan fiziksel materyal olan arazi örtüsü özelliklerini seçer.
    • landscape.natural.terrain, arazi yüzeyinin yükseklik, eğim ve yön gibi arazi özelliklerini seçer.
  • poi tüm önemli yerleri seçer.
    • poi.attraction turistik yerleri seçiyor.
    • poi.business işletmeleri seçer.
    • poi.government resmi binaları seçer.
    • poi.medical hastaneler, eczaneler, polis, doktorlar ve diğerleri dahil olmak üzere acil durum hizmetlerini seçer.
    • poi.park parkları seçer.
    • poi.place_of_worship, kiliseler, tapınaklar, camiler ve diğer ibadet yerleri dahil olmak üzere ibadet yerlerini seçer.
    • poi.school okul seçer.
    • poi.sports_complex spor komplekslerini seçiyor.
  • road tüm yolları seçer.
    • road.arterial ana yolları seçer.
    • road.highway otoyolları seçer.
    • road.highway.controlled_access, erişim kontrollü otoyolları seçer.
    • road.local yerel yolları seçer.
  • transit, tüm toplu taşıma istasyonlarını ve hatları seçer.
    • transit.line toplu taşıma hatlarını seçiyor.
    • transit.station tüm toplu taşıma istasyonlarını seçer.
    • transit.station.airport havaalanlarını seçer.
    • transit.station.bus otobüs duraklarını seçer.
    • transit.station.rail, tren istasyonlarını seçer.
  • water, su kütlelerini seçer.

Öğeler

Aşağıdaki style beyanı, tüm yerel yollar için etiketleri renklendirir:

style=feature:road.local|element:labels|color:0xffffff

Öğeler, özelliğin alt bölümleridir. Örneğin, bir yol, harita üzerindeki bir grafik çizgiden (Geometri) ve aynı zamanda yolun adını belirten metinden (bir etiket) oluşur.

Aşağıdaki öğeler kullanılabilir ancak belirli bir özellik, öğelerin hiçbirini, bazılarını veya tamamını desteklemeyebilir:

  • all (varsayılan), belirtilen özelliğin tüm öğelerini seçer.
  • geometry, belirtilen özelliğin tüm geometrik öğelerini seçer.
    • geometry.fill yalnızca özelliğin geometrisinin dolgusunu seçer.
    • geometry.stroke yalnızca özelliğin geometrisinin çizgisini seçer.
  • labels, belirtilen özellikle ilişkili metin etiketlerini seçer.
    • labels.icon yalnızca özelliğin etiketinde görüntülenen simgeyi seçer.
    • labels.text yalnızca etiketin metnini seçer.
    • labels.text.fill yalnızca etiketin içini seçer. Bir etiketin dolgusu genellikle etiket metnini çevreleyen renkli bir dış çizgi olarak oluşturulur.
    • labels.text.stroke, yalnızca etiketin metninin kalınlığını seçer.

Stil kuralları

Stil kuralları, her style beyanında belirtilen özelliklere ve öğelere uygulanan biçimlendirme seçenekleridir.

Aşağıdaki style beyanı, haritada bulunan yollara iki stil kuralı uygular. İlk kural, yollara bir renk uygular. İkinci kural, yolların görüntülenmesini basitleştirir. Bu nedenle, ana hatları olmayan daha ince çizgiler kullanılır:

style=feature:road|color:0xffffff|visibility:simplified

Her style bildirimi, dikey çizgi ("|") karakteriyle ayrılmış bir veya daha fazla işlem içermelidir. Her işlem, iki nokta üst üste (":") karakterini kullanarak kendi bağımsız değişken değerini belirtir ve tüm işlemler, bunları belirttiğiniz sıraya göre seçime uygulanır.

Aşağıdaki stil seçenekleri desteklenir:

  • hue (#RRGGBB biçiminde bir RGB onaltılık dizesi), temel rengi belirtir.

    Not: Bu seçenek, varsayılan Google stilinde (veya haritada tanımladığınız diğer stil seçeneklerinde) belirtilen doygunluk ve açıklığı koruyarak tonu belirler. Elde edilen renk, temel haritanın stiline bağlıdır. Google, temel harita stilinde herhangi bir değişiklik yaparsa bu değişiklikler, haritanızın hue ile biçimlendirilmiş özelliklerini etkiler. Mümkünse mutlak color stilleştiriciyi kullanmak daha iyidir.

  • lightness (-100 ile 100 arasında bir kayan nokta değeri), öğenin parlaklığındaki yüzdelik değişimi gösterir. Negatif değerler karanlığı artırır (-100 siyahı belirtir), pozitif değerler ise parlaklığı artırır (+100 beyazı belirtir).

    Not: Bu seçenek, varsayılan Google stilinde (veya haritada tanımladığınız diğer stil seçeneklerinde) belirtilen doygunluğu ve tonu korurken ışığı ayarlar. Elde edilen renk, temel haritanın stiline bağlıdır. Google temel harita stilinde herhangi bir değişiklik yaparsa bu değişiklikler, haritanızın lightness ile stilize edilen özelliklerini etkiler. Mümkünse mutlak color stilleştiriciyi kullanmak daha iyidir.

  • saturation (-100 ile 100 arasında kayan noktalı bir değer), öğeye uygulanacak temel rengin yoğunluğundaki yüzdelik değişimi belirtir.

    Not: Bu seçenek, varsayılan Google stilinde (veya haritada tanımladığınız diğer stil seçeneklerinde) belirtilen tonu ve açıklığı koruyarak doygunluğu ayarlar. Elde edilen renk, temel haritanın stiline göre belirlenir. Google, temel harita stilinde herhangi bir değişiklik yaparsa bu değişiklikler, haritanızın saturation ile biçimlendirilmiş özelliklerini etkiler. Mümkünse mutlak color stilleştiriciyi kullanmak daha iyidir.

  • gamma (1.0'ın hiçbir düzeltme uygulamadığı 0.01 ile 10.0 arasında bir kayan nokta değeri), öğeye uygulanacak gama düzeltme miktarını belirtir. Gama düzeltmeleri, beyaz veya siyah değerlerini etkilemeden renklerin açıklığını doğrusal olmayan bir şekilde değiştirir. Gama düzeltmesi genellikle birden fazla öğenin kontrastını değiştirmek için kullanılır. Örneğin, öğelerin kenarları ile iç kısımları arasındaki kontrastı artırmak veya azaltmak için gama ayarını değiştirebilirsiniz.

    Not: Bu seçenek, gama eğrisi kullanarak açıklığı varsayılan Google stiline göre ayarlar. Google, temel harita stilinde herhangi bir değişiklik yaparsa bu değişiklikler, haritanızın gamma ile biçimlendirilmiş özelliklerini etkiler. Mümkünse mutlak color biçimlendiriciyi kullanmanız daha iyi olur.

  • invert_lightness (true ise) mevcut açıklığı tersine çevirir. Örneğin, beyaz metinlerin bulunduğu daha koyu bir haritaya hızlıca geçmek için bu özelliği kullanabilirsiniz.

    Not: Bu seçenek yalnızca varsayılan Google stilini tersine çevirir. Google, temel harita stilinde herhangi bir değişiklik yaparsa bu değişiklikler, haritanızın invert_lightness ile biçimlendirilmiş özelliklerini etkiler. Mümkünse mutlak color stilleştiriciyi kullanmak daha iyidir.

  • visibility (on, off veya simplified), öğenin haritada görünüp görünmediğini ve nasıl göründüğünü belirtir. simplified görünürlük, etkilenen özelliklerden bazı stil özelliklerini kaldırır. Örneğin, yollar, dış çizgileri olmayan daha ince çizgilere basitleştirilir. Parklar ise etiket metinlerini kaybeder ancak etiket simgelerini korur.
  • color (#RRGGBB biçiminde bir RGB onaltılık dizesi), özelliğin rengini belirler.
  • weight (sıfır veya sıfırdan büyük bir tam sayı değeri), özelliğin ağırlığını piksel cinsinden belirler. Ağırlığı yüksek bir değere ayarlamak, karo kenarlarının kırpılmasına neden olabilir.

Stil kuralları belirttiğiniz sırayla uygulanır. Birden fazla işlemi tek bir stil işleminde birleştirmeyin. Bunun yerine, her işlemi stil dizisinde ayrı bir giriş olarak tanımlayın.

Not: Bazı işlemler değişmeli olmadığından sıra önemlidir. Stil işlemleriyle değiştirilen özelliklerin ve/veya öğelerin (genellikle) zaten mevcut stilleri vardır. İşlemler, mevcut stiller varsa bu stiller üzerinde çalışır.

Ton, doygunluk, açıklık modeli

Stil özellikleri ayarlanmış haritalar, stil belirleyici işlemlerindeki rengi belirtmek için ton, doygunluk, açıklık (HSL) modelini kullanır. Ton temel rengi, doygunluk bu rengin yoğunluğunu, parlaklık ise oluşturan renkteki beyaz veya siyahın göreceli miktarını belirtir.

Gama düzeltme özelliği genellikle kontrastı artırmak veya azaltmak için renk alanı üzerindeki ışığı değiştirir. Ayrıca HSL modeli, hue'ün bir renk tekerleği içindeki oryantasyonu, doygunluk ve açıklık ise farklı eksenler boyunca genlikleri gösterdiği bir koordinat alanında renk tanımlar. Tonlar, beyaz ve siyah tonlarının bulunmaması dışında çoğu RGB renk alanına benzer bir RGB renk alanında ölçülür.

Ton, doygunluk, açıklık modeli

hue, HTML onaltılık renk değerini alır ancak bu değeri yalnızca temel rengi belirlemek için kullanır. Yani, doygunluğunu veya açıklığını değil, renk tekerleğindeki yönünü yüzdelik değişim olarak ayrı ayrı gösterilen bu değeri kullanır.

Örneğin, saf yeşilin tonunu hue:0x00ff00 veya hue:0x000100 olarak tanımlayabilirsiniz. Her iki ton da aynıdır. Her iki değer de HSL renk modelinde saf yeşili gösterir.

RGB Renk Çarkı

Eşit kırmızı, yeşil ve mavi parçalarından oluşan RGB hue değerleri, renk tonu belirtmez. Bunun nedeni, bu değerlerin hiçbiri HSL koordinat alanında bir yönü belirtmez. Örnekler: "#000000" (siyah), "#FFFFFF" (beyaz) ve tüm saf gri tonları. Siyah, beyaz veya griyi belirtmek için tüm saturation öğelerini kaldırmanız (değeri -100 olarak ayarlamanız) ve bunun yerine lightness değerini ayarlamanız gerekir.

Ayrıca, halihazırda bir renk şemasına sahip mevcut özellikler değiştirilirken hue gibi bir değerin değiştirilmesi, mevcut saturation veya lightness değerini değiştirmez.