Restoring a Postgres database to AWS RDS using Docker

In this post I look at using Docker to restore a Postgres dump file to a Postgres database running in the cloud on AWS RDS.

Keep it clean

One of the big selling points of docker, for me, is that I can have lots of apps and utils running in nice containers on my dev laptop, without having to install them locally.  This ensures my laptop stays nice and responsive and I don’t clutter/break my laptop with lots of weird dependencies and running processes that I’m then too scared to delete.

Postgres is a good example – I don’t want to install it locally, but I do need access to the command line tools like psql and pg_restore, to be able to work with my databases effectively.

One way of accessing these tools would be to ssh onto the AWS cloud instances, but there’s a bunch of reasons most pertinently security (not to mention the faff) why you’d want to avoid that every time you want to run some sql.  So let’s look at how we use Docker to ease the pain instead.

Start Me Up

With Docker installed you can build this simple Dockerfile to create a local Postgres container.  The User and Password env vars aren’t strictly required, however, if you want to actually connect to the containerised DB, it’s pretty handy

You can build, run and connect to the container as follows (assumes you are on Mac)

Note line 4 where I map the data-load dir I created at line 1 to a new directory called data-loader inside my container.  This means that when I copy the Postgres dump file into my local data-load directory, it will be available to the postgres tools available in the container.

Line 6  allows me to connect to the container, swap the imageId  for your locally running containerID.

Restoring your database with pg_restore

I’ll assume you already have a Postgres database set up within the AWS cloud.  So now we have connected to our container, we can use pg_restore to use restore our dumpfile into AWS (note this command will prompt you for the admin password)

A note on schemas

If you’re doing a partial restore, you may want to restore your dumpfile to a separate schema.  Unfortunately there appears to be no way to do this from the command line.  What you have to do is to rename the public schema, create a new public schema and restore into that, then reverse the process.

This StackOverflow answer outlines the process.

Restore Complete

You should now have a complete restore of your dumpfile in the cloud.  Please add comments if anything is unclear.

My work placement week @ thinkWhere

My name is Yacouba Traore. I am currently studying my second year BSc (Hons) Information Technology at Teeside University School of Computing.

I have had a great week placement at thinkWhere. During my week placement I was presented with a variety of opportunities. I had a great chance to meet everyone from the various parts of the business including CEO, Portfolio Manager, Business Managers, Accounts Managers, Developers, Service Desk Consultants and Office Administrators.

I have learned how the agile development systems work such as Scrum, as well as the differences between Agile and Waterfall. I have taken part in the different ceremonies including daily stand up, backlog refinement, demo and sprint planning.

Attending the Scrum daily-stand up

I have also learned about GIS (Geographical Information Systems) and the theMapCloud. I have also created my own map using QGIS where I am from in Côte d’Ivoire (Ivory Coast).

My first QGIS map of Côte d’Ivoire

The thinkWhere development team also worked with me to develop my coding skills including help with JavaScript, HTML and CSS using PyCharm. I used these skills to script a page showing a graph of theMapCloud usage metrics.

The role has allowed me to learn key skills and competencies of IT and business systems. On top of this I delivered 30 minutes of presentation about myself and a project I am working on at university.

One of the best things about the company is the people. They were very friendly, approachable and well organised. I have also made a great network of colleagues and made new friends.

I have really enjoyed my work placement. I have learnt a lot and have gained skills that I will take forward with me. I have also been given many opportunities and many new experiences. I’ve gained a deeper understanding of how large IT projects work, which is going to help me in the future.

Developing my JavaScript, HTML & CSS skills using PyCharm.

Being part of this placement has also helped me to develop my interview skills and my job prospects. It is also very valuable experience for my CV.

I hope to be back at thinkWhere again one day!

HOT Tasking Manager 3.0 Development Underway at thinkWhere

