ফায়ারবেসের সাথে সহযোগিতামূলক রিয়েলটাইম ম্যাপিং

ওভারভিউ

এই টিউটোরিয়ালটি আপনাকে দেখায় কিভাবে ফায়ারবেস অ্যাপ্লিকেশন প্ল্যাটফর্ম ব্যবহার করে একটি ইন্টারেক্টিভ মানচিত্র তৈরি করতে হয়। একটি হিটম্যাপ তৈরি করতে নীচের মানচিত্রে বিভিন্ন অবস্থানে ক্লিক করার চেষ্টা করুন৷

নীচের বিভাগটি এই টিউটোরিয়ালে মানচিত্র তৈরি করার জন্য আপনার প্রয়োজনীয় পুরো কোডটি প্রদর্শন করে।

/**
 * Firebase config block.
 */
var config = {
  apiKey: 'AIzaSyDX-tgWqPmTme8lqlFn2hIsqwxGL6FYPBY',
  authDomain: 'maps-docs-team.firebaseapp.com',
  databaseURL: 'https://maps-docs-team.firebaseio.com',
  projectId: 'maps-docs-team',
  storageBucket: 'maps-docs-team.appspot.com',
  messagingSenderId: '285779793579'
};

firebase.initializeApp(config);

/**
 * Data object to be written to Firebase.
 */
var data = {sender: null, timestamp: null, lat: null, lng: null};

function makeInfoBox(controlDiv, map) {
  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.boxShadow = 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px';
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '2px';
  controlUI.style.marginBottom = '22px';
  controlUI.style.marginTop = '10px';
  controlUI.style.textAlign = 'center';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '100%';
  controlText.style.padding = '6px';
  controlText.textContent =
      'The map shows all clicks made in the last 10 minutes.';
  controlUI.appendChild(controlText);
}

      /**
      * Starting point for running the program. Authenticates the user.
      * @param {function()} onAuthSuccess - Called when authentication succeeds.
      */
      function initAuthentication(onAuthSuccess) {
        firebase.auth().signInAnonymously().catch(function(error) {
          console.log(error.code + ', ' + error.message);
        }, {remember: 'sessionOnly'});

        firebase.auth().onAuthStateChanged(function(user) {
          if (user) {
            data.sender = user.uid;
            onAuthSuccess();
          } else {
            // User is signed out.
          }
        });
      }

      /**
       * Creates a map object with a click listener and a heatmap.
       */
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 0, lng: 0},
          zoom: 3,
          styles: [{
            featureType: 'poi',
            stylers: [{ visibility: 'off' }]  // Turn off POI.
          },
          {
            featureType: 'transit.station',
            stylers: [{ visibility: 'off' }]  // Turn off bus, train stations etc.
          }],
          disableDoubleClickZoom: true,
          streetViewControl: false,
        });

        // Create the DIV to hold the control and call the makeInfoBox() constructor
        // passing in this DIV.
        var infoBoxDiv = document.createElement('div');
        makeInfoBox(infoBoxDiv, map);
        map.controls[google.maps.ControlPosition.TOP_CENTER].push(infoBoxDiv);

        // Listen for clicks and add the location of the click to firebase.
        map.addListener('click', function(e) {
          data.lat = e.latLng.lat();
          data.lng = e.latLng.lng();
          addToFirebase(data);
        });

        // Create a heatmap.
        var heatmap = new google.maps.visualization.HeatmapLayer({
          data: [],
          map: map,
          radius: 16
        });

        initAuthentication(initFirebase.bind(undefined, heatmap));
      }

      /**
       * Set up a Firebase with deletion on clicks older than expiryMs
       * @param {!google.maps.visualization.HeatmapLayer} heatmap The heatmap to
       */
      function initFirebase(heatmap) {

        // 10 minutes before current time.
        var startTime = new Date().getTime() - (60 * 10 * 1000);

        // Reference to the clicks in Firebase.
        var clicks = firebase.database().ref('clicks');

        // Listen for clicks and add them to the heatmap.
        clicks.orderByChild('timestamp').startAt(startTime).on('child_added',
          function(snapshot) {
            // Get that click from firebase.
            var newPosition = snapshot.val();
            var point = new google.maps.LatLng(newPosition.lat, newPosition.lng);
            var elapsedMs = Date.now() - newPosition.timestamp;

            // Add the point to the heatmap.
            heatmap.getData().push(point);

            // Request entries older than expiry time (10 minutes).
            var expiryMs = Math.max(60 * 10 * 1000 - elapsedMs, 0);

            // Set client timeout to remove the point after a certain time.
            window.setTimeout(function() {
              // Delete the old point from the database.
              snapshot.ref.remove();
            }, expiryMs);
          }
        );

        // Remove old data from the heatmap when a point is removed from firebase.
        clicks.on('child_removed', function(snapshot, prevChildKey) {
          var heatmapData = heatmap.getData();
          var i = 0;
          while (snapshot.val().lat != heatmapData.getAt(i).lat()
            || snapshot.val().lng != heatmapData.getAt(i).lng()) {
            i++;
          }
          heatmapData.removeAt(i);
        });
      }

      /**
       * Updates the last_message/ path with the current timestamp.
       * @param {function(Date)} addClick After the last message timestamp has been updated,
       *     this function is called with the current timestamp to add the
       *     click to the firebase.
       */
      function getTimestamp(addClick) {
        // Reference to location for saving the last click time.
        var ref = firebase.database().ref('last_message/' + data.sender);

        ref.onDisconnect().remove();  // Delete reference from firebase on disconnect.

        // Set value to timestamp.
        ref.set(firebase.database.ServerValue.TIMESTAMP, function(err) {
          if (err) {  // Write to last message was unsuccessful.
            console.log(err);
          } else {  // Write to last message was successful.
            ref.once('value', function(snap) {
              addClick(snap.val());  // Add click with same timestamp.
            }, function(err) {
              console.warn(err);
            });
          }
        });
      }

      /**
       * Adds a click to firebase.
       * @param {Object} data The data to be added to firebase.
       *     It contains the lat, lng, sender and timestamp.
       */
      function addToFirebase(data) {
        getTimestamp(function(timestamp) {
          // Add the new timestamp to the record data.
          data.timestamp = timestamp;
          var ref = firebase.database().ref('clicks').push(data, function(err) {
            if (err) {  // Data was not written to firebase.
              console.warn(err);
            }
          });
        });
      }

