Create a Map with Directions in MapQuest and React JS
If you need to use a Map in your Website you know that the Google Maps can be so expensive. That’s why I search to alternative and I found the MapQuest.
Typescript or Not?
We going use Typescript not completely, but in part of we have control.
Styles
Add in your index.html the tag link
Lets’ go make
The first step is create a file with name MapQuest.tsx
Explaining the main parts of code
We created a tag script in DOM with command
const script = document.createElement('script');
So us can put a source path of MapQuest
script.src = "https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js";
And add a event listener to know when is loaded
script.addEventListener('load', () => {}
When his loaded we finally can get the MapQuest JS Class his is going to create in window variable with our type L. Finally we can set key, create a baseLayer, create a Map with zoom, GeoPoint and routes. And last but no more important create a direction route.
After all things we just add in our body element a child with our tag script
It’s over, our map is going show in div with id=“map”
App.tsx
Contacts
Company
Melo Technology, suporte@melotechnology.com.br
Personal
Matheus Melo, matheusroberttjmelo@gmail.com