Monday 12 December 2016

Leaflet plugin

I have been trying to replace a long-standing map based on the OpenLayers 2 library to LeafletJS. The main sticking point was that OpenLayers has a useful permalink function that changes the URL to include a query string that identifies the map location and which layers should be shown. 

Leaflet has a neat plugin to show the location as a hash but that doesn't include the layers to show. After a bit of investigation I decided to try to write a Leaflet plugin to make all this easier.

If a map has optional base layers and some overlays it often will use the Layers control to make the choices easy to select. The layers are not easily accessible from the map object as only the currently displayed layers, not the hidden ones, are available. The Layers control has access to all the layers, but that control is not accessible from the central map object. The only way to have access to all of the layers is from the Layers control, so a new control, inherited from the Layers control seemed to be the right answer. HashLayers control was developed.

HashLayers does all that the Layers control does, of course, but adds the functionality of the URL hash. The hash looks like this:
This gets appended to the URL of the page that the map is on. Using the hash means the position and layers can be changed dynamically as the map is zoomed or scrolled around and as different layers are selected. Changing the hash value of a URL doesn't force a reload of the page and doesn't show up in browser history.

The zoom is the current zoom level and longitude and latitude are the centre of the map. The layers is a string representing the base layers and any overlays. If a base layer is selected 'B' is shown, 'O' shows an available base layer not selected. The overlays are shown as a string of 'T' or 'F' (true or false) showing if they are shown or not. A typical hash might be:
 This has the first base layer visible, the second one not showing and four overlays available, but with only the third one visible. These selections will be reflected in the visible selection control too.

If a map is created with the HashLayers control on it and a hash is passed in the URL, the map will centre on the location and zoom specified and show the requested layers. If no hash is passed then the default location and zoom will be used from the setView() or map options as normal. Layers will be shown as they were added to the map. A hash to reflect all this will be appended to the URL which gets updated with every change. There is no need for the OpenLayers permalink control.

I now need to test it more carefully and decide if it is worth publishing as a Leaflet plugin.

Saturday 3 December 2016

Replacing OpenLayers

When OS released their Open Data I created a simple map that showed a few of their offerings as overlays on an OSM base layer At the time my maps were driven by OpenLayers. OpenLayers v2 works well but is a lot harder to use than LeafletJS. As soon as Leaflet arrived I started to use that and it has only got better as time has passed. There is OpenLayers v3 available I think, but I doubt I'll use it.

OpenLayers has a permalink option that changes the URL in the browser to include a query string describing the location of the centre of the map and the zoom level. This lets you bookmark or send a link that will open the map in the right place. Leaflet has a plugin to create a hash on the URL that does a similar thing.  It works well but there is a bit of a problem.

The OpenLayers permalink adds a 'layers=' bit to the URL. An example would be BOTFF. This means the first base layer is shown and not the second one, then the first overlay is visible but not the second or third. This great, because not only does the URL make map show the right place, but the overlay you wanted to show will also appear too. Leaflet's hash plugin doesn't do this and that is a problem for me.

I decided to replace the map showing the OS overlays using Leaflet. It was quick to do and works well, but I can't use it as the replacement for the OpenLayers map because Leaflet doesn't have a built-in way to show the layers that were selected. People link to my map, according to the logs, with the query string to select the place and layers. If I just replaced it with the Leaflet-based map their links would all fail. They couldn't create a new bookmark that includes the layers to show either. I decided to fix this.

I looked into the documentation for the latest version of Leaflet (1.0.2 at the time of writing). The documentation is very useful. If there are overlays on a map a layers control can be added that allows the overlays to be selected. There can also be more than one base layer that the control allows you to select.

I thought about a generic way to create a similar effect to the OpenLayers permalink. For a one-off map I can code up the layers to do as I need, but a generic version would be useful. I can get at the layers that a map is currently showing, but Leaflet's way of hiding a layer is to remove it from the map. The definition of that layer is then not accessible from the map object. I couldn't see how to find the list of layers including the ones not displayed. The layers control has a list of the layers it uses, which would be ideal, but I couldn't find any way to find a a reference to that from the map object. There doesn't seem to be any way to find any controls from the map object. A map method that returns a list of controls might be useful.

So far I have created a bespoke version of the Leaflet map I wanted. It will accept an OpenLayers-style URL, display the map and create a Leaflet-style URL. I'm thinking about how to duplicate the OpenLayers feature more generically. I have ideas ...

Monday 14 November 2016

A Map in an App

Maps come in all shapes and sizes. I've made maps for a few different uses and since Openstreetmap came along there's always been some part of OSM in my maps. I offered to make a map for Clockenflap Music and Arts Festival in Hong Kong, so I expected to use OSM as the base. What I've ended up with uses the tools to create and display the map: JOSM, osm2pgsql, Tilemill, Mapnik and Leaflet, but none of OSM's greatest asset, its data.

Clockenflap, like most festivals, is largely a temporary venue. This year it's a new venue to Clockenflap on the Central Harbour-front Event Space. I looked at the area on OSM and how to map the temporary stuff that the event will put up. There's seven stages, food stalls, bars, attractions, art installations and all the usual support stuff like toilets, first aid and entrance and exit gates. That's a lot of stuff to add to OSM temporarily. Worst of all, when I started to look at it the site design was still not fixed. I quickly decided that it needed to be stored locally and not uploaded to OSM at all.

