Maps JavaScript API-এর জন্য স্টাইল রেফারেন্স

প্ল্যাটফর্ম বেছে নিন: Android iOS JavaScript

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

উদাহরণ

নিম্নলিখিত JSON স্টাইল ডিক্লারেশন সব ম্যাপ ফিচারকে ধূসর রঙে পরিবর্তন করে, তারপর আর্টেরিয়াল রাস্তার জ্যামিতিকে নীল রঙে পরিবর্তন করে এবং ল্যান্ডস্কেপ লেবেলকে সম্পূর্ণভাবে লুকিয়ে দেয়:

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

JSON অবজেক্ট

JSON স্টাইল ডিক্লারেশনে নিম্নলিখিত এলিমেন্ট থাকে:

  • featureType (ঐচ্ছিক) - এই স্টাইল পরিবর্তনের জন্য বেছে নেওয়ার ফিচার। ফিচার হল ম্যাপে দেখানো ভৌগোলিক বৈশিষ্ট্য, যার মধ্যে রাস্তা, পার্ক, জলাশয় এবং আরও অনেক কিছু অন্তর্ভুক্ত। আপনি কোনও ফিচার নির্দিষ্ট না করলে, সব ফিচার বেছে নেওয়া হয়।
  • elementType (ঐচ্ছিক) - বেছে নেওয়ার জন্য নির্দিষ্ট ফিচারের প্রপার্টি। এলিমেন্ট হল কোনও ফিচারের সাব-পার্ট, যার মধ্যে লেবেল ও জিওমেট্রি অন্তর্ভুক্ত। আপনি কোনও এলিমেন্ট নির্দিষ্ট না করলে, ফিচারের সব এলিমেন্ট বেছে নেওয়া হয়।
  • stylers - বেছে নেওয়া ফিচার ও এলিমেন্টের উপর প্রয়োগ করার নিয়ম। স্টাইলার ফিচারের রঙ, দৃশ্যমানতা এবং ওজন নির্দেশ করে। আপনি কোনও ফিচারে এক বা একাধিক স্টাইলার প্রয়োগ করতে পারবেন।

স্টাইল নির্দিষ্ট করতে, আপনাকে অবশ্যই featureType এবং elementType সিলেক্টরের একটি সেট এবং আপনার stylers একটি স্টাইল অ্যারেতে একত্রিত করতে হবে। আপনি একটি অ্যারেতে যেকোনও ফিচারের কম্বিনেশন টার্গেট করতে পারেন। তবে, আপনি একবারে সীমিত সংখ্যক স্টাইলই প্রয়োগ করতে পারবেন। আপনার স্টাইল অ্যারেতে অক্ষরের সংখ্যা সর্বাধিক সীমা অতিক্রম করলে কোনও স্টাইল প্রয়োগ করা হয় না।

এই পৃষ্ঠার বাকি অংশে ফিচার, এলিমেন্ট ও স্টাইলার সম্পর্কে আরও তথ্য আছে।

featureType

নিম্নলিখিত JSON স্নিপেট ম্যাপের সব রাস্তা বেছে নেয়:

{
  "featureType": "road"
}

ফিচার বা ফিচারের ধরন হল ম্যাপে ভৌগোলিক বৈশিষ্ট্য, যার মধ্যে রাস্তা, পার্ক, জলাশয়, ব্যবসা এবং আরও অনেক কিছু অন্তর্ভুক্ত।

ফিচারগুলি একটি ক্যাটাগরি ট্রি তৈরি করে, যার মূল হল all। আপনি কোনও ফিচার নির্দিষ্ট না করলে, সব ফিচার বেছে নেওয়া হয়। all-এর কোনও ফিচার নির্দিষ্ট করলেও একই প্রভাব পড়ে।

কিছু ফিচারে চাইল্ড ফিচার থাকে যা আপনি ডট নোটেশন ব্যবহার করে নির্দিষ্ট করেন। যেমন, landscape.natural বা road.local। আপনি যদি শুধু পেরেন্ট ফিচার উল্লেখ করেন, যেমন road, তাহলে পেরেন্টের জন্য উল্লেখ করা স্টাইল তার সব চাইল্ডের ক্ষেত্রে প্রযোজ্য হয়, যেমন road.local এবং road.highway।

