Özel Markalı Harita Nasıl Stilize Edilir: Karanlık Mod

Rakip uygulamalarında gördüğünüz her harita aynı varsayılan stili kullanır. Genelleştirilmiş bej yollar, orta tonlarda-mavi su, kendi arayüzünüzle dikkat çekmek için çatışan dağınık POI simgeleri, bunlar hiç kimseyi kırmamak ve hiç kimseyi sevindir itmemek için tasarlanan evrensel varsayılanlar. Tek bir şeyi açıkça iletirler: bu ürün bir harita kütüphanesi kullanıyor, harita deneyimine sahip değil.

Özel harita stillemesi bunu değiştirir. Lojistik kontrol panelinde koyu mod harita, gayrimenkul uygulamasında marka yeşili yol ağı, anotasyon filigranının olduğu yere logosu yerleştirilmiş temiz minimalist stil, bunlar bir aracı ürüne yükselten ayrıntılardır.

Bu öğretici MapAtlas tarafından uygulanan Mapbox Stil Spesifikasyonunu, stil JSON'un yapısından React'te tam açık/koyu değiştirmeye kadar yürütür. GIS deneyimine ihtiyacınız yoktur. JSON ve JavaScript ile rahat olmanız gerekir.

Henüz temel bir harita kurmadıysanız, önce Web Sitenize Etkileşimli Haritalar Nasıl Eklenir ile başlayın, sonra stillemek için buraya dönün.

Varsayılan Harita Stilleri Neden Genelleştirilmiş Görünür

Bir kiremit sağlayıcısının varsayılan stili, en geniş olası kitlesi için, en geniş olası bağlamda evrensel olarak okunabilir olacak şekilde tasarlanmıştır. Estetik görüşten ziyade bilgisel yoğunluğu önceliklendirir. Yolların görünür olması gerekir. Etiketlerin kontrast yapması gerekir. POI simgelerinin tanınabilir olması gerekir.

Bu hedeflerin hiçbiri ürün amaçlarınızla uyumlu değildir. Uygulamanız muhtemelen haritada neler varsa bunun küçük bir alt kümesiyle ilgilenir, teslimat rotaları, emlak konumları, sağlık tesisleri ve diğer her şey görsel gürültüdür.

Özel stillemeler ihtiyacınız olmayan şeyleri bastırmanıza, önemsediğiniz şeyleri vurgulayarak ve haritanın bırakılan üçüncü taraf bir widget'i yerine ürün parçası olarak okunmasını sağlar.

Stil Spesifikasyonunu Anlamak

MapAtlas stili beş anahtar bölümü olan bir JSON belgesidir:

{
  "version": 8,
  "name": "My Brand Style",
  "sources": { ... },
  "glyphs": "https://tiles.mapatlas.eu/fonts/{fontstack}/{range}.pbf?key=YOUR_API_KEY",
  "sprite": "https://tiles.mapatlas.eu/sprites/basic?key=YOUR_API_KEY",
  "layers": [ ... ]
}

• sources, harita verilerinin geldiği yer (MapAtlas vektör kiremit uç noktaları)
• glyphs, etiket oluşturma için yazı tipi dosyalarının yükleneceği yer
• sprite, POI işaretçileri için simge görüntülerinin yükleneceği yer
• layers, her biri boyama ve düzen özelliklerine sahip görsel katmanların sıralı listesi

layers dizisi, zamanınızın çoğunu harcayacağınız yerdir. Her katman bir veri türünü (fill, line, symbol, circle, fill-extrusion), hangi kaynak özelliklerin çizileceğini ve nasıl boyanacağını belirtir.

Bir vektör kiremit tabanını oluşturan minimal ama tam bir stil şöyledir:

{
  "version": 8,
  "name": "Brand Base",
  "sources": {
    "mapatlas": {
      "type": "vector",
      "tiles": ["https://tiles.mapatlas.eu/v1/tiles/{z}/{x}/{y}.mvt?key=YOUR_API_KEY"],
      "minzoom": 0,
      "maxzoom": 14
    }
  },
  "glyphs": "https://tiles.mapatlas.eu/fonts/{fontstack}/{range}.pbf?key=YOUR_API_KEY",
  "sprite": "https://tiles.mapatlas.eu/sprites/basic?key=YOUR_API_KEY",
  "layers": [
    {
      "id": "background",
      "type": "background",
      "paint": { "background-color": "#f5f0eb" }
    }
  ]
}

Bu seçilen arka plan renginde boş bir tuval işler. Buradan su, arazi kullanımı, yollar, binalar ve etiketler için katmanlar eklersiniz.

Koyu Mod: Temel Renkleri Değiştirme

Koyu mod harita basitçe ters çevrilmiş bir raster görüntü değildir. Aynı vektör geometrisine uygulanan tamamen farklı bir boyama özellikleri kümesidir. Bu vektör kiremitlerinin var olmasının temel nedenlerinden biridir, bir kiremit, sonsuz görsel yorumlamalar.

Koyu tema için güncellenecek anahtar renkler:

Bunu stil katmanında nasıl uygulanır:

{
  "id": "water",
  "type": "fill",
  "source": "mapatlas",
  "source-layer": "water",
  "paint": {
    "fill-color": "#0d3b66",
    "fill-opacity": 1
  }
}

{
  "id": "road-major",
  "type": "line",
  "source": "mapatlas",
  "source-layer": "transportation",
  "filter": ["==", "class", "primary"],
  "layout": {
    "line-join": "round",
    "line-cap": "round"
  },
  "paint": {
    "line-color": "#3a3a5c",
    "line-width": ["interpolate", ["linear"], ["zoom"], 10, 1, 16, 4]
  }
}

line-width içindeki interpolate ifadesi yol genişliğini yakınlaştırma düzeyine göre ölçekler, düşük yakınlaştırmada dar, yakınlaştırırken daha geniş. Bu ek ağ istekleri olmadan veri odaklı stillemedir.

Marka Renklerini Uygulama