We get to work on some great projects here at thinkWhere, but we’re particularly proud of the project we’ve just started with the Humanitarian OpenStreetMap Team (HOT) to develop the Tasking Manager version 3.0 (TM3). It’s great to work in an industry where the work we do with maps can have such a tangible impact on the humanitarian effort. thinkWhere support this wherever we can by supporting MapAction by both supporting my own personal volunteering (which you can read more about here) and through fundraising efforts such the running the Stirling Marathon, which is open for sponsorship here so please donate if you can! Therefore being given the opportunity to also get involved with the HOT Community and deliver TM3 is something we’re extremely proud of.

The current HOT Tasking Manager (TM2) coordinates volunteer mapper contribution to OpenStreetMap, meaning the global network of HOT volunteers can map affected areas efficiently providing disaster responders on the ground such as MapAction, MSF and the Red Cross access to detailed mapping during the response.

Following a significant increase in the capture of OSM data through initiatives such as Missing Maps, and subsequent loads on existing servers and software, the development of TM3 aims to better meet the needs of mappers, validators and project managers.  This will be achieved by taking advantage of the very latest advances and innovations in web development frameworks and methodologies.

Blake Girardot, TM3 Project Manager said…

We are very excited to be working with thinkWhere to develop the next generation of HOT’s Tasking Manager application. The team at thinkWhere brings a wealth of geospatial development experience, talent and insight to the project. Used by thousands of people around the world, our Tasking Manager software is the key technology component that enables our humanitarian mapping work and having thinkWhere as partners ensures the development project will be a success and deliver a great result for our community”.

In early February 2017, we travelled to HOT’s office in Washington DC for the project initiation meeting with various project stakeholders to discuss initial requirements and wireframe designs.

This engagement with some of the largest users of the Tasking Manager to discuss functionality and solicit feedback on how features might be implemented was a great way to start the project.  A long, but very productive day, the discussion involved representatives from Missing Maps, YouthMappers, TeachOSM, GeoCenter, the US State Department’s Humanitarian Information Unit, Mapbox, HOT Project Managers, American Red Cross and Ethan Nelson, the lead community development volunteer.

thinkWhere’s Chief Executive Alan Moore said…

We’re really delighted and privileged to be working with the team at HOT. Redevelopment of the Tasking Manager will be key to the future growth and sustainability of the humanitarian mapping effort across the world. The development work flows naturally from the innovative work we’ve been doing recently on theMapCloud, our new spatial data platform, and we’re keen to bring those advantages to the benefit of HOT and the global mapping community”.

Since arriving back in Scotland from the States the team have been hard at work developing TM3. You can follow development progress of TM3 on the Tasking Manager GitHub repository and can also view the TM3 Staging Site.

Everyone is invited to participate in the process. Comments, questions and issues are needed and encouraged on the GitHub repository’s Issues tab, so please get involved!

Counting Points and the Process Modeller in QGIS

Here at thinkWhere we’ve recently been working with the automation tools in QGIS. The processing toolbox is a much underrated feature in QGIS, lacking the jazzy graphics of the ArcGIS equivalent it is, however, just as useful and functional from the point of view of doing multi-stage GIS analysis.

We recently had occasion to create a tool for a client that counted the number of features within a polygon and provide statistics for subsets of the features. Let’s try this again, for the sake of demonstration and talk about trees.

map1

Here we have a series of suburbs arranged as polygons and trees as points. As you can see there are 5 types of tree in the dataset. A Spatialite or PostGIS database would make quick work of this, but you can also use the QGIS processing toolbox to iterate through this and count each aspect of the data.

Effectively from the point dataset we need to extract each of the attributes.

Extract by Attribute from Trees  “Type = Beech” etc.

extract-by-attribute-setup

This creates effectively a subset of the input points dataset which can then be counted via the polygons.

We can then use the count points in polygon to count the number of points that sit inside each of the neighbourhoods.

Count Points in Polygon From Beech Subset of Input Points by Input Polygon, Create field “Beech”

count-points-in-polygon-setup

