Introduction. Creating An Account. MapBox Creating Custom Maps

Size: px

Start display at page:

Download "Introduction. Creating An Account. MapBox Creating Custom Maps"

Alban Glenn
5 years ago
Views:

1 Introduction MapBox is an application for designing maps. It allows you to customize the look of the map and add markers. Once completed, you can integrate the maps into your website or other online platforms! To learn more go to Creating An Account 1) Visit and find the Sign Up button. 2) A pop up window will appear that will ask you to create a username and fill out your information. Once you ve completed the sign up form, click on Sign up. 3) Now, you should be able to sign-in. You are automatically given a free account.! Note: There are paid plans that give you more options. 4) Once you ve signed in, your Dashboard will look like the image below: Last updated: 02/18/2014 Page 1

Creating a Project 1) Create a new map by clicking on Create Project in the Dashboard. 2) You will be taken to a map view. Click Save, then click on the Project tab to name your project.

You can use these later to integrate your map onto a website or any other online platform. In the ADVANCED settings, there is a Save current map position box that can be checked.

2 Creating a Project 1) Create a new map by clicking on Create Project in the Dashboard. 2) You will be taken to a map view. Click Save, then click on the Project tab to name your project. 3) A window will open underneath Project. Click on the Settings tab to title your project and give it a description. Note: The Info tab supplies a link and embed code to your map. You can use these later to integrate your map onto a website or any other online platform. In the ADVANCED settings, there is a Save current map position box that can be checked. This will save the current view of your map as the intial screen that users see when visiting your map. To change the map position, zoom into the selected area, go to the Advanced tab, and check the Save current map position box. In this case, we ve made USC our intial screen. Last updated: 02/18/2014 Page 2

Play around with changing the colors using the Palette selector. Click Discard Palette if you want to revert back to the original colors.! Create and explore color schemes using https://kuler.adobe.

3 Editing Style MapBox offers several different customization options under the Style tab. 1) The first tab under Style is Color, which gives you options to change the colors of Streets, Buildings, Areas, Water, and Land. Click on Style and then the Color tab. Play around with changing the colors using the Palette selector. Click Discard Palette if you want to revert back to the original colors.! Create and explore color schemes using 2) The second option is the Baselayer. Within Baselayer, you have options to make it Terrain, Satellite, or Street layout. For example, if you are marking businesses, street view might be best; for a hiking map, you may consider terrain view. In this example, we want to make a map of food options near USC, so we ll select Street View (the default setting). 3) Lastly, you can also change the Language of the map. Last updated: 02/18/2014 Page 3

Adding Markers to Your Map In MapBox, you can create your own markers, lines, and shapes and place them manually on the map.

In this tutorial, we re going to cover adding our own markers, lines, and shapes manually. 1) Click on the Data tab. 2) Let s start adding markers.

Once you ve selected a point, you ll be given options to edit and name your point as pictured here: 3) Notice at bottom, there are tabs where you can change its style (size and

4 Adding Markers to Your Map In MapBox, you can create your own markers, lines, and shapes and place them manually on the map. For those with more advanced knowledge, you can import GeoJSON, Shapefile, KML, GPX, and CSV files that will create the points for you based on your data. In this tutorial, we re going to cover adding our own markers, lines, and shapes manually. 1) Click on the Data tab. 2) Let s start adding markers. Select Marker and now you can click anywhere on the map to place a point. Once you ve selected a point, you ll be given options to edit and name your point as pictured here: 3) Notice at bottom, there are tabs where you can change its style (size and color of the marker), add a symbol (in this one, I ve added a fork/knife symbol to indicate a food place). You can also place the point by inputting latitude and longitude via the Lat/Lon tab. Note: You can drag your marker to another location even after you ve placed it. At any point, you can detele your point by clicking on the trash can button in the corner. Last updated: 02/18/2014 Page 4

Adding Lines and Polygons to Your Map 1) For Lines, select the Lines tab and click anywhere on the map to

Once you ve created all of the points, you click on your last point again to complete the line.

5 Adding Lines and Polygons to Your Map 1) For Lines, select the Lines tab and click anywhere on the map to start your line. Once you ve created all of the points, you click on your last point again to complete the line. 2) You will then be prompted with options to name your line as well as change the stroke color and thickness under the Stroke tab. 3) For Polygons, click on the Polygon tab and click anywhere on the map -- mark your points until you have finished your shape. Once you ve gone back to your first point, you will be prompted with edit options for your polygon, such as the stroke and fill. Last updated: 02/18/2014 Page 5

6 Embedding Your Map Once you ve added all of your points and are satisfied with your custom style, you can now embed your map! Simply click on the Info tab under Project to find the Link and Embed code. Copy and paste them into your website or online platform of your choice. Last updated: 02/18/2014 Page 6

TUTORIAL TO CREATE AOI POLYGONS IN GOOGLE EARTH PRO

TUTORIAL TO CREATE AOI POLYGONS IN GOOGLE EARTH PRO 1: You will need GoogleEarth Pro (freeware) to generate your Area of Interest (AOI). You can get a copy of GoogleEarth Pro from the link provided below.