Çoğu tasarım sistemi birincil renk (örneğin #97C70A), ikincil renk ve nötr palet tanımlar. Harita bu değerlerin aynısını kullanmalı, tahminini değil.

Bu katmanları marka rengi uygulaması için hedefleyin:

Yollar marka öğeleri olarak. Marka renginiz yeterince canlıysa, ana yollar veya vurgulanan rotalar için kullanın:

{
  "id": "road-highlighted",
  "type": "line",
  "source": "mapatlas",
  "source-layer": "transportation",
  "filter": ["==", "class", "primary"],
  "paint": {
    "line-color": "#97C70A",
    "line-width": 3,
    "line-opacity": 0.8
  }
}

Özel POI işaretçileri. Özel bir sprite sayfasını barındırarak ve sprite URL'sini güncelleyerek varsayılan sprite simgelerini kendinizinle değiştirin. Daha sonra simge katmanlarında simgelerinize başvurun:

{
  "id": "brand-poi",
  "type": "symbol",
  "source": "mapatlas",
  "source-layer": "poi",
  "layout": {
    "icon-image": "brand-pin",
    "icon-size": 1.2,
    "text-field": ["get", "name"],
    "text-font": ["Inter Bold", "Noto Sans Regular"],
    "text-size": 12,
    "text-offset": [0, 1.5],
    "text-anchor": "top"
  },
  "paint": {
    "text-color": "#97C70A",
    "text-halo-color": "#1a1a2e",
    "text-halo-width": 1
  }
}

Harita Etiketleri için Özel Yazı Tipleri

Varsayılan harita etiket yazı tipleri geneldir. Markanız Inter, Roboto veya özel bir yazı tipi kullanıyorsa, bunu harita etiketleri için de kullanabilirsiniz.

MapAtlas glif'leri kendi glif uç noktasından sunar, standart Mapbox glif biçimini destekler. Özel bir yazı tipi kullanmak için:

1. fontnik gibi bir araç kullanarak yazı tipinizden .pbf glif dosyaları oluşturun.
2. Glif dosyalarını bir CDN'de veya kendi sunucunuzda barındırın.
3. Stil JSON'unuzdaki glyphs alanını güncelleyin:

{
  "glyphs": "https://your-cdn.com/fonts/{fontstack}/{range}.pbf"
}

4. Herhangi bir simge katmanının text-font özelliğinde yazı tipine başvurun:

"text-font": ["Inter Bold", "Noto Sans Regular"]

Her zaman geri dönüş yazı tipi sağlayın (Noto Sans birincil yazı tipinizin içermeyebileceği Unicode karakterlerini kapsar). Oluşturucu dizideki her karakter için glif içeren ilk yazı tipini kullanır.

Filigranları ve Anotasyonları Kaldırma

MapAtlas tam beyaz etiketli dağıtıma izin verir. MapAtlas logosunu haritadan tamamen kaldırabilirsiniz.

SDK'da, anotasyon devre dışı bırakabileceğiniz bir denetim tarafından yönetilir:

const map = new mapmetricsgl.Map({
  container: 'map',
  style: 'https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY',
  center: [4.9041, 52.3676],
  zoom: 12,
  attributionControl: false,  // Varsayılan anotasyon denetimini kaldırın
});

Anotasyonu tutmak ancak arayüzünüzle eşleşecek şekilde stillemek istiyorsanız, varsayılan denetimi gizleyin ve kendinizin ekleyin:

map.addControl(
  new mapmetricsgl.AttributionControl({
    customAttribution: 'Harita verisi © OpenStreetMap katkıcıları',
    compact: true,
  }),
  'bottom-left'
);

Bu, markayı arayüzünüzle eşleştirirken OpenStreetMap'in lisansına saygı duyan minimal ve yasal olarak uyumlu bir anotasyonla değiştirir. Google Haritalar'ın aksine, planınız ne olursa olsun logosunun her zaman görünür kalması gerekmez, MapAtlas size tam kontrol verir.

React'te Açık/Koyu Tema Değiştirme

Burada temayı arayüzünüzün geri kalanıyla senkronize tutmak için CSS özel özelliklerini kullanarak, bir haritayı açık/koyu değiştirme ile yöneten tam bir React bileşeni:

import { useEffect, useRef, useState } from 'react';
import mapmetricsgl from '@mapmetrics/mapmetrics-gl';
import '@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css';

const STYLES = {
  light: 'https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY',
  dark:  'https://tiles.mapatlas.eu/styles/dark/style.json?key=YOUR_API_KEY',
};

export function BrandedMap({ center = [4.9041, 52.3676], zoom = 12 }) {
  const containerRef = useRef(null);
  const mapRef       = useRef(null);
  const [theme, setTheme] = useState('light');

  useEffect(() => {
    const map = new mapmetricsgl.Map({
      container:        containerRef.current,
      style:            STYLES.light,
      center,
      zoom,
      attributionControl: false,
    });

    map.addControl(
      new mapmetricsgl.AttributionControl({ compact: true }),
      'bottom-left'
    );

    mapRef.current = map;
    return () => map.remove();
  }, []);

  useEffect(() => {
    if (mapRef.current) {
      mapRef.current.setStyle(STYLES[theme]);
    }
  }, [theme]);

  return (
    <div style={{ position: 'relative' }}>
      <div ref={containerRef} style={{ width: '100%', height: '500px' }} />
      <button
        onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}
        style={{
          position: 'absolute',
          top: 12,
          right: 12,
          padding: '8px 16px',
          background: theme === 'dark' ? '#ffffff' : '#1a1a2e',
          color:      theme === 'dark' ? '#1a1a2e' : '#ffffff',
          border: 'none',
          borderRadius: 6,
          cursor: 'pointer',
          zIndex: 1,
        }}
      >
        {theme === 'light' ? 'Dark mode' : 'Light mode'}
      </button>
    </div>
  );
}