Using standard QGIS this will create a new dataset each time you run an algorithm, but the great strength of the processing modeller is that these intermediate steps can run in the background as temporary layers, rather than confusing your users with multiple layers.

Of course what needs to happen now is that the next iteration (Birch) will need to be counted using the polygon dataset you created for the counts in the Beech dataset. If you think about it, the geography of that dataset is the same as the Input Polygon (the neighbourhoods). It also carries forward all the attributes for the layer as well. So for each iteration you are not using the original input polygons, but adding the new attribute information on for each count.

In the processing toolbox this looks like this:

modelimage

When you run the model, you get a polygon shapefile with a new set of attributes showing the number of each of the tree types in the area. You can then generate graphs or use the data for other purposes.

treecounts

This is only one of the many ways that the automation tools in QGIS can help you. It is also a really useful system for analysis. QGIS is hugely flexible and has a load of options for this. To learn more and see details of our QGIS training offerings please see our training page.

Automated Testing with BrowserStack & Selenium

Ensuring high quality software requires a lot of testing. Whether it’s code peer-review, unit testing, integration testing, system testing or exploratory user testing – it all has to be done! Therefore we look to automate our testing where possible. This blog post explores the automation of browser compatibility testing in BrowserStack using Selenium WebDriver.

BrowserStack is a cloud-based platform for testing applications in various Operating Systems and browsers. It is used for both Continuous Integration (CI) and cross-browser testing. Selenium WebDriver is a tool for driving browsers to replicate and automate user journeys and assert presence and functionality of page elements.

bstackWe aim to integrate automated testing into our Continuous Integration pipeline, however a number of our more established products are not yet part of this pipeline. One such product is Location Centre which is used by many local authorities where the end-user often has limited control over the choice of OS and browser. This often restricts the development to suit the majority of browsers used and their degree of modernity. Despite not being part of our CI pipeline testing our software to ensure high quality is just as important. Therefore I’ll now provide an example of how simple and straightforward it is to automate tests for Location Centre using BrowserStack.

BrowserStack offers a 100 minute trial so I recommend you also try it out! The site provides a range of multi-system environments for manual and automated testing as shown in the image below. bw_mobile_devices

BrowserStack runs the tests using Selenium WebDriver and these code examples serve as a great starting point. The tests can be scripted manually or by using Selenium IDE plugin for Firefox – the extension allows you to record the user steps with minimum coding, thus minimising hand-written code and saving you time. It provides hundreds of commands for element assertion, mouse position and many more. The tool decides by itself how to locate the element. The plugin is user-friendly and well-supported and the process of recording is quick and intuitive.

I have recorded the simple process of logging in to Location Centre, selecting the ‘Mapping’ tab and then zooming and panning the map.

selelnium_ide

Once created test cases can be exported in your language of choice – in our case it’s Python.

(File> Export Test As> Python 2  / unittest / WebDriver)

We can add the exported test case to our IDE. All we need to do now is modify the setup function to add the BrowserStack keypass and specify the browser and OS requirements.

We find it’s always worth starting the tests with the high risk browsers which is traditionally Internet Explorer which is used by the majority of Location Centre customers. Gov.UK recommends testing from IE8 and up, so we will run the test in IE8.

IE8 runs on Windows 7 and Windows XP, making it difficult to test locally. You could get IE8 from Microsoft virtual machine but BrowserStack makes it much easier. Using the BrowserStack tool we can get the capabilities and add them to the setUp function:

system_capabilities

System capabilities and the authorisation information can be input into the setup:

