টাইল ওভারলে

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

টাইলের ওভারলে, কখনও কখনও যাকে টাইলের লেয়ার বলা হয়, সেটি হল এমন ছবির সংগ্রহ যা বেস ম্যাপের টাইলের উপরে দেখানো হয়।

কোড নমুনাগুলি

GitHub-এ ApiDemos রিপোজিটরিতে একটি নমুনা অন্তর্ভুক্ত আছে যা টাইল ওভারলে ফিচারটি প্রদর্শন করে:

• TileOverlayDemoActivity - Java: Java-তে টাইল ওভারলে ফিচার
• TileCoordinateDemoActivity - Java: Java-তে টাইল ওভারলের জন্য ব্যবহৃত স্থানাঙ্ক সিস্টেম
• TileOverlayDemoActivity - Kotlin: Kotlin-এ টাইল ওভারলে ফিচার
• TileCoordinateDemoActivity - Kotlin: Kotlin-এ টাইল ওভারলের জন্য ব্যবহৃত কোঅর্ডিনেট সিস্টেম

ভূমিকা

TileOverlay বেস ম্যাপ টাইলসের উপরে যোগ করা ছবির সেটকে সংজ্ঞায়িত করে।

আপনি যেসব জুম লেভেলে কাজ করতে চান, সেগুলির জন্য আপনাকে টাইলের তথ্য দিতে হবে। একাধিক জুম লেভেলে আপনার কাছে যথেষ্ট টাইল থাকলে, আপনি সম্পূর্ণ ম্যাপের জন্য Google-এর ম্যাপ ডেটা পরিপূরক হিসেবে ব্যবহার করতে পারবেন।

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

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

টাইল স্থানাঙ্ক ও জুম লেভেল

Google Maps API প্রতিটি জুম লেভেলে ছবিকে গ্রিডে সাজানো বর্গাকার ম্যাপ টাইলসের একটি সেটে ভেঙে দেয়। কোনও ম্যাপ নতুন লোকেশনে বা নতুন জুম লেভেলে সরানো হলে, Maps API নির্ধারণ করে যে কোন টাইল প্রয়োজন এবং সেই তথ্যকে এক সেট টাইলে অনুবাদ করে যাতে তা ফিরিয়ে আনা যায়।

কোঅর্ডিনেট (০,০) সহ টাইল সবসময় ম্যাপের উত্তর-পশ্চিম কোণে থাকে, x-এর মান পশ্চিম থেকে পূর্বে এবং y-এর মান উত্তর থেকে দক্ষিণে বাড়তে থাকে। সেই উৎস থেকে x,y কোঅর্ডিনেট ব্যবহার করে টাইল ইন্ডেক্স করা হয়।

জুম লেভেল ০-তে, সম্পূর্ণ পৃথিবী একটি সিঙ্গেল টাইলে রেন্ডার করা হয়। প্রতিটি জুম লেভেল ম্যাগনিফিকেশন দুই গুণ করে বাড়ায়। তাই, জুম লেভেল ১-এ ম্যাপটি টাইলসের ২x২ গ্রিড হিসেবে রেন্ডার করা হবে। জুম লেভেল ২-এ, এটি ৪x৪ গ্রিড। জুম লেভেল ৩-এ, এটি ৮x৮ গ্রিড এবং আরও অনেক কিছু।

যেমন, জুম লেভেল ২-এ পৃথিবীকে ১৬টি টাইলে ভাগ করা হয়েছে। প্রতিটি টাইল x, y এবং জুমের অনন্য কম্বিনেশন দ্বারা রেফারেন্স করা যেতে পারে:

টাইল লেয়ারের জন্য ছবি তৈরি করার সময়, আপনি যে জুম লেভেল দেখাতে চান, সেটির প্রতিটি টাইলের জন্য আপনাকে ছবি তৈরি করতে হবে। টাইল দেখানোর সময় Google Maps ২৫৬ ডিপি (ডিভাইস-ইন্ডিপেন্ডেন্ট পিক্সেল) টার্গেট করে। হাই রেজোলিউশন ডিভাইসের জন্য, আপনাকে হাই ডিপিআই টাইল (৫১২x৫১২ পিক্সেল) রিটার্ন করার সাজেশন দেওয়া হয়। বিভিন্ন স্ক্রিন সাইজ ও ডেনসিটি সাপোর্ট করার ব্যাপারে আরও জানতে Android ডেভেলপার ডকুমেন্টেশন দেখুন।

