Mapping Embassies in Washington, D.C.

A tutorial on building a map with GeoJSON data

Patrick

May 05, 2023

Make a flag map of embassies in Washington, D.C. Check out the live version here.

Prerequisites

Before starting this tutorial, you will need to have the following:

A Mapbox account (sign up at https://www.mapbox.com/signup/)
A basic understanding of HTML, CSS, and JavaScript
A code editor (such as Visual Studio Code)

Step 1: Create a new Mapbox style

To create a new Mapbox style:

Log in to your Mapbox account, click on the "New Style" button.
Give your style a name and a description. Click "Create".
Customize your style by adding layers, adjusting colors, and making other changes as desired.

Once you've created your custom Mapbox style, you can find the Style URL by clicking on the "Share" button and copying the URL provided.

Step 2: Create a basic web map

To create a basic web map, follow these steps:

Create a new HTML file in your code editor.

Add the following code to create a basic web map:

<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8' />
	<title>My Map</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.js'></script>
	<link href='https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css' rel='stylesheet' />
	<style>
		body { margin: 0; padding: 0; }
		#map { position: absolute; top: 0; bottom: 0; width: 100%; }
	</style>
</head>
<body>
	<div id='map'></div>
	<script>
		mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN_HERE';
		var map = new mapboxgl.Map({
			container: 'map',
			style: 'YOUR_STYLE_URL_HERE',
			center: [-77.0498, 38.9296],
			zoom: 12
		});
	</script>
</body>
</html>

You will need to replace "YOUR_ACCESS_TOKEN_HERE" with your Mapbox access token and "YOUR_STYLE_URL_HERE" with the Style URL you created in Step 1.

Save the file and open it in your web browser to see your basic web map.

Step 3: Add flag icons to your map

To add flag icons to your map from this repository:

Add the following code to the "head" section of your HTML file to link to the flag icon CSS file.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@6.6.6/css/flag-icons.min.css"
/>

This will allow you to use CSS tags to determine which flag icons to show for each embassy.

Step 4: Fetch the embassies’ location data as a GeoJSON and create helper functions

To fetch the embassies' location data as a GeoJSON, follow these steps:

Go to the DC Open Data portal: https://opendata.dc.gov/datasets/65b97e8d1f194cdca97fd6219433e142_0/about
Click on the "API" tab.
Copy the "GeoJSON" link provided.

Use the following code to fetch the GeoJSON data:

fetch('YOUR_GEOJSON_URL_HERE')
	.then(response => response.json())
	.then(data => {
		// Use the data here
	});

To create the helper functions for converting country names into country codes and formatting address information, use the following code. The source code linked below contains complete functions.

function getCountryCode(countryName) {
	// Add your code here to convert country names into country codes
}

function formatAddress(str) {
	// Add your code here to format address information
}

Step 5: Create markers with flag icons and add popups to the markers

For each country in the GeoJSON, create a marker on the map with the appropriate CSS flag icon selected by the country code. Use your helper function to get the country code from the country name:

for (const feature of data.features) {
   // Create a DOM element for each marker.
   const el = document.createElement("div");
   const countryCode = getCountryCode(feature.properties.COUNTRY);
   const countryAddress = formatAddress(feature.properties.ADDRESS);

   // Add the flag with CSS
   el.className = "marker fi fi-" + countryCode;
   ...

Add a popup to each of these markers which displays the country’s name and embassy address. Add the popup to the marker.

// Create a popup
const popup = new mapboxgl.Popup({
     closeOnClick: true,
     closeButton: false,
     focusAfterOpen: false
})
.setHTML("<h3>" + feature.properties.COUNTRY + "</h3><a href=" + feature.properties.WEBURL + " >" + countryAddress + "</a>");

// Attach the popup to the marker
marker.setPopup(popup);

// Show the popup when the marker is clicked
marker.on('click', () => {
     popup.addTo(map);
});

Conclusion

Congratulations! You have successfully created a custom Mapbox style, added flag icons to a map, fetched GeoJSON data, created markers with flag icons, and added popups to those markers. This tutorial should provide a solid foundation for building more complex and customized web maps using Mapbox. You can find the source code for this tutorial in this repository: https://github.com/pjleonard37/DC-Embassies.

Rhumb Lines

Discussion about this post