Today, I’m going to start by diving into React to build a TODO application that takes into account where I need to be to complete a task. I don’t “buy milk” while at home nor do I “cut the grass” when I’m at work. I want my TODO application to be smart and only show me tasks that make sense for where I am or where I’m going.
With the TodoMVC React implementation as a starting point we’re going to start adding location features.
- [ ] Add latitude and longitude with a TODO React component
- [ ] Display TODOs with a marker on a Map component
Additionally, there is a little bit of housekeeping to update the sample with the latest ES6 and React functionality.
// TODO: Run “Hello World”
There are at least two paths for getting a “Hello World” started quickly.
If you are more of a deconstructionist that wants to start with a working app and take it apart to understand how it works:
You should be able to view http://localhost:8000 and navigate to the React example found in
examples/react. If you are more of a constructionist and want to start with a blank slate and build up by adding piece by piece:
I prefer this approach, so when create-react-app finishes you should be able to view http://localhost:3000 with live reloading and a basic Hello World React App.
// TODO: Add A Component
A React component is a structure for creating independent, reusable pieces of a user interface. The component accepts properties as input and returns a React element that can be rendered.
Review the following component source. It defines a simple text input box that defaults to the current location. There are inline comments to help describe some of the logic.
// TODO: Add a Map
For the map, we’re going to use the Map Image API which provides a quick and easy way to fetch a static image. The parameters take some getting used to but let me unpack the basics here:
w=600specifies the width of the image tile requested and
z=10specifies the zoom level
t=5specifies the rendering scheme so you can choose from various styles of map tiles including satellite, transit, etc.
poitfc=yellowspecifies the point of interest size, background color, and foreground color
app_code=...are found in the here developer projects section and needed for working with any HERE APIs.
Each of these parameters could be stored as either props or state on the component to provide rich customization options to users. The last parameter we want to send to the Map Image API is the
poi= for a comma separated list of latitude and longitude for any markers we want to place.
In the case of my TODO app, I’ve added two tasks with locations:
- “Return Library Book” at 37.86836, -122.26859
- “Pickup Badge for TechCrunch” at 37.784117,-122.401386
The poi query we’d want to make for these todo items would look like
Here is an example of the Map component that will re-render with each
setState() call when adding points of interest:
Once defined, you can reuse this component in any other component such as the root app component.
// TODO: Wrap It Up
This first post introduced TodoMVC with a couple of very basic React components that leverage the HERE Map Image API. In upcoming React posts I’ll dive deeper into this example to respond to state changes with event handling for geocoding lookups, map clustering for TODOs at the nearby locations with conditional rendering, Matrix Routing to get between TODO locations efficiently, Place Search to find related TODO items, and a few other project integrations to polish up the final todo app.
If you haven't yet, sign up for a freemium account to get access to use HERE services to build your own TODO app. You can follow the developer blog RSS feed to find updates as new articles are published or look for updates in the developer newsletter.
Want More ReactJS?
- Use HERE Interactive Maps with ReactJS to Pick a Theme
- Street Address Validation with ReactJS and HERE Geocoder Autocomplete
- More ReactJS Blog Posts...