# Web Interface Map

## Mapping Selection Menu

The **Mapping Selection Menu** is a set of key mapping functions located on the top-right of the interface.

### Mapping Selection Menu Elements

![Mapping Selection Menu](Images/InterfaceWeb/MappingSelection.png)

#### ![Search icon](Images/InterfaceWeb/Icons/Search.png) Address search

The search tool lets you search an address, landmark, geocode or postcode / ZIP code.

- Click on the **Search** ![Search icon](Images/InterfaceWeb/Icons/Search.png) icon to open the search box.
- Type the desired address or landmark you wish to search on the map. You will be prompted with different suggestions.

	![Search Suggestions](Images/InterfaceWeb/Search/Query.png)

- Select your chosen address/landmark/geocode/postcode and the map will be moved to the location.

	![Search Result](Images/InterfaceWeb/Search/Result.png)

#### ![Home icon](Images/InterfaceWeb/Icons/Home.png) View Home

The **View Home** button is used to reset the interface back to an overview of the whole of the Earth.

- Click on the **View Home** ![Home icon](Images/InterfaceWeb/Icons/Home.png) icon.
- The following screen will be displayed.

	![View Home](Images/InterfaceWeb/Home.png)

#### ![Imagery icon](Images/InterfaceWeb/Icons/Imagery.png) Choosing Imagery

The **Imagery** tool lets you change the mapping/imagery style.

The **Imagery choices** offered include satellite imagery, street mapping and high contrast ‘dark’ layers for use with colourful overlays.

To choose the desired imagery:

- Click on the **Imagery** ![Imagery icon](Images/InterfaceWeb/Icons/Imagery.png) icon.
- The **Imagery** dialog box will appear and the various imagery options will be displayed.

	![Imagery Dialog Box](Images/InterfaceWeb/Imagery/Dialog.png)

- Choose the desired Imagery.
- The same will be reflected on the map.

	![Imagery Map](Images/InterfaceWeb/Imagery/Map.png)

- The **Imagery** icon and the **mouse-over text** will be changed depending upon the selected imagery.
	- For Example: On selecting the *Bing Maps Road* imagery, the following icon and mouse-over text will be displayed.

	![Imagery Icon Changed](Images/InterfaceWeb/Imagery/IconChanged.png)

- You can also **enable/disable** the underlying **3D terrain** here.
  - By default, the 3D terrain is disabled to improve performance.
  - You can enable it by clicking the **Toggle 3D Terrain** ![3D Terrain Icon](Images/InterfaceWeb/Icons/3DTerrainDisabled.png) icon located at the bottom-left of the interface.
  - The same will be reflected on the map.

#### ![Navigation instructions icon](Images/InterfaceWeb/Icons/NavigationInstructions.png) Navigation Instructions

The Navigation Instructions tool will display the navigation instructions for using the 3D interface on your computer and mobile.

- Click on **Navigation Instructions** ![Navigation instructions icon](Images/InterfaceWeb/Icons/NavigationInstructions.png) icon.
- The ***Navigation Instructions*** dialog box will appear.

	![Navigation Instructions for Mouse](Images/InterfaceWeb/NavigationInstructions/Mouse.png)

- For navigating the 3D Interface on your *computer*, click on the **Mouse** ![Mouse icon](Images/InterfaceWeb/Icons/NavigationMouse.png) tab.
- For navigating the 3D Interface on your *mobile*, click on the **Touch** ![Touch icon](Images/InterfaceWeb/Icons/NavigationTouch.png) tab.

	![Navigation Instructions for Touch](Images/InterfaceWeb/NavigationInstructions/Touch.png)

### ![Fullscreen enable icon](Images/InterfaceWeb/Icons/FullScreenEnable.png) Full Screen View

To **enable** the Fullscreen view:

- Click on ![Fullscreen enable icon](Images/InterfaceWeb/Icons/FullScreenEnable.png) icon located at the bottom right of the 3D Interface.

To **exit** the Fullscreen view:

- Click on ![Fullscreen disable icon](Images/InterfaceWeb/Icons/FullScreenDisable.png) icon located at the bottom right of the 3D Interface.

(layer_checkbox)=
## Managing Layers

Any created heatmap **Layer(s)** will be displayed on the map and listed as a filename with a checkbox in the top right corner.

![Layers Checkboxes](Images/InterfaceWeb/Layers.png)

