Adding vector data

Getting ready

Most of the time, you will be presenting a map in order to guide the user to a specific location. You can add a variety of vector data to your map, which can be markers if you want to show a POI (point of interest) to the user; lines, which represent a route from one location to another; and polygons, which can be used if you want to highlight an entire area.

How to do it…

There are a number of things that we can do with vector data in Mapbox. Here are a few of them.

Creating a marker

The following steps need to be performed:

1. Click on Data.
2. Click on Marker and then click anywhere on the map. A marker will drop. You can adjust the marker's position by dragging it and dropping it at a different location.
3. Add any title you like on the marker.
4. For the description, you can use not only plain text, but also the <img> and <a> tags. Try adding the following code as the description:

   Here is the location I told you about. Check out the images. More information <a href="http://www.wikipedia.com">here.</a> <img src="http://lorempixel.com/400/200/city/"></img>

   
5. Click on the Style tab. You can select a color of your choice for the marker and also its size from three predefined sizes.
6. Click on the Symbol tab. Here, you can select an icon for your marker. Some personality is never bad!
7. The last tab is Lat/Lon (Latitude/Longitude). You can type in the exact coordinate if you feel so inclined.

Creating lines

Mapbox Editor gives you the ability to create lines. Routes, for example, are best represented with lines. Perform the following steps:

1. Click on the Data tab.
2. Click on Line and start the line by clicking anywhere on the map.
3. When you move the mouse, you will notice that Mapbox Editor shows you a dashed line; click on the next point of the map.
4. You can continue clicking and expanding your path as long as you wish. To complete the line, click on the last point again.
5. After you have completed the line, you can still modify each point by simply selecting a point and dragging it to a different location. If you click between two points, Mapbox Editor will create a new point.
6. Give your line a title and a description if you wish:
   
7. You can further customize the line style by selecting the Stroke option and choosing a color, a line width, and the opacity:
   

Creating polygons

There are times when you need to pinpoint a specific area to the user. While you can somehow archive this to an extent by enclosing the area using lines, there is a better and easier way, which is to use polygons:

1. Click on the Data tab.
2. Select Polygon.
3. Click anywhere in the map to start drawing the polygon.
4. Continue adding points on the map until you have the area of your choice selected. To complete the polygon, click on the first point again.
5. You can add a title and description if you wish.
6. At the Stroke tab, you can select a color, the line width, and the opacity of the outline, as with lines.
7. You can also select a fill color as well as the opacity of the filled color:
   

Modifying and deleting data

To modify a marker, line, or polygon, perform the following steps:

1. Simply select the hand tool and the item you want to adjust.

   Note

   Clicking on the button with three horizontal lines on the right-hand side of the Polygon tab (often called the Hamburger icon) displays a list of features. If you can't select something, you can use this menu to find the feature in question.

2. Mapbox Editor displays the properties of the selected objects and you can modify any of them, such as the title, description, or colors.
3. To delete a marker, line, or polygon, you have to select it with the hand tool and click on the small trash can icon in the lower-right corner.

There's more…

Importing data

We have seen how easy it is to add features such as markers, lines, and polygons. However, each time, we have to create them one by one.

This would be tedious if we wanted to create several hundred or even thousands of them. The import feature of Mapbox Editor does exactly this. It allows us to import several well-known file formats, such as GeoJSON, CVS, KML, and GPS. Most GIS software, organizations, and services out there are able to export in one of these formats; they are used widely in the GIS and web-development landscape all over the world.

It's probably a good time to explain what these formats are:

• GeoJSON: This is a format created to store vector data, such as points, lines, or polygons. It's based on the JSON specification.
• KML: This is used primarily by Google. It stores vector data as GeoJSON, but is based on XML.
• GPX: This is the format usually exported by GPS receivers.
• CSV: This is a format commonly used in popular applications, such as Excel. It's actually a comma-separated format, and in order to import a CVS file into Mapbox Editor, it requires at least a latitude and longitude column.

Each file can contain multiple layers. By layer, we mean multiple features that are grouped together.

We will import a GeoJSON file that contains earthquake data for the last seven days by performing the following steps:

1. Start a new project.
2. Click on Discard Palette to choose a preset style, or style your map from scratch if you prefer.
3. Ensure that the hand tool is selected. Directly below it, you will see Draw or import .geojson, .cvs, .kml, or .gps files. Click on import.
4. You will be greeted with the Import features dialog box. The provided GeoJSON file contains many different fields, such as the earthquake's magnitude, time, place, and so on. We can specify which of these fields will be displayed in the title and description. Ensure that Title is selected and select mag (magnitude) as the title field:
   
5. Next, select the Description tab and then select the place field as the description.
6. In the Style tab, select your preferred color and marker size.
7. In the Symbol tab, select any symbol you prefer.
8. Click on Finish importing:
   

The map will zoom out, and the imported features will appear on the map with the fields that we selected as the title and description.

Editing imported data

You can access imported data by clicking on the hamburger icon on the data screen next to the polygon button. You will be presented with a list of every feature you imported. This section is composed of two tabs: the first one lists the features, and the other lists the layers. GeoJSON and KML are formats that can contain features grouped into multiple layers:

Clicking on an item in the featured list allows us to edit it. We can change the title, description, color, size, and icon of the feature where available, as different types of feature have different attributes that we can modify.

Clicking on the trash can icon next to an item allows us to delete these specific features.