class WebDriver(unittest.TestCase):
    def setUp(self):
       <strong> self.verificationErrors = []
        url = 'http://USERNAME:PASSCODE@hub.browserstack.com:80/wd/hub'
        self.driver = webdriver.Remote(command_executor=url, desired_capabilities= {'browser': 'IE', 'browser_version': '8.0', 'os': 'Windows', 'os_version': '7', 'resolution': '1024x768'})</strong>

    def test_leics_l_c(self):
        driver = self.driver
        driver.get("https://lctrial.locationcentre.co.uk/")
        driver.find_element_by_id("ContentPlaceHolder1_loginControl_Password").clear()
        driver.find_element_by_id("ContentPlaceHolder1_loginControl_Password").send_keys("password")
        driver.find_element_by_id("ContentPlaceHolder1_loginControl_UserName").clear()
        driver.find_element_by_id("ContentPlaceHolder1_loginControl_UserName").send_keys("username")
        driver.find_element_by_id("ContentPlaceHolder1_loginControl_LoginButton").click()
        driver.find_element_by_id("Header1_lnkMap").click()
        driver.find_element_by_id("map-size-toggle").click()
        driver.find_element_by_id("map-size-toggle").click()
        driver.find_element_by_id("OpenLayers.Control.PanZoomBar_17_zoomin_innerImage").click()
        driver.find_element_by_id("OpenLayers.Control.PanZoomBar_17_zoomin_innerImage").click()
        driver.find_element_by_xpath("//div[@id='toolsPanel']/divg").click()

    def is_element_present(self, how, what):
        try:
            self.driver.find_element(by=how, value=what)
        except NoSuchElementException as e:
            return False
        return True

    def is_alert_present(self):
        try:
            self.driver.switch_to_alert()
        except NoAlertPresentException as e:
            return False
        return True

    def close_alert_and_get_its_text(self):
        try:
            alert = self.driver.switch_to_alert()
            alert_text = alert.text
            if self.accept_next_alert:
                alert.accept()
            else:
                alert.dismiss()
            return alert_text
        finally:
            self.accept_next_alert = True

    def tearDown(self):
        self.driver.quit()
        self.assertEqual([], self.verificationErrors)

    if __name__ == "__main__":
        unittest.main()

You can now run the automated test with BrowserStack as shown in the GIF below.

ice_video_20170105-102548

The test can be played back and each step can be reviewed in turn. BrowserStack will provide you with a screenshot for any failed step (I have broken the one below on purpose!).

bs_failed_test

This service offers many useful features including localhost testing, ability to upload files and many more. There is no or very little coding required – although you may want to change an elements location or add some custom assertions, cursor movements or text inputs etc. Furthermore, there are no (or not as many) compatibility issues between the Selenium methods and the webdrivers which one experiences when testing locally.

You can utilise the vast Selenium library for replicating user journeys in the required system at the desired speed. BrowserStack also has integrated Cucumber and Behave used in Behaviour Driven Development (BDD) and testing. However, at the time of the writing this post, there were issues running those on Windows platforms. Overall, it is a great framework for compatibility testing.

Alongside the automation, exploratory tests still need to be in place to avoid kaleidoscopic bugs like this one found in our product mapTrunk…good job we caught this before Go-Live!

openlayers_bug-1

MapAction: The Humanitarian Mapping Charity

Aside from the work I do here at thinkWhere I also volunteer for the humanitarian mapping charity, MapAction. This year MapAction are fortunate to be part of the BBC Radio 4 appeal and have our message presented by Alexander Armstrong (Presenter of Pointless, amongst other things) which will air on Christmas Day at 7:54am and 6.56pm and on 29th December at 3:27pm. As part of the drive to raise awareness of MapAction, thinkWhere has posed some questions to me to find out more about what it’s like being a MapAction volunteer…

ma_logo

Can you tell us a bit about what MapAction does and how it helps during humanitarian crises?

MapAction is a humanitarian mapping charity that works through skilled volunteers. Its aim is to save lives and minimise suffering by making the response to humanitarian emergencies as efficient and effective as possible through the use of maps and spatial data.

When a disaster strikes, people’s lives can be destroyed within a matter of seconds. In a landscape transformed by the disaster, the challenge for responders is to know where to start.

