Skip to main content

๐Ÿ‡ต๐Ÿ‡ฌ Papua New Guinea Interactive Map

Papua New Guinea is an Oceanian country occupying the eastern half of the island of New Guinea, renowned for its incredible linguistic diversity, rich tribal cultures, and unique wildlife like the bird of paradise.

๐ŸŒ Overviewโ€‹

Papua New Guinea is an Oceanian country occupying the eastern half of the island of New Guinea, renowned for its incredible linguistic diversity, rich tribal cultures, and unique wildlife like the bird of paradise.

๐ŸŽจ Design & Flag Inspirationโ€‹

The visual identity of this map pack is inspired by the National Flag of Papua New Guinea.

  • Hover State: We utilize a vibrant translucent color (rgba(255, 204, 0, 0.35)) to represent the national identity and heritage.
  • Borders: Rendered in Deep Navy (#1e293b) to ensure maximum contrast and a modern, premium aesthetic.

๐Ÿ—บ๏ธ Interactive Demoโ€‹

Hover over the Provinces to see the highlight and tooltips. Click any province to see how easily you can capture the region's data code.

svg-world-maps / papua-new-guinea.svg
Autonomous Region of BougainvilleCentral ProvinceChimbu (Simbu) ProvinceEast New Britain ProvinceEast Sepik ProvinceEastern Highlands ProvinceEnga ProvinceGulf ProvinceHela ProvinceJiwaka ProvinceMadang ProvinceManus ProvinceMilne Bay ProvinceMorobe ProvinceNational Capital DistrictNew Ireland ProvinceNorthern (Oro) ProvinceSouthern Highlands ProvinceWest New Britain ProvinceWest Sepik (Sandaun) ProvinceWestern Highlands ProvinceWestern Province
How it works

Every <path> element in the generated SVG automatically receives data-code and data-name. You can listen for clicks on the parent container to instantly build drill-down experiences, filtering, or regional detail views.


๐Ÿ’ป How to Render Itโ€‹

Implementing the Papua New Guinea map in your project takes just a few lines of code. Since every map is generated as a plain SVG string, the exact same approach works in React, Vue, Angular, Svelte, and vanilla JavaScript.

One pattern, every framework

Generate the SVG with createMap(), inject it into a container, and listen for clicks using the automatic data-code and data-name attributes.

๐Ÿ‘‰ See the full rendering guide for your framework โ†’