कस्टम ब्रांडेड मैप कैसे स्टाइल करें: डार्क मोड

आपने कभी किसी competitor के app पर जो map देखा होगा, वह default style में था। Generic beige सड़कें, mid-teal पानी, cluttered POI icons जो आपके UI से लड़ते हैं, ये universal defaults हैं, किसी को न offend करने और किसी को न delight करने के लिए बने। वे एक बात clearly communicate करते हैं: यह product map library use कर रहा है, map experience own नहीं कर रहा।

Custom map styling यह बदलती है। Logistics dashboard पर dark mode map, real estate app पर brand-green road network, आपके logo के साथ watermark की जगह clean minimalist style, ये वो details हैं जो एक tool को product में बदलती हैं।

यह tutorial MapAtlas द्वारा implement Mapbox Style Specification को style JSON की structure से लेकर React में complete light/dark toggle तक explain करता है। आपको GIS experience की ज़रूरत नहीं। JSON और JavaScript में comfortable होना काफी है।

अगर आपने अभी तक basic map set up नहीं किया है, तो पहले How to Add Interactive Maps to Your Website से शुरू करें।

Default Map Styles Generic क्यों दिखते हैं

एक tile provider का default style सबसे wide possible audience के लिए universally legible होने के लिए design किया जाता है। यह aesthetic opinion पर informational density को priority देता है। आपके product के goals इनमें से किसी से भी align नहीं करते। आपका app शायद map पर जो है उसके small subset, delivery routes, property locations, healthcare facilities, की परवाह करता है, बाकी सब visual noise है।

Custom styling आपको वह suppress करने देती है जो आपको नहीं चाहिए, वह emphasize करने देती है जो चाहिए, और ensure करती है कि map आपके product का हिस्सा लगे।

Style Specification समझना

MapAtlas style एक JSON document है जिसमें पांच key sections हैं:

{
  "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: map data कहां से आती है (MapAtlas vector tile endpoints)
• glyphs: label rendering के लिए font files कहां से load करें
• sprite: POI markers के लिए icon images कहां से load करें
• layers: visual layers की ordered list, हर एक में paint और layout properties

यहां एक minimal लेकिन complete style है जो vector tile base render करती है:

{
  "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" }
    }
  ]
}

Dark Mode: Core Colors बदलना

Dark mode map केवल एक inverted raster image नहीं है। यह उसी vector geometry पर apply की गई paint properties का completely अलग set है। यह vector tiles का एक core कारण है, एक tile, infinite visual interpretations।

Dark theme के लिए update करने वाले key colors:

इसे style layer में apply करने का तरीका:

{
  "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 में interpolate expression zoom level के आधार पर road width scale करता है, बिना किसी additional network requests के।

Brand Colors Apply करना

अधिकांश design systems एक primary color (जैसे #97C70A), secondary color और neutral palette define करते हैं। Map को इन्हीं values use करनी चाहिए।

Brand color application के लिए इन layers को target करें:

Roads as brand elements:

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

Custom POI markers: अपना custom sprite sheet host करके और sprite URL update करके default sprite icons को replace करें:

{
  "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
  }
}

Map Labels के लिए Custom Fonts

अगर आपका brand Inter, Roboto या कोई custom typeface use करता है, तो आप उसे map labels के लिए भी use कर सकते हैं।

Custom font use करने के लिए:

1. fontnik जैसे tool से अपने typeface से .pbf glyph files generate करें।
2. Files को CDN या अपने server पर host करें।
3. Style JSON में glyphs field update करें:

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

4. किसी भी symbol layer के text-font property में font reference करें:

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

हमेशा fallback font provide करें (Noto Sans उन Unicode characters को cover करता है जो आपका primary font न दे)।

Watermarks और Attribution हटाना

MapAtlas full white-label deployment की अनुमति देता है। SDK में attribution को disable करने योग्य control है:

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,  // Remove the default attribution control
});

अगर attribution रखना है लेकिन अपने UI से match करना है:

map.addControl(
  new mapmetricsgl.AttributionControl({
    customAttribution: 'Map data © OpenStreetMap contributors',
    compact: true,
  }),
  'bottom-left'
);

Google Maps के विपरीत जो किसी भी plan पर logo हमेशा visible रखने की आवश्यकता रखता है, MapAtlas आपको full control देता है।

React में Light/Dark Theme Toggle

यहां एक complete React component है जो CSS custom properties के साथ light/dark toggle manage करता है:

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 call map को नई color scheme के साथ re-render करता है। पहले से cache में मौजूद tile data re-fetch नहीं होती।

Custom Style JSON Host करना

Full control के लिए, अपना style JSON CDN या S3 bucket पर static file के रूप में host करें। इससे आप:

• Style को application code के साथ version-control कर सकते हैं।
• Application redeploy किए बिना visual design update कर सकते हैं।
• अलग-अलग environments के लिए अलग styles use कर सकते हैं।

Runtime पर hosted style load करें:

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

केवल constraint CORS है: style JSON को Access-Control-Allow-Origin: * के साथ serve होना चाहिए।

Style Development Workflow

Custom style बनाने का सबसे तेज़ तरीका iterative है:

1. MapAtlas base style JSON को foundation के रूप में download करें: https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY
2. Editor में JSON edit करें।
3. Modified style JSON के साथ map reload करके result देखें।
4. Stable होने पर, style JSON को repository में commit करें और CDN पर host करें।

Deeper customization के लिए, Map Visualization & Styling documentation देखें।

सारांश

Custom map styling कोई luxury नहीं है, यह third-party widget और product के हिस्से जैसे लगने वाले map के बीच का अंतर है। MapAtlas के साथ:

• Style specification standard JSON है जो Mapbox GL JS tooling के साथ compatible है।
• Dark mode style JSON swap है, नया tile set नहीं।
• Brand colors paint properties के ज़रिए roads, labels और POI icons पर लागू होते हैं।
• Custom fonts आपके control वाले किसी भी glyph endpoint से load होते हैं।
• Watermarks और attribution fully configurable हैं, सभी paid plans पर white-label supported है।
• पूरी style page reload के बिना runtime पर toggle की जा सकती है।

आज अपना branded map बनाना शुरू करें। मुफ्त MapAtlas API key के लिए sign up करें और base style JSON को starting point के रूप में load करें।