So far, your map is not that interesting. You often draw a map to highlight a specific place or point. Leaflet has a Point class; however, it is not used to simply add a point on the map with an icon to specify the place. In Leaflet, points are added to the map using the Marker class. At minimum, the Marker class requires a latitude and longitude, as shown in the following code:

Var myMarker = L.marker([35.10418, -106.62987]).addTo(map);

In the preceding code, you created a marker at point [35.10418, -106.62987], and then, as with the tile layer, you used the addTo(map) function. This created a marker icon at the specified latitude and longitude. The following screenshot shows the marker on the map:

The preceding example is a simplified, and almost useless, marker. The Marker class has options, events, and methods that you can call to make them more interactive and useful. You will learn about methods—specifically the bindPopup() method— and events later in this chapter.

There are 10 options you can specify when creating a marker, as follows:

The options clickable, draggable, keyboard, zIndexOffset, opacity, riseOnHover, and riseOffset are all set to a default value. In Chapter 4, Creating Custom Markers, you will learn about the icon option in detail. Two options that you should set are title and alt. The title option is the tooltip text that will be displayed when you hover over the point with the cursor, and the alt option is the alternative text that is read using screen readers for accessibility. These options are used in the following code:

varmyMarker = L.marker([35.10418, -106.62987],
{title:"MyPoint",alt:"The Big I",draggable:true}).addTo(map);

The code extends the original marker example by adding a title and alt text and making the marker draggable. You will use the draggable options with an event in the last section of this chapter. The options are set the same as when we created our map instance; use curly braces to group the options, and separate each option with a comma. This is how options will be set for all objects.

The first vector layer you will learn to create is aLine. In Leaflet, you will use the Polyline class. A polyline can represent a single line segment or a line with multiple segments. Polylines and polygons extend the path class. You do not call path directly, but you have access to its methods, properties, and events. To draw a polyline, you need to provide at least a single longitude and latitude pair. The option for a polyline is set as default, so you need not specify any values unless you want to override the default. This is shown in the following code:

var polyline = L.polyline([[35.10418, -106.62987],[35.19738, -106.875]], {color: 'red',weight:8}).addTo(map);

In this example, the polyline is red and has a weight of 8. The weight option defaults to 5. If you want a thicker line, increase the number. For a thinner line, decrease the number. To add more segments to the line, just add additional latitude and longitude values as shown in the following code:

var polyline = L.polyline([[35.10418, -106.62987],[35.19738, -106.875],[35.07946, -106.80634]], {color: 'red',weight:8}).addTo(map);

The following screenshot shows the polyline added to the map:

A polygon is a polyline that is closed. Polygons tend to be classified by the number of sides, as follows:

Leaflet has a class for drawing two common polygons: a circle and a rectangle. When drawing a polygon, you will specify a minimum of three coordinates. A triangle is the simplest polygon that you can draw. That is why you need to provide at least three points. You do not need to specify the starting point at the end of the list. Leaflet will automatically close the polygon for you. To draw a polygon, simply copy the code for the polyline with three points and change the class to L.polygon(), as shown in the following code:

var polygon = L.polygon([[35.10418, -106.62987],[35.19738, -106.875],[35.07946, -106.80634]], {color: 'red',weight:8}).addTo(map);

Since Leaflet automatically closes the polygon, our three-point polyline can become a polygon. Since polyline and polygon inherit from path, the options color and weight apply to both. You will notice that color and weight refer to the outline of the polygon. Two options that you will find useful when drawing polygons are fillColor and fillOpacity:

var polygon = L.polygon([[35.10418, -106.62987],[35.19738, -106.875],[35.07946, -106.80634]], {color: 'red',weight:8,fillColor:'blue',fillOpacity:1}).addTo(map);

The preceding code draws a red triangle with a weight of 8. The additional options of fillColor and fillOpacity are set to blue and 1. The fill color of a polygon will be set to the default if no fillColor option is selected. You only need to use fillColor if you want a different fill color than the outline.

The following screenshot shows the red triangle with a blue fill added to the map:

To create a rectangle, you need an instance of the class L.rectangle() with the latitude and longitude pair for the upper-left corner and lower-right corner as a parameter. The class extends L.polygon(), so you have access to the same options, methods, and events:

var myRectangle = L.rectangle([[35.19738, -106.875],[35.10418, -106.62987]], {color: "red", weight: 8,fillColor:"blue"}).addTo(map);

The preceding code uses the first two points in the polyline and triangle, but in reverse order (upper left and lower right). The options are the same as the polygon, but with opacity removed. The following screenshot shows the rectangle added to the map:

To create a circle, you need an instance of L.circle() with the center point and a radius (in meters) as parameters. You can specify the same options as you used in your rectangle because the circle class extends the path class. This is shown in the following code:

L.circle([35.10418, -106.62987], 8046.72,{color: "red", weight: 8,fillColor:"blue"}).addTo(map);

The preceding code specifies the center point, a radius of 5 miles (8046.72 meters), and the same options as the rectangle in the previous example. The following screenshot shows the circle added to the map:

Creating a MultiPolyline is functionally the same as a single polyline, except that you pass multiple longitudes and latitudes; a set for each polygon. This is shown in the following code:

var multipolyline = L.multiPolyline([[[35.10418, -106.62987],[35.19738, -106.875],[35.07946, -106.80634]],[[35.11654, -106.58318],[35.13142, -106.48876],[35.07384, -106.52412]]],{color: 'red',weight:8}).addTo(map);

In the preceding code, the first polyline is the same as the polyline example. A second polyline is added, and the options are also the same as the first polyline example. The following screenshot shows the MultiPolyline added to the map:

Creating a MultiPolygon is the same as creating a MultiPolyline. Since Leaflet will automatically close the polyline, as long as our polylines have three or more points, we can use them. This is shown in the following code:

var multipolygon = L.multiPolygon([[[35.10418, -106.62987],[35.19738, -106.875],[35.07946, -106.80634]],[[35.11654, -106.58318],[35.13142, -106.48876],[35.07384, -106.52412]]],{color: 'red',weight:8}).addTo(map).bindPopup("We are the same layer");

In the preceding code, you can see that the parameters used are identical to those used in the MultiPolyline example earlier. When we create a MultiPolygon or MultiPolyline, the options will apply to every polygon or polyline in the collection. This means that they all have to be the same color, weight, opacity, and so on. There is a new method in the preceding code: .bindPopup("We are the same layer"). MultiPolygons and MultiPolylines also share the same pop up. Pop ups will be discussed later in this chapter. Also, note the use of method chaining in the line L.multiPolygon().addTo().bindPopup(). The following screenshot shows the MultiPolygon added to the map:

A layer group allows you to add multiple layers of different types to the map and manage them as a single layer. To use a layer group, you will need to define several layers:

var marker=L.marker([35.10418, -106.62987]).bindPopup("I am a Marker");
var marker2=L.marker([35.02381, -106.63811]).bindPopup("I am Marker 2");
var polyline=L.polyline([[35.10418, -106.62987],[35.19738, -106.875],[35.07946, -106.80634]], {color: 'red',weight:8}).bindPopup("I am a Polyline");

The preceding code creates two markers and a polyline. Note that you will not use the addTo(map) function after creating the layers, like you did in the previous examples. You will let the layer group handle adding the layer to the map. A layer group requires a set of layers as a parameter:

var myLayerGroup=L.layerGroup([marker, polyline]).addTo(map); 

In the previous code, an instance of L.layerGroup() was created as myLayerGroup. The layers passed as a parameter were marker and polyline. Finally, the layer group was added to the map. The earlier code shows three layers, but only two were added to the layer group. To add layers to a layer group without passing them as a parameter during creation, you can use the layer group addLayer() method. This method takes a layer as a parameter, as shown in the following code:

myLayerGroup.addLayer(marker2);

Now, all three layers have been added to the layer group and are displayed on the map. The following screenshot shows the layer group added to the map:

If you want to remove a layer from the layer group, you can use the removeLayer() method and pass the layer name as a parameter:

myLayerGroup.removeLayer(marker);

If you remove a layer from the group, it will no longer be displayed on the map because the addTo() function was called for the layer group and not the individual layer. If you want to display the layer but no longer want it to be part of the layer group, use the removeLayer() function, as shown in the preceding code, and then add the layer to the map as shown in the earlier examples. This is shown in the following code:

marker.addTo(map);

All style options and pop ups need to be assigned to the layer when it is created. You cannot assign a style or pop ups to a layer group as a whole. This is where feature groups can be used.

A feature group is similar to a layer group, but extends it to allow mouse events and includes the bindPopup() method. The constructor for a feature group is the same as the layer group: just pass a set of layers as a parameter. The following code displays an example of a feature group:

VarmyfeatureGroup=L.featureGroup([marker, marker2, polyline])
     .addTo(map).setStyle({color:'purple',opacity:.5})
     .bindPopup("We have the same popup because we are a group");

In the preceding code, the layers added are the same three that you added in the layer group. Since the feature group extends the layer group, you can assign a style and pop up to all of the layers at once. The following screenshot shows the feature group added to the map:

When you created the polyline in the previous example, you set the color to red. Note now that since you passed style information to the feature group by setting the color to purple, the polyline took the information from the feature group and discarded its original settings. If you removed the polyline from the feature group, it will be removed from the map as well. If you try to add the polyline to the map using addTo(), as in the previous examples, it will still be purple and have the new pop up. The markers are still blue even though you passed style information to the feature group. The setStyle() method only applies to layers in the feature group that have a setStyle() method. Since a polyline extends the path class, it has a setStyle() method. The markers do not have a setStyle() method, so their color did not change.