মনে রাখবেন, মূল ফিচারে এমন কিছু এলিমেন্ট থাকতে পারে যা সব সাব-ফিচারে থাকে না।

নিম্নলিখিত ফিচারগুলি উপলভ্য:

  • all (ডিফল্ট) সব ফিচার বেছে নেয়।
  • administrative সব প্রশাসনিক এলাকা বেছে নেয়। স্টাইলিং শুধুমাত্র প্রশাসনিক এলাকার লেবেলকে প্রভাবিত করে, ভৌগোলিক সীমানা বা ফিলকে নয়।
    • administrative.country দেশ বেছে নেয়।
    • administrative.land_parcel জমির পার্সেল বেছে নেয়।
    • administrative.locality এলাকা বেছে নেয়।
    • administrative.neighborhood আশেপাশের এলাকা বেছে নেয়।
    • administrative.province প্রদেশ বেছে নেয়।
  • landscape সব ল্যান্ডস্কেপ বেছে নেয়।
    • landscape.man_made বিল্ডিং ও অন্যান্য কাঠামোর মতো মনুষ্য-নির্মিত ফিচার বেছে নেয়।
    • landscape.natural পর্বত, নদী, মরুভূমি ও হিমবাহের মতো প্রাকৃতিক বৈশিষ্ট্য বেছে নেয়।
    • landscape.natural.landcover ল্যান্ড কভার ফিচার বেছে নেয়, যা হল পৃথিবীর উপরিভাগকে ঢেকে রাখা ভৌত উপাদান, যেমন বন, তৃণভূমি, জলাভূমি এবং খালি জমি।
    • landscape.natural.terrain কোনও ভূখণ্ডের সারফেসের বৈশিষ্ট্য বেছে নেয়, যেমন উচ্চতা, ঢাল এবং ওরিয়েন্টেশন।
  • poi সব উল্লেখযোগ্য স্থান বেছে নেয়।
    • poi.attraction পর্যটকদের জন্য আকর্ষণ বেছে নেয়।
    • poi.business ব্যবসা বেছে নেয়।
    • poi.government সরকারি বিল্ডিং বেছে নেয়।
    • poi.medical হাসপাতাল, ফার্মেসি, পুলিশ, ডাক্তার এবং অন্যান্য সহ জরুরি পরিষেবা বেছে নেয়।
    • poi.park পার্ক বেছে নেয়।
    • poi.place_of_worship চার্চ, মন্দির, মসজিদ ও অন্যান্য সহ উপাসনার জায়গা বেছে নেয়।
    • poi.school স্কুল বেছে নেয়।
    • poi.sports_complex স্পোর্টস কমপ্লেক্স বেছে নেয়।
  • road সব রাস্তা বেছে নেয়।
    • road.arterial প্রধান রাস্তা বেছে নেয়।
    • road.highway হাইওয়ে বেছে নেয়।
    • road.highway.controlled_access নিয়ন্ত্রিত অ্যাক্সেস সহ হাইওয়ে বেছে নেয়।
    • road.local স্থানীয় রাস্তা বেছে নেয়।
  • transit সব ট্রানজিট স্টেশন ও লাইন বেছে নেয়।
    • transit.line ট্রানজিট লাইন বেছে নেয়।
    • transit.station সব ট্রানজিট স্টেশন বেছে নেয়।
    • transit.station.airportটি বিমানবন্দর বেছে নেয়।
    • transit.station.bus বাস স্টপ বেছে নেয়।
    • transit.station.railটি রেল স্টেশন বেছে নেয়।
  • water জলাশয় বেছে নেয়।

elementType

নিম্নলিখিত JSON স্নিপেট সব স্থানীয় রাস্তার জন্য লেবেল বেছে নেয়:

{
  "featureType": "road.local",
  "elementType": "labels"
}

এলিমেন্ট হল কোনও ফিচারের সাবডিভিশন। যেমন, একটি রাস্তা ম্যাপে গ্রাফিক্যাল লাইন (জ্যামিতি) এবং এর নাম (লেবেল) বোঝানো টেক্সট নিয়ে গঠিত।

নিম্নলিখিত এলিমেন্টগুলি উপলভ্য, তবে মনে রাখবেন যে কোনও নির্দিষ্ট ফিচার কোনও এলিমেন্ট, কিছু এলিমেন্ট বা সব এলিমেন্টকে সমর্থন করতে পারে:

জুম লেভেলের উপর ভিত্তি করে লেবেল টেক্সট fill এবং stroke-এর রঙ পরিবর্তন হয়। জুম লেভেল জুড়ে অভিজ্ঞতা সামঞ্জস্যপূর্ণ করতে, সবসময় fill এবং stroke দুটিই নির্ধারণ করুন।

  • all (ডিফল্ট) নির্দিষ্ট ফিচারের সব এলিমেন্ট বেছে নেয়।
  • geometry নির্দিষ্ট ফিচারের সব জ্যামিতিক এলিমেন্ট বেছে নেয়।
    • geometry.fill শুধুমাত্র ফিচারের জ্যামিতির ফিল বেছে নেয়।
    • geometry.stroke শুধুমাত্র ফিচারের জিওমেট্রির স্ট্রোক বেছে নেয়।
  • labels নির্দিষ্ট ফিচারের সাথে যুক্ত টেক্সচুয়াল লেবেল বেছে নেয়।
    • labels.icon শুধুমাত্র ফিচারের লেবেলের মধ্যে দেখানো আইকন বেছে নেয়।
    • labels.text শুধুমাত্র লেবেলের টেক্সট বেছে নেয়।
    • labels.text.fill শুধুমাত্র লেবেলের ফিল বেছে নেয়। লেবেলের ফিল সাধারণত লেবেল টেক্সটের চারপাশে একটি রঙিন আউটলাইন হিসেবে রেন্ডার করা হয়।
    • labels.text.stroke শুধুমাত্র লেবেলের টেক্সটের স্ট্রোক বেছে নেয়।

stylers

স্টাইলার হল ফর্ম্যাটিং বিকল্প যা আপনি ম্যাপ ফিচার ও এলিমেন্টে প্রয়োগ করতে পারবেন।

নিম্নলিখিত JSON স্নিপেট, RGB ভ্যালু ব্যবহার করে, উজ্জ্বল সবুজ রঙের ফিচার দেখায়:

"stylers": [
  { "color": "#99FF33" }
]

এই স্নিপেট কোনও ফিচারের রঙের তীব্রতা সম্পূর্ণভাবে সরিয়ে দেয়, তার প্রাথমিক রঙ যাই হোক না কেন। ফিচারটি গ্রেস্কেলে রেন্ডার করার জন্য এই এফেক্ট ব্যবহার করা হয়:

"stylers": [
  { "saturation": -100 }
]

এই স্নিপেট কোনও ফিচারকে সম্পূর্ণভাবে লুকিয়ে রাখে:

    "stylers": [
      { "visibility": "off" }
    ]

