Top 10 Blogs of 2021 to Help You Build Your Location-Based App
Tags: webdev, motivation
Published: 2021-12-28 23:44:08

For the entire world, a lot of things changed in 2020 – including the way we move. 2021 proved to be not much different, with on-demand delivery soaring and the need for maps with real-time updates persisted.
 
This year, our community of readers at [TomTom Developers](https://developer.tomtom.com) favored product announcements and more tutorial-based blogs to add map data to their apps. Here’s a peek of what you loved reading this year. 

###10. [ANNOUNCING SNAP TO ROADS API IN PUBLIC PREVIEW](https://developer.tomtom.com/blog/spotlight/announcing-snap-roads-api-public-preview)

In November, we announced that our Snap to Roads API entered public preview, meaning users can try out this new functionality for reconstructing routes from trace points. This new API  supports a variety of use cases which analyze past routes and movements, both in the track and trace domain, but in on-demand route optimization as well. 

Learn more about the Snap to Roads API, what information the API returns, how it works, and some tips and uses on using it.

[READ IT NOW](https://developer.tomtom.com/blog/spotlight/announcing-snap-roads-api-public-preview)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rptutwj3uqa9yyur5ouq.jpg) 

###9. [HOW TO USE ISOCHRONES FOR FOOD DELIVERY](https://developer.tomtom.com/blog/build-different/how-use-isochrones-food-delivery)

Isochrones are lines drawn on a map connecting points at which something occurs or arrives at the same time. The isochrones depict the location from which someone can travel to another location within a certain amount of time and with a certain cost, such as kilowatts for electrical vehicles and fuel for combustion engine vehicles.

In this article, we explore isochrones and how to use them in food delivery applications, regardless of language or framework.

[READ IT NOW](https://developer.tomtom.com/blog/build-different/how-use-isochrones-food-delivery)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0dcckr34rx12usonjsys.jpg) 

###8. [BUILD A TRAFFIC ALERT DASHBOARD WITH THE TOMTOM TRAFFIC API](https://developer.tomtom.com/blog/build-different/build-traffic-alert-dashboard-tomtom-traffic-api)

The TomTom Traffic API provides a real-time endpoint for traffic-related incidents and traffic flow anywhere in the world. You can toggle it on or off simply by setting the respective stylesVisibility in any map instance to true or false.

To illustrate the power and ease-of-use of TomTom’s real-time traffic services, we created a seed project for a radio news service’s traffic dashboard. It lists traffic incidents and flow of any place on Earth, with real-time updates, and illustrates this on a map so commuters know what to expect.

[READ IT NOW](https://developer.tomtom.com/blog/build-different/build-traffic-alert-dashboard-tomtom-traffic-api)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrikge2g1le979qi9p0v.jpg) 

###7. [CREATING A MAP WITH THE TOMTOM MAP STYLER: STEP BY STEP](https://developer.tomtom.com/blog/build-different/creating-map-tomtom-map-styler-step-step)

New to TomTom Maps APIs? Start here with our step-by-step tutorial on some guiding principles of mapmaking and how to set up your map, complete with dozens of customization options.

[READ IT NOW](https://developer.tomtom.com/blog/build-different/creating-map-tomtom-map-styler-step-step)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/84frnb0aebjoep1t4359.jpg) 

###6. [ADDING TOMTOM MAPS TO A VUE + QUASAR APP](https://developer.tomtom.com/blog/build-different/adding-tomtom-maps-vue-quasar-app)

In this tutorial, we create a sample Quasar application. Its JSON file contains example store location information we render on a TomTom map using markers. We then create a route with restrictions for trucks using TomTom’s truck routing API. To follow this tutorial, you should be familiar with Quasar, or at least Vue, and JavaScript.

[READ IT NOW](https://developer.tomtom.com/blog/build-different/adding-tomtom-maps-vue-quasar-app)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v21t7fpyowows71lorck.jpg) 

###5. [USING THE TOMTOM MAPS WEB SDK IN A REACT NATIVE WEB VIEW APP](https://developer.tomtom.com/blog/build-different/using-tomtom-maps-web-sdk-react-native-web-view-app)

Native mobile apps are great from an app user’s perspective, but they aren’t as great for development teams. Developing native apps can be slow, and native mobile developers are both challenging to find and expensive. Even worse, when you’re done, your app only runs on a single platform. Enter: React Native. It lets developers write mobile apps in JavaScript that are nearly as fast as entirely native apps, and that are much easier to create.

Learn how to embed a map using the Maps SDK for Web and React Native.

[READ IT NOW](https://developer.tomtom.com/blog/build-different/using-tomtom-maps-web-sdk-react-native-web-view-app)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lro32k97p40975dagesk.jpg) 

###4: [USING TOMTOM MAPS WITH VUE 3](https://developer.tomtom.com/blog/build-different/using-tomtom-maps-vue-3)

Vue 3 is the newest version of Vue.js, one of the most popular JavaScript libraries — alongside React and Angular —for building user interfaces. Throughout this article, we’ll demonstrate how to integrate TomTom Maps into a Vue 3 application, opening up a host of mapping options to take your app to the next level.

[READ IT NOW](https://developer.tomtom.com/blog/build-different/using-tomtom-maps-vue-3)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/it75a7n0ekgeal70s7w3.jpg) 

###3. [HOW TO MIGRATE FROM GOOGLE IN 8 EASY STEPS](https://developer.tomtom.com/blog/build-different/how-migrate-google-maps-tomtom-maps-8-easy-steps)

In our #3 most-read blog of the year, our developer advocate Olivia Vahsen goes over how to transition different elements of your map from Google Maps to TomTom, as well as where the API differences lie.

[READ IT NOW](https://developer.tomtom.com/blog/build-different/how-migrate-google-maps-tomtom-maps-8-easy-steps)

###2. [ADDING TOMTOM MAPS TO A MODERN REACT APP](https://developer.tomtom.com/blog/build-different/adding-tomtom-maps-modern-react-app)

Coming in at #2 is React… no surprise there! As the most-used front-end framework, React is a good choice for mapping-heavy web apps. React’s excellent performance is one reason it’s so popular — and it owes much of that performance to its virtual DOM. However, the virtual DOM has a disadvantage: it doesn’t always play nicely with mapping libraries that require access to actual (not virtual) DOM elements. 

React does offer a way to work around this limitation. In this article, we’ll explore how to use this workaround to add TomTom web maps to a sample React application. We’ll use the latest React best practices like Hooks and function components.

[READ IT NOW](https://developer.tomtom.com/blog/build-different/adding-tomtom-maps-modern-react-app)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z71glxso6qywkyex1l6o.jpg)

###1. [CELEBRATING EARTH DAY WITH THE NEW LOOK AND FEEL OF OUR MAP DISPLAY API](https://developer.tomtom.com/blog/spotlight/celebrating-earth-day-new-look-feel-our-map-display-api)

Here we are at our #1 most-read blog of the year: announcing the new Map Display API. With new natural features, city and street labels, color changes, and more organized POIs, our maps got a visual revamp while keeping them readable, relevant, and refreshed as our users’ mapping needs evolve over time.

[READ IT NOW](https://developer.tomtom.com/blog/spotlight/celebrating-earth-day-new-look-feel-our-map-display-api)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ayqy19saa77fzivq8wv.jpg)

##CONNECT WITH US

And there you have it! Our top 10 blogs of 2021. Did we miss anything? Feel free to share your favorite blogs of the year, any projects you built, or what you’d like to see in 2022:

Email: developeradvocacy@groups.tomtom
Developer Forum: [https://devforum.tomtom.com ](https://devforum.tomtom.com)
Twitter: [@tomtomdevs](https://twitter.com/tomtomdevs)
Reddit: [r/tomtom](https://www.reddit.com/r/tomtom/)

Happy mapping and see you in 2022!

*This was originally published on https://developer.tomtom.com/blog. You can read the original article [here](https://developer.tomtom.com/blog/spotlight/tomtom’s-top-ten-recap-our-most-read-blogs-2021).*