BridgeBeta
  • Brand
  • Digital Assets
    Foundations
    Icons
    Components
    Templates
  • Resources
    Design Tokens
    How-tos
    Best Practices
    Libraries
    Accessibility
    Products List
  • Support
    • Overview
    • Breakpoints
    • Browser Support
    • Capitalization
    • Maps
    • Multilingualism
    • Native Apps
best-practices

Maps & Cartography

This page is currently a draft. Please help us by contributing to it.

The boundaries and names shown and the designations used on this map do not imply official endorsement or acceptance by the United Nations.

GeoCore API 🌎

The GeoCore endpoints in the WFP API Store are providing different data sources for geocoding.

Make sure your map follows these rules

  • use the official UN boundaries
  • use official UN country names
  • use the default base map

Recommended tools

react-simple-maps

react-simple-maps is a library of React components to make SVG maps using d3-geo and topojson. It is a great way to build simple maps.

Mapbox.gl

Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps from vector tiles and Mapbox styles. react-map-gl is a react friendly wrapper around Mapbox GL JS.

ArcGIS API for JavaScript

The ArcGIS API for JavaScript is another way to embed maps in web applications. It is especially useful for more complex maps where the app needs to access ArchGIS functions, like editing the map.

Reference

  • OCHA Guidelines on maps

On this page

  • Recommended tools
  • react-simple-maps
  • Mapbox.gl
  • ArcGIS API for JavaScript
  • Reference
Storybook
Figma library
Contact us
2025 © World Food Programme