নিম্নলিখিত স্টাইল বিকল্পগুলি কাজ করে:

  • hue (ফর্ম্যাটের একটি RGB হেক্স স্ট্রিং #RRGGBB) বেসিক কালার নির্দেশ করে।

    মনে রাখবেন: এই বিকল্পটি ডিফল্ট Google স্টাইলে (অথবা ম্যাপে আপনার সংজ্ঞায়িত অন্যান্য স্টাইল বিকল্পে) নির্দিষ্ট করা স্যাচুরেশন এবং লাইটনেস বজায় রেখে হিউ সেট করে। যে রঙটি পাওয়া যায় তা বেস ম্যাপের স্টাইলের সাথে সম্পর্কিত। Google যদি বেস ম্যাপ স্টাইলে কোনও পরিবর্তন করে, তাহলে সেই পরিবর্তন hue-এর মাধ্যমে স্টাইল করা আপনার ম্যাপের ফিচারকে প্রভাবিত করে। আপনি যদি পারেন, তাহলে অ্যাবসোলিউট color স্টাইলার ব্যবহার করা ভালো।

  • lightness (-100 ও 100-এর মধ্যে একটি ফ্লোটিং পয়েন্ট ভ্যালু) এলিমেন্টের উজ্জ্বলতার শতকরা পরিবর্তন নির্দেশ করে। নেগেটিভ ভ্যালু অন্ধকার বাড়ায় (যেখানে -১০০ কালো রঙকে নির্দিষ্ট করে) এবং পজিটিভ ভ্যালু উজ্জ্বলতা বাড়ায় (যেখানে +১০০ সাদা রঙকে নির্দিষ্ট করে)।

    মনে রাখবেন: এই বিকল্পটি ডিফল্ট Google স্টাইলে (বা ম্যাপে আপনার সংজ্ঞায়িত অন্যান্য স্টাইল বিকল্পে) নির্দিষ্ট করা স্যাচুরেশন এবং হিউ বজায় রেখে হালকা রঙ সেট করে। যে রঙটি পাওয়া যায় তা বেস ম্যাপের স্টাইলের সাথে সম্পর্কিত। Google যদি বেস ম্যাপ স্টাইলে কোনও পরিবর্তন করে, তাহলে সেই পরিবর্তন lightness-এর মাধ্যমে স্টাইল করা আপনার ম্যাপের ফিচারকে প্রভাবিত করে। আপনি যদি পারেন, তাহলে অ্যাবসোলিউট color স্টাইলার ব্যবহার করা ভালো।

  • saturation (-100 ও 100-এর মধ্যে একটি ফ্লোটিং পয়েন্ট ভ্যালু) এলিমেন্টে প্রয়োগ করার জন্য প্রাথমিক রঙের তীব্রতায় শতাংশের পরিবর্তন নির্দেশ করে।

    মনে রাখবেন: এই বিকল্পটি ডিফল্ট Google স্টাইলে (বা ম্যাপে আপনার সংজ্ঞায়িত অন্যান্য স্টাইল বিকল্পে) নির্দিষ্ট করা হিউ এবং লাইটনেস বজায় রেখে স্যাচুরেশন সেট করে। যে রঙটি পাওয়া যায় তা বেস ম্যাপের স্টাইলের সাথে সম্পর্কিত। Google যদি বেস ম্যাপ স্টাইলে কোনও পরিবর্তন করে, তাহলে সেই পরিবর্তন saturation-এর মাধ্যমে স্টাইল করা আপনার ম্যাপের ফিচারকে প্রভাবিত করে। আপনি যদি পারেন, তাহলে অ্যাবসোলিউট color স্টাইলার ব্যবহার করা ভালো।

  • gamma (0.01 এবং 10.0-এর মধ্যে একটি ফ্লোটিং পয়েন্ট ভ্যালু, যেখানে 1.0 কোনও সংশোধন প্রয়োগ করে না) এলিমেন্টে প্রয়োগ করার জন্য গামা সংশোধনের পরিমাণ নির্দেশ করে। গামা কারেকশন নন-লিনিয়ার পদ্ধতিতে রঙের উজ্জ্বলতা পরিবর্তন করে, তবে সাদা বা কালো রঙের মানের উপর কোনও প্রভাব ফেলে না। একাধিক এলিমেন্টের কনট্রাস্ট পরিবর্তন করতে সাধারণত গামা কারেকশন ব্যবহার করা হয়। যেমন, আপনি গামা পরিবর্তন করে এলিমেন্টের প্রান্ত ও ভিতরের অংশের মধ্যে কনট্রাস্ট বাড়াতে বা কমাতে পারেন।

    মনে রাখবেন: এই বিকল্পটি গামা কার্ভ ব্যবহার করে ডিফল্ট Google স্টাইলের সাপেক্ষে উজ্জ্বলতা অ্যাডজাস্ট করে। Google যদি বেস ম্যাপ স্টাইলে কোনও পরিবর্তন করে, তাহলে সেই পরিবর্তন আপনার ম্যাপের সেইসব ফিচারের উপর প্রভাব ফেলে যেগুলি gamma-এর মাধ্যমে স্টাইল করা হয়েছে। আপনি যদি পারেন তাহলে অ্যাবসোলিউট color স্টাইলার ব্যবহার করা ভালো।

  • invert_lightness (যদি true হয়) আগের উজ্জ্বলতা উল্টে দেয়। এটি উপযোগী, যেমন, সাদা টেক্সট সহ ডার্ক ম্যাপে দ্রুত পরিবর্তন করার জন্য।

    মনে রাখবেন: এই বিকল্পটি ডিফল্ট Google স্টাইলকে উল্টে দেয়। Google বেস ম্যাপ স্টাইলে কোনও পরিবর্তন করলে, সেই পরিবর্তন invert_lightness-এর মাধ্যমে স্টাইল করা আপনার ম্যাপের ফিচারকে প্রভাবিত করে। আপনি যদি পারেন, তাহলে অ্যাবসোলিউট color স্টাইলার ব্যবহার করা ভালো।

  • visibility (on, off, অথবা simplified) ম্যাপে এলিমেন্টটি দেখা যাবে কিনা এবং কীভাবে দেখা যাবে তা নির্দেশ করে। simplified দৃশ্যমানতা প্রভাবিত ফিচার থেকে কিছু স্টাইল ফিচার সরিয়ে দেয়; যেমন, রাস্তা আউটলাইন ছাড়া পাতলা লাইনে সরলীকৃত করা হয়, পার্কের লেবেল টেক্সট সরিয়ে দেওয়া হলেও লেবেল আইকন থেকে যায়।
  • color (ফর্ম্যাটের একটি RGB হেক্স স্ট্রিং #RRGGBB) ফিচারের রঙ সেট করে।
  • weight (একটি পূর্ণসংখ্যা, শূন্যের চেয়ে বেশি বা সমান) পিক্সেলে ফিচারের ওজন সেট করে। ওজন বেশি সেট করলে, টাইল বর্ডারের কাছাকাছি ক্লিপিং হতে পারে।

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

মনে রাখবেন: ক্রম গুরুত্বপূর্ণ, কারণ কিছু অপারেশন পরিবর্তনশীল নয়। স্টাইল অপারেশনের মাধ্যমে পরিবর্তিত ফিচার এবং/অথবা এলিমেন্টে (সাধারণত) আগে থেকেই স্টাইল থাকে। আগে থেকে থাকা স্টাইল থাকলে, অপারেশনগুলি সেগুলির উপর কাজ করে।

হিউ, স্যাচুরেশন, লাইটনেস মডেল

স্টাইলার অপারেশনের মধ্যে রঙ বোঝাতে স্টাইল করা ম্যাপ হিউ, স্যাচুরেশন, লাইটনেস (HSL) মডেল ব্যবহার করে। হিউ মৌলিক রঙ নির্দেশ করে, স্যাচুরেশন সেই রঙের তীব্রতা নির্দেশ করে এবং উজ্জ্বলতা উপাদান রঙে সাদা বা কালোর আপেক্ষিক পরিমাণ নির্দেশ করে।

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

হিউ, স্যাচুরেশন, আলো মডেল

hue-এ HTML হেক্স কালার ভ্যালু ব্যবহার করা হলেও, এটি শুধুমাত্র এই ভ্যালু ব্যবহার করে বেসিক কালার নির্ধারণ করে - অর্থাৎ, কালার হুইলে এর ওরিয়েন্টেশন, এর স্যাচুরেশন বা লাইটনেস নয়, যা শতকরা পরিবর্তন হিসেবে আলাদাভাবে দেখানো হয়।

যেমন, আপনি খাঁটি সবুজের জন্য হিউকে hue:0x00ff00 বা hue:0x000100 হিসেবে সংজ্ঞায়িত করতে পারেন। দুটি রঙই একই রকম। HSL কালার মডেলে দুটি ভ্যালুই খাঁটি সবুজ রঙকে নির্দেশ করে।

একটি RGB কালার হুইল

RGB hue ভ্যালু যাতে লাল, সবুজ ও নীল রঙের সমান অংশ থাকে তা কোনও হিউ নির্দেশ করে না, কারণ এইসব ভ্যালুর কোনওটিই HSL কোঅর্ডিনেট স্পেসে কোনও ওরিয়েন্টেশন নির্দেশ করে না। উদাহরণ হল "#000000" (কালো), "#FFFFFF" (সাদা), এবং ধূসর রঙের সব শেড। কালো, সাদা বা ধূসর রঙ বোঝাতে, আপনাকে সব saturation সরাতে হবে (ভ্যালু -100 হিসেবে সেট করুন) এবং পরিবর্তে lightness অ্যাডজাস্ট করুন।

এছাড়াও, আগে থেকেই কালার স্কিম আছে এমন ফিচার পরিবর্তন করার সময়, hue-এর মতো কোনও ভ্যালু পরিবর্তন করলে, সেটির আগে থেকে থাকা saturation বা lightness পরিবর্তন হয় না।