Skip to content

Exercise 06 : Use Leaflet maps in React application

Introduction

This exercise teaches how to use Leaflet maps in a React application.

Image 01

Golf courses

Your target is to create React application, which shows some of the Finnish Golf Courses in a Leaflet Maps. Use a following JSON file in your application https://ptm.fi/data/golf_courses.json. Save JSON file to your own project and use local server to watch it.

1
npx json-server --port=3001 --watch golf_courses.json

JSON file stucture is described below:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
{
    "info":"SGKY:N JÄSENKENTÄT 2016",
    "courses": [
        {
            "type":"Kulta",
            "lat":62.2653926,
            "lng":22.6415612,
            "course":"Alastaro Golf",
            "address":"Golfkentäntie 195, 32560 Virttaa",
            "phone":"(02) 724 7824",
            "email":"minna.nenonen@alastarogolf.fi",
            "web":"http://alastarogolf.fi/",
            "image":"kuvat/kulta.jpg",
            "text":"Alastaro Golfin Virttaankankaan..."
        },...

Leaflet maps

You can use any map services found from the net, but one good - free one - is React leaflet. Go through the introdcution, Leaflet setup and installation.

A new project

Create a new React application project and use Leaflet map, which shows one marker (point it to JAMK/Dynamo building). Remember follow Leaflet setup and installation. Look and learn some example codes: Examples.

Image 02

Note

If you have problems to show map tiles correctly:

  • Remember use correct Leaflet CSS and JavaScript files in your index.html page. Link
  • Give width and height to your App
    • 1
2
3
4
    .App {
  width: 100%;
  height: 100vh;
}

Load JSON data and show markers with PopUp

Use Axios to load Golf JSON data to your application and show loaded golf courses in a map. Remember use localhost for data loading.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const [courses, setCourses] = useState([]) 

useEffect(() => {
  axios
    .get('http://localhost:3001/courses')
    .then(response => {
      //console.log(response.data);
      setCourses(response.data);
    })
}, [])

Loop throught the loaded markers data and create a markers collection with map function. Use Popup component inside a Marker component to show some data from the selected course. Render generated marker collection inside a Map.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const position = [62, 26]
const zoom = 7

const markers = courses.map((course,index) =>
  <Marker position={[course.lat, course.lng]} key={index} >
    <Popup>
        <b>{course.course}</b><br/>
        {course.address}<br/>
        {course.phone}<br/>
        {course.email}<br/>
        <a href={course.web} target="_blank" rel="noopener noreferrer">{course.web}</a><br/>
        <br/>
        <i>{course.text}</i>
      </Popup>
  </Marker>
);

return (
  <MapContainer center={position} zoom={zoom} className="App">
    <TileLayer
      attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    {markers}
  </MapContainer>     
);

Test and run

Now your app should work. Click different markers to see golf course data.

Image 03

Push exercise 06 / Maps to GitLab

Test your application in web browser, take screenshots and commit/push your project and screenshots back to JAMKIT/GitLab. Remember move your exercise/issue ticket from Doing to In Review in Issues Board and write your learning comments to issue comments.

Save screenshots to maps-app folder.