- You may **enable** or **disable** the layers as per your requirement by simply checking and unchecking the checkboxes.

To clear the layers from the map (but not delete them from your archive) use the recycle button on the top menu.

To hide the list of layers if it becomes very long, use the layer list toggle button located next to the search and home icon. Click it once to hide the list and again to show the list.

![Layer-list-hide button](Images/InterfaceWeb/LayerListHide.png)


## Map Management Menu Elements

![Map management tools](Images/InterfaceWeb/Bottom.png)

The map tools located at the bottom of the interface lets you manage several elements which is detailed in the following section.

The left side of the bottom of the interface contains a number of tools which can be used to improve the interactivity of the interface.

![Map Management Tool Overview](Images/InterfaceWeb/ManagementToolsOverview.png)

The right side of the bottom of the interface contains the decimal degrees location of the current transmitter location. This is a duplication of the information which is already available in the menu on the left of the interface, and is provided as a quick reference.

### Changing Layer Opacity

You can change the opacity of the layer(s) on the map with the help of the opacity slider.

![Change layer opacity slider](Images/InterfaceWeb/Icons/OpacitySlider.png)

- To increase the opacity, move the slider to the right.
- To reduce the opacity, move the slider to the left.

### ![3D Terrain Icon](Images/InterfaceWeb/Icons/3DTerrainDisabled.png) Toggle 3D Terrain

You can toggle (enable/disable) the **3D Terrain** as per your requirements by clicking on the **Toggle 3D Terrain** icon. For performance, 3D terrain is disabled by default.

- ![3D Terrain Icon Disabled](Images/InterfaceWeb/Icons/3DTerrainDisabled.png) icon indicates that the 3D Terrain has been disabled.
- ![3D Terrain Icon Enabled](Images/InterfaceWeb/Icons/3DTerrainEnabled.png) icon indicates that the 3D Terrain has been enabled.

Please note that when you enabled 3D buildings, 3D terrain will automatically be enabled.

- Following are the screenshots for reference showing the changes in the Map when the 3D Terrain is disabled and enabled:
	- **Map when the 3D Terrain is Disabled** ![3D Terrain Icon Disabled](Images/InterfaceWeb/Icons/3DTerrainDisabled.png)

		![Map with 3D terrain disabled](Images/InterfaceWeb/3DTerrain/Disabled.png)

	- **Map when the 3D Terrain is Enabled** ![3D Terrain Icon Enabled](Images/InterfaceWeb/Icons/3DTerrainEnabled.png)

		![Map with 3D terrain enabled](Images/InterfaceWeb/3DTerrain/Enabled.png)

### ![3D Buildings Icon](Images/InterfaceWeb/Icons/3DBuildingsDisabled.png) Toggle 3D Buildings

You can toggle (enable/disable) the **3D Buildings** as per your requirement by clicking on the **Toggle 3D Buildings** icon. For performance, 3D buildings area disabled by default.

- ![3D Buildings Icon Disabled](Images/InterfaceWeb/Icons/3DBuildingsDisabled.png) icon indicates that the 3D Buildings have been disabled.
- ![3D Buildings Icon Enabled](Images/InterfaceWeb/Icons/3DBuildingsEnabled.png) icon indicates that the 3D Buildings have been enabled.

Please note that when you enabled 3D buildings, 3D terrain will automatically be enabled.

Following are the screenshots for reference showing the changes in the map when the 3D Buildings are disabled and enabled:

- **Map when the 3D Buildings are Disabled** ![3D Buildings Icon Disabled](Images/InterfaceWeb/Icons/3DBuildingsDisabled.png)

	![Toggle 3D Buildings Disabled](Images/InterfaceWeb/3DBuildings/Disabled.png)

- **Map when the 3D Buildings are Enabled** ![3D Buildings Icon Enabled](Images/InterfaceWeb/Icons/3DBuildingsEnabled.png)

	![Toggle 3D Buildings Enabled](Images/InterfaceWeb/3DBuildings/Enabled.png)

### ![Draw custom clutter icon](Images/InterfaceWeb/Icons/ClutterDrawCustom.png) Draw Custom Clutter

The "Draw Obstacles" tool is used for drawing your own custom clutter, with support for polygons. Please consult the [clutter reference](clutter) for more information.

### ![Import data icon](Images/InterfaceWeb/Icons/ImportData.png) Import Data

For more details on this please consult the [dedicated documentation resource](web_interface_import_data).

### ![Colour palette toggle icon](Images/InterfaceWeb/Icons/ColourPalette.png) Toggle Colour Palette

At the bottom of the interface there is a palette icon ![Colour palette toggle icon](Images/InterfaceWeb/Icons/ColourPalette.png). When you click on this button this will hide your colour palette on the right side of the screen. This can be useful when you are working on devices with smaller screen sizes as the colour palette may obscure certain interface elements.

### ![Download API ready scripts icon](Images/InterfaceWeb/Icons/DownloadAPIReadyScripts.png) Download API Ready Scripts

If you wish to build up a number of settings which you can then take away and use in your own scripts which make use of the Cloud-RF public API, then you can click on the "Download API ready scripts" ![Download API ready scripts icon](Images/InterfaceWeb/Icons/DownloadAPIReadyScripts.png) icon.

When you click on this icon you will be presented with a modal window:

![Download scripts modal](Images/InterfaceWeb/DownloadAPIReadyScripts/Modal.png)

From the dropdown you can select one of the following endpoints:

- **Area** will download scripts with your current settings suitable for an `area` calculation.
- **Path** will download scripts with your current settings suitable for a `path` calculation.
- **Points** will download scripts with your current settings suitable for a `points` calculation.

Regardless of which you choose, each will download a respective ZIP file with a number of files which have been built with your specific settings. The files included should contain the following:

- `readme.txt` with some basic instructions on hbow to use the downloaded scripts.
- `sites.csv` with your transmitter and, if present, receiver locations along with their network names.
- `template.json` with a raw request as it would be made to your chosen endpoint.
- A Python script named after the chosen endpoint, such as `area.py` if you selected **Area**.
- `cloudrf.ini` with some configuration values based on your particular values, such as your API key, and the URL for the Cloud-RF public API.
- `cloudrf.py` is the Python base class if you wanted to extend your own requests and is based on the Python script available on [GitHub](https://github.com/Cloud-RF/CloudRF-API-clients).

(clutter)=
## My Obstacles

Custom obstacles or **Clutter** can be defined as anything which could impede a signal’s path.

For RF planning purposes, the clutter can predominantly be trees and buildings. As the trees and the buildings vary greatly in density, you may wish to, we have included their different types.

The global clutter data for telecommunications planning is very expensive, and often outdated, despite their price. We have developed a much more flexible way of self-generating accurate clutter models.

Whether you need to define one big building which is being planned for construction or you need to upload a plan for an entire city - we support both **DIY (Do It Yourself)** and **BYO (Bring Your Own)** clutter.

- **DIY Clutter** - You can draw your own clutter directly in the Cloud-RF interface to meet your requirements, defining the **Type** of the clutter.
- **BYO Clutter** - You can upload your own **KML / GeoJSON file** directly.

### DIY Clutter

DIY clutter allows you to draw and build your clutter directly in the Cloud-RF interface to meet your requirements.

- Click on the **Draw obstacles button** ![Draw obstacle icon](Images/InterfaceWeb/Icons/ClutterDrawCustom.png) icon to draw custom clutter located at the bottom-left of the interface.
- The **My obstacles** Dialog box will appear.

	![My obstacles dialog box](Images/InterfaceWeb/Clutter/Dialog.png)

> For information regarding Drawing Clutter, refer to the [Drawing a Polygon](clutter_polygon) section.

The dialog box is split into several parts.

- **Type** determines the type of the material under which you clutter will be allocated. This is for DIY clutter. The value set here will be taken based upon your clutter profile which you select in the "Environment" menu from the "Profile" dropdown on the input menu on the left of the interface. This is used to determine the height, attenuation, name and colour of the clutter.

	![Input menu "Environment" section](Images/InterfaceWeb/Menu/Environment_menu.png)

- The "Browse"/"File" button is used to submit **KML** or **GeoJSON** files for BYO clutter.
- The upload button is used to send your clutter to the Cloud-RF service to handle your clutter. ![Clutter upload icons](Images/InterfaceWeb/Icons/ClutterUpload.png)
- The checkbox at the bottom for "Confirm deletion on every right click" is a safety catch as you may have multiple clutter on your profile - rather than having to confirm deletion of every one you might decide to disable this checkbox at which point right-clicking on a clutter will instantly delete it without any confirmation.

(clutter_polygon)=
#### Drawing Custom Clutter

To define a clutter polygon:

- Click on the **Draw Obstacles** ![Draw area icon](Images/InterfaceWeb/Icons/ClutterDrawCustom.png) icon located at the bottom-left of the interface.
- ***Left-Click*** on the map to draw the edges of the polygon as per your requirement.

	![Drawing clutter polygon area](Images/InterfaceWeb/Clutter/PolygonDraw.png)

- ***Right-Click*** to finish. You can repeat as many times as necessary to draw multiple polygons with the same properties.

	![Custom clutter polygon area](Images/InterfaceWeb/Clutter/PolygonDrawn.png)

- You can change the "Type" to draw as many different types of clutter as you wish with the available types you have to work with. The properties of each type is taken from your clutter profile.

	![Multiple polygon types area](Images/InterfaceWeb/Clutter/PolygonMultipleTypes.png)

- The **Custom Clutter** Dialog box will also be displayed.

	> For more information, refer to the **Custom Clutter** section.

- After you have finished drawing your clutter you should then click on the upload button. ![Clutter upload icons](Images/InterfaceWeb/Icons/ClutterUpload.png)

- You will be presented with an overview of the clutter which was uploaded to your profile.

	![Clutter upload response](Images/InterfaceWeb/Clutter/UploadResponse.png)

- When you close the clutter menu your drawn clutter will be displayed on the map. You can left-click on it to show its properties.

	![Clutter polygon on map](Images/InterfaceWeb/Clutter/PolygonDetails.png)

#### Selecting/Changing Clutter Type and Height

Clutter properties are applied based on the **Type** you choose from the clutter dialog box. 

The attenuation and height for these types are defined in your clutter profile which is selected from the "Environment" menu. 

![Input menu "Clutter" section](Images/InterfaceWeb/Menu/Environment_menu.png)

You can choose different clutter profiles to match your environment, or you can create your own clutter profile to define your height and attenuation by clicking on the "Clutter Manager" button. ![Manage clutter profile](Images/InterfaceWeb/Icons/ManageClutter.png)

From the clutter profile manager you can create and define your own attenuation and heights for listed materials.

![Clutter profile manager](Images/InterfaceWeb/Clutter/clutter_manager_annotated.png)

1. Selected clutter profile
2. Save/delete profile as name
3. Building attenuation
4. Delete all obstacles on your account
5. Land cover types with customisable height and attenuation values
6. My obstacle (clutter) types with customisable name, colour, height and attenuation values

#### Deleting Clutter Profile

If you wish to delete a custom clutter profile then please enter its name into the input box then press on the delete button. Please note that the name must exactly match, including the casing and the extension name. You are also unable to remove system clutter profiles.

### BYO Clutter

#### Uploading a KML / GeoJSON file

This is a **BYO** type of clutter.

You can import multiple clutter items as a KML or GeoJSON file.

- Open the custom clutter menu by selecting the **Draw obstacles button** ![Draw area icon](Images/InterfaceWeb/Icons/ClutterDrawCustom.png) icon located at the bottom-left of the interface.
- Click on **Choose File** button.
	- Select the desired *KML/GeoJSON* file.
- Click on the **Upload** ![Upload clutter icon](Images/InterfaceWeb/Icons/ClutterUpload.png) icon to save the clutter.
- A **Response** box will be displayed stating that the Clutter has been added.

	![Clutter upload response](Images/InterfaceWeb/Clutter/UploadResponse.png)
### Viewing the Defined Clutter

After drawing, defining and uploading the clutter, you can view the defined clutter on the map.

#### Polygon Clutter

![Clutter polygon](Images/InterfaceWeb/Clutter/PolygonDetails.png)

### Deleting Clutter

To delete a clutter:

- *Right-Click* on the respective clutter on the map.
- If you had the "Confirm deletion on every right click" checked in the custom clutter dialog box then you will be prompted to confirm deletion of each peice of clutter. Otherwise the clutter will be deleted without any confirmation.

	![Clutter deletion confirmation](Images/InterfaceWeb/Clutter/DeleteConfirm.png)

You can also delete all clutter in your profile by opening the clutter manager and pressing the "Delete my obstacles" button.

## LiDAR

LiDAR data is the highest accuracy data available and is available for many cities at 2m resolution.

> [Check the coverage](https://cloudrf.com/terrain-and-clutter/) map to see if you are covered.

It’s a surface raster, hence, it is not permeable like the custom clutter but is very useful for line of sight analysis as even trees and bushes are represented.

![LiDAR](Images/LiDAR.png)

## Mobile View

![Mobile 3D Interface Side-Menu](Images/InterfaceWeb/MobileFriendly/OverviewMenuIPad.png)

### Hiding the Side Menu

To hide/collapse the Side Menu, you can tap on map area on the right side.

### Touch Screen Gestures

You can pan view, zoom, tilt and rotate on your touch screen phone using the following finger gestures:

#### Pan Map

You can pan the map by selecting with a single finger and dragging your finger across the screen.

![Pan icon](Images/InterfaceWeb/Icons/GesturePan.png)

#### Zoom Map

You can zoon the map by placing two fingers on the map and pinching the fingers together or away from one another to either zoom in or zoom out, respectively.

![Zoom icon](Images/InterfaceWeb/Icons/GestureZoom.png)

#### Tilt Map

You can tilt the map by placing two fingers on the map and dragging them both in the same direction up or down the screen.

![Tilt icon](Images/InterfaceWeb/Icons/GestureTilt.png)

#### Rotate Map

You can rotate the map by placing two fingers on the map and rotating your hand clockwise or counter-clockwise.

![Rotate icon](Images/InterfaceWeb/Icons/GestureRotate.png)

## Outputs

### Embed Code

The new **Embed Code** functionality lets you **Copy** the HTML code and upload it to your website with the desired filename and the html extension.

You can reap the following benefits and more using the HTML Embed Code functionality:

- Build your own Coverage Map.
- Create radio heatmap for your website.
- Add Google Maps to your website.
- Add RF Coverage on the Google Maps.

> For more information regarding this, refer to the Embed Code Benefits topic.

To access the *Embed Code* functionality:

- Click on **My Archive** ![Archive icon](Images/InterfaceWeb/Icons/Archive.png) button on the Function Menu.
- The **My Archive** dialog box will appear.
- Click on the **HTML Embed Code** ![HTML embed icon](Images/InterfaceWeb/Archive/HTMLEmbed.png) icon.
- The **Embed Code** dialog box will appear.

	![Embed Code Dialog Box](Images/InterfaceWeb/Archive/EmbedCode.png)

- You can copy the HTML code snippet from here and paste it to your website.
	- Replace the `GOOGLEMAPSKEY` in the code with your [Google Maps Key](https://developers.google.com/maps/documentation/javascript/get-api-key).
	- You may **Test** and **Edit** the code snippet with the help of [HTML editor](https://www.w3schools.com/tryit/tryit.asp?filename=tryhtml_default)

### Build Your Own Coverage Map

Are you a wireless internet service provider or an organisation that requires an online coverage map to be displayed on their website?

Building your own Coverage Map is just a few clicks away...

The most basic option is to accomplish this is using an arbitrary polygon on a free map like Google Maps. However, if you require **a beautiful and accurate physics-based coverage map, at no extra cost**, *CloudRF's Embed Code* functionality is all you need.

Using the CloudRF's **Embed Code** functionality is the easiest way to add a map to your website or blog that supports the HTML content. You just need to copy-paste an HTML code snippet to your website and replace the `GOOGLEMAPSKEY` in the code with your own Google Maps API key.

> For further information regarding *Hosting your own Network Map*, click on this [link](https://cloudrf.com/hosting-your-own-network-map/).

### Create Radio Heatmap for Website

The **Embed Code** functionality lets you create the radio heatmap for your website.

With the help of GIS mapping and the LIDAR Imaging from the satellites, the CloudRF tool will output a heatmap of the signal strength on the 3D map. Hence, you can create the radio heatmap for your website and also determine how well your signal propagate based on some variables that you configure in the tool.

> For further information, refer to this [link](https://cloudrf.com/hosting-your-own-network-map/).

### Add Google Maps to the Website

All you need is a web browser and you are just three steps away from adding the Google Map plus RF layer to your website:

- **Create a basic HTML web page**
- **Add a [Map](https://developers.google.com/maps/documentation/javascript/adding-a-google-map#map)**
- **Get your own [API Key](https://developers.google.com/maps/documentation/javascript/adding-a-google-map#key)**