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

এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

মাউস ইভেন্টগুলি পরিচালনা করুন

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

ডেটা বৈশিষ্ট্যগুলিকে mousemove এবং click ইভেন্টগুলিতে সাড়া দিতে দিন এবং ব্যবহারকারীর মিথস্ক্রিয়ার উপর ভিত্তি করে কোনও বৈশিষ্ট্যের চেহারা পরিবর্তন করতে ব্যবহার করুন।

ডেটাসেট স্তর ইভেন্টগুলি সক্ষম করুন

ডেটাসেট স্তরে ইভেন্ট সক্ষম করতে নিম্নলিখিত পদক্ষেপগুলি গ্রহণ করুন:

আপনি যে ইভেন্টটি নিবন্ধন করতে চান তার জন্য ডেটাসেট স্তরে addListener() ফাংশনটি কল করে ইভেন্ট বিজ্ঞপ্তিগুলির জন্য একটি ডেটাসেট স্তর নিবন্ধন করুন। এই উদাহরণে মানচিত্রটি একটি শ্রোতাও পায়।

টাইপস্ক্রিপ্ট

datasetLayer = map.getDatasetFeatureLayer(datasetId);
datasetLayer.style = applyStyle;

datasetLayer.addListener('click', handleClick);
datasetLayer.addListener('mousemove', handleMouseMove);

// Map event listener.
map.addListener('mousemove', () => {
  // If the map gets a mousemove, that means there are no feature layers
  // with listeners registered under the mouse, so we clear the last
  // interacted feature ids.
  if (lastInteractedFeatureIds?.length) {
    lastInteractedFeatureIds = [];
    datasetLayer.style = applyStyle;
  }
});index.ts

জাভাস্ক্রিপ্ট

datasetLayer = map.getDatasetFeatureLayer(datasetId);
datasetLayer.style = applyStyle;
datasetLayer.addListener("click", handleClick);
datasetLayer.addListener("mousemove", handleMouseMove);
// Map event listener.
map.addListener("mousemove", () => {
  // If the map gets a mousemove, that means there are no feature layers
  // with listeners registered under the mouse, so we clear the last
  // interacted feature ids.
  if (lastInteractedFeatureIds?.length) {
    lastInteractedFeatureIds = [];
    datasetLayer.style = applyStyle;
  }
});
index.js

ইন্টারঅ্যাকশনের ধরণের উপর ভিত্তি করে নির্বাচিত বৈশিষ্ট্যটিকে স্টাইল করতে ইভেন্ট হ্যান্ডলার কোড যোগ করুন।

টাইপস্ক্রিপ্ট

// Note, 'globalid' is an attribute in this Dataset.
function handleClick(/* MouseEvent */ e) {
  if (e.features) {
    lastClickedFeatureIds =
        e.features.map((f) => f.datasetAttributes['globalid']);
  }
  //@ts-ignore
  datasetLayer.style = applyStyle;
}

function handleMouseMove(/* MouseEvent */ e) {
  if (e.features) {
    lastInteractedFeatureIds =
        e.features.map((f) => f.datasetAttributes['globalid']);
  }
  //@ts-ignore
  datasetLayer.style = applyStyle;
}index.ts

জাভাস্ক্রিপ্ট

// Note, 'globalid' is an attribute in this Dataset.
function handleClick(/* MouseEvent */ e) {
  if (e.features) {
    lastClickedFeatureIds = e.features.map(
      (f) => f.datasetAttributes["globalid"],
    );
  }

  //@ts-ignore
  datasetLayer.style = applyStyle;
}

function handleMouseMove(/* MouseEvent */ e) {
  if (e.features) {
    lastInteractedFeatureIds = e.features.map(
      (f) => f.datasetAttributes["globalid"],
    );
  }

  //@ts-ignore
  datasetLayer.style = applyStyle;
}
index.js

স্টাইল প্রয়োগ করতে একটি ফিচার স্টাইল ফাংশন ব্যবহার করুন। এখানে দেখানো ফিচার স্টাইল ফাংশনটি শর্তসাপেক্ষে ইন্টারঅ্যাকশনের ধরণের উপর ভিত্তি করে স্টাইল প্রয়োগ করে। এখানে তিনটি স্টাইল সংজ্ঞায়িত করা হয়েছে: একটি mousemove এ বর্ডার বোল্ড করার জন্য, একটি click করলে ব্যাকগ্রাউন্ড পরিবর্তন করার জন্য এবং একটি ডিফল্ট স্টাইল।

