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.
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 Tree Map:
To embed your Tree 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
<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>