Draw Circle on Pdf in Google Drive
Show driving radius Google Maps
In this tutorial, nosotros're going to evidence you how to draw a driving radius on an embedded Google Map on a website. To reach this we volition use data from Google Maps and the TravelTime APIs.
The word 'radius' suggests that we will be showing a round shape on a map, nevertheless, this type of driving radius may exist only in a perfectly flat world with no twisty roads or terrain to become around. Only so could we have a circular 'equally the crow flies' travel time shape.
Nosotros will be cartoon a shape that resembles the existent world and it will testify which locations tin be reached from a point in a given time frame. This shape is called an isochrone and it shows points of an equal value joined together.
How to build if you don't use code
This tutorial is intended for developers interested in implementing a radius travel time on their projects. If y'all're not a programmer but still want to create a travel fourth dimension map, apply our ready to get tool by clicking below.
This tool is a demonstration of the basic capabilities of TravelTime API; in a few clicks you can create a travel time map using five unlike transportation modes.
Travel time map Google edition
Google does not own an API that can create polygons and so we use TravelTime to show you how to draw a driving radius on Google Maps. The very get-go matter we need to get started is a Google Maps API fundamental. If you lot don't have one all the same, y'all will need to go to Google Cloud Platform Console and set one upward. If yous are non sure how to get an API key, Google has a guide you lot can follow. The name of the API that you need is "Maps JavaScript API"
Later setting upward the new API fundamental, make certain you lot have enabled the central – otherwise your map will not piece of work. If y'all're facing this problem, there's a guide you tin try on how to enable an API central.
Cost effective Google Maps culling
TravelTime offers map tiles completely free when using other paid services. Reduce your map services costs. Explore TravelTime tiles.
Setting upward the Google Maps driving distance estimator
In this instance, nosotros will exist setting upwardly our map to display London Waterloo Train Station and put a marker on it. And so let's begin to create our Google Maps drive fourth dimension polygon.
To have a full sized map on a page, we need to add some styles to the code, in this case an .html file.
First, nosotros add together a few elements to the body:
- a div tag with id of 'map';
- a script for Google Maps API, this is where you lot'll insert your API key;
- a script to handle initMap() part which will be used to initialise the map on the screen. In the mapOpts variable we gear up the centre position of the map, the zoom level that will exist shown by default.
With these elements added, nosotros volition create our map and have a marker positioned at our specified coordinates.
Drawing the driving radius in Google Maps
Now that nosotros have done the initial setup, let's add together TravelTime information and draw a Google map isochrone by drive time.
First, you volition demand a TravelTime API key, you can get a key hither, if you don't have i. Once y'all setup we should add together some more code to handle the cosmos of the travel fourth dimension shape and communication with TravelTime API.
We need to add a couple of items to the initMap() office. First nosotros demand a polygon handling method for getting the bounds of the isochrone, this volition allow you to zoom to the drawn polygon shape when it's received later search. And so we need to add sendGeocodingRequest function which will try TravelTime data and if everything is alright, a polygon volition be drawn.
Then in the second script, we need to take setting variables inserted:
- startingLocation - a string that will be geocoded as the starting point;
- departureTime - this variable adds function to use the current date, but it can exist changed;
- travelTime - travel time in seconds;
- APPLICATION_ID - awarding won't piece of work without right authorisation;
- API_KEY - application won't work without correct authorization.
After nosotros have the variables divers, nosotros add functions for communicating with the TravelTime API and managing the polygon data that nosotros will receive.
sendGeocodingRequest office will ship a query to the free TravelTime Geocoder, this volition get coordinates of the location written in the 'location' variable. If the function does its job, information technology will call the sendTimeMapRequest office.
sendTimeMapFunction function will bundle upwardly parameters into JSON format and ship a POST request to the TravelTime /time-map endpoint. In this office, we use the breadth and longitude that was geocoded in the previous step. The parameters of the driving radius needed are besides defined here, for example, y'all can modify the "public_transport" type to "driving" and other transportation types supported by the API.
The terminal role in the script is drawTimeMap, this part handles drawing of the polygons received from TravelTime API. In the polygon variable of this function you lot can make changes to the colours, opacity, border width of the drive time radius shape.
The total example of the code explained in this blog post can be institute here.
We accept an additional tutorial explaining how to draw a driving radius using Leaflet JavaScript library if you wish to use another map provider. TravelTime supports more than map tile providers if y'all don't desire to use Google Maps as in this tutorial.
Visualising 'how far tin can i travel' within a time limit
Google Maps travel time radius using public transport information: 15 infinitesimal radius
Google Maps travel radius using drive times: fifteen minute radius
Google Maps cycling distance radius: 15 minute radius
Google Maps walking distance radius: fifteen minute radius
Travel fourth dimension radius map Google ideas
Creating a single drive time radius on a map is only the beginning of what you tin can do with the TravelTime API time map endpoint. Here are three ideas of what else you can do with doing slight modifications to the base code that we already went through:
Create a heat map using various travel times
Just past sending additional requests to the API from the same starting point you can create visualisations representing incremental increases in your travel time radius. Full code example for creating this visualisation is available here.
The example compares where's reachable within 10 minutes, 20 minutes, 30 minutes, 40 minutes using public ship. The layering of the shapes gives the appearance of a travel time oestrus map.
Create an intersection
Yous may want to find common areas between a few drive time radiuses. Overlap multiple polygons and highlight the overlapping expanse on a Google map.
Case shows an intersection of two shapes. One shape shows 30 minutes of reachable surface area from London Waterloo Station and the other shape shows 30 minutes of reachable area from Canary Wharf, both using public transport. The purple shows where both shapes overlap.
Full code can exist found here.
Create unions of all shapes
If you desire to make a big visualisation or analyse a hypothesis over large areas, you may exist interested in making unions of many travel time shapes. After receiving large amounts of polygon data you can procedure it to make ane large shape, group them together in a variety of ways.
The New York Times analysed the whole of the The states to meet which parts of America take limited access to emergency rooms during the COVID-19 pandemic. The visualisation beneath was created by sending thousands of requests to TravelTime API and later processed to create a large scale map. The orange pinpoints all locations more than than 30 minutes away from an emergency room.
Get your TravelTime API key and start creating your own driving radius map.
GET AN API KEY
Source: https://traveltime.com/blog/google-maps-drive-time-polygon-tutorial-driving-radius
0 Response to "Draw Circle on Pdf in Google Drive"
ارسال یک نظر