টাইপস্ক্রিপ্ট

const styleDefault = {
  strokeColor: 'green',
  strokeWeight: 2.0,
  strokeOpacity: 1.0,
  fillColor: 'green',
  fillOpacity: 0.3,
};

const styleClicked = {
  ...styleDefault,
  strokeColor: 'blue',
  fillColor: 'blue',
  fillOpacity: 0.5,
};

const styleMouseMove = {
   ...styleDefault,
  strokeWeight: 4.0
};

function applyStyle(/* FeatureStyleFunctionOptions */ params) {
  const datasetFeature = params.feature;
  // Note, 'globalid' is an attribute in this dataset.
  //@ts-ignore
  if (lastClickedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) {
    return styleClicked;
  }
  //@ts-ignore
  if (lastInteractedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) {
    return styleMouseMove;
  }
  return styleDefault;
}index.ts

জাভাস্ক্রিপ্ট

const styleDefault = {
  strokeColor: "green",
  strokeWeight: 2.0,
  strokeOpacity: 1.0,
  fillColor: "green",
  fillOpacity: 0.3,
};
const styleClicked = {
  ...styleDefault,
  strokeColor: "blue",
  fillColor: "blue",
  fillOpacity: 0.5,
};
const styleMouseMove = {
  ...styleDefault,
  strokeWeight: 4.0,
};

function applyStyle(/* FeatureStyleFunctionOptions */ params) {
  const datasetFeature = params.feature;

  // Note, 'globalid' is an attribute in this dataset.
  //@ts-ignore
  if (
    lastClickedFeatureIds.includes(datasetFeature.datasetAttributes["globalid"])
  ) {
    return styleClicked;
  }

  //@ts-ignore
  if (
    lastInteractedFeatureIds.includes(
      datasetFeature.datasetAttributes["globalid"],
    )
  ) {
    return styleMouseMove;
  }
  return styleDefault;
}
index.js

সম্পূর্ণ উদাহরণ কোড

টাইপস্ক্রিপ্ট

let map: google.maps.Map;
let lastInteractedFeatureIds = [];
let lastClickedFeatureIds = [];
let datasetLayer;

// Note, 'globalid' is an attribute in this Dataset.
function handleClick(/* MouseEvent */ e) {
  if (e.features) {
    lastClickedFeatureIds =
        e.features.map((f) => f.datasetAttributes['globalid']);
  }
  //@ts-ignore
  datasetLayer.style = applyStyle;
}

function handleMouseMove(/* MouseEvent */ e) {
  if (e.features) {
    lastInteractedFeatureIds =
        e.features.map((f) => f.datasetAttributes['globalid']);
  }
  //@ts-ignore
  datasetLayer.style = applyStyle;
}

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary;

  const position = {lat: 40.780101, lng: -73.967780};
  map = new Map(document.getElementById('map') as HTMLElement, {
    zoom: 13,
    center: position,
    mapId: 'b98e588c46685dd7',
    mapTypeControl: false,
  });

  // Dataset ID for NYC park data.
  const datasetId = '6fe13aa9-b900-45e7-b636-3236672c3f4f';

  //@ts-ignore
  datasetLayer = map.getDatasetFeatureLayer(datasetId);
  datasetLayer.style = applyStyle;

  datasetLayer.addListener('click', handleClick);
  datasetLayer.addListener('mousemove', handleMouseMove);

  // Map event listener.
  map.addListener('mousemove', () => {
    // If the map gets a mousemove, that means there are no feature layers
    // with listeners registered under the mouse, so we clear the last
    // interacted feature ids.
    if (lastInteractedFeatureIds?.length) {
      lastInteractedFeatureIds = [];
      datasetLayer.style = applyStyle;
    }
  });
  const attributionDiv = document.createElement('div');
  const attributionControl = createAttribution(map);

  attributionDiv.appendChild(attributionControl);
  map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
}

const styleDefault = {
  strokeColor: 'green',
  strokeWeight: 2.0,
  strokeOpacity: 1.0,
  fillColor: 'green',
  fillOpacity: 0.3,
};

const styleClicked = {
  ...styleDefault,
  strokeColor: 'blue',
  fillColor: 'blue',
  fillOpacity: 0.5,
};

const styleMouseMove = {
   ...styleDefault,
  strokeWeight: 4.0
};

