WorldPinsMap — Interactive World Map PCF Control |

Overview

WorldPinsMap is a PowerApps Component Framework (PCF) control that brings interactive mapping capabilities to your Power Apps Canvas applications. Built with D3.js and TopoJSON, this control enables you to display a fully interactive world map with customizable pins that works completely offline — no external API keys required!

✨ Key Features

🌍 Interactive world map with zoom, pan, and navigation controls
📍 Customizable pins with labels, tooltips, and always-visible popups
📊 Data input: Table property for pin data
🎯 Auto-fit functionality: automatically zooms to fit all pins
🗺️ Country labels and borders for better geographical context
⚙️ Configurable font sizes for both pin and country labels
📱 Touch-friendly controls optimized for Power Apps mobile
📐 Fully responsive: adapts to any container size
🔌 Works offline: no external dependencies or API keys needed

🔧 Properties

The control exposes the following properties for easy customization:

Property	Type	Description
`defaultLatitude`	Decimal	Default map center latitude
`defaultLongitude`	Decimal	Default map center longitude
`defaultZoom`	Whole Number	Default zoom level (1–18)
`countryFontSize`	Whole Number	Font size (pt) for country labels (default: 10)
`pinFontSize`	Whole Number	Font size (pt) for pin labels (default: 10)
`autoFitPins`	Two Options	Zoom to fit all pins (`true`) or world overview (`false`). Default: `true`
`showAllLabels`	Two Options	Always show pin labels (`true`) or only on hover (`false`). Default: `true`
`pinsDataSet`	Dataset	Table of map pins

📋 Pin Data Format

Using Table (via `pinsDataSet`)

Pass a Power Apps Table() with your pin data:

Table(
    {Latitude: 40.7128, Longitude: -74.0060, Label: "TEST BUILDING 1 - New York", Description: "USA"},
    {Latitude: 48.8566, Longitude: 2.3522, Label: "TEST BUILDING 2 - Paris", Description: "France"},
    {Latitude: 51.5074, Longitude: -0.1278, Label: "TEST BUILDING 3 - London", Description: "UK"},
    {Latitude: 35.6762, Longitude: 139.6503, Label: "TEST BUILDING 4 - Tokyo", Description: "Japan"},
    {Latitude: -33.8650, Longitude: 151.2094, Label: "TEST BUILDING 5 - Sydney", Description: "Australia"},
    {Latitude: 55.7558, Longitude: 37.6176, Label: "TEST BUILDING 6 - Moscow", Description: "Russia"},
    {Latitude: 39.9042, Longitude: 116.4074, Label: "TEST BUILDING 7 - Beijing", Description: "China"},
    {Latitude: -15.7942, Longitude: -47.8825, Label: "TEST BUILDING 8 - Brasilia", Description: "Brazil"},
    {Latitude: 19.4326, Longitude: -99.1332, Label: "TEST BUILDING 9 - Mexico City", Description: "Mexico"},
    {Latitude: -34.6037, Longitude: -58.3816, Label: "TEST BUILDING 10 - Buenos Aires", Description: "Argentina"}
)

Supported field names (case-insensitive with aliases):

Latitude: Latitude, latitude, lat
Longitude: Longitude, longitude, lng, lon
Label: Label, label, Name, name
Description: Description, description
ShowPopup: ShowPopup, showPopup — keeps the popup always visible
ShowLabel: ShowLabel, showLabel — shows the label on the map

️ Tech Stack

TypeScript — Type-safe development
D3.js v7 — Map rendering, projections, zoom/pan capabilities
TopoJSON — Lightweight world geometry (works offline!)
PCF (PowerApps Component Framework) — Integration with Power Platform

💡 Use Cases

Sales territory mapping: Visualize regional sales teams and territories
Event tracking: Display conference locations, office locations
Travel planning: Map out trips, visited locations
Asset tracking: Show equipment or inventory locations worldwide
Customer mapping: Display customer locations with details
Project sites: Track global project locations