MapAction deploys skilled volunteers to the scene of a disaster within hours of an alert. In the acute phase of a response, our mapped analysis helps coordinate search-and-rescue efforts and the delivery of emergency aid. As the situation on the ground evolves, it helps responders understand the changing needs of survivors.

As a long-term measure we also help to prepare government authorities, responders and communities in vulnerable countries for the impact of disasters before they strike.

How did you get involved in becoming a MapAction volunteer?

My older sister Anne has been a MapAction volunteer for the past 11 years and has deployed to numerous emergencies including Pakistan (2005 earthquake), Indonesia (2006 earthquake), Tajikistan (2006 capacity building), Pakistan (2009 IDP crisis), Haiti (2010 earthquake), Japan (2011 earthquake), Sahel (2012 nutritional crisis), Liberia (2014 Ebola outbreak) and Nigeria (2016 preparedness mission).

Consequently over the last 11 years I’d heard lots about what it meant to be a MapAction volunteer, how much difference MapAction is able to make during an emergency and how rewarding being a volunteer was. MapAction as an organisation is also very well-known and respected within the wider GIS community.

Given I chose to follow a similar GIS career as my sister I was therefore also driven to become a volunteer, so eventually applied during a recruitment drive and was very pleased to be successful and able to join MapAction myself in 2014.

ma_team
The MapAction team at a recent disaster simulation exercise

What kind of training do you get to prepare you for any missions you might get sent on?

MapAction volunteers are expected to participate in at least seven training weekends a year, keeping us up to date with the latest developments in the humanitarian and technical community.

Every year MapAction also runs an intensive simulation exercise, focusing on developing the skills we need to deliver our mapping service in the potentially challenging context of an emergency response.

Our training helps us make judgement calls about what sort of map products we should create given the time available and the volume of rapid requests coming in.

Recognising that the world is dealing with more conflict-related emergencies, MapAction has also boosted its security training so we can deploy safely to environments where the situation can be highly unpredictable.

Training involves simulations that enable us to ‘learn by doing’ in a practical and safe environment. This has included practising first aid, emergency communication procedures and negotiating with combatants. We hope none of this will ever be needed, but MapAction make a point of always preparing the team for all eventualities.

How do you balance your time between volunteering and working at thinkWhere?

MapAction is a big commitment. Aside from deploying to the field for emergencies we also provide remote support to emergencies when required, as well as actively training together as a team throughout the year, so the time commitment is significant.

Luckily I have a very understanding girlfriend (thanks Maddie!) and a very flexible employer in thinkWhere. thinkWhere are great at accommodating my MapAction training and volunteering around my work commitments, such as recently allowing me the time to deploy to Northern Iraq. Without this flexibility my volunteering with MapAction wouldn’t be possible.

Team thinkWhere raising money for MapAction by completing Total Warrior in 2015
Team thinkWhere raising money for MapAction by completing Total Warrior in 2015

Where in the world does your volunteering take you?

MapAction deploy to emergencies all around the world, a list of which can be found on the website here: maps.mapaction.org. MapAction doesn’t currently have any teams engaged in active responses, however since September we’ve responded to a number of high profile emergencies including the conflict related crisis in Nigeria affecting as many as 14 million people and Hurricane Matthew in Haiti, Jamaica and the Bahamas.

In November I also went on my first deployment with a fellow volunteer Naomi to Northern Iraq to map aid needs and distribution as a result of the conflict related crisis affecting the region.

QGIS training in Erbil, Iraq
QGIS training in Erbil, Iraq

What (from your own personal experience) is the most rewarding thing about volunteering for MapAction?

The most rewarding thing is being able to directly apply the skills I have from my work life into a completely different context i.e. the humanitarian world, in order to make a difference and help those in need. Meeting and working with the rest of the MapAction team who also share the same drive and commitment is also very rewarding.

Have you ever met the Royal Patron of MapAction, Prince Harry?