মনে রাখবেন: ক্যামেরার মাধ্যমে কাজ করে এমন জুম লেভেল বিভিন্ন বিষয়ের উপর নির্ভর করে এবং আপনার টাইল যে জুম লেভেলে কাজ করবে তার সাথে সম্পর্কিত নয়।

1. GoogleMap.getMaxZoomLevel() বর্তমান ক্যামেরা পজিশনে উপলভ্য সর্বাধিক জুম লেভেল রিটার্ন করে। বর্তমানে ব্যবহার করা হচ্ছে এমন ম্যাপের ধরন এটি বিবেচনা করে। যেমন, স্যাটেলাইট বা ভূদৃশ্যের ম্যাপে বেস ম্যাপ টাইলের চেয়ে কম সর্বোচ্চ জুম লেভেল থাকতে পারে।
2. GoogleMap.getMinZoomLevel() সবচেয়ে কম জুম লেভেল দেখায়, যা প্রতিটি লোকেশনের জন্য একই (সর্বাধিক জুম লেভেলের মতো নয়) কিন্তু ডিভাইস ও ম্যাপের সাইজ অনুযায়ী আলাদা হতে পারে।

টাইল ওভারলে যোগ করা

টাইল ওভারলে তৈরি করার সবচেয়ে সহজ ও সাধারণ উপায় হল প্রাসঙ্গিক টাইল ছবির দিকে পয়েন্ট করে থাকা URL প্রদান করা। UrlTileProvider হল TileProvider-এর আংশিক প্রয়োগ যা URL-এর উপর ভিত্তি করে ছবির টাইল প্রদান করে। এই ক্লাসের জন্য সব ছবির ডাইমেনশন একই হতে হবে।

আপনাকে UrlTileProvider.getTileUrl() প্রয়োগ করতে হবে, যা টাইল কোঅর্ডিনেট (x, y, জুম) গ্রহণ করে এবং টাইল হিসেবে ব্যবহার করার জন্য ইমেজের দিকে নির্দেশ করে এমন URL রিটার্ন করে। উল্লিখিত x, y ও জুমের জন্য কোনও টাইল না থাকলে, মেথডটি নাল রিটার্ন করবে। URL কোনও ওয়েব রিসোর্স, Android অ্যাসেট বা লোকাল ডিস্কের কোনও ফাইলকে নির্দেশ করতে পারে।

আপনি যে x, y কোঅর্ডিনেট ও জুম লেভেল দেখাতে চান,তার জন্য সার্ভারে টাইল ইমেজের স্টক সেট-আপ করুন। তারপর টাইল ওভারলে যোগ করুন:

