I want to add my offices to a map

In this example, we will add office locations to a map. Clicking a map icon opens a popup to display the office name.

 

Follow the three steps below to incorporate this map into a webpage.

Step 1: Create a basic map

First, register for a key to continue to create a basic map as explained in the Leaflet QuickStart Guide.

Step 2: Create a list of offices

Extend the example below, which is a list of your offices.  For map display, the most important parts here are the coordinates. Make the map icons clickable by adding extra information in the name field.

Step 3: Add the icon (Leaflet Marker) functionality

Add the code below to the basic map.  It adds the office list to the map, makes them clickable and then zooms into an area of the map that includes all the offices.  You can modify the code to add or remove functionality.

Complete code sample

Putting it all together: https://gist.github.com/petersmythe/ea64432be90252cf11eab3aa04a959a5 and this will create the map at the top of this page.

You can also experiment with this example in JSFiddle.

Next steps

• Browse through further Leaflet tutorials.
• Refer to the Leaflet API documentation on Markers and Popups.