Recently, I have been teaching a Full-stack development bootcamp at CodeOp (great experience!).
When the students reached project phase, I was very pleased to see a lot of interest in using maps. And that is easy to understand, right? geospatial information is associated to most activities these days (e.g.: travel, home exchange, volunteering), and interactive maps are the backbone of any application which uses geospatial information.
This made me think of a nice way of introducing the students to interactive mapping. I realized that most of them want to do one thing: read an address and display it on the map, which also requires the use of a geocoder. In order to demonstrate how to put all these things together within a React application, which is the framework they are using, I created a small demo on GitHub. This was also an opportunity to practice and improve my front end skills! 🙂
Following a good tradition of GitHub, I started by forking an existing project, which I thought was similar to what I wanted to achieve. Although the project is extremely cool, I realized that I wanted to move in quite a different direction, so I ended up diverging a lot from the original code base.
To implement the map, I used my favourite library for interactive maps, Leaflet. This library is actually packaged as a React component, so it is really easy to incorporate it into an application.
Of course, maps only understand coordinates, and most of the time people have nominal locations such as street names, cities, or even postcodes. This was also the case with my students. Translating strings with addresses to a pair of coordinates is not a trivial task, so the best thing is to leave it up to the experts. I used the Open Cage geocoder, an API to convert coordinates to and from places. Why? It has a much more generous free tier than the Google Maps API, and it is open-source. And although it is built on top of OSM Nominatum, it contains several improvements.
The good news are OpenCage also has a package for JavaScript and Node, and it is really easy to use. This is the piece of code, to retrieve the coordinates from a given string:
// Adds marker to map and flies to it with an animation
addLocation =() =>{
opencage
.geocode({ q: this.state.input, key: OCD_API_KEY})
.then(data => {
// Found at least one result
if (data.results.length > 0){
console.log("Found: " + data.results[0].formatted);
const latlng = data.results[0].geometry;
const {markers} = this.state
markers.push(latlng)
console.log(latlng);
this.setState({markers})
let mapInst = this.refs.map.leafletElement;
mapInst.flyTo(latlng, 12);
} else alert("No results found!!");
})
.catch(error => {
console.log('error', error.message);
});
}
In order to do this, you need to sign up for a free API key first, and store it within a secrets file (.env).
The application allows the user to type any address, and it will fly to it with an animation, adding a marker on the map.
You can check out the final result at https://leaflet-react.herokuapp.com/
heartcode 