<div id="map"></div>

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=visualization&callback=initMap" defer></script>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase.js"></script>

নিজে চেষ্টা করে দেখুন

আপনি কোড উইন্ডোর উপরের ডানদিকের কোণায় <> আইকনে ক্লিক করে JSFiddle-এ এই কোডটি নিয়ে পরীক্ষা করতে পারেন।

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-database.js"></script>
    <script>
/**
 * Firebase config block.
 */
var config = {
  apiKey: 'AIzaSyDX-tgWqPmTme8lqlFn2hIsqwxGL6FYPBY',
  authDomain: 'maps-docs-team.firebaseapp.com',
  databaseURL: 'https://maps-docs-team.firebaseio.com',
  projectId: 'maps-docs-team',
  storageBucket: 'maps-docs-team.appspot.com',
  messagingSenderId: '285779793579'
};

firebase.initializeApp(config);

/**
 * Data object to be written to Firebase.
 */
var data = {sender: null, timestamp: null, lat: null, lng: null};

function makeInfoBox(controlDiv, map) {
  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.boxShadow = 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px';
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '2px';
  controlUI.style.marginBottom = '22px';
  controlUI.style.marginTop = '10px';
  controlUI.style.textAlign = 'center';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '100%';
  controlText.style.padding = '6px';
  controlText.textContent =
      'The map shows all clicks made in the last 10 minutes.';
  controlUI.appendChild(controlText);
}

      /**
      * Starting point for running the program. Authenticates the user.
      * @param {function()} onAuthSuccess - Called when authentication succeeds.
      */
      function initAuthentication(onAuthSuccess) {
        firebase.auth().signInAnonymously().catch(function(error) {
          console.log(error.code + ', ' + error.message);
        }, {remember: 'sessionOnly'});

        firebase.auth().onAuthStateChanged(function(user) {
          if (user) {
            data.sender = user.uid;
            onAuthSuccess();
          } else {
            // User is signed out.
          }
        });
      }

      /**
       * Creates a map object with a click listener and a heatmap.
       */
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 0, lng: 0},
          zoom: 3,
          styles: [{
            featureType: 'poi',
            stylers: [{ visibility: 'off' }]  // Turn off POI.
          },
          {
            featureType: 'transit.station',
            stylers: [{ visibility: 'off' }]  // Turn off bus, train stations etc.
          }],
          disableDoubleClickZoom: true,
          streetViewControl: false,
        });

        // Create the DIV to hold the control and call the makeInfoBox() constructor
        // passing in this DIV.
        var infoBoxDiv = document.createElement('div');
        makeInfoBox(infoBoxDiv, map);
        map.controls[google.maps.ControlPosition.TOP_CENTER].push(infoBoxDiv);

        // Listen for clicks and add the location of the click to firebase.
        map.addListener('click', function(e) {
          data.lat = e.latLng.lat();
          data.lng = e.latLng.lng();
          addToFirebase(data);
        });

        // Create a heatmap.
        var heatmap = new google.maps.visualization.HeatmapLayer({
          data: [],
          map: map,
          radius: 16
        });

        initAuthentication(initFirebase.bind(undefined, heatmap));
      }

      /**
       * Set up a Firebase with deletion on clicks older than expiryMs
       * @param {!google.maps.visualization.HeatmapLayer} heatmap The heatmap to
       */
      function initFirebase(heatmap) {

        // 10 minutes before current time.
        var startTime = new Date().getTime() - (60 * 10 * 1000);

        // Reference to the clicks in Firebase.
        var clicks = firebase.database().ref('clicks');

        // Listen for clicks and add them to the heatmap.
        clicks.orderByChild('timestamp').startAt(startTime).on('child_added',
          function(snapshot) {
            // Get that click from firebase.
            var newPosition = snapshot.val();
            var point = new google.maps.LatLng(newPosition.lat, newPosition.lng);
            var elapsedMs = Date.now() - newPosition.timestamp;

            // Add the point to the heatmap.
            heatmap.getData().push(point);

            // Request entries older than expiry time (10 minutes).
            var expiryMs = Math.max(60 * 10 * 1000 - elapsedMs, 0);

            // Set client timeout to remove the point after a certain time.
            window.setTimeout(function() {
              // Delete the old point from the database.
              snapshot.ref.remove();
            }, expiryMs);
          }
        );

        // Remove old data from the heatmap when a point is removed from firebase.
        clicks.on('child_removed', function(snapshot, prevChildKey) {
          var heatmapData = heatmap.getData();
          var i = 0;
          while (snapshot.val().lat != heatmapData.getAt(i).lat()
            || snapshot.val().lng != heatmapData.getAt(i).lng()) {
            i++;
          }
          heatmapData.removeAt(i);
        });
      }

      /**
       * Updates the last_message/ path with the current timestamp.
       * @param {function(Date)} addClick After the last message timestamp has been updated,
       *     this function is called with the current timestamp to add the
       *     click to the firebase.
       */
      function getTimestamp(addClick) {
        // Reference to location for saving the last click time.
        var ref = firebase.database().ref('last_message/' + data.sender);

        ref.onDisconnect().remove();  // Delete reference from firebase on disconnect.

        // Set value to timestamp.
        ref.set(firebase.database.ServerValue.TIMESTAMP, function(err) {
          if (err) {  // Write to last message was unsuccessful.
            console.log(err);
          } else {  // Write to last message was successful.
            ref.once('value', function(snap) {
              addClick(snap.val());  // Add click with same timestamp.
            }, function(err) {
              console.warn(err);
            });
          }
        });
      }

      /**
       * Adds a click to firebase.
       * @param {Object} data The data to be added to firebase.
       *     It contains the lat, lng, sender and timestamp.
       */
      function addToFirebase(data) {
        getTimestamp(function(timestamp) {
          // Add the new timestamp to the record data.
          data.timestamp = timestamp;
          var ref = firebase.database().ref('clicks').push(data, function(err) {
            if (err) {  // Data was not written to firebase.
              console.warn(err);
            }
          });
        });
      }
    </script>
    <script defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization&callback=initMap">
    </script>
  </body>
