بینش داده های نقشه برداری AI محور از Gemini

html, body, arcgis-map { 
  padding:0;
  margin:0;
  height:100%;
  width:100%; 
}
.main-container { 
  display:flex;
  height:100%; 
}
.left-column {
  flex:1; 
}
.right-column {
  position:absolute;
  top:10px;
  right:10px;
  background:rgba(255,255,255,0.9);
  padding:1rem;
  border-radius:4px;
  max-width:250px;
}
#countryList { 
  margin:0.5rem 0;
  padding-left:1rem; 
}

const googleGeminiApiKey = "YOUR_GEMINI_KEY";
const featureLayerURL = "https://services.arcgis.com/.../FeatureServer/0";

async function fetchCountriesFromQuery(q) {
  const res = await fetch(
    `https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=${googleGeminiApiKey}`, {
      method:'POST',
      headers:{ 'Content-Type':'application/json' },
      body: JSON.stringify({
        contents:[{ parts:[{
          text: q +
            " only list the country names in a numbered list, then on a new line start with 'Explanation:' and provide a one-sentence explanation."
        }]}]
      })
    }
  );
  const data = await res.json();
  const lines = data.candidates[0].content.parts[0].text.split('\n');
  const countries = [], explanationLines = [];
  for (let line of lines) {
    const cleaned = line.replace(/^\d+\.?\s*/,'').trim();
    if (/^Explanation:/i.test(cleaned)) explanationLines.push(cleaned.replace(/Explanation:\s*/i,''));
    else if (/^[A-Za-z\s]+$/.test(cleaned) && cleaned) countries.push(cleaned);
  }
  return { countries, explanation: explanationLines[0] || "" };
}

const mapEl = document.getElementById('map');
let currentHighlightLayer = null;

async function highlightCountries(countries) {
  if (currentHighlightLayer) mapEl.map.remove(currentHighlightLayer);

  const where = `COUNTRY IN (${countries.map(c=>`'${c.replace(/'/g,"''")}'`).join(',')})`;
  const [FeatureLayer, Graphic, GraphicsLayer] = await Promise.all([
    $arcgis.import('esri/layers/FeatureLayer'),
    $arcgis.import('esri/Graphic'),
    $arcgis.import('esri/layers/GraphicsLayer')
  ]);

  const fl = new FeatureLayer({ url: featureLayerURL, token: esriConfig.apiKey });
  const result = await fl.queryFeatures({ where, outFields:['*'], returnGeometry:true });
  const hlLayer = new GraphicsLayer();

  result.features.forEach(f => {
    hlLayer.add(new Graphic({
      geometry: f.geometry,
      symbol: { type:'simple-fill', color:[255,0,0,0.5], outline:{color:'red',width:2} }
    }));
  });

  currentHighlightLayer = hlLayer;
  mapEl.map.add(hlLayer);
}

const listEl = document.getElementById('countryList');
const explEl = document.getElementById('explanation');

document.getElementById('submitQuery').addEventListener('click', async () => {
  const q = document.getElementById('userInput').value.trim();
  if (!q) return;
  listEl.innerHTML = explEl.textContent = "";

  const { countries, explanation } = await fetchCountriesFromQuery(q);

  // display list & explanation
  listEl.innerHTML = countries.map(c=>`
${c}
`).join('');
  explEl.textContent = explanation;

  // highlight on map
  await highlightCountries(countries);
});