Trees of Red Oak, Iowa: Make Your Own Tree Map

Trees of Red Oak, Iowa uses Leaflet, a JavaScript library that allows you to make custom maps using open-source data. Leaflet is free and simple to use, but requires some familiarity with JavaScript, HTML and CSS. There are some excellent tutorials to get you started

Open-source map tiles and map data are available from several sources. This map uses data from the Open Street Map project and tiles from Mapquest.

Please feel free to use the Trees of Red Oak, Iowa as a model for your own tree map. If you want to dive right in, you can download the .js file here.

Or, below is a brief tutorial to create a simple tree map like this one.

There are four primary elements to the map:

A web page to display the map
Map images, known as "tiles"
JavaScript code that handles the display and control of the map tiles
JavaScript code that layers the markers and other information on the map

1. Create a web page

To create a web page, you can copy and paste this HTML code into a text editor and change it as needed. There are three things you may wish to change: The title of the web page, the height (in pixels) of the map, and the filename of the JavaScript code you will create in Step 4.

<!DOCTYPE html>
<html>
<head>
<title> Tree Map Example </title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />


<STYLE type="text/css">
#map {
height: 300px;
}
</STYLE>

<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
</head>
<body>

<div id="map"></div>

<script src="treemapexample.js"></script>

</body>
</html>

After making these changes, save it as an .html file.

2. Choose Map Tiles

Map tiles are the square images that are placed edge-to-edge to create an online map. They are made in several sizes to allow you to zoom in and out. There are several sources for high-quality map tiles. Some are from pay sources, but many are free to use as long as you provide proper attribution and allow other people to share your creations. This map uses free Mapquest tiles, which have a simple, uncluttered style suitable for the high number of tree markers that are used. You can find more information on these tiles at Mapquest. If you would like to use a different set of tiles for your map, you can find more information about how to do that from Leaflet.

3. Get the JavaScript code to display and control the map

You've actually already done this in Step 1 by calling on the Leaflet script in the head of your web page. This is the line of HTML that does that:

Leaflet allows free use of its service as long as you give them proper credit and link back to their site. We'll take care of that in the final step.

4. Create the JavaScript code to display your information

This is the most involved part of creating a map, where you customize it to show the information you want. You might wish to look at the actual code used for the Trees of Red Oak, Iowa map for an example.

You will need at least two pieces of information to start: the latitude and longitude of a tree you want to place on the map, and the latitude and longitude of where you want the map to be centered when it is first displayed. If you have a GPS application on your phone or tablet, you can find the coordinates that way.

Another way to find the latitude and longitude is to use a service like Google Maps. Zoom in on your town and right-click your mouse over the point where you'd like to center your map. Select the option "Center map here." Next, look for the link button near the upper left corner of the map and click on it. It will look like this:

The latitude and longitude are part of the link.

https://maps.google.com/?ll=41.009309,-95.228532&spn=0.003323,0.004807&t=h&z=18

You only need the highlighted part of the link, which you should copy down or copy and paste into a text window, removing the rest of the information in the link.

If the tree you want to map is visible in the satellite view of Google Maps, you can follow the same process to get its latitude and longitude.

With these two bits of information, you're ready to start. Open a new text file in a text editor.

The first thing to do is create a map layer that will be used for all the trees of the same kind as the one you wish to map. Let's use the Red Oak for this example. Type or paste the following code into your text file:

var redOak = new L.LayerGroup();

Here I have chosen the variable name redOak for this species of tree. You can choose any name you like as long as it is unique from other variables. It will be helpful if the variable name is similar to the tree name.

Next comes a bit of code that will create the "hover" effect when the cursor is over our marker. It looks like this:

var defaultStyle = { opacity: 0.5 };

var hoverStyle = { opacity: 1 };

The important numbers here are highlighted. The opacity of the markers is set with a number between 0 and 1. This code sets the default style of our markers to 50% opacity and the hover style to 100% opacity.

Next, we will create the marker itself. Type or paste the following code:

var redOak1 = L.circle([41.00937,-95.228677], 6, {

color: '#4c9900',
}).bindPopup('Here is a Red Oak tree').addTo(redOak);
redOak1.on('mouseover', function(e){ e.target.setStyle(hoverStyle); });

redOak1.on('mouseout', function(e){ e.target.setStyle(defaultStyle); });

Walking through this bit of code:

redOak1 is a variable unique to this tree. You may wish to use the same name as the layer variable followed by a new number for each tree. This variable is repeated in the last two lines which apply the hover effect.

L.circle is a leaflet class that draws a circle.

41.00937,-95.228677 are the latitude and longitude coordinates of the Red Oak tree.

6 is the radius, in pixels, of the circle that will be drawn. You may wish to vary this based on the size of the tree.

4c9900 is the color of the circle in HTML format. You may wish to have different colors for each species of tree.

.bindPopup('Here is a Red Oak tree') attaches a pop-up window to the marker that appears when it is clicked, and provides the text that will appear. You can use HTML in the text.

.addTo(redOak) adds this circle marker to the layer redOak that you created earlier.

The last two lines create the hover effect.

With the location and style of the tree marker in place, now we have to make the map it will appear on. Type or copy the following code into your file after the marker code above:

var streetMapLayer = new L.TileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a>, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
subdomains: ['oatile1', 'oatile2', 'oatile3', 'oatile4']

});

var satMapLayer = new L.TileLayer('http://{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a>, Portions Courtesy NASA/JPL-Caltech and U.S. Depart. of Agriculture, Farm Service Agency, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
subdomains: ['oatile1', 'oatile2', 'oatile3', 'oatile4']

});

If you are using Mapquest tiles you will not need to change anything in this section, which retrieves the street map and satellite map tiles and provides the attribution and links to the sources.

Next, we'll create the map variable, set the center point of the map, indicate its initial zoom level, and list the layers we want to display.

var map = new L.Map('map', {
center: [41.009309,-95.228537],
zoom: 17,
layers: [streetMapLayer, redOak]

});

Finally, we'll create controls that will let us change the base map and turn the tree layers on and off:

var baseMaps = {
"Map": streetMapLayer,
"Satellite": satMapLayer
};

var overlayMaps = {

"Red Oak" : redOak
};

L.control.layers(baseMaps,overlayMaps).addTo(map);

The text contained in double quotes is the text that will appear in the controls.
As you add more types of trees to your maps, you will add their layer names to the layers: attribute and the overlayMaps variable. Be sure to separate them with commas!

Save the file with the name you chose in Step 1 and the extension .js. Save it in the same folder as the HTML file from Step 1.

Here is the full JavaScript file for this example map: treemapexample.js
Here is a web page with the example map: treemapexample.html