React and Google maps with filtering and categories

7 min readDec 1, 2021


Following on from our first article you should now have a fully functional map application which will allow you to add details to local landmarks in your area. In this article we will enhance this further by adding categories, star rating and filtering capabilities.

Data Model update

To add the additional information regarding our landmarks, we need to update our data model to store both category and rating. As we are using Eulerio, updating is quick and easy. We just need to log on to our Eulerio account and update our json schema defining the data model of our landmark resource. In a few clicks, our data model and api endpoints will be updated to handle the new information.

Let’s see how it is done.

Using the Eulerio UI, we need to add the category and rating information to our json schema .

Login to your account.

Click on the “Resources” menu option.

Select “Edit” on the landmark resource.

Update the schema for the resource to include category and star rating. Click “Save Resource”.

That is it, you have successfully updated your data model and api endpoints to handle category and rating in a few clicks. Your api is now ready to accept requests.

UI and service updates

Now that we have updated our data model and api endpoints, we can concentrate solely on updating our map application.

Eulerio Data Service