Monday, October 14, 2019

Simple example of a ReactJS and OpenLayers map component

OpenLayers ( is a "high-performance, feature-packed (Javascript) library for all your mapping needs" for web sites. I spent some time figuring out how to use it with ReactJS. As most of the available examples in the official documentation are for plain vanilla HTML/Javascript, I stumbled a few times trying to get it to work. This post summarises the steps to get a minimal OpenLayers - React component to work. 

Installing OpenLayers for ReactJS
Assuming a ReactJS project has been created e.g. /path/to/React/project/, the first thing is to install the prerequisite software.
  1. Install OpenLayers package for node. Open a Terminal, change directory to the project root directory and type in the following command.

    $ npm install ol --save
  2. Optional. Install Proj4Js and Material-UI.

    $ npm install proj4 @material-ui/core --save
Create the React component for OpenLayers map
Under the ReactJS project e.g. /path/to/React/project/src/components/, create the OpenLayers React component e.g. OLMapFragment.js.

Code listing of OLMapFragment.js
import React from 'react'
import Grid from '@material-ui/core/Grid'

// Start Openlayers imports
import { 
 } from 'ol'
import {
} from 'ol/format'
import {
    Tile as TileLayer,
    Vector as VectorLayer
} from 'ol/layer'
import {
    Vector as VectorSource,
    OSM as OSMSource,
    XYZ as XYZSource,
    TileWMS as TileWMSSource
} from 'ol/source'
import {
    Select as SelectInteraction,
    defaults as DefaultInteractions
} from 'ol/interaction'
import { 
    defaults as DefaultControls
} from 'ol/control'
import {
    Fill as FillStyle,
    RegularShape as RegularShapeStyle,
    Stroke as StrokeStyle
} from 'ol/style'

import { 
    get as getProjection
 } from 'ol/proj'

// End Openlayers imports

class OLMapFragment extends React.Component {
    constructor(props) {
        this.updateDimensions = this.updateDimensions.bind(this)
        const h = window.innerWidth >= 992 ? window.innerHeight : 400
        this.setState({height: h})
        window.addEventListener('resize', this.updateDimensions)

        // Create an Openlayer Map instance with two tile layers
        const map = new Map({
            //  Display the map in the div with the id of map
            target: 'map',
            layers: [
                new TileLayer({
                    source: new XYZSource({
                        url: 'https://{a-c}{z}/{x}/{y}.png',
                        projection: 'EPSG:3857'
                new TileLayer({
                    source: new TileWMSSource({
                        url: '',
                        params: {
                            layers: 'topp:states',
                            'TILED': true,
                        projection: 'EPSG:4326'
                    name: 'USA'
            // Add in the following map controls
            controls: DefaultControls().extend([
                new ZoomSlider(),
                new MousePosition(),
                new ScaleLine(),
                new OverviewMap()
            // Render the tile layers in a map view with a Mercator projection
            view: new View({
                projection: 'EPSG:3857',
                center: [0, 0],
                zoom: 2
        window.removeEventListener('resize', this.updateDimensions)
        const style = {
            width: '100%',
            backgroundColor: '#cccccc',
        return (
            <Grid container>
                <Grid item xs={12}>
                    <div id='map' style={style} >
export default OLMapFragment

Use the React OpenLayers map component
Now in the ReactJS project's index.js file under /path/to/React/project/src/, import in the newly created OLMapFragment component and render it.

Listing of index.js
import React from 'react'
import { render} from 'react-dom'
import OLMapFragment from './js/components/OLMapFragment'

    <OLMapFragment />

Create the default index.html file
Finally, include links to OpenLayer's style sheets in the project's index.html file under /path/to/React/project/src/.
Listing of index.html file
<!DOCTYPE html>
<html class="no-js" lang="en">

    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content='ie=edge'>
    <title>Openlayers React</title>
    <meta name="description" content="Explore planet Mars">
    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
    <!-- material-ui prerequisites -->
    <link rel="stylesheet" href=",400,500,700&display=swap" />
    <link rel="stylesheet" href="" />
    <!-- end material-ui prerequisites -->

    <link rel="stylesheet" href=""
        type="text/css" />


    <!--[if lte IE 8]
        <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="">upgrade your browser</a></p>
    <div id='react-container'></div>



Now, run the ReactJS project with a web server and open the web page with an Internet browser.

The web map tiles are rendered in the React OpenLayers component.

Monday, October 7, 2019

Add Mars Web Mapping Tile Server datasets from NASA to QGIS

NASA publishes Mars dataset such as the Viking Color Mosaic or the Mars Orbiter Laser Altimeter Color Hillshade  for public access at this web site The dataset are published as OGC RESTful Web Mapping and Tile Services - hence they can be pulled down and displayed in QGIS.

For convenience, the full list of the dataset extracted from the service is shown below:
Layer Url
Viking Color Mosaic - Global Map{z}/{y}/{x}.jpg
CTX Mosaic - Curiosity Landing Site{z}/{y}/{x}.png
HiRISE Mosaic - Curiosity Landing Site{z}/{y}/{x}.png
HiRISE Mosaic - ESP_040776_2115{z}/{y}/{x}.png
HiRISE Mosaic - ESP_042252_1930_RED_B_01_ORTHO{z}/{y}/{x}.png
HiRISE Mosaic - ESP_042647_1760_RED_B_01_ORTHO{z}/{y}/{x}.png
HRSC Mosaic - Martian East{z}/{y}/{x}.png
HRSC Color Mosaic - MC11{z}/{y}/{x}.png
HRSC Mosaic - MC11{z}/{y}/{x}.png
HiRISE Mosaic - Spirit Landing Site{z}/{y}/{x}.png
HiRISE Mosaic - Opportunity Landing Site{z}/{y}/{x}.png
HiRISE Mosaic - Phoenix Landing Site{z}/{y}/{x}.png
HiRISE Mosaic - Sojourner Landing Site{z}/{y}/{x}.png
Albedo Mosaic - Thermal Emission Spectrometer{z}/{y}/{x}.png
DEM Grayscale - Mars Orbiter Laser Altimeter{z}/{y}/{x}.png
Color Hillshade - Mars Orbiter Laser Altimeter{z}/{y}/{x}.jpg
Experience Curiosity - Curiosity Landing Site{z}/{y}/{x}.png
Atlas Mosaic - Mars Orbiter Camera{z}/{y}/{x}.png
Infrared Night - Thermal Emission Imaging System{z}/{y}/{x}.jpg
Infrared Day - Thermal Emission Imaging System{z}/{y}/{x}.jpg
HRSC Mosaic - Mawrth Vallis{z}/{y}/{x}.png
HRSC Color Mosaic - Mawrth Vallis{z}/{y}/{x}.png

To add a MARS dataset to QGIS, do the following:
  1. Start QGIS. In the Browser panel, mouse right click on the Tile Server (XYZ). Select New Connection.

  2.  In the New XYZ tile layer, type in the URL for the chosen dataset, e.g.{z}/{y}/{x}.jpg

  3. Click OK.
  4. Type in the name of the tile layer, e.g. Color Hillshade - Mars Orbiter Laser Altimeter.

  5. Click OK.

    The tile layer connection is added to the Tile Server (XYZ) node.
  6. Mouse right click on the newly added tile server node. Choose Add layer.

    The selected layer is displayed in QGIS.

Monday, September 30, 2019

CMake example for cross compiling and using a static library for a Raspberry Pi on an Ubuntu PC

Compiling source code on a Raspberry Pi can be sluggish compared to a PC. So instead I decided that cross compilation on an Ubuntu PC would be faster and therefore more productive of my time. So after a few false starts, I finally managed to get the workflow working. This post shows a simple example of how to compile a C++ static library and using that in an executable for Raspberry Pi using the CMake build system on an Ubuntu PC.

Down the Raspberry Pi build tools
The first thing is to get the Raspberry cross compilation tools from the git repository.

In Ubuntu, open a Terminal. Type in the following to download the tools to a folder e.g. /path/to/programs/pi/.

$ cd ~/programs/pi/
$ git clone

Create a CMake toolchain file
Next, create a cmake file e.g. /path/to/workspace/toolchain-rpi.cmake specifying the correct Raspberry cross compilation tools for compiling C/C++ source files with the CMAKE_C_COMPILER and CMAKE_CXX_COMPILER macros. Also the root folder of the Raspberry Pi libraries and include files need to be specified with the CMAKE_FIND_ROOT_PATH macro.

Choose the right ones for your Raspberry Pi chipset.

Listing of toolchain-rpi.cmake

# define the C cross compiler for the Raspberry Pi 
SET(CMAKE_C_COMPILER $ENV{HOME}/programs/pi/tools/arm-bcm2708/arm-rpi-4.9.3-linux-gnueabihf/bin/arm-linux-gnueabihf-gcc)

# define the C++ cross compiler for the Raspberry Pi
SET(CMAKE_CXX_COMPILER $ENV{HOME}/programs/pi/tools/arm-bcm2708/arm-rpi-4.9.3-linux-gnueabihf/bin/arm-linux-gnueabihf-g++)

# define the root location of the Raspberry Pi libraries and includes
SET(CMAKE_FIND_ROOT_PATH $ENV{HOME}/programs/pi/tools/arm-bcm2708/arm-linux-gnueabihf/arm-linux-gnueabihf/sysroot)


add_definitions(-Wall -std=c11)

Create the workspace
In the same example project workspace folder /path/to/workspace/, create two folders animallib and uselib, the first for the library files, and the later for the executable files.

Create the static library
The next step is to create the header file and define the classes that will be used by the example executable. Place the Animal.h and Animal.cpp files respectively in the include and src folders under the /path/to/workspace/animallb/ folder.

Listing of Animal.h
#include <string>

using namespace std;

class Animal {
                string name;
                virtual void print_name();

Listing of Animal.cpp
#include <iostream>
#include "Animal.h"

using namespace std;

Animal::Animal(string name): name (name) {}

void Animal::print_name(){
        cout << "Name is " << this->name << endl;

Create the static library's CMakeLists.txt file in the animallib folder e.g. /path/to/workspace/animallib/. As defined, this will help to generate a static library libanimallib.a and a header file animallib_Export.h.

cmake_minimum_required(VERSION 2.8.6)
project (animallib)


#include *.h files under the include folder and
#the project's output folder e.g. build
include_directories (include ${PROJECT_BINARY_DIR})

#compile all *.cpp source files under the src folder
file (GLOB SOURCES "src/*.cpp")

#output static library export file *.a and
#output macro definitions include file
include (GenerateExportHeader)
add_library(animallib STATIC ${SOURCES})
        BASE_NAME animallib
        EXPORT_MACRO_NAME animallib_EXPORT
        EXPORT_FILE_NAME animallib_Export.h

Open up a Terminal and change directory to the static library's folder e.g. /path/to/workspace/animallib/.

If the build folder does not exist, create it.

$ mkdir build
$ cd build

Type in the cmake command with the CMAKE_TOOLCHAIN_FILE variable pointing to the previously created Raspberry Pi toolchain CMake file.

$ cmake -D CMAKE_TOOLCHAIN_FILE=/path/to/workspace/toolchain-rpi.cmake ..

Build files are generated

In the Terminal, type in the make command to generate the static library file.
$ make
Static library compilation messages
Using the static library in a separate C++ application
Now that the library has been generated, the next thing is to use the library's classes and functions in an executable e.g. uselib project under /path/to/workspace/uselib/.

Listing of uselib.cpp
#include "Animal.h"

#include "animallib_Export.h"

int main(int argc, char *argv[]){
        Animal animal("Dog");
        return (0);

Place the source code file uselib.cpp under the src directory e.g. /path/to/workspace/uselib/src/.

Then create a CMakeLists.txt file under the /path/to/workspace/uselib/ folder.
cmake_minimum_required(VERSION 2.8.6)
project (UseLib)

# link as a static library

set (EXAMPLE_DIR $ENV{HOME}/Documents/workspace/learn_rpi/)

# name and location of the library to link with the executable
set (PROJECT_LINK_LIBS animallib)
link_directories (${EXAMPLE_DIR}/animallib/build/)

include_directories (

#compile all *.cpp source files under src folder
file (GLOB SOURCES "src/*.cpp")

#output executable name as uselib
add_executable (uselib ${SOURCES})
target_link_libraries (uselib ${PROJECT_LINK_LIBS})

Open up a Terminal. Change directory to the /path/to/workspace/uselib/ folder.

If the build directory does not exist, type in the following to create it.

$ mkdir build

Type in the cmake command with the CMAKE_TOOLCHAIN_FILE variable pointing to the previously created Raspberry Pi toolchain CMake file.

$ cmake -D CMAKE_TOOLCHAIN_FILE=/path/to/workspace/toolchain-rpi.cmake ..

The build files are generated
Compile the executable with the make command.
$ make

Compilation messages
Once the executable uselib has been generated, it can be copied to the Raspberry Pi and run. If you have an arm emulator e.g. qemu installed on the Ubuntu PC, then it can be executed as shown below.
Running the Raspberry Pi executable on the Ubuntu PC with QEMU

Monday, September 23, 2019

Installing Vim-youcompleteme for Ubuntu 18.04

Modern text editors in IDE such as Visual Studio comes with a useful feature so-called Intellisense or automatic text completion. The venerable vi text editor can also have this feature enabled by installing and configuring suitable plug-ins such as vim-youcompleteme. I thought it might be fun using this and found a lot of methods to get it installed and running on Ubuntu 18.04, including fiddling with the .vimrc file. But the simplest way I found was to simply do the following:
  1. In a Terminal, run the command:

    $ sudo apt install vim-youcompleteme
  2. Next, run the command:

    $ vim-addon-manager install youcompleteme
Now, when editing a code file, vi will pop up an auto-completion list as you type, as shown in the screenshot below.

Monday, September 16, 2019

Allocating more space to an emulated Raspbian disk image

The Raspberry Pi Raspbian images from for QEMU have limited disk space, just enough for booting up and not much else. In the screenshot below, the image has just 3.3GB to it.

In order to work with ROS or other applications, the disk image has to be resized with more free disk space. This can be done by doing the following.
  1. Optional but recommended. Make a copy of the original Raspbian image and rename it, for example as raspbian.img.

    $ cp 2019-06-20-raspbian-buster.img raspbian.img
  2. Extend the copied image's size with the following command in the Terminal.

    $ qemu-img resize raspbian.img +6G

    Note: +6G means to extend the original size by 6 gigabytes
  3. Next, boot up the newly resized image with QEMU.

    $ qemu-system-arm -kernel kernel-qemu-4.4.34-jessie \
      -cpu arm1176 \
      -m 256 \
      -M versatilepb \
      -serial stdio \
      -append "root=/dev/sda2 rootfstype=ext4 rw" \
      -hda raspbian.img \
      -net nic \
      -net user,hostfwd=tcp::5022-:22 \

    The QEMU window appears.

  4. In the QEMU window, open up a Terminal.
  5. Enter the following commands to delete and create a new partition.

    $ sudo fdisk /dev/sda
  6. Print out the current partitions by entering p. Make a note of the starting offset of the second partition e.g. 540672.

  7. Delete the second partition by entering d followed by 2. Then recreate the second partition by entering c, n, p, 2, followed by the starting address noted from the previous steps e.g. 540672. Leave the signature alone when prompted.

  8. Now, reboot the emulated Raspbian OS.
  9. When QEMU has restarted the Raspbian OS, open a Terminal and enter the command to resize the file system.

    $ sudo resize2fs /dev/sda2

  10. To see the available disk space, enter the command:

    $ df -h

Monday, September 9, 2019

How to emulate a Raspbian OS in QEMU on Windows 10

I wanted to test out developing for a Raspberry Pi on a Windows 10 PC platform running an emulated Raspbian OS. After trying out a few methods to get  the emulator running, I settled on the following procedure.

Install QEMU for 64-bit Windows 10
  1. Go to the following web site and download the latest QEMU installer for Windows 64bit.
  2. Run the installer.

    The QEMU executable files are installed, e.g. C:\Program Files\qemu\
Download a Linux kernel
  1. Go to the following web site and download a suitable kernel, e.g. kernel-qemu-4.4.34-jessie.
  2. Place the kernel file in a folder e.g. D:/Temp/raspbian/kernel-qemu-4.4.34-jessie
Download an Raspbian OS image
  1. Go to the following web site and download the latest image e.g.
  2. Unzip the image file into a folder, e.g. D:/Temp/raspbian/2019-06-20-raspbian-buster.img

Create a Windows bat file
  1. Run a text editor.
  2. Type in the following lines.

    "c:\Program Files\qemu\qemu-system-arm.exe" ^
    -kernel kernel-qemu-4.4.34-jessie ^
    -cpu arm1176 ^
    -m 256 ^
    -M versatilepb ^
    -serial stdio ^
    -append "root=/dev/sda2 rootfstype=ext4 rw" ^
    -hda 2019-06-20-raspbian-buster.img ^
    -net nic ^
    -net user,hostfwd=tcp::5022-:22 ^

    Note: rename the kernel and image file names (in bold) to match the downloaded file names accordingly.

  3. Save as a bat file e.g. run_raspbian.bat and close the editor.
  1. Open up a Command Prompt.
  2. Change directory to the folder containing the kernel and image files e.g. D:/Temp/raspbian.
  3. Type in the command:

    D:\> run_raspbian.bat

    The QEMU window appears running Raspbian OS

Monday, September 2, 2019

Resolving VeloView not displaying live sensor data from Velodyne Lidar sensors

This is a fairly common problem when running VeloView with a real Velodyne Lidar sensor on Windows - even though the sensor e.g. VLP-16 or HDL-32 are powered on and connected to the host computer, no live point cloud data is displayed in VeloView. All you get is a blank screen as shown below.

The probable reason is that the Windows Defender firewall is set to block VeloView from accessing the ports used by the Velodyne sensors. Normally, Windows will prompt whether to allow the program to access the ports on the first startup of the program. If you click no to the prompt, then Windows will never ask again. To enable the ports for VeloView, you will have to manually open the ports. The steps are shown below.

  1. Click the Windows Start button. Start typing "firewall with advanced...".

    A list of matches appear.

  2. Click on Windows Defender Firewall with Advanced Security.

    The Windows Defender Firewall with Advanced Security dialog box appears.

  3. Click on Inbound Rules. Scroll the list and look for entries with the name Veloview.

  4. For each Veloview entry, double click on it.

    The Veloview Properties appear.

  5. Toggle on Enabled. Choose Allow the Connection. Click OK. Repeat for each Veloview entry.

    The entry in the list should be marked with a green tick icon.

  6. Close the dialog.

    VeloView should be able to display the live data from the Velodyne sensor.
Related Posts with Thumbnails