1. টাইল ইমেজ প্রদান করার জন্য একটি UrlTileProvider নির্ধারণ করুন।
2. প্রতিটি টাইলের জন্য URL তৈরি করতে getTileUrl() ওভাররাইড করুন ছবি।
3. প্রাসঙ্গিক বিকল্প সহ TileOverlayOptions অবজেক্ট প্রদান করুন:
• fadeIn: বুলিয়ান। টাইলস ফেড ইন করা উচিত কিনা তা নির্দিষ্ট করে। ডিফল্ট ভ্যালু হল true। টাইল ওভারলেগুলির মধ্যে দ্রুত স্যুইচ করার সময় ফেড-ইন বন্ধ করা আপনার জন্য উপযোগী হতে পারে। ট্রান্সপারেন্সি ও ফেড-ইন-এর মধ্যে সম্পর্ক সম্পর্কে জানতে, নিচে ট্রান্সপারেন্সি সংক্রান্ত বিভাগ দেখুন।
• tileProvider: এই ওভারলেতে ব্যবহার করার জন্য TileProvider।
• transparency: ফ্লোট। টাইল ছবির জন্য ট্রান্সপারেন্সি ফ্যাক্টর সেট করে। ভ্যালু অবশ্যই [0.0f, 1.0f] রেঞ্জের মধ্যে হতে হবে যেখানে 0.0f মানে সম্পূর্ণ অস্বচ্ছ (ডিফল্ট) এবং 1.0f মানে সম্পূর্ণ স্বচ্ছ। কোড স্যাম্পেল এবং স্বচ্ছতা ও ফেড-ইন-এর মধ্যে সম্পর্ক জানতে নিচে স্বচ্ছতা সংক্রান্ত বিভাগ দেখুন।
• visible: বুলিয়ান। টাইলের দৃশ্যমানতা নির্দিষ্ট করে ওভারলে। একটি অদৃশ্য টাইল ওভারলে (ভ্যালু false) ম্যাপে আঁকা হয় না, কিন্তু এর অন্যান্য সমস্ত প্রপার্টি বজায় থাকে। ডিফল্ট মান হল true.
• zIndex: গ্রাউন্ড ওভারলে , বৃত্ত, পলিলাইন ও পলিগন সহ অন্যান্য ওভারলের সাথে সম্পর্কিত টাইল ওভারলে কোন ক্রমে আঁকা হবে তা নির্ধারণ করে। যেসব ওভারলেয়ের z-ইনডেক্স বেশি, সেগুলি কম z-ইনডেক্স থাকা ওভারলেয়ের উপরে ড্র করা হয়। একই z-index সহ ওভারলেয়ের ক্রম স্বেচ্ছাচারী। ডিফল্ট z-ইনডেক্স হল ০। মনে রাখবেন যে মার্কার সবসময় অন্যান্য ওভারলের উপরে আঁকা হয়, অন্যান্য ওভারলের z-ইনডেক্স যাই হোক না কেন।
4. ম্যাপে ওভারলে যোগ করতে GoogleMap.addTileOverlay() কল করুন।

Kotlin

val tileProvider: TileProvider = object : UrlTileProvider(256, 256) {
    override fun getTileUrl(x: Int, y: Int, zoom: Int): URL? {

        /* Define the URL pattern for the tile images */
        val url = "http://my.image.server/images/$zoom/$x/$y.png"
        return if (!checkTileExists(x, y, zoom)) {
            null
        } else try {
            URL(url)
        } catch (e: MalformedURLException) {
            throw AssertionError(e)
        }
    }

    /*
     * Check that the tile server supports the requested x, y and zoom.
     * Complete this stub according to the tile range you support.
     * If you support a limited range of tiles at different zoom levels, then you
     * need to define the supported x, y range at each zoom level.
     */
    private fun checkTileExists(x: Int, y: Int, zoom: Int): Boolean {
        val minZoom = 12
        val maxZoom = 16
        return zoom in minZoom..maxZoom
    }
}

val tileOverlay = map.addTileOverlay(
    TileOverlayOptions()
        .tileProvider(tileProvider)
)
tileOverlay?.let {
    val isVisible = it.isVisible
    val fadeIn = it.fadeIn
    val transparency = it.transparency
    val zIndex = it.zIndex
}

      

Java

TileProvider tileProvider = new UrlTileProvider(256, 256) {

    @Override
    public URL getTileUrl(int x, int y, int zoom) {

        /* Define the URL pattern for the tile images */
        String s = String.format(java.util.Locale.US, "http://my.image.server/images/%d/%d/%d.png", zoom, x, y);

        if (!checkTileExists(x, y, zoom)) {
            return null;
        }

        try {
            return new URL(s);
        } catch (MalformedURLException e) {
            throw new AssertionError(e);
        }
    }

    /*
     * Check that the tile server supports the requested x, y and zoom.
     * Complete this stub according to the tile range you support.
     * If you support a limited range of tiles at different zoom levels, then you
     * need to define the supported x, y range at each zoom level.
     */
    private boolean checkTileExists(int x, int y, int zoom) {
        int minZoom = 12;
        int maxZoom = 16;

        return (zoom >= minZoom && zoom <= maxZoom);
    }
};

TileOverlay tileOverlay = map.addTileOverlay(new TileOverlayOptions()
    .tileProvider(tileProvider));

      

UrlTileProvider-এর অ্যাকশন দেখতে, Google Play পরিষেবা SDK-এর সাথে বান্ডেল করা স্যাম্পেল কোড-এ TileOverlayDemoActivity দেখুন।

