> ## Documentation Index
> Fetch the complete documentation index at: https://docs.camo.ag/llms.txt
> Use this file to discover all available pages before exploring further.

# Example: Embedded Farm Map

> See an example of a CamoAg embedded farm map

export const FarmMapEmbed = () => {
  const heightFor = (width, aspect) => {
    const [w, h] = aspect.split(":").map(Number);
    return Math.round(width * h / w);
  };
  const MAP_SRC = "https://app.camo.ag/embedded/map/farm/4757902";
  const MIN_DIMENSION = 200;
  const [aspect, setAspect] = useState("16:9");
  const [width, setWidth] = useState(720);
  const [applied, setApplied] = useState({
    width: 720,
    height: 405
  });
  const pendingHeight = heightFor(width, aspect);
  const handleUpdate = () => {
    const safeWidth = Math.max(MIN_DIMENSION, Number(width) || MIN_DIMENSION);
    setApplied({
      width: safeWidth,
      height: heightFor(safeWidth, aspect)
    });
  };
  const controlClasses = "rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-700 focus:border-gray-400 focus:outline-none";
  const embedCode = `<iframe src="${MAP_SRC}" width="${applied.width}" height="${applied.height}" frameborder="0" allow="clipboard-write; geolocation; fullscreen"></iframe>`;
  return <div className="flex flex-col gap-4">
      {}
      <div className="flex flex-wrap items-end gap-4">
        <label className="flex flex-col gap-1 text-sm text-gray-500">
          Aspect ratio
          <select value={aspect} onChange={e => setAspect(e.target.value)} className={`${controlClasses} cursor-pointer`}>
            <option value="16:9">16:9</option>
            <option value="4:3">4:3</option>
          </select>
        </label>

        <label className="flex flex-col gap-1 text-sm text-gray-500">
          Width (px)
          <input type="number" min={MIN_DIMENSION} value={width} onChange={e => setWidth(e.target.value)} className={`${controlClasses} w-28`} />
        </label>

        <label className="flex flex-col gap-1 text-sm text-gray-500">
          Height (px)
          <span className={`${controlClasses} w-28 text-gray-400`}>
            {pendingHeight}
          </span>
        </label>

        <button type="button" onClick={handleUpdate} className="cursor-pointer rounded-md border border-gray-300 bg-primary px-4 py-2 text-sm font-medium text-white transition-colors duration-200 hover:bg-primary-dark">
          Update map size
        </button>
      </div>

      {}
      <iframe key={`${applied.width}x${applied.height}`} src={MAP_SRC} width={applied.width} height={applied.height} frameBorder="0" allow="clipboard-write; geolocation; fullscreen" />

      {}
      <pre className="overflow-x-auto rounded-md border border-gray-300 bg-gray-50 p-4 text-sm text-gray-700">
        <code>{embedCode}</code>
      </pre>
    </div>;
};

You can now embed a CamoAg farm map on your website or application using our new embed SDK. This allows you to share interactive maps of your farm with anyone, even if they don't have a CamoAg account.

On our farm details page:

1. Click the **Share** button
2. Click **Embed Farm Map**
3. Copy the provided embed code and paste it into your website or application to display the interactive farm map.

A live example of a CamoAg embedded farm map. Use the controls below to change the aspect ratio and width, then select **Update map size** to re-render the map.

<Note>
  Embedded farm maps must have a viewport that is at least 200px by 200px. If the map displays controls, it must be large enough to fully display the controls without shrinking the viewport below the minimum size. We recommend 16:9 maps be at least 480 pixels wide and 270 pixels tall.
</Note>

<FarmMapEmbed />