</html>

শুরু হচ্ছে

আপনি এই টিউটোরিয়ালের কোড ব্যবহার করে Firebase মানচিত্রের নিজস্ব সংস্করণ তৈরি করতে পারেন। এটি করা শুরু করতে, একটি পাঠ্য সম্পাদকে একটি নতুন ফাইল তৈরি করুন এবং এটিকে index.html হিসাবে সংরক্ষণ করুন।

আপনি এই ফাইলে যোগ করতে পারেন এমন কোড বোঝার জন্য অনুসরণকারী বিভাগগুলি পড়ুন।

একটি মৌলিক মানচিত্র তৈরি করা হচ্ছে

এই বিভাগটি কোডটি ব্যাখ্যা করে যা একটি মৌলিক মানচিত্র সেট আপ করে। এটি মানচিত্র জাভাস্ক্রিপ্ট API দিয়ে শুরু করার সময় আপনি যেভাবে মানচিত্র তৈরি করেছেন তার অনুরূপ হতে পারে।

নিচের কোডটি আপনার index.html ফাইলে কপি করুন। এই কোডটি মানচিত্র জাভাস্ক্রিপ্ট API লোড করে এবং মানচিত্রটিকে পূর্ণস্ক্রীন করে। এটি ভিজ্যুয়ালাইজেশন লাইব্রেরিও লোড করে, যা আপনাকে একটি হিটম্যাপ তৈরি করার জন্য টিউটোরিয়ালে পরে প্রয়োজন।

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY
        &libraries=visualization&callback=initMap">
    </script>

    <script>
      // The JavaScript code that creates the Firebase map goes here.
    </script>

  </body>