function applyStyle(/* FeatureStyleFunctionOptions */ params) {
  const datasetFeature = params.feature;
  // Note, 'globalid' is an attribute in this dataset.
  //@ts-ignore
  if (lastClickedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) {
    return styleClicked;
  }
  //@ts-ignore
  if (lastInteractedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) {
    return styleMouseMove;
  }
  return styleDefault;
}

function createAttribution(map) {
  const attributionLabel = document.createElement('div');

  // Define CSS styles.
  attributionLabel.style.backgroundColor = '#fff';
  attributionLabel.style.opacity = '0.7';
  attributionLabel.style.fontFamily = 'Roboto,Arial,sans-serif';
  attributionLabel.style.fontSize = '10px';
  attributionLabel.style.padding = '2px';
  attributionLabel.style.margin = '2px';
  attributionLabel.textContent = 'Data source: NYC Open Data';
  return attributionLabel;
}

initMap();index.ts

জাভাস্ক্রিপ্ট

let map;
let lastInteractedFeatureIds = [];
let lastClickedFeatureIds = [];
let datasetLayer;

// Note, 'globalid' is an attribute in this Dataset.
function handleClick(/* MouseEvent */ e) {
  if (e.features) {
    lastClickedFeatureIds = e.features.map(
      (f) => f.datasetAttributes["globalid"],
    );
  }

  //@ts-ignore
  datasetLayer.style = applyStyle;
}

function handleMouseMove(/* MouseEvent */ e) {
  if (e.features) {
    lastInteractedFeatureIds = e.features.map(
      (f) => f.datasetAttributes["globalid"],
    );
  }

  //@ts-ignore
  datasetLayer.style = applyStyle;
}

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const position = { lat: 40.780101, lng: -73.96778 };

  map = new Map(document.getElementById("map"), {
    zoom: 13,
    center: position,
    mapId: "b98e588c46685dd7",
    mapTypeControl: false,
  });

  // Dataset ID for NYC park data.
  const datasetId = "6fe13aa9-b900-45e7-b636-3236672c3f4f";

  //@ts-ignore
  datasetLayer = map.getDatasetFeatureLayer(datasetId);
  datasetLayer.style = applyStyle;
  datasetLayer.addListener("click", handleClick);
  datasetLayer.addListener("mousemove", handleMouseMove);
  // Map event listener.
  map.addListener("mousemove", () => {
    // If the map gets a mousemove, that means there are no feature layers
    // with listeners registered under the mouse, so we clear the last
    // interacted feature ids.
    if (lastInteractedFeatureIds?.length) {
      lastInteractedFeatureIds = [];
      datasetLayer.style = applyStyle;
    }
  });

  const attributionDiv = document.createElement("div");
  const attributionControl = createAttribution(map);

  attributionDiv.appendChild(attributionControl);
  map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
}

const styleDefault = {
  strokeColor: "green",
  strokeWeight: 2.0,
  strokeOpacity: 1.0,
  fillColor: "green",
  fillOpacity: 0.3,
};
const styleClicked = {
  ...styleDefault,
  strokeColor: "blue",
  fillColor: "blue",
  fillOpacity: 0.5,
};
const styleMouseMove = {
  ...styleDefault,
  strokeWeight: 4.0,
};

function applyStyle(/* FeatureStyleFunctionOptions */ params) {
  const datasetFeature = params.feature;

  // Note, 'globalid' is an attribute in this dataset.
  //@ts-ignore
  if (
    lastClickedFeatureIds.includes(datasetFeature.datasetAttributes["globalid"])
  ) {
    return styleClicked;
  }

  //@ts-ignore
  if (
    lastInteractedFeatureIds.includes(
      datasetFeature.datasetAttributes["globalid"],
    )
  ) {
    return styleMouseMove;
  }
  return styleDefault;
}

function createAttribution(map) {
  const attributionLabel = document.createElement("div");

  // Define CSS styles.
  attributionLabel.style.backgroundColor = "#fff";
  attributionLabel.style.opacity = "0.7";
  attributionLabel.style.fontFamily = "Roboto,Arial,sans-serif";
  attributionLabel.style.fontSize = "10px";
  attributionLabel.style.padding = "2px";
  attributionLabel.style.margin = "2px";
  attributionLabel.textContent = "Data source: NYC Open Data";
  return attributionLabel;
}

initMap();index.js