Gaia GPS Video Tutorials

Please Note: Content featured in these video tutorials shows previous app interfaces. Please reference the Help Center articles for information on how to use the current version of the app.

Articles in this section

See more

Adding a TMS Map Source

Avatar
Chris
  • Updated
Follow

You can add many of the digital maps you find on the web to Gaia GPS. Sometimes, it's as simple as pasting the map URL into Gaia GPS. Not every online map source will work, but if you have one in mind that uses the TMS (tile map service) protocol, you're in luck. 

In this article, you will learn how to find the URL for a TMS map source, and how to add that source to Gaia GPS.

If you already have the URL, skip to Step 3.

 

For this example, we will be using Google Chrome as our browser and the following map source: http://maps.stamen.com/terrain/#3/37.8029/-440.2985

 

 

Note: Please make sure to read the map provider's Terms of Service before using a map source in Gaia GPS.

 

1. Find the URL

1. Open the web page with your desired map in Google Chrome. To follow along with our example, follow this link: http://maps.stamen.com/terrain/#3/37.8029/-440.2985.

2. Zoom and pan the map to the area you are interested in

3. Open the Developer Tools for Chrome:

  • Click the three dots in the top right > More Tools > Developer Tools

maps_stamen_com___terrain.png

 

4. Click the "Network" tab in the Developer toolbar

5. Zoom or move the map to refresh the page. This should populate the text fields in the Network tab.

6. Click one of the .png items in the Name column. Under the "Headers" column you should see a "request URL". It points to an image, so it will end with a suffix you may be familiar with like .png or .jpg.

It will look something like this: http://a.tile.stamen.com/terrain/13/2265/3167.png

maps_stamen_com___terrain2.png

 

7. Copy and paste this URL into a text editor like Notepad or TextEdit.

8. Replace the numbers at the end of the URL with {x}, {y}, and {z}, keeping the slashes ("/") in place.

In our example, the variables will need to be in this order: {z}/{x}/{y}

http://a.tile.stamen.com/terrain/{z}/{x}/{y}.png

Note: you may need to re-arrange these variables for the URL to work 

 

2. Check the URL

1. Go to http://trailbehind.github.io/TilejsonTester/

2. Copy and paste your adjusted URL along with the name and attribution for the map source

 

maps_stamen_com___terrain3.png

 

3. Click "Update Map"

4. Zoom to the area of the map that you expect to see your map source

If you have created the URL correctly, you will see your source appear in the correct area of the map. Proceed to step 3 below.

 

If your map source doesn't appear: 

  • Adjust the zoom levels and update the map.
  • Try adjusting the bounds to whole numbers.
  • Try changing the order of your variables. Sometimes the {x} and {y} need to be reversed: /{z}/{y}/{x} 

 

3. Import URL to gaiagps.com 

1. Go to www.gaiagps.com and open the Map Layers Menu

2. Click "Add Map Layers" at the bottom of the sidebar.

mceclip0.png

3. Click "Add Custom Source"

mceclip1.png

4. In the Add Custom Source Menu:

  1. Name the source
  2. Paste in the URL you created above. 
  3. Adjust the zoom range. Maps have a minimum and maximum zoom level, usually between 1-19.
  4. Toggle on "Preview on Map" to see what the map will look like once imported.
  5. Save your map.

It will automatically be made active on the main map. You can manage this source just like any other map source: Add and Manage Map Sources on gaiagps.com

mceclip3.png

 

Once the map has been imported to the website, sync your phone with your web account, and the source will appear in the map sources menu in the app:

 

If you are unable to import a source on the web, you can import the source directly into the app with the steps below.

 

Import a TMS map source directly to Gaia GPS app 

To import a TMS source into the app you will need to create a TileJSON file. You will need a text editing program to do this. 

 

1. Follow the steps above to check the TMS URL. When your map successfully appears, you can create a JSON File.  
2. Copy the text in the 'JSON, editable' section
 
maps_stamen_com___terrain4.png
 
3. Open a text editor like TextWrangler or Sublime Text
4. Paste the text from the 'JSON, editable' section
5. Us the "Save As" option in your text editor to save the file with a '.json' extention
 
maps_stamen_com___terrain5.png
 
6. Import the JSON into the app:
 Once imported, the file will appear in your layers list. Select the layer in order to view it.


Note: Please make sure you read the map provider's Terms of Service before using the map source in Gaia GPS.



 

Related articles

Comments

1 comment

Sort by Date Votes

Article is closed for comments.