I haven’t personally met Prince Harry, although he did recently attend ‘Triplex’ in Norway which is a major international humanitarian field exercise organised by the International Humanitarian Partnership (IHP), where MapAction volunteers were participating. Prince Harry has an active interest and great knowledge of our work having been MapAction’s Royal Patron for the last 10 years since 2007. Maybe I’ll meet him one day!

How can others get involved with MapAction?

MapAction will be recruiting a new intake of volunteers in the New Year, so anyone with the right technical skills and an interest in joining our close-knit team should keep an eye on MapAction’s website and social media channels for more information about the skills and commitment required.

It’s certainly not for everyone and requires a flexible employer, like thinkWhere, to be willing to release you at short notice. But the benefits you gain in terms of honing your professional skills, making a difference and meeting like-minded people make it incredibly rewarding.

How can people help MapAction without becoming a volunteer?

The single easiest thing people can do is donate. MapAction doesn’t receive funding from large public appeals, so we rely on the generosity of our supporters. Your donation means we can continue to be responsive, agile and ready for action at any time.

donate

MapAction’s approach has a powerful multiplier effect. Every pound you donate will influence the allocation of many thousands, if not millions, of pounds of humanitarian aid. And that means many more lives potentially saved.

MapAction is often referred to as the “best-kept secret” of the humanitarian world. The video featuring Prince Harry on the MapAction website aims to raise MapAction’s profile, so more people will get behind this unique organisation and help get more aid to more people.

How can we find out more?

Visit mapaction.org and watch the Prince Harry video which brings to life the pivotal role that MapAction plays in coordinating humanitarian aid.

The MapAction BBC Radio 4 appeal being presented by TV personality Alexander Armstrong goes out on Christmas Day at 7:54am and 6.56pm.

You can find out more at mapaction.org. You can also follow MapAction’s work and missions on Twitter @MapAction and @MapAction_maps.

AngularJS and OpenLayers: creating a scale bar module

Intro

We’ve recently released a new product called mapTrunk. The app is built using the open source libraries AngularJS and OpenLayers 3 (among many others!). As part of our development efforts we looked into creating reusable modules. This blog post offers a high level introduction to AngularJS and OpenLayers 3 and shows how they can work together to create a reusable map scale bar module example.

maptrunk

AngularJS and OpenLayers 3

AngularJS is an open source JavaScript framework for creating web apps. It provides tools for making apps modular. AngularJS handles binding data which means the view (HTML) automatically updates when the model (JavaScript) updates. Other benefits of AngularJS include form validation in the browser, the ease of wiring an app up to a backend and the testability of the code. AngularJS also lets you extend the syntax of HTML and inject components into your HTML. This feature comes in handy when creating the scale bar module.

OpenLayers 3 is an open source mapping library. It provides tools for adding dynamic maps to an app. Commonly used mapping controls provided by OpenLayers include zooming in/out control, a mouse position control and a scale bar control.

The following example shows how to create a basic map with OpenLayers and AngularJS. The result is a map and a button to recenter the map. It also shows the user how many times they have centred the map.

HTML

Firstly we need to include the AngularJS and OpenLayers 3 libraries, add a div for the map and add a button. We also need to include the Angular app called “app”, which is created in JavaScript.

<html ng-app="app">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.18.2/ol.css"/>
    <a href="https://code.angularjs.org/1.4.12/angular.js">https://code.angularjs.org/1.4.12/angular.js</a>
    <a href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.18.2/ol.js">https://cdnjs.cloudflare.com/ajax/libs/ol3/3.18.2/ol.js</a>
    <a href="http://main.controller.js">http://main.controller.js</a>
</head>
<body ng-controller="mainController as main">
    <div id="map"></div>
    <button ng-click="main.centerMap()">Button</button>
    <div>You have centered the map on coordinate [0,0] {{main.counter}} times.</div>
</body> </html>

JavaScript

Here we create our own Angular controller; mainController, which initialises the map and contains the function which is called on clicking the button, updating the counter.