The first step in converting your Leaflet map to a mobile version is to have it display properly on mobile devices. You can always tell when you open a website on your phone whether the developer took the time to make it mobile-accessible. How many times have you been on a website where the page loads and all you can see is the top-left corner, and you have to zoom around to read the page. It is not a good user experience. In LeafletEssentials.html in the <head> tag after the <link> tag for the CSS file, add the following code:

<style>

body{
padding: 0;
margin: 0;
    }
html, body, #map {
height: 100%;
        }
</style>

In the preceding CSS code, you set the padding and margin values to 0. Think of a web page as a box model, where each element exists in its own box. Each box has a margin, which is the space between it and other boxes, and also padding, which is the space between the content inside the box and the box border (even if a border is not physically drawn). Setting the padding and margin values to 0 makes the <body> content fit to the size of the page. Lastly, you set the height value of the <html>, <body>, and <div id = 'map'> elements to 100%.

The following diagram shows an overview of the settings for the web page:

The last step is to add the following code in the <head> section and after the </title> element:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

The preceding code modifies the viewport that the site is seen through. This code sets the viewport to the width of the device and renders it by a ratio of 1:1. Lastly, it disables the ability to resize the web page. This, however, does not affect your ability to zoom on the map.

Now that you have configured the web page to render properly on mobile devices, it is time to add the JavaScript code that will grab the user's current location. For this, perform the following steps:

The code creates the map and adds a tile layer. It then skips over the functions and event listeners and tries to locate the user. If it is able to locate the user, it runs the code in foundLocation() and sets the view to the latitude and longitude of the user. If it does not locate the user, it executes the code in notFoundLocation() and displays a zoomed-out world map.

To make this example more usable, add the following code to notFoundLocation():

function notFoundLocation(e){
alert("Unable to find your location. You may need to enable Geolocation.");}

The alert() function creates a pop up in the browser with the message passed as a parameter. Anytime that the browser is unable to locate the user, they will see the following message. While some devices do not have location capabilities, at times, they need to be allowed in their security settings:

Now, add the following code to foundLocation():

function foundLocation(e){
varmydate = new Date(e.timestamp);
L.marker(e.latlng).addTo(map).bindPopup(mydate.toString());
     }

The preceding code will run when the user's location is found. The e in foundLocation(e) is an event object. It is sent when an event is triggered to the function that is responsible for handling that specific event type. It contains information about the event that you will want to know. In the preceding code, the first event object we grab is the timestamp object. If you were to display the timestamp in a pop up, you would get a bunch of numbers: 1400094289048. The timestamp is the number of milliseconds that have passed since January 1, 1970 00:00:00 UTC. If you create an instance of the date class and pass it to the timestamp object, you receive a human-readable date. Next, the code creates a marker. The latitude and longitude are stored in e.latlng. You then add the marker to the map and bind a pop up. The pop up needs a string as a parameter, so you can use the toString() method of the date class or use String(mydate) to convert it. The following screenshot shows the pop up with the date and time when the user clicked on it:

You subscribed to an event and handled it with a function. So far, you have only passed e as a parameter. In JavaScript, you can send anything you want to the function. Also, functions can be called anywhere in your code. You do not have to call them only in response to an event. In this short example, you will create a function that returns a pop up and is triggered on a call and not by an event.

First, create a marker and bind a pop up to it. For the content of the pop up, enter createPopup(Text as a parameter). Add the marker to the map as shown in the following code:

var marker1 = L.marker([35.10418, -106.62987]).addTo(map).bindPopup(createPopup("Text as a parameter"));

Create a second marker and set the content of the pop up to createPopup (Different text as a parameter):

var marker2 = L.marker([35, -106]).addTo(map).bindPopup(createPopup("Different text as a parameter"));

In the previous examples, you created a pop up by passing text or a pop-up instance. In this example, you call a function, createPopup(), with a string as a parameter, as shown in the following code:

functioncreatePopup(x){
return L.popup({keepInView:true,closeButton:false}).setContent(x);function createPopup(x){
returnL.popup({keepInView:true,closeButton:false}).setContent(x);
}

The function takes a parameter called x. In the marker, when you call the function, you pass a string. This is sent to the function and stored as x. When the pop up is created, the setContent() method is given the value of x instead of a hardcoded string. This function is useful if you have a lot of options set on your pop ups and want them all to be the same. It limits the number of times that you need to repeat the same code. Just pass the text of the pop up to the function, and you get a new pop up with the standardized formatting options. The following screenshot shows both of the pop ups generated by the custom function: