Text displayed on map upon condition met
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
**mapbox-gl-js version**: 2.7.20
### Question
I've got a map displaying on my react website with tube lines drawn on using a geojson data file. I want to make it so when someone guesses a tube station correctly, the station name appears on the map in the correct location using the geojson file. Below is the code i have so far. The guessing part works, I can't get the text to be displayed when the station is guessed correctly.
### Code so far
```
import styles from "./page.module.css";
import React, { useRef, useEffect, useState } from "react";
import mapboxgl from "mapbox-gl";
import data from "../../data/tcl.json";
console.log(data)
interface MapProps {
guessedStation: string | null;
}
const Map: React.FC = ({ guessedStation }) => {
const mapContainer = useRef(null); //create a reference to a
useEffect(() => {
const map = new mapboxgl.Map({
container: mapContainer.current!,
accessToken: process.env.NEXT_PUBLIC_MAPBOX_TOKEN,
style: "(hidden)",
center: [4.840872, 45.74474],
zoom: 12.4,
minZoom: 10.5,
maxBounds: [
//coords to limit the map panning
[4.63, 45.57], // Southwest coordinates
[5.19, 45.92], // Northeast coordinates
],
});
map.on("load", () => {
map.addSource("tcl", {
type: "geojson",
data: data as any,
});
if (guessedStation) {
map.addLayer({
id: "guessed-station-label",
type: "symbol",
source: "tcl",
layout: {
"text-field": ["get", "nom"],
"text-size": 12,
"text-offset": [0, -1],
},
paint: {
"text-color": "black",
"text-halo-color": "#ffffff",
"text-halo-width": 0.5,
},
});
}
});
return () => map.remove();
}, [guessedStation]);
return
};
export default Map;
```
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the shown Map component, especially the useEffect that creates the map and adds the tcl GeoJSON source and guessed-station-label layer. Reproduce the behavior with a guessedStation value and inspect the supplied tcl.json data and station properties. Done means the guessed station name appears at its correct map location after a correct guess.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100