</html>

কোড নমুনায় YOUR_API_KEY ক্লিক করুন, অথবা একটি API কী পেতে নির্দেশাবলী অনুসরণ করুন। আপনার অ্যাপ্লিকেশনের API কী দিয়ে YOUR_API_KEY প্রতিস্থাপন করুন।

যে বিভাগগুলি অনুসরণ করে সেগুলি জাভাস্ক্রিপ্ট কোড ব্যাখ্যা করে যা ফায়ারবেস মানচিত্র তৈরি করে। আপনি একটি firebasemap.js ফাইলে কোডটি কপি করে সংরক্ষণ করতে পারেন এবং নিচের মতো স্ক্রিপ্ট ট্যাগের মধ্যে উল্লেখ করতে পারেন।

<script>firebasemap.js</script>

বিকল্পভাবে, আপনি এই টিউটোরিয়ালের শুরুতে সম্পূর্ণ নমুনা কোডের মতো স্ক্রিপ্ট ট্যাগের মধ্যে কোডটি সরাসরি সন্নিবেশ করতে পারেন।

নিচের কোডটি firebasemap.js ফাইলে বা আপনার index.html ফাইলের খালি স্ক্রিপ্ট ট্যাগের মধ্যে যোগ করুন। এটি একটি প্রারম্ভিক বিন্দু যা একটি ফাংশন তৈরি করে প্রোগ্রাম চালায় যা মানচিত্র অবজেক্টকে শুরু করে।

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 0, lng: 0},
    zoom: 3,
    styles: [{
      featureType: 'poi',
      stylers: [{ visibility: 'off' }]  // Turn off points of interest.
    }, {
      featureType: 'transit.station',
      stylers: [{ visibility: 'off' }]  // Turn off bus stations, train stations, etc.
    }],
    disableDoubleClickZoom: true,
    streetViewControl: false
  });
}

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

API সম্পূর্ণরূপে লোড হওয়ার পরে, নীচের স্ক্রিপ্ট ট্যাগে কলব্যাক প্যারামিটারটি HTML ফাইলে initMap() ফাংশনটি কার্যকর করে।

<script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY
    &libraries=visualization&callback=initMap">
</script>

মানচিত্রের শীর্ষে পাঠ্য নিয়ন্ত্রণ তৈরি করতে নীচের কোডটি যোগ করুন।

function makeInfoBox(controlDiv, map) {
  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.boxShadow = 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px';
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '2px';
  controlUI.style.marginBottom = '22px';
  controlUI.style.marginTop = '10px';
  controlUI.style.textAlign = 'center';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '100%';
  controlText.style.padding = '6px';
  controlText.innerText = 'The map shows all clicks made in the last 10 minutes.';
  controlUI.appendChild(controlText);
}

টেক্সট কন্ট্রোল বক্স লোড করতে var map পরে, initMap ফাংশনের ভিতরে নীচের কোডটি যোগ করুন।

// Create the DIV to hold the control and call the makeInfoBox() constructor
// passing in this DIV.
var infoBoxDiv = document.createElement('div');
var infoBox = new makeInfoBox(infoBoxDiv, map);
infoBoxDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(infoBoxDiv);

কোডটি তৈরি করে Google ম্যাপ দেখতে, একটি ওয়েব ব্রাউজারে index.html ফাইলটি খুলুন।

Firebase সেট আপ করা হচ্ছে

