কাস্টম ব্র্যান্ডেড ম্যাপ কীভাবে স্টাইল করবেন: ডার্ক মোড

আপনি প্রতিযোগীর অ্যাপে যে প্রতিটি ম্যাপ দেখেছেন তা একই ডিফল্ট স্টাইল ব্যবহার করে। জেনেরিক বেজ রোড, মধ্য-টিল জল, ক্লাটারড POI আইকন যা আপনার নিজস্ব UI-এর সাথে মনোযোগের জন্য লড়াই করে, এগুলি সর্বজনীন ডিফল্ট, যা কাউকে অপরাধ না করার জন্য ডিজাইন করা হয়েছে এবং কাউকে আনন্দিত করে না। তারা এক জিনিস স্পষ্টভাবে যোগাযোগ করে: এই পণ্যটি একটি ম্যাপ লাইব্রেরি ব্যবহার করছে, এর ম্যাপ অভিজ্ঞতার মালিক নয়।

কাস্টম ম্যাপ স্টাইলিং এটি পরিবর্তন করে। লজিস্টিক ড্যাশবোর্ডে একটি ডার্ক মোড ম্যাপ, রিয়েল এস্টেট অ্যাপে একটি ব্র্যান্ড-সবুজ রোড নেটওয়ার্ক, আপনার লোগো সহ একটি পরিষ্কার মিনিমালিস্ট স্টাইল যেখানে অ্যাট্রিবিউশন ওয়াটারমার্ক ব্যবহৃত হত, এগুলি এমন বিস্তারিত যা একটি সরঞ্জামকে পণ্যে উন্নীত করে।

এই টিউটোরিয়াল MapAtlas দ্বারা বাস্তবায়িত Mapbox স্টাইল স্পেসিফিকেশনের মাধ্যমে হাঁটে, স্টাইল JSON এর কাঠামো থেকে React-এ একটি সম্পূর্ণ লাইট/ডার্ক টগল পর্যন্ত। আপনার GIS অভিজ্ঞতার প্রয়োজন নেই। আপনার JSON এবং JavaScript এর সাথে আরামদায়ক হওয়া প্রয়োজন।

যদি আপনি এখনও একটি মৌলিক ম্যাপ সেট আপ না করেছেন, আপনার ওয়েবসাইটে ইন্টারঅ্যাক্টিভ ম্যাপ কীভাবে যোগ করবেন দিয়ে শুরু করুন, তারপর স্টাইলিংয়ের জন্য এখানে ফিরে আসুন।

কেন ডিফল্ট ম্যাপ স্টাইল জেনেরিক দেখায়

একটি টাইল প্রদানকারীর ডিফল্ট স্টাইল সবচেয়ে বিস্তৃত সম্ভাব্য দর্শকদের জন্য সর্বজনীনভাবে পাঠযোগ্য হওয়ার জন্য ডিজাইন করা হয়েছে, সবচেয়ে বিস্তৃত সম্ভাব্য প্রেক্ষাপটে। এটি নান্দনিক মতামতের চেয়ে তথ্যগত ঘনত্বকে অগ্রাধিকার দেয়। রাস্তাগুলি দৃশ্যমান হওয়া প্রয়োজন। লেবেলগুলি বৈপরীত্য প্রয়োজন। POI আইকনগুলি স্বীকৃত হওয়া প্রয়োজন।

এর কোনটিই আপনার পণ্যের লক্ষ্যগুলির সাথে সারিবদ্ধ হয় না। আপনার অ্যাপ সম্ভবত মানচিত্রে যা আছে তার একটি ছোট উপসেট সম্পর্কে যত্নশীল, ডেলিভারি রুট, সম্পত্তির অবস্থান, স্বাস্থ্যসেবা সুবিধা, এবং অন্য সবকিছু ভিজ্যুয়াল শব্দ।

কাস্টম স্টাইলিং আপনাকে আপনার যা প্রয়োজন নেই তা দমন করতে, আপনি যা করেন তা জোর দিতে এবং নিশ্চিত করতে দেয় যে ম্যাপটি আপনার পণ্যের অংশ হিসাবে পড়ে, একটি তৃতীয় পক্ষের উইজেট নয়।

স্টাইল স্পেসিফিকেশন বোঝা

একটি MapAtlas স্টাইল পাঁচটি মূল বিভাগ সহ একটি JSON ডকুমেন্ট:

{
  "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, ম্যাপ ডেটা কোথা থেকে আসে (MapAtlas ভেক্টর টাইল এন্ডপয়েন্ট)
• glyphs, লেবেল রেন্ডারিংয়ের জন্য ফন্ট ফাইলগুলি কোথায় লোড করতে হবে
• sprite, POI মার্কারগুলির জন্য আইকন চিত্রগুলি কোথায় লোড করতে হবে
• layers, ভিজ্যুয়াল স্তরগুলির ক্রমবর্ধমান তালিকা, প্রতিটি পেইন্ট এবং লেআউট প্রপার্টি সহ

layers অ্যারে এমন জায়গা যেখানে আপনি বেশিরভাগ সময় ব্যয় করেন। প্রতিটি স্তর একটি ডেটা টাইপ (fill, line, symbol, circle, fill-extrusion) নির্দিষ্ট করে, কোন সোর্স বৈশিষ্ট্যগুলি আঁকতে হবে এবং কীভাবে পেইন্ট করতে হবে।

এখানে একটি ন্যূনতম কিন্তু সম্পূর্ণ স্টাইল যা একটি ভেক্টর টাইল ভিত্তি রেন্ডার করে:

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

এটি আপনার নির্বাচিত পটভূমি রঙে একটি খালি ক্যানভাস রেন্ডার করে। এখানে থেকে আপনি জল, ল্যান্ডউজ, রাস্তা, বিল্ডিং এবং লেবেলগুলির জন্য স্তরগুলি যোগ করেন।

ডার্ক মোড: মূল রঙগুলি পরিবর্তন করা

একটি ডার্ক মোড ম্যাপ সহজভাবে একটি উল্টানো র্যাস্টার চিত্র নয়। এটি একই ভেক্টর জ্যামিতিতে প্রয়োগ করা পেইন্ট প্রপার্টির একটি সম্পূর্ণ ভিন্ন সেট। এটি ভেক্টর টাইলগুলি বিদ্যমান থাকার মূল কারণগুলির মধ্যে একটি, একটি টাইল, অসীম ভিজ্যুয়াল ব্যাখ্যা।

একটি ডার্ক থিমের জন্য আপডেট করার জন্য মূল রঙগুলি:

এটি স্টাইল স্তরে কীভাবে প্রয়োগ করতে হয় তা এখানে:

{
  "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 অভিব্যক্তি জুম স্তরের উপর ভিত্তি করে রাস্তার প্রস্থ স্কেল করে, কম জুমে সংকীর্ণ, যখন আপনি জুম ইন করেন তখন প্রশস্ত। এটি কোনো অতিরিক্ত নেটওয়ার্ক অনুরোধ ছাড়াই ডেটা-চালিত স্টাইলিং।

ব্র্যান্ড রঙ প্রয়োগ করা

বেশিরভাগ ডিজাইন সিস্টেম একটি প্রাথমিক রঙ (বলুন, #97C70A), একটি মাধ্যমিক রঙ এবং একটি নিরপেক্ষ প্যালেট সংজ্ঞায়িত করে। ম্যাপটি এই একই মানগুলি ব্যবহার করা উচিত, তাদের অনুমান করা নয়।

ব্র্যান্ড রঙ প্রয়োগের জন্য এই স্তরগুলিকে লক্ষ্য করুন:

ব্র্যান্ড উপাদান হিসাবে রাস্তা। যদি আপনার ব্র্যান্ড রঙ প্রাণবন্ত হয় তবে এটি প্রধান রাস্তাগুলির জন্য বা হাইলাইট করা রুটের জন্য ব্যবহার করুন:

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

কাস্টম POI মার্কার। একটি কাস্টম স্প্রাইট শীট হোস্ট করে এবং sprite URL আপডেট করে ডিফল্ট স্প্রাইট আইকনগুলি আপনার নিজের সাথে প্রতিস্থাপন করুন। তারপর প্রতীক স্তরগুলিতে আপনার আইকনগুলি রেফার করুন:

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

ম্যাপ লেবেলের জন্য কাস্টম ফন্ট

ডিফল্ট ম্যাপ লেবেল ফন্টগুলি জেনেরিক। আপনার ব্র্যান্ড Inter, Roboto বা একটি কাস্টম টাইপফেস ব্যবহার করে, আপনি ম্যাপ লেবেলের জন্যও এটি ব্যবহার করতে পারেন।

MapAtlas তার নিজের গ্লিফ এন্ডপয়েন্ট থেকে গ্লিফ পরিবেশন করে, যা মানক Mapbox গ্লিফ বিন্যাস সমর্থন করে। একটি কাস্টম ফন্ট ব্যবহার করতে:

1. fontnik-এর মতো একটি সরঞ্জাম ব্যবহার করে আপনার টাইপফেস থেকে .pbf গ্লিফ ফাইলগুলি তৈরি করুন।
2. CDN বা আপনার নিজের সার্ভারে গ্লিফ ফাইলগুলি হোস্ট করুন।
3. আপনার স্টাইল JSON-এ glyphs ফিল্ড আপডেট করুন:

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

4. যেকোনো প্রতীক স্তরের text-font সম্পত্তিতে ফন্টটি রেফার করুন:

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

সর্বদা একটি ফলব্যাক ফন্ট প্রদান করুন (Noto Sans Unicode অক্ষরগুলি কভার করে যা আপনার প্রাথমিক ফন্ট অন্তর্ভুক্ত নাও করতে পারে)। রেন্ডারার অ্যারেতে প্রথম ফন্ট ব্যবহার করে যা প্রতিটি অক্ষরের জন্য একটি গ্লিফ ধারণ করে।

ওয়াটারমার্ক এবং অ্যাট্রিবিউশন সরানো

MapAtlas সম্পূর্ণ হোয়াইট-লেবেল স্থাপনার অনুমতি দেয়। আপনি ম্যাপ থেকে সম্পূর্ণরূপে MapAtlas লোগো সরাতে পারেন।

SDK-তে, অ্যাট্রিবিউশন একটি নিয়ন্ত্রণ দ্বারা পরিচালনা করা হয় যা আপনি অক্ষম করতে পারেন:

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,  // ডিফল্ট অ্যাট্রিবিউশন নিয়ন্ত্রণ সরান
});

যদি আপনি অ্যাট্রিবিউশন রাখতে চান তবে আপনার UI এর সাথে মেলে স্টাইল করুন, ডিফল্ট নিয়ন্ত্রণ লুকান এবং আপনার নিজের যোগ করুন:

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

এটি ব্র্যান্ডিংটি একটি ন্যূনতম, আইনত সম্মত অ্যাট্রিবিউশন দিয়ে প্রতিস্থাপন করে যা OpenStreetMap-এর লাইসেন্সকে সম্মান করে আপনার UI এর সাথে মেলে। Google Maps-এর বিপরীতে, যা আপনার পরিকল্পনা নির্বিশেষে সর্বদা দৃশ্যমান থাকার জন্য তার লোগোর প্রয়োজন, MapAtlas আপনাকে সম্পূর্ণ নিয়ন্ত্রণ দেয়।

React-এ লাইট/ডার্ক থিম টগল

এখানে একটি সম্পূর্ণ React উপাদান রয়েছে যা একটি ম্যাপ একটি লাইট/ডার্ক টগল দিয়ে পরিচালনা করে, CSS কাস্টম প্রপার্টিগুলি ব্যবহার করে থিমটিকে আপনার UI-এর বাকি অংশের সাথে সিঙ্ক রাখতে:

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 কল নতুন রঙ স্কিম দিয়ে ম্যাপটি পুনরায় রেন্ডার করে। ইতিমধ্যে ক্যাশে থাকা টাইল ডেটা পুনরায় আনা হয় না, শুধুমাত্র ভিজ্যুয়াল ব্যাখ্যা পরিবর্তিত হয়।

একটি কাস্টম স্টাইল JSON হোস্ট করা

সম্পূর্ণ নিয়ন্ত্রণের জন্য, আপনার CDN বা S3 বালতিতে একটি স্ট্যাটিক ফাইল হিসাবে আপনার স্টাইল JSON হোস্ট করুন। এটি আপনাকে দেয়:

• আপনার আবেদন কোডের পাশাপাশি সংস্করণ-নিয়ন্ত্রণ আপনার স্টাইল।
• অ্যাপ্লিকেশন পুনরায় স্থাপন না করে ভিজ্যুয়াল ডিজাইন আপডেট করুন (শুধু হোস্ট করা JSON আপডেট করুন)।
• বিভিন্ন পরিবেশের জন্য বিভিন্ন স্টাইল ব্যবহার করুন (প্রিভিউ বনাম উৎপাদন)।

রানটাইমে একটি হোস্ট করা স্টাইল লোড করুন:

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

একমাত্র সীমাবদ্ধতা হল CORS: স্টাইল JSON অবশ্যই Access-Control-Allow-Origin: * (বা আপনার নির্দিষ্ট ডোমেন) সহ পরিবেশন করা উচিত যাতে ব্রাউজার এটি ক্রস-অরিজিন থেকে আনতে পারে।

স্টাইল উন্নয়ন ওয়ার্কফ্লো

একটি কাস্টম স্টাইল তৈরি করার দ্রুততম উপায় পুনরাবৃত্তিমূলক, কোড পুনর্লিখন ছাড়াই রিয়েল সময়ে পরিবর্তনগুলি দেখুন।

1. একটি ভিত্তি হিসাবে একটি MapAtlas বেস স্টাইল JSON দিয়ে শুরু করুন। https://tiles.mapatlas.eu/styles/basic/style.json?key=YOUR_API_KEY আনার মাধ্যমে এটি ডাউনলোড করুন।
2. আপনার সম্পাদকে JSON সম্পাদনা করুন, যা স্তর কোন ভিজ্যুয়াল উপাদানকে প্রভাবিত করে তা দেখুন।
3. ফলাফল দেখার জন্য সংশোধিত স্টাইল JSON দিয়ে ম্যাপটি পুনরায় লোড করুন।
4. একবার স্থিতিশীল হলে, স্টাইল JSON আপনার সংগ্রহে প্রতিশ্রুতিবদ্ধ করুন এবং এটি আপনার CDN-এ হোস্ট করুন।

গভীর কাস্টমাইজেশনের জন্য, সম্পূর্ণ স্তর রেফারেন্স, পেইন্ট সম্পত্তি প্রকার এবং অভিব্যক্তি সিনট্যাক্সের জন্য ম্যাপ ভিজ্যুয়ালাইজেশন এবং স্টাইলিং ডকুমেন্টেশন চেক করুন।

আপনি যদি Mapbox থেকে আসছেন এবং কী পরিবর্তিত হয়েছে তা নিয়ে অবাক হচ্ছেন, Mapbox বনাম MapAtlas: কোন ম্যাপ API আপনার EU প্রকল্পের জন্য সঠিক? বৈশিষ্ট্য এবং মূল্যের পাশাপাশি তুলনার জন্য দেখুন।

এবং ভেক্টর টাইলগুলি এটি সবকিছু সম্ভব করার স্থাপত্য ভিত্তির জন্য, ভেক্টর টাইলগুলি বনাম রাস্টার টাইলগুলি রেন্ডারিং পাইপলাইনটি বিস্তারিতভাবে ব্যাখ্যা করে।

সারসংক্ষেপ

কাস্টম ম্যাপ স্টাইলিং একটি বিলাসিতা নয়, এটি একটি ম্যাপের মধ্যে পার্থক্য যা একটি তৃতীয় পক্ষের উইজেটের মতো মনে হয় এবং যা আপনার পণ্যের জন্য তৈরি বোধ করে। MapAtlas দিয়ে:

• স্টাইল স্পেসিফিকেশন Mapbox GL JS সরঞ্জামের সাথে সামঞ্জস্যপূর্ণ মান JSON।
• ডার্ক মোড একটি স্টাইল JSON সোয়াপ, নতুন টাইল সেট বা সার্ভার কনফিগারেশন নয়।
• ব্র্যান্ড রঙ পেইন্ট প্রপার্টির মাধ্যমে রাস্তা, লেবেল এবং POI আইকনগুলিতে প্রয়োগ করুন।
• আপনি যে কোনো গ্লিফ এন্ডপয়েন্ট নিয়ন্ত্রণ করেন তা থেকে কাস্টম ফন্ট লোড করুন।
• ওয়াটারমার্ক এবং অ্যাট্রিবিউশন সম্পূর্ণরূপে কনফিগারযোগ্য, সমস্ত অর্থপ্রদান পরিকল্পনা জুড়ে হোয়াইট-লেবেল সমর্থিত।
• সম্পূর্ণ স্টাইল পৃষ্ঠা পুনরায় লোড ছাড়াই রানটাইমে টগল করা যায়।

আজই আপনার ব্র্যান্ডেড ম্যাপ তৈরি করতে শুরু করুন। একটি বিনামূল্যে MapAtlas API কী-এর জন্য সাইন আপ করুন এবং বেস স্টাইল JSON কে আপনার শুরু পয়েন্ট হিসাবে লোড করুন। প্রথম কাস্টম স্টাইল সঠিক করতে প্রায় 30 মিনিট সময় লাগে, পরবর্তী পুনরাবৃত্তিগুলি মিনিট সময় লাগে।