var app = angular.module('app', []);

(function () {

    'use strict';

    /**
     * The main Angular controller which initialises the mapping
     */
    angular
        .module('app')
        .controller('mainController', [mainController]);

    function mainControllerblockquote {
        var vm = this;
        vm.counter = 0;
        vm.map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            target: 'map',
            view: new ol.View({
                center: [0, 0],
                zoom: 2
            })
        });
        vm.centerMap = function () {
            vm.map.getView().setCenter([0, 0]);
            vm.counter++;
        }
    }
})();

Creating the scale bar module

The OpenLayers library already has a scale bar module called ‘scale line’ built-in. An example can be found here. One of the requirements for mapTrunk was to create a scale line that can display distances in two units at the same time, metric and imperial.

To create a reusable module we can create a custom Angular directive. Angular directives basically let us create our own HTML syntax and inject components by using that HTML syntax. It makes the HTML code easier to read and hides the complexity of the component. In this blog we’re not going to go into the details of Angular directives so please see AngularJS’s documentation on directives for a full explanation.

First we need to create the Angular directive and decide what the HTML syntax is going to be. In the code snippet below we called the directive scaleLineControl. This translates into the HTML tag . The directive needs to have access to an OpenLayers map object to be able to add a scale line control to the map. The map object can be passed into the directive by adding it as a property to the HTML ‘map=”main.map”‘. The OpenLayers scale line control needs a HTML target ID so this ID can be given to the HTML directive as well. The scale line control is added to the OpenLayers map object by using the addControl function. The units of the first control are specified as metric. To create a scale line module which also shows imperial measurements, a second scale line control is added to the map with imperial units. OpenLayers takes care of listening out for changes on the map and updates the controls accordingly. Now we should see two scale lines on the map, but they are positioned on top of each other so we need some CSS to fix this.

(function () {

'use strict';

/**
 * @fileoverview This file provides a scaleLineDirective. 
 * It add a scaleLine showing both metric and imperial units. 
 * CSS is needed to display the elements nicely
 *
 * Example usage:
 * 
 * 
 */

    angular
        .module('app')
        .directive('scaleLineControl', scaleLineDirective);

    function scaleLineDirective() {
        return {
            restrict: 'E',
            link: function(scope, element, attributes) {
                var attr = 'map';
                var prop = attributes[attr];
                var map = scope.$eval(prop);
 
                var scaleLineControl = new ol.control.ScaleLine({
                    target: 'scale-line-container',
                    className: 'scale-line-top',
                    minWidth: 100,
                    units: 'metric'
                });
                map.addControl(scaleLineControl);

                var scaleLineControl2 = new ol.control.ScaleLine({
                    target: 'scale-line-container',
                    className: 'scale-line-bottom',
                    minWidth: 100,
                    units: 'imperial'
                });
                map.addControl(scaleLineControl2);
            }
        };
    }
})();

Making it look good!

We can specify the CSS class names when creating the OpenLayers scale line controls. By doing so we can customise the default look of the scale line controls. Here we have added the class ‘scale-line-top’ to the metric control and ‘scale-line-bottom’ to the imperial control.

#map {
    width: auto;
    height: 100%;
    position: relative;
    overflow: hidden;
}

#scale-line-container {
    border-radius: 2px;
    background: white none repeat scroll 0 0;
    bottom: 8px;
    left: 8px;
    font-size: 10px;
    position: absolute;
    z-index: 1000;
    padding: 5px;
    text-align: center;
}

.scale-line-top-inner {
    border-style: none solid solid solid;
    border-width: medium 2px 2px 2px;
}

.scale-line-bottom-inner {
    border-style: solid solid none;
    border-width: 2px 2px medium;
    margin-top: -2px;
}

Result

The result is an Angular directive which can be injected into HTML and easily be used in other applications.

scaleline.PNG

For a full working example, see this Plnkr.