মনে রাখবেন: আরও বেশি কন্ট্রোল চাইলে, আপনি TileProvider ইন্টারফেস প্রয়োগ করে টাইলের প্রোভাইডারকে সংজ্ঞায়িত করতে পারেন।

টাইল ওভারলের জন্য স্বচ্ছতা সেট করুন

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

নিচের কোড স্যাম্পেলটি 0.5f ও 0.0f-এর মধ্যে টাইলের ওভারলেয়ের স্বচ্ছতা টগল করে:

Kotlin

val tileOverlayTransparent = map.addTileOverlay(
    TileOverlayOptions()
        .tileProvider(object : UrlTileProvider(256, 256) {
            // ...
        })
        .transparency(0.5f)
)

// Switch between 0.0f and 0.5f transparency.
tileOverlayTransparent?.let {
    it.transparency = 0.5f - it.transparency
}

      

Java

TileOverlay tileOverlayTransparent = map.addTileOverlay(new TileOverlayOptions()
    .tileProvider(new UrlTileProvider(256, 256) {
        // ...
    })
    .transparency(0.5f));

// Switch between 0.0f and 0.5f transparency.
if (tileOverlayTransparent != null) {
    tileOverlayTransparent.setTransparency(0.5f - tileOverlayTransparent.getTransparency());
}

      

টাইল ইমেজের জন্য আলফা চ্যানেল মাল্টিপ্লায়ার হিসেবে স্বচ্ছতা প্রয়োগ করা হয়। টাইল ওভারলের ট্রান্সপারেন্সি সেট করতে, উপরের স্যাম্পেলে দেখানো [0.0f, 1.0f] রেঞ্জে transparency সহ TileOverlayOptions অবজেক্ট প্রদান করুন। 0.0f ভ্যালুর অর্থ হল টাইল ওভারলে সম্পূর্ণ অস্বচ্ছ এবং 1.0f ভ্যালুর অর্থ হল এটি সম্পূর্ণ স্বচ্ছ। ডিফল্ট ভ্যালু হল 0.0f (অস্বচ্ছ)।

আপনি TileOverlay.getTransparency() কল করে টাইলের ওভারলেয়ের স্বচ্ছতা অ্যাক্সেস করতে পারবেন এবং TileOverlay.setTransparency() কল করে এটি পরিবর্তন করতে পারবেন।

স্বচ্ছতা, অ্যানিমেশন ও ফেড-ইন

ট্রান্সপারেন্সি পরিবর্তন করা হলে কোনও অ্যানিমেশন হয় না। ট্রান্সপারেন্সি বিকল্পটি fadeIn বিকল্পের সাথে কাজ করে।

ফেড-ইন টাইল লোড করার সময় স্বচ্ছতার অ্যানিমেশন প্রদান করে। আপনি যদি কোনও স্বচ্ছতার মান সেট করেন, তাহলে টাইলগুলি সম্পূর্ণ স্বচ্ছ থেকে নির্ধারিত স্বচ্ছতার মানে ফেড ইন হয়। ফেড-ইন চলাকালীন আপনি স্বচ্ছতা পরিবর্তন করলে, অ্যানিমেশন নতুন টার্গেট স্বচ্ছতার দিকে চলতে থাকে।

টাইল ওভারলে সরানো

আপনি TileOverlay.remove() পদ্ধতি ব্যবহার করে টাইল ওভারলে সরাতে পারবেন।

Kotlin

tileOverlay?.remove()

      

Java

tileOverlay.remove();

      

পুরনো টাইল মুছে দেওয়া

টাইল ওভারলে দ্বারা প্রদান করা টাইল 'পুরনো' হয়ে গেলে, আপনি clearTileCache() কল করে রিফ্রেশ করতে বাধ্য করতে পারেন। এর ফলে এই ওভারলেতে থাকা সব টাইল আবার লোড হবে। যেমন, TileProvider-এর দেওয়া টাইল পরিবর্তন হলে, আপনাকে clearTileCache() কল করতে হবে যাতে আগের টাইল আর রেন্ডার না হয়।

Kotlin

tileOverlay?.clearTileCache()

      

Java

tileOverlay.clearTileCache();