The map is embedded in an app, which I'm not writing. The idea is to run the map in a Webview with a JavaScript Leaflet-based display and it works well. The map has a base layer with all the services on it and layers of overlays with icons that can be clicked. In the apps (one iOS and one Android) the JavaScript in the Webview calls a native iOS or Android function when an icon is touched.  So instead of a web popup the app can respond with a dialog or a more detailed response. For example, if a stage icon is touched the app can show what acts are on the stage now and on next.  The reverse is true too. For example, if the user scrolls through the list of food suppliers in the app and chooses one, the map is called and shows where the food stall is on the site. I can't show the apps yet, but a working example of the map is here.

The festival team provided the icons and the look of the map. I think it looks very good. There are sponsors who need to see their logos and colour schemes and the map needs to reflect this, as well as being useful for getting around on a site that no one knows their way around because it is only a day or two old.

A few things are quite different from most of the maps I've made before. Driving the map from a phone screen is a challenge.  Trying to get specific icons on the map so they are big enough to read on smaller screen, but don't overlap too much is tricky. At the lowest zoom level (17) very little is shown by default. If all the overlays are show it is a jumble, there's just no choice.
Lots to fit on at low zoom if everything is turned on
Food stalls need room for their much longer real names
By the time we get to the highest zoom level (22) there's lots of space in most places. I needed that zoom level to comfortably resolve the food stalls, which are 3m x 3m, with an icon and room for their name. I needed to display a lot of food supplier names close together and the names needed to respond to a touch (or click). I used the Leaflet plugin Leaflet.Label for this. If I had used Leaflet 1.0, rather than 0.7, I think I could have used built-in tool tips instead.

There is an optical illusion when you zoom in on an icon, especially on a phone where you use pinch zoom. If you show the higher zoom level with the same size icon on it the icon seems to have shrunk. People expect pinch zoom to make things bigger, so I increase the size of the icons as each level zooms in. That is easy for the stuff on the base map, Tilemill makes that simple, but scaling the icons on overlays took a bit of code I'd not needed to use before. This involves resizing the icon and using setIcon() to use the newly sized icon in a marker. setIcon() is not documented in Leaflet 0.7, but works just the same.

The standard Leaflet layer control is much too small for a mobile phone. I tweaked the size and position with CSS. I also discovered that you don't need a base layer on the control and you can force it to always be open. Both are perfectly plainly described in the really good documentation of Leaflet, I'd just not read that bit before.

I control the markers on the map by describing them in geoJson files, one for each overlay. To position the many markers on the map I created a simple editor which uses the Leaflet.Draw plugin, which is really simple to use in code and produces a very useful editor.

I have enjoyed creating this map and working with creative people who have an absolute deadline to work to. If you are in Hong Kong on 25 - 27th November enjoy Clockenflap and enjoy using my map to find all the stuff Clockenflap has to offer.

Friday 5 February 2016

Drains and meadows

I mapper jumped into mapping the rural areas of East Yorkshire more than a year ago but, sadly, seems to have stopped. This mapper has added farmland and woods in much more detail than anything before and has drawn the outlines of lots of buildings in villages too. There are a couple of things that I've decided to change in any areas that I take a look at now. That is meadows and drains.

Meadows are a special thing in Britain, with most having disappeared. They are not just areas of grassland but a very specific kind of management, involving no fertiliser, a careful cutting of the grass for hay more than once a year and some animal grazing, but not all year round. The timing of the hay cuts allows wild flowers to flourish as they have time to set seed before they are cut down. This makes a beautiful landscape that has all but vanished from the English countryside. The mapper has made the mistake that almost any green field in the aerial imagery is a meadow, so I'm checking as best I can on the ground and changing it to farmland unless it really is a meadow. The farmland is drawn with each field outlined which means I can try to add hedges when I see them. This too improves the quality of the rural mapping.

The other problem is that every field-side ditch has been mapped as a drain. This is further worsened by another mapper doing the same thing in Holderness, the flat land to the east of Hull. There are some waterways I would call a drain there, but most are ditches in my view. A ride out doesn't cover much ground to correct this and imagery is ambiguous at best. So there's lots to check and much will change.

The East Riding countryside is a great place to spend time; having an excuse to carefully explore and examine more of it in detail is no bad thing, so I'm not complaining.

Tuesday 2 February 2016


People meet up in a few areas across Britain drawn together to share views and ideas about OSM. One of these is known as Mappa Mercia, meeting in the old Kingdom of Mercia, roughly the Midlands. They started a quarterly series of projects which encourages people to focus on improving specific areas, such as nature reserves. This quarter it is schools.

People across Britain have taken to the suggestion of checking schools and improving the quality of recording schools. This is a simple idea that will greatly improve the quality of data in OSM, something that the quarterly projects have always aimed at. It's a great idea and something I support.

There is a list of UK schools available as open data which Robert has used to show a map of how well the schools in the list are represented in OSM. It uses postcode areas as that is how the open data is structured. This is a very good indicator of areas that still need work.

This is all useful, but then I think the project took a wrong turn. People were encouraged to add a hashtag to changeset comments. This has then been used to produce a list of people who have contributed the most changes to the project. I don't like this. OSM is not a competition and turning it into one encourages edits just to climb the list (I'm not accusing anyone of that, just that the pressure is created). We have seen that with the list of anomalies published between OS Locator road names and OSM road names. To push an area up the list people just use the OS Locator names without checking. I know that OS Locator contains errors and there is a mechanism to record these, but many areas have very few recorded errors, so erroneous OS data is now in OSM.

I like the idea of focussing on improving specific things in OSM. It should encourage surveying. I would prefer it is not be seen as a competition.