Design System

Design System
v2.35.0 Download

Geographic Visualization

Harnessing the Power of Maps for Insightful Data Representation

Overview

Maps are powerful tools for visualizing geographic data and conveying complex information in an easily digestible format. In the context of FAO's work, maps play a crucial role in illustrating global agricultural patterns, food security issues, and environmental challenges. They enable stakeholders to quickly grasp spatial relationships, identify trends, and make informed decisions based on geographical insights.

When creating maps for FAO projects and communications, it's essential to adhere to specific guidelines to ensure accuracy, consistency, and compliance with international standards. These guidelines help maintain the integrity of FAO's visual communications and respect geopolitical sensitivities.

Usage

To implement a basic map using the FAO Design System, follow these steps:

  1. Install Leaflet.js
npm i leaflet
  1. Include a container element with a unique ID in your HTML, you can use the CSS classes ratio and ratio-21x9 for proper sizing:
  1. Import Leaflet JavaScript and Styles
import L from "leaflet" import "leaflet/dist/leaflet.css"
  1. Initialize the map with the following JavaScript code:
const mapDefault = function () { // Get the element const element = document.getElementById("yourId"); // Get the official UN map tiles const layerUrl = "https://pro-ags1.dfs.un.org/arcgis/rest/services/basemaps/clearmap_webtopo_nolabel_cvw/MapServer/tile/{z}/{y}/{x}"; // Create the map const map = L.map(element).setView([0, 0], 2); // Add the tile layer to the map L.tileLayer(layerUrl, { attribution: "© UN", maxZoom: 18, }).addTo(map) // Recommended - Set world boundaries for the map // This will prevent the map from being panned out of the world const bounds = L.latLngBounds(L.latLng([-89.98155760646617, -180]), L.latLng([89.99346179538875, 180])) map.setMaxBounds(bounds) map.on("drag", function () { map.panInsideBounds(bounds, { animate: false }) }) }

This will create a map centered at coordinates [0, 0] with a zoom level of 2, using the UN's official map tiles. The map includes attribution to the UN and has a maximum zoom level of 18.

Map with Off Canvas

The Map with Off Canvas feature enhances user interaction by providing a dynamic way to display additional information about map markers.

When a user clicks on a marker, an off-canvas panel slides into view, presenting detailed content related to that specific location.

This approach allows for a clean map interface while still offering rich, contextual information on demand. It's particularly useful for projects that require displaying complex data sets or narratives tied to geographical points, without cluttering the main map view.

Title 2
Content 2

©FAO 2024

On this page