এই অ্যাপ্লিকেশনটিকে সহযোগিতামূলক করার জন্য, আপনাকে অবশ্যই একটি বহিরাগত ডাটাবেসে ক্লিকগুলি সংরক্ষণ করতে হবে যা সমস্ত ব্যবহারকারী অ্যাক্সেস করতে পারে৷ ফায়ারবেস রিয়েলটাইম ডেটাবেস এই উদ্দেশ্যে উপযুক্ত, এবং SQL এর কোনো জ্ঞানের প্রয়োজন নেই।

প্রথমে, কোনো চার্জ ছাড়াই একটি Firebase অ্যাকাউন্টের জন্য সাইন আপ করুন । আপনি যদি Firebase-এ নতুন হন, তাহলে আপনি "My First App" নামের একটি নতুন অ্যাপ দেখতে পাবেন। আপনি যদি একটি নতুন অ্যাপ তৈরি করেন, তাহলে আপনি এটিকে একটি নতুন নাম দিতে পারেন এবং একটি কাস্টম Firebase URL দিতে পারেন যার শেষ হয় firebaseIO.com । উদাহরণস্বরূপ, আপনি https://janes-firebase-map.firebaseIO.com URL দিয়ে আপনার অ্যাপের নাম "জেনের ফায়ারবেস মানচিত্র" রাখতে পারেন। আপনি আপনার JavaScript অ্যাপ্লিকেশনের সাথে ডাটাবেস লিঙ্ক করতে এই URL ব্যবহার করতে পারেন।

Firebase লাইব্রেরি আমদানি করতে আপনার HTML ফাইলের <head> ট্যাগের পরে নিচের লাইনটি যোগ করুন।

<script src="www.gstatic.com/firebasejs/5.3.0/firebase.js"></script>

আপনার জাভাস্ক্রিপ্ট ফাইলে নিম্নলিখিত লাইন যোগ করুন:

var firebase = new Firebase("<Your Firebase URL here>");

Firebase-এ ক্লিক ডেটা সংরক্ষণ করা

এই বিভাগটি কোড ব্যাখ্যা করে যা ফায়ারবেসে ডেটা সঞ্চয় করে, ম্যাপে মাউস-ক্লিক সম্পর্কে।

মানচিত্রে প্রতিটি মাউস-ক্লিকের জন্য, নীচের কোডটি একটি বিশ্বব্যাপী ডেটা অবজেক্ট তৈরি করে এবং এর তথ্য Firebase-এ সঞ্চয় করে। এই বস্তুটি তার latLng, এবং ক্লিকের টাইম-স্ট্যাম্পের মতো ডেটা রেকর্ড করে, সেইসাথে ব্রাউজারের একটি অনন্য আইডি যা ক্লিকটি তৈরি করে।

/**
 * Data object to be written to Firebase.
 */
var data = {
  sender: null,
  timestamp: null,
  lat: null,
  lng: null
};

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

/**
* Starting point for running the program. Authenticates the user.
* @param {function()} onAuthSuccess - Called when authentication succeeds.
*/
function initAuthentication(onAuthSuccess) {
  firebase.auth().signInAnonymously().catch(function(error) {
      console.log(error.code + ", " + error.message);
  }, {remember: 'sessionOnly'});

  firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
      data.sender = user.uid;
      onAuthSuccess();
    } else {
      // User is signed out.
    }
  });
}

নিচের কোডের পরবর্তী বিভাগটি মানচিত্রে ক্লিকের জন্য শোনে, যা আপনার Firebase ডাটাবেসে একটি 'শিশু' যোগ করে। যখন এটি ঘটে, snapshot.val() ফাংশন এন্ট্রির ডেটা মান পায় এবং একটি নতুন LatLng অবজেক্ট তৈরি করে।

// Listen for clicks and add them to the heatmap.
clicks.orderByChild('timestamp').startAt(startTime).on('child_added',
  function(snapshot) {
    var newPosition = snapshot.val();
    var point = new google.maps.LatLng(newPosition.lat, newPosition.lng);
    heatmap.getData().push(point);
  }
);

নিচের কোডটি Firebase সেট আপ করে:

• মানচিত্রে ক্লিকের জন্য শুনুন। যখন একটি ক্লিক হয়, অ্যাপটি একটি টাইমস্ট্যাম্প রেকর্ড করে, তারপর আপনার ফায়ারবেস ডাটাবেসে একটি 'শিশু' যোগ করে।
• ম্যাপে 10 মিনিটের বেশি পুরনো যেকোনো ক্লিক রিয়েল-টাইমে মুছুন।

