Bike Map · Stripe

IntegrationSoftware Engineer

Problem Overview

This is a hands-on integration assessment where you'll work with a provided codebase to interact with a map visualization API. You'll receive access to a GitHub repository containing starter code, JSON data files, and instructions. The assessment evaluates your ability to read documentation, work with HTTP APIs, handle file I/O, and progressively build upon your solutions.

The exercise involves building a tool that reads geographic coordinate data, communicates with a map tile service, and generates visual route maps. Each part builds on the previous one, testing your ability to integrate multiple components into a cohesive solution.

Assessment Format

Duration: Approximately 45-60 minutes
Environment: Clone provided repository, work locally, share screen
Languages: Choose from Python, JavaScript/Node.js, Java, or other supported languages
Interaction: The interviewer observes but provides minimal guidance—you drive the solution

📂 Scaffold Code: The interviewer will provide similar scaffold code and data files. Preview the format at Google Drive

Part 1: Parse Geographic Data

Your first task is to read and parse a JSON file containing an array of geographic coordinates. Each coordinate object includes latitude, longitude, and potentially additional metadata.

Requirements:

Load the JSON file from the provided path
Extract the first N coordinates (typically 10) from the dataset
Output the coordinates in a readable format

Key Considerations:

Understand the structure of the coordinate objects
Note the coordinate ordering in the data (latitude vs longitude)—you'll need this for Part 3
Consider error handling for file operations

Part 2: Fetch a Map Image

Send an HTTP POST request to the provided map API endpoint to retrieve a base map image. The repository includes a pre-configured request payload that you'll use as a starting point. The returned image shows a map centered on the Stripe office area.

Requirements:

Read the provided request configuration (JSON payload)
Send an HTTP POST request to the map service URL
Receive the binary image response
Save the image to a local file

Key Considerations:

The response is binary data (an image), not JSON
You need to write the response bytes directly to a file
Verify the saved image opens correctly and displays the expected map area

Part 3: Render Route with Markers and Alternating Path Segments (Main Evaluation)

This is the main problem evaluated in the Integration round. Parts 1 and 2 are warm-ups; Part 3 is where the actual scoring happens.

Extend your StaticMap solution to draw both markers and a multi-segment route using the coordinates from ride-simple.json. Reuse the map configuration from staticmap_example.json (center, width, height, zoom).

Requirements:

Read the full list of coordinates from ride-simple.json
Add a white marker at the first coordinate, labeled Start
Add a blue marker at the last coordinate, labeled Stripe
Draw the route as multiple contiguous path segments:
- Each path segment covers 10 line segments (i.e., 11 consecutive coordinates) at a time
- The first 10 line segments should be blue
- The next 10 should be brown
- Continue alternating blue / brown until all coordinates are consumed
- Adjacent segments must share their endpoint coordinate so the route stays contiguous (no visual gaps)
Save the resulting map image as bikemap3.png

Key Considerations:

The path color alternation requires chunking the coordinate array into overlapping windows of 11 (so segment N's last point equals segment N+1's first point)
The API expects [longitude, latitude] (GeoJSON order), but the JSON file may store coordinates as [latitude, longitude], so swap them when building the payload
Markers and paths are typically separate fields in the StaticMap request payload; you can include many of each in a single request
Verify the saved bikemap3.png shows: white "Start" marker, blue "Stripe" marker at the destination, and a continuous blue/brown alternating route between them

💡 Reference Solution: A Python solution provided by the community is available at Google Drive. Use it as a reference after you've attempted the problem yourself.

Part 4 & 5: Extended Functionality (Optional)

If time permits, additional parts may include:

Customizing route styling (colors, line thickness, markers)
Rendering multiple routes with different colors
Adding point-of-interest markers
Implementing route segmentation based on data attributes

Follow-up Discussion

After the hands-on portion, the interviewer may ask about production considerations:

How would you optimize this code for processing thousands of coordinates?
What architectural patterns would you use if this were a long-running service?
How would you handle API rate limits or failures?
What testing strategies would you employ?

Preparation Suggestions

Since this is an integration assessment with limited guidance during the interview, thorough preparation is essential.

HTTP Request Fundamentals

Familiarize yourself with making HTTP requests in your language of choice:

Python (requests library):

import requests

# POST request with JSON body
response = requests.post(
    url="https://api.example.com/endpoint",
    json={"key": "value"},
    headers={"Content-Type": "application/json"}
)

# Access response
print(response.status_code)
print(response.json())  # For JSON responses

JavaScript/Node.js (fetch or axios):

// Using fetch
const response = await fetch('https://api.example.com/endpoint', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ key: 'value' })
});
const data = await response.json();

// Using axios
const axios = require('axios');
const axiosResponse = await axios.post('https://api.example.com/endpoint', {
  key: 'value'
});

Java (HttpClient):

import java.net.http.*;
import java.net.URI;

HttpClient client = HttpClient.newHttpClient();
HttpRequest request = HttpRequest.newBuilder()
    .uri(URI.create("https://api.example.com/endpoint"))
    .header("Content-Type", "application/json")
    .POST(HttpRequest.BodyPublishers.ofString("{\"key\": \"value\"}"))
    .build();

HttpResponse<String> response = client.send(request,
    HttpResponse.BodyHandlers.ofString());

Saving Binary Responses (Images)

The map API returns binary image data. Know how to save this properly:

Python:

response = requests.post(url, json=payload)

# Save binary content to file
with open('map.png', 'wb') as f:
    f.write(response.content)

JavaScript/Node.js:

const fs = require('fs');
const response = await fetch(url, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(payload)
});
const buffer = await response.arrayBuffer();
fs.writeFileSync('map.png', Buffer.from(buffer));

Java:

// Use BodyHandlers.ofByteArray() for binary responses
HttpRequest request = HttpRequest.newBuilder()
    .uri(URI.create(url))
    .header("Content-Type", "application/json")
    .POST(HttpRequest.BodyPublishers.ofString(jsonPayload))
    .build();

HttpResponse<byte[]> response = client.send(request,
    HttpResponse.BodyHandlers.ofByteArray());
Files.write(Path.of("map.png"), response.body());

JSON File Operations

Practice reading and manipulating JSON files:

Python:

import json

# Read JSON file
with open('coordinates.json', 'r') as f:
    data = json.load(f)

# Access nested data
coordinates = data['coordinates'][:10]

# Modify and write JSON
data['newField'] = 'value'
with open('output.json', 'w') as f:
    json.dump(data, f, indent=2)

JavaScript/Node.js:

const fs = require('fs');

// Read JSON file
const data = JSON.parse(fs.readFileSync('coordinates.json', 'utf8'));

// Access nested data
const coordinates = data.coordinates.slice(0, 10);

// Modify and write JSON
data.newField = 'value';
fs.writeFileSync('output.json', JSON.stringify(data, null, 2));

Java (Jackson/Gson):

// Using Jackson ObjectMapper
ObjectMapper mapper = new ObjectMapper();
Map<String, Object> data = mapper.readValue(
    new File("coordinates.json"),
    new TypeReference<Map<String, Object>>() {}
);

// Access nested data using casting
List<Map<String, Object>> coordinates =
    ((List<Map<String, Object>>) data.get("coordinates"))
    .subList(0, 10);

// Modify JSON structure - use asMap/asList patterns for nested access
data.put("newField", "value");
mapper.writerWithDefaultPrettyPrinter()
    .writeValue(new File("output.json"), data);