مستندات ادغام و راهنمای API

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>نقشه نتزو</title>
  <link href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css" rel="stylesheet" />
  <style>html, body, #map { margin: 0; padding: 0; width: 100%; height: 100%; }</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
<script>
  // ۱. فعال‌سازی پلاگین اجباری RTL برای اتصال حروف فارسی
  maplibregl.setRTLTextPlugin(
    'https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js',
    null,
    true
  );

  // ۲. ساخت شیء نقشه با استایل پروداکشن نتزو
  const map = new maplibregl.Map({
    container: 'map',
    style: 'https://map.netzo.ir/styles/iran-persian.json',
    center: [53.6880, 32.4279], // مرکز جغرافیایی ایران [lng, lat]
    zoom: 5.5,
    minZoom: 4,
    maxZoom: 18
  });

  // ۳. افزودن کنترل‌های بزرگ‌نمایی و قطب‌نما
  map.addControl(new maplibregl.NavigationControl(), 'top-left');
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8" />
  <title>نقشه رستر نتزو با Leaflet</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <style>html, body, #map { margin: 0; padding: 0; width: 100%; height: 100%; }</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
  const map = L.map('map').setView([32.4279, 53.6880], 6);

  // لود تایل‌های رستر PNG نتزو (XYZ Tile Layer)
  L.tileLayer('https://map.netzo.ir/raster/iran/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: '© Netzo Map | OpenStreetMap contributors'
  }).addTo(map);

  L.marker([35.6892, 51.3890]).addTo(map).bindPopup('تهران').openPopup();
</script>
</body>
</html>

async function searchPlace(query, mapCenter = null) {
  const params = new URLSearchParams({ q: query, lang: 'fa', limit: '7' });
  if (mapCenter) {
    params.append('lat', mapCenter.lat.toFixed(5));
    params.append('lon', mapCenter.lng.toFixed(5));
  }

  const res = await fetch(`https://map.netzo.ir/search?${params}`);
  const data = await res.json();
  // data.features شامل نام، display_name، شهر، استان، نوع و فاصله است
  return data.features;
}

async function reverseGeocode(latitude, longitude) {
  const url = `https://map.netzo.ir/api/reverse-geocode?lat=${latitude}&lng=${longitude}`;
  const res = await fetch(url);
  if (!res.ok) throw new Error('خطا در دریافت آدرس');
  return await res.json();
}

// ۱. افزودن مارکر قرمز روی تهران (فرمت همیشه: [طول_جغرافیایی, عرض_جغرافیایی])
const marker = new maplibregl.Marker({ color: '#e53e3e' })
  .setLngLat([51.3890, 35.6892])
  .setPopup(new maplibregl.Popup({ offset: 25 }).setText('تهران - برج میلاد'))
  .addTo(map);

// ۲. انیمیشن پرواز دوربین به مختصات دلخواه
map.flyTo({
  center: [51.3890, 35.6892],
  zoom: 14,
  speed: 1.4
});

// ۳. برازش نقشه روی محدوده کل ایران
map.fitBounds([[44.03, 25.06], [63.33, 39.78]], { padding: 50 });

import React, { useEffect, useRef } from 'react';
import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';

export function NetzoMap({ center = [53.6880, 32.4279], zoom = 5.5 }) {
  const mapContainer = useRef(null);

  useEffect(() => {
    maplibregl.setRTLTextPlugin(
      'https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js',
      null,
      true
    );

    const map = new maplibregl.Map({
      container: mapContainer.current,
      style: 'https://map.netzo.ir/styles/iran-persian.json',
      center,
      zoom
    });

    return () => map.remove();
  }, []);

  return <div ref={mapContainer} style={{ width: '100%', height: '500px' }} />;
}