/**
 * Set up a Firebase with deletion on clicks older than expirySeconds
 * @param {!google.maps.visualization.HeatmapLayer} heatmap The heatmap to
 * which points are added from Firebase.
 */
function initFirebase(heatmap) {

  // 10 minutes before current time.
  var startTime = new Date().getTime() - (60 * 10 * 1000);

  // Reference to the clicks in Firebase.
  var clicks = firebase.database().ref('clicks');

  // Listen for clicks and add them to the heatmap.
  clicks.orderByChild('timestamp').startAt(startTime).on('child_added',
    function(snapshot) {
      // Get that click from firebase.
      var newPosition = snapshot.val();
      var point = new google.maps.LatLng(newPosition.lat, newPosition.lng);
      var elapsedMs = Date.now() - newPosition.timestamp;

      // Add the point to the heatmap.
      heatmap.getData().push(point);

      // Request entries older than expiry time (10 minutes).
      var expiryMs = Math.max(60 * 10 * 1000 - elapsed, 0);
      // Set client timeout to remove the point after a certain time.
      window.setTimeout(function() {
        // Delete the old point from the database.
        snapshot.ref.remove();
      }, expiryMs);
    }
  );

  // Remove old data from the heatmap when a point is removed from firebase.
  clicks.on('child_removed', function(snapshot, prevChildKey) {
    var heatmapData = heatmap.getData();
    var i = 0;
    while (snapshot.val().lat != heatmapData.getAt(i).lat()
      || snapshot.val().lng != heatmapData.getAt(i).lng()) {
      i++;
    }
    heatmapData.removeAt(i);
  });
}

এই বিভাগের সমস্ত জাভাস্ক্রিপ্ট কোড আপনার firebasemap.js ফাইলে কপি করুন।

হিটম্যাপ তৈরি করা হচ্ছে

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

একটি হিটম্যাপ তৈরি করতে initMap() ফাংশনের ভিতরে নীচের কোড যোগ করুন।

// Create a heatmap.
var heatmap = new google.maps.visualization.HeatmapLayer({
  data: [],
  map: map,
  radius: 16
});

নীচের কোডটি initFirebase , addToFirebase এবং getTimestamp ফাংশনগুলিকে ট্রিগার করে।

initAuthentication(initFirebase.bind(undefined, heatmap));

লক্ষ্য করুন যে আপনি হিটম্যাপে ক্লিক করলে, এটি এখনও পয়েন্ট তৈরি করে না। মানচিত্রে পয়েন্ট তৈরি করতে, আপনাকে একটি মানচিত্র শ্রোতা সেট আপ করতে হবে।

হিটম্যাপে পয়েন্ট তৈরি করা হচ্ছে

নীচের কোডটি মানচিত্র তৈরি করে এমন কোডের পরে, initMap() এর ভিতরে একজন শ্রোতা যোগ করে। এই কোডটি প্রতিটি ক্লিকের ডেটা শোনে, Firebase ডাটাবেসে আপনার ক্লিকের অবস্থান সঞ্চয় করে এবং আপনার হিটম্যাপের পয়েন্টগুলি প্রদর্শন করে।

// Listen for clicks and add the location of the click to firebase.
map.addListener('click', function(e) {
  data.lat = e.latLng.lat();
  data.lng = e.latLng.lng();
  addToFirebase(data);
});

আপনার হিটম্যাপে পয়েন্ট তৈরি করতে মানচিত্রের অবস্থানগুলিতে ক্লিক করুন৷

আপনার কাছে এখন Firebase এবং Maps JavaScript API ব্যবহার করে একটি সম্পূর্ণ কার্যকরী রিয়েল-টাইম অ্যাপ্লিকেশন রয়েছে।

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

আরও জানুন

Firebase হল একটি অ্যাপ্লিকেশন প্ল্যাটফর্ম যা JSON হিসাবে ডেটা সঞ্চয় করে এবং রিয়েলটাইমে সমস্ত সংযুক্ত ক্লায়েন্টের সাথে সিঙ্ক করে। আপনার অ্যাপ অফলাইনে গেলেও এটি উপলব্ধ। এই টিউটোরিয়ালটি এর রিয়েলটাইম ডাটাবেস ব্যবহার করে।