setStyle çağrısı haritayı yeni renk şemasıyla yeniden işler. Bellekte bulunan kiremit verisi yeniden indirilmez, sadece görsel yorumlama değişir.

Özel Stil JSON'u Barındırma

Tam kontrol için stil JSON'unuzu CDN'de veya S3 kavanozunda statik bir dosya olarak barındırın. Bu size şunları yapmanıza izin verir:

• Stil sürüm kontrolünü uygulama kodunuzun yanında yapın.
• Uygulamayı yeniden dağıtmadan görsel tasarımı güncelleyin (sadece barındırılan JSON'u güncelleyin).
• Farklı ortamlar için farklı stiller kullanın (ön izleme vs. üretim).

Çalışma zamanında barındırılan bir stili yükleyin:

const map = new mapmetricsgl.Map({
  container: 'map',
  style: 'https://your-cdn.com/styles/brand-dark.json',
  center: [4.9041, 52.3676],
  zoom: 12,
});

Tek kısıtlama CORS'dur: stil JSON'u Access-Control-Allow-Origin: * (veya belirli alan adınız) ile sunulmalıdır, böylece tarayıcı bunu köken arası alabilir.

Stil Geliştirme İş Akışı

Özel bir stil oluşturmanın en hızlı yolu yinelemeli, kodu yeniden yazmadan değişiklikleri gerçek zamanda görmektir.

1. MapAtlas temel stil JSON'unu temel olarak kullanmaya başlayın. https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY adresinden indirerek getirin.
2. JSON'u editöründe düzenleyin, hangi katmanın hangi görsel öğeyi etkilediğini izleyin.
3. Sonucu görmek için haritayı değiştirilmiş stil JSON'unuzla yeniden yükleyin.
4. Kararlı olduğunda, stil JSON'u depo'nuzda sabit hale getirin ve CDN'de barındırın.

Daha derin özelleştirmeler için, tam katman başvurusu, boyama özellik türleri ve ifade sözdizimi için Harita Görselleştirme & Stillemesi belgelerine bakın.

Mapbox'tan geliyor ve neler değiştiğini merak ediyorsanız, özellik ve fiyatlandırmanın yan yana karşılaştırması için Mapbox vs. MapAtlas: EU Projeniz için Hangi Harita API'si Doğru? sayfasına bakın.

Ve vektör kiremitlerinin tüm bunları mümkün kılan mimarî temelini görmek için, Vektör Kiremitleri vs. Raster Kiremitleri oluşturma ardışık düzenini ayrıntılı olarak açıklar.

Özet

Özel harita stillemesi bir lüks değil, üçüncü taraf widget gibi hissettiren harita ile ürün için yapılmış hissettiren bir harita arasındaki farktır. MapAtlas ile:

• Stil spesifikasyonu Mapbox GL JS araçlarıyla uyumlu standart JSON'dur.
• Koyu mod stil JSON değişimi, yeni kiremit seti veya sunucu yapılandırması değildir.
• Marka renkleri boyama özellikleri yoluyla yollara, etiketlere ve POI simgelerine uygulanır.
• Özel yazı tipleri kontrol ettiğiniz herhangi bir glif uç noktasından yüklenir.
• Filigranlar ve anotasyonlar tamamen yapılandırılabilir, beyaz etiket tüm ücretli planlarda desteklenir.
• Tüm stil sayfa yenileme olmadan çalışma zamanında değiştirilebilir.

Bugün markalı harita oluşturmaya başlayın. Ücretsiz MapAtlas API anahtarı için kaydolun ve temel stil JSON'u başlangıç noktanız olarak yükleyin. İlk özel stil yaklaşık 30 dakika sürer, sonraki yinelemeler dakikalar sürer.