An Overview
The Community Engagement Map is a way to connect the public with the Trees in your TreePlotter INVENTORY application. Through the Community Engagement Map you can share your organizations trees or a specific clients trees with public viewers in real time. The trees are displayed on a map where viewers can see their location, the Eco Benefits and other customizable information.
The Tree Map
The Community Engagement Map will allow you to have a separate URL with all trees or a subset of trees from your TreePlotter INVENTORY application. Your new website is able to be used in a stand alone environment or embedded in another location.
By clicking on a Tree on the map, you will see the Tree Details pop up in the right side of your screen. Here you can see the Species, Status, DBH and Eco Benefits for that specific tree. When you click outside of the Tree the Details section will update to show the Total Number of Trees and the Eco Benefits for all of the Trees on the map.
The users will be able to choose what features they would like to display the tree features by using the simple legend. These options include Land Use, Species, DBH and Status. More fields can be added to the Legend upon request.
The Canopy Map
Instead of displaying individual tree points, the canopy map will display overall canopy information. The data is grouped into different geographies or boundaries such as Census Block Groups, Watersheds, or Zip Codes. The geographies will be color-coded by a specific data field and can be clicked on to obtain additional canopy information for the area.
The Multi-Asset Map
In addition to displaying individual tree point or canopy map feature information, the Multi-Asset Map allows users to access multiple layers in a non-editable map. With this feature users can view geometries, information regarding the assets, work record photos, as well as access past and future work associated with assets. Another unique feature is the ability to filter views based on due and completed dates, which allows users to display features within different timescales.
Navigating the Engagement Map
On the left side of the map view, you will find basic navigation tools. The +/- arrow help to control the zoom of the map. You can also zoom with a double-click with your mouse or pinch zoom on a phone or tablet. The search icon allows users to search for their location. The pin will use the location services on your device to find your location. The layers icon will change the base map from a basic map to a satellite imagery map.
Here are some additional tricks and shortcuts for navigating around the map:
- Hold CTRL and drag with the mouse: allows the user to rotate the map
- HOLD CTRL and SHIFT: allows the user to draw a box and zoom into the boxed area
- +/- : plus and minus keys on the keyboard quickly zooms the map in/out
- Double left click: zooms map in one level
Embedding your Engagement Map:
To embed your Engagement Map, copy the code below and paste it into the html body code of your website. You will need to make some changes to the embed code based on the name after the “/” in the URL of your Community Engagement Map link.
Add this code wherever on your page you would like your map to go. Update the name and optional_secondary_name fields as necessary. These can be found in your URL. Example: https://cem.pg-cloud.com/name/optional_secondary_name
Update the components depending on what you want to show. Available options are listed below:
tree-map
canopy-map
parks-map
<script src='//cem.pg-cloud.com/js/embed-setup.js' components='tree-map' map-name='<name>' map-sub-name='<optional_secondary_name>'> </script>
If you don’t have an optional secondary name in your URL, your embed code will look like this:
<script src='//cem.pg-cloud.com/js/embed-setup.js' components='tree-map' map-name='<name>'> </script>
Example embed code for TreePlotter Demo:
<script src='//cem.pg-cloud.com/js/embed-setup.js' components='tree-map' map-name='tpDemo'> </script>