# 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/3D_Interface_User_Guide/MappingSelectionMenu.png) ## ![Search_Icon](Images/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/Search.png) icon to open the search box. - Type the desired address or landmark you wish to search on the map. - The map of the entered address/landmark/geocode/postcode will be displayed. ![Search](Images/3D_Interface_User_Guide/Search.png) ### ![Home_Icon](Images/ViewHome.png) View Home The View Home tool lets you view the transmitter location on the earth. - Click on the **View Home** ![Home_Icon](Images/ViewHome.png) icon. - The following screen will be displayed. ![View Home](Images/3D_Interface_User_Guide/ViewHome.png) ### ![Imagery_Icon](Images/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/Imagery.png) icon. - The **Imagery** dialog box will appear and the various imagery options will be displayed. ![Imagery Dialog Box](Images/3D_Interface_User_Guide/Imagery.png) - Choose the desired Imagery. - The same will be reflected on the map. ![Imagery Map](Images/3D_Interface_User_Guide/Imagery_01.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/3D_Interface_User_Guide/Imagery_02.png){width="250px"} - 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** ![Toggle3DTerrain_Icon](Images/Toggle3DTerrain.png) icon located at the bottom-left of the interface. - The same will be reflected on the map. ### ![NavigationInstructions_Icon](Images/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** ![NavigationInstructions_Icon](Images/NavigationInstructions.png) icon. - The ***Navigation Instructions*** dialog box will appear. ![Navigation Instructions](Images/3D_Interface_User_Guide/NavigatingInstructions.png) - For navigating the 3D Interface on your *computer*, click on the **Mouse** ![Mouse_Icon](Images/Mouse.png) tab. - For navigating the 3D Interface on your *mobile*, click on the **Touch** ![Touch_Icon](Images/Touch.png) tab. ![Navigation Instructions Touch](Images/3D_Interface_User_Guide/NavigatingInstructions_01.png) ### ![Fullscreen_Icon](Images/Fullscreen.png) Full Screen View To **enable** the Fullscreen view: - Click on ![Fullscreen_Icon](Images/Fullscreen.png) icon located at the bottom right of the 3D Interface. To **exit** the Fullscreen view: - Click on ![Exit_Fullscreen_Icon](Images/Exit_Fullscreen.png) icon located at the bottom right of the 3D Interface. ## Map Layers The map tools located at the bottom-left of the interface lets you set the layer(s) opacity on a slider, enable/disable 3D terrain and 3D buildings. For performance, 3D layers are disabled by default. > This applies only to the 3D viewer and not to the API. The *Transmitter Location* (in decimal degrees) will also be displayed on the bottom right of the interface. > This is a duplication of the information that is already available in the menu, incase you have the menu closed. ![Map Management Bottom](Images/3D_Interface_User_Guide/MapManagement_bottom.png) ### Map Management Menu Elements ![Map Management Bottom Left Diagram](Images/3D_Interface_User_Guide/MapManagement_BottomLeft_Diagram.png) #### ![ZoomIn_Icon](Images/ZoomIn.png) Zoom In Zoom In lets you zoom in to the map. #### ![ZoomOut_Icon](Images/ZoomOut.png) Zoom Out Zoom Out lets you zoom out of the map. #### 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 Icon](Images/ChangeLayerOpacity_Slider.png) - To increase the opacity, move the slider to the right. - To reduce the opacity, move the slider to the left. #### Hiding layers The created **Layer(s)** will be displayed on the map and the corresponding checkbox(es) will be displayed in a box. ![Layers Checkboxes](Images/3D_Interface_User_Guide/Layers_Checkboxes.png) - You may **enable** or **disable** the *layer(s) checkbox(es)* as per your requirement. > The layer(s) will be displayed on the map when the checkbox is enabled and will not be displayed when the checkbox is disabled. #### ![Toggle3DTerrain_Icon](Images/Toggle3DTerrain.png) Toggle 3D Terrain You can toggle (enable/disable) the **3D Terrain** as per your requirement by clicking on the **Toggle 3D Terrain** icon. - ![Toggle3DTerrain_Disabled_Icon](Images/ToggleTerrain_Disabled.png) icon indicates that the 3D Terrain has been disabled. - ![Toggle3DTerrain_Enabled_Icon](Images/ToggleTerrain_Enabled.png) icon indicates that the 3D Terrain has been enabled. > The *Toggle 3D Terrain* will automatically be enabled when you enable the *Toggle 3D Buildings*. - 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** ![Toggle3DTerrain_Disabled_Icon](Images/ToggleTerrain_Disabled.png) ![Toggle 3D Terrain Disabled](Images/3D_Interface_User_Guide/Toggle3DTerrain_Disabled_Map.png) - **Map when the 3D Terrain is Enabled** ![Toggle3DTerrain_Enabled_Icon](Images/ToggleTerrain_Enabled.png) ![Toggle 3D Terrain Enabled](Images/3D_Interface_User_Guide/Toggle3DTerrain_Enabled_Map.png) #### ![Toggle3DBuilding_Icon](Images/Toggle3DBuilding.png) Toggle 3D Buildings You can toggle (enable/disable) the **3D Buildings** as per your requirement by clicking on the **Toggle 3D Buildings** icon. - ![Toggle3DBuildings_Disabled_Icon](Images/Toggle3DBuildings_Disabled.png) icon indicates that the 3D Buildings have been disabled. - ![Toggle3DBuildings_Enabled_Icon](Images/Toggle3DBuildings_Enabled.png) icon indicates that the 3D Buildings have been enabled. > When you enable the *Toggle 3D Buildings*, the *Toggle 3D Terrain* will also 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** ![Toggle3DBuildings_Disabled_Icon](Images/Toggle3DBuildings_Disabled.png) ![Toggle 3D Buildings Disabled](Images/3D_Interface_User_Guide/Toggle3DBuildings_Disabled_Map.png) - **Map when the 3D Buildings are Enabled** ![Toggle3DBuildings_Enabled_Icon](Images/Toggle3DBuildings_Enabled.png) ![Toggle 3D Buildings Enabled](Images/3D_Interface_User_Guide/Toggle3DBuildings_Enabled_Map.png) ## Clutter **Clutter** can be defined as the obstacles 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, we have included their different types. The Global clutter data for telecoms planning is extremely expensive, and are usually outdated, despite of the price. Hence, we have developed a much more flexible way of self-generating the 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 define the **Type** and the **Height** of the clutter as per your requirement. - **BYO Clutter** - You can upload your own **KML / GeoJSON file** directly. **Following are the three steps to define a clutter:** 1. Draw a Clutter 2. Configure Custom Clutter 3. Upload the Clutter ## Drawing Clutter ### Drawing a Polyline To define a clutter polyline: - Click on the **Draw Path** ![DrawPath_Icon](Images/DrawPath.png) icon located at the bottom-left of the interface. - ***Left-Click*** on the map to draw the edges of the polyline as per your requirement. - ***Right-Click*** to finish. - The drawn Polyline will be displayed on the map. ![Custom Clutter Path](Images/3D_Interface_User_Guide/Custom_Clutter_Path.png) - The **Custom Clutter** Dialog box will also be displayed to customise the clutter as per your requirement. > For more information, refer to the **Custom Clutter** section. - The respective Clutter Polyline will be displayed on the map. ![Custom Polyline](Images/3D_Interface_User_Guide/Clutter_Polyline.png) ### Drawing a Polygon To define a clutter polygon: - Click on the **Draw Area** ![DrawArea_Icon](Images/DrawArea.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. - ***Right-Click*** to finish. ![Custom Clutter Area](Images/3D_Interface_User_Guide/Custom_Clutter_Area.png) - The **Custom Clutter** Dialog box will also be displayed. - Configure the *Custom Clutter Settings* as per your requirement. - On the Custom Clutter Dialog box, click on the **Upload** ![Upload_Clutter_Icon](Images/Upload_Clutter.png) icon to save the clutter. > For more information, refer to the **Custom Clutter** section. - The respective Clutter Polygon will be displayed on the map. ![Clutter Polygon](Images/3D_Interface_User_Guide/Clutter_Polygon_Tree.png) ## Custom Clutter For **DIY** type of Clutter, you can define the **Type** and **Height** as per your requirement. For **BYO** type of Clutter, you can upload the **KML / GeoJSON file**. ## DIY Clutter - Click on the **Draw Path** ![DrawPath_Icon](Images/DrawPath.png) icon (to draw a Polyline) or **Draw Area** ![DrawArea_Icon](Images/DrawArea.png) icon (to draw a Polygon) located at the bottom-left of the interface. - The **Custom Clutter** Dialog box will appear. ![Custom Clutter Dialog Box](Images/3D_Interface_User_Guide/Custom_Clutter_DialogBox.png) > For information regarding Drawing Clutter, refer to **Drawing a Polyline** and **Drawing a Polygon** topics. ### Selecting/Changing Clutter Type and Height - Select the Clutter **Type** from the drop-down as per your requirement. Below is the table displaying the Nominal Attenuation for the respective Clutter Types:
Clutter Type Nominal Attenuation (dB/m)
Trees – 0.25
Trees + 0.5
Timber – 1.0
Timber + 1.5
Brick – 1.5
Brick + 2.0
Concrete – 3.0
Concrete + 4.0
Metal 6.0
- Enter the desired Clutter **Height** in metres. ## 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. - Click on **Choose File** button. - Browse the desired *KML/GeoJSON* file. - Click on the **Upload** ![Upload_Clutter_Icon](Images/Upload_Clutter.png) icon to save the clutter. ### Uploading Clutter To upload the clutter: - Click on the **Upload** ![Upload_Clutter_Icon](Images/Upload_Clutter.png) icon to save the clutter. - A **Response** box will be displayed stating that the Clutter has been added. ![Clutter Response](Images/3D_Interface_User_Guide/Clutter_Response.png) ### Viewing the Defined Clutter After drawing, defining and uploading the clutter, you can view the defined clutter on the map. #### Polyline Clutter ![Clutter Polyline](Images/3D_Interface_User_Guide/Clutter_Polyline.png) #### Polygon Clutter ![Clutter Polygon](Images/3D_Interface_User_Guide/Clutter_Polygon_Tree.png) ## Deleting Clutter To delete a clutter: - *Right-Click* on the respective clutter on the map. - The respective Clutter (*Polyline or Polygon*) will be deleted. ## 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/3D_Interface_User_Guide/Lidar.png) ## Toggle Colour Palette At the bottom of the interface there is a palette icon ![Toggle_Colour_Palette_Icon](Images/ToggleColourPalette.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. ## Import locations from CSV At the bottom of the interface there is an icon ![Import_Points_From_CSV_Icon](Images/ImportPointsFromCSV.png) which will allow to upload a CSV with data about multiple points, for example customer properties by ZIP or UPRN. When you click on this icon you will be prompted with information on how to upload your CSV file: ![Multiple points import dialog](Images/Import_points.png) From this you can import your own CSV with set points to be added to the interface. For basic 'points' Your CSV should follow the following rules: - The following fields are accepted: - `id` is a unique identifier of the point. - `latitude` is the latitude coordinate of the point. Should be a decimal value between -180 and 180. - `longitude` is the longitude coordinate of the point. Should be a decimal value between -90 and 90. - `group` is an optional field which allows you to group certain points together. - Your CSV must not have more than 1000 points. - Your CSV must contain a header indicating the ordering of your fields. An example CSV might look something like the below: id,longitude,latitude,group Point 1,3.0505242,39.2707224,SOUTH DISTRICT Point 2,3.0807366,39.2866678,SOUTH DISTRICT Point 3,3.0520286,39.3742523,NORTH DISTRICT Point 4,3.0678215,39.3787639,NORTH DISTRICT Your CSV will be automatically validated when you upload it, if there are any errors then this will be displayed in the dialog window. ![Import validation failure](Images/ImportPointsFromCSV/ImportValidationFailure.png) After successfully uploading your CSV it will be parsed and the interface will automatically draw your points onto the map. ![Import success](Images/ImportPointsFromCSV/ImportSuccess.png) You may notice that a new window will be added to the bottom left of the screen. This is a live-updating metrics report which gives you details about your calculations, giving indications as to whether your points are covered or not. If you next click on the map and run through a calculation you should see the points being coloured based on the signal strength but also the metrics report should update automatically when new calculations cover points. ![Single calculation](Images/ImportPointsFromCSV/CalculationSingle.png) As you add new calculations this will update the metrics report showing you how much coverage you have in total. Each group as defined in your CSV will also be calculated based on its coverage. ![Multiple calculations](Images/ImportPointsFromCSV/CalculationMultiple.png) As you do multiple calculations this will build up your available layers on the map. As you check/uncheck them it will automatically update your metrics report. This is useful for seeing the effect removing a single layer has on an overall network. ## Import survey data from CSV At the bottom of the interface there is an icon ![Import_Points_From_CSV_Icon](Images/ImportPointsFromCSV.png) which will allow to upload a CSV with field measurements for easy modelling calibration. This was developed with CSV output from cellmapper which is recommended for cellular surveys. When you click on this icon you will be prompted with information on how to upload your CSV file: ![Multiple points import dialog](Images/Import_points.png) From this you can import your own CSV with set points to be added to the interface. For basic 'measurements' Your CSV should follow the following rules: - The following fields are accepted: - `latitude` is the latitude coordinate of the point. Should be a decimal value between -180 and 180. - `longitude` is the longitude coordinate of the point. Should be a decimal value between -90 and 90. - `rssi` is the measured signal strength in dBm. For cellular this needs to be received power not RSRP etc - Your CSV must not have more than 1000 points. - Your CSV must contain a header indicating the ordering of your fields. An example CSV might look something like the below: longitude,latitude,rssi 3.0505242,39.2707224,-77 3.0807366,39.2866678,-82 3.0520286,39.3742523,-83 3.0678215,39.3787639,-88 Your CSV will be automatically validated when you upload it, if there are any errors then this will be displayed in the dialog window. After successfully uploading your CSV it will be parsed and the interface will automatically draw your points onto the map and compute the delta between any visible layer upon it. You may notice that a new window will be added to the bottom left of the screen. This is a live-updating metrics report which gives you details about the ***computed error***. A good error value is less than 6dB. Anything greater than 9dB requires adjustments to your modelling parameters. If you next click on the map and run through a calculation you should see the points being coloured based on the signal strength but also the metrics report should update automatically where new calculations cover points. As you do multiple calculations this will build up your available layers on the map. As you check/uncheck them it will automatically update your metrics report. This is useful for comparing settings. #### Side Menu Elements ![Mobile 3D Interface Side-Menu](Images/3D_Interface_User_Guide/Mobile_3DInterface_SideMenu_Diagram.png) ##### Hiding the Side Menu To hide/collapse the Side Menu, you can tap on map area on the right side. ### Changing Screen Size You can change the screen size to Full Screen by tapping on the **Fullscreen** ![Fullscreen_Icon](Images/Fullscreen.png) button located at the bottom right of the 3D Interface. To **exit** the fullscreen view, tap on **Exit Fullscreen** ![Exit_Fullscreen_Icon](Images/Exit_Fullscreen.png) button. ## Zoom In and Zoom Out - Mobile View The Zoom In and Zoom out buttons on the Map Management Menu lets you zoom in/out on the map as per your requirement. - Tap on **Zoom In** ![ZoomIn_Icon](Images/ZoomIn.png) button to zoom in the map. - Keep tapping to zoom in as per your requirement. - To **Zoom Out** on the map, tap ![ZoomOut_Icon](Images/ZoomOut.png) button. You can also zoom in and zoom out on the map using the zoom finger motion - Two Finger Pinch ![ZoomView_Icon](Images/ZoomView.png). > For further information refer the topic: **Using Touch Screen Finger Motions**. ## Touch Screen You can pan view, zoom, tilt and rotate on your touch screen phone using the following finger motions: ![PanView_Icon](Images/PanView.png) ![ZoomView_Icon](Images/ZoomView.png) ![TiltView_Icon](Images/TiltView.png) ![RotateView_Icon](Images/RotateView.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** ![MyArchive_Icon](Images/MyArchive.png) button on the Function Menu. - The **My Archive** dialog box will appear. - Click on the **HTML Embed Code** ![HTML_EmbedCode_Icon](Images/HTML_EmbedCode.png) icon. ![HTML Embed Code icon](Images/3D_Interface_User_Guide/Embed_Code_New.png) - The **Embed Code** dialog box will appear. ![Embed Code Dialog Box](Images/3D_Interface_User_Guide/Embed_Code_DialogBox.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 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)**