Using Aerial Images as Background for the OpenStreetMap iD Editor

We’ve been experimenting with using OpenStreetMap to map some of the rural Bedouin communities in the Negev desert. These are places where a lot of the construction is made of light materials, not easily discrened in a low resolution image and often changing – on top of which, the default satellite images are patchy and not the most amazing quality:

The default background satellite image

We managed to get more recent aerial photos with better resolution, in TIF+TFW files (the method below works for other world files as well, JPW etc). The trick was to convert it to a background tile map. That was simple enough with gdal2tiles:

gdal2tiles.py -s EPSG:3857 -v source/chura1.tif tiles/

Now we’ve got a whole lot of tiles, but we need to serve them from somewhere. Tiles are just a bunch of small static files — I’ve already discovered GitHub Pages is a zero cost and extremely scalable solution for serving them. I created a repo hura_tiles (Hura is the name of the town we’re mapping) and added the new /tiles directory:

git checkout -b gh-pages
git add tiles
git commit -am "add tiles"
git push origin gh-pages

We’re good! All that’s needed now is to is to tell iD to use a custom background layer, and set the URL:

https://niryariv.github.io/hura_tiles/tiles/{z}/{x}/{-y}.png

And here we are. Below are images of of the default and new backgrounds, can you spot the difference?


Since doing this, I’ve learned that this is a pretty common issue when speaking with local municipalities. Seems like pretty much all of them (at least here in Israel) have very good aerial images that are much higher resolution than the satellite images, so being able to use them is a critical need, rather than just a bonus as we initially assumed.

A Sense of Wonder

I recently gave a short talk about Tipa.li at a local dev convention in Tel Aviv, which in turn sparked some brief discussion of its user experience on Twitter. Some criticized it for being too sparse, having no exposition, so to speak – no introduction to explain what it’s about, guide you on how to use it etc.

It’s true. When a user opens http://tipa.li on their (generally mobile) browser, they’re just prompted to allow it to access their location:

Image

And then are shown a neighborhood-level map centered at their location with some markers. Clicking a marker shows the details for a baby wellness clinic – opening times, address, phone number.

Image

The Twitter conversation made me realize this is what I’ve been trying to do all along, with all UIs I had the chance to build or influence. Part of this minimalism is due to pure laziness, but it’s also about particular moment I think good UIs can recreate.

Omri, my son, is now four months old and starting to learn how to use his hands to grab things and move them around (most of time eventually trying to eat them). A great UI can replicate that feeling of getting acquainted with a new object for the first time, tinkering with it a bit, figuring out how to operate it and what it does.

Image

Of course there’s the threat that the interface will be too cryptic for most users to bother with. Fortunately Tipa.li is too tiny to really risk this, but thinking about it instills some respect for the achievement of truly great products, like the first iPhone, which manage to be instantly usable while keeping a sense of wonder about the experience.

Tipa.li – a Tool for Easily Finding Polio Vaccination Clinics

No one is sure what caused the Polio virus, eradicated from Israel since the1990s, to reappear. The virus was detected in sewage samples in the south of the country in early summer and began spreading northwards, prompting Ministry of Health to start a massive vaccination drive.

Parents of children under the age of 9 were asked to bring them to the nearest Tipat Halav clinic for vaccination. Country-run Tipat Halav (in Hebrew, “drop of milk”) childcare clinics are a household name in Israel. Spread throughout the country, they helped it reach some of the world’s lowest infant mortality rates.

The Ministry of Health decided to create a mobile application to help parents find the nearest clinic. It commissioned one of the country’s largest development shops to create it. They decided to create a native app. This is the Android version:

It’s in Hebrew, but you get the idea

I assume the iOS version is still undergoing the App Store approval process.

We discussed the app during lunch at Gizra. We’re no doctors, but we thought we could do something about the software. Going with a native app didn’t seem ideal for a single-use application which needs to be deployed on as many platforms ASAP. As for the UI, I’ll leave the image above as an exercise to the reader.

Lunch concluded with a particularly good Malabi. It’s one of the few deserts I ever bother with, so I’m pretty sure the extra sugar is the reason I shot off a message to the Public Knowledge Workshop mailing list as I got back to my laptop, asking who’s with me – help me scrape the clinic data and I’ll take care of the front end.

Malabi, by naamanus. Best desert ever.

Malabi, by naamanus. This is good.

Within a few hours, a person I’ve never met sent me a link to a JSON file with all the clinics. I still have no idea who this is and how s/he had this file. I geo-encoded a few, put the data on map using GitHub’s geoJSON support, and sent a link back to the mailing list. At 1am that night, Alon Nisser (whom I’ve also never met before) sent some patches that fixed the major missing parts in my code.

By morning we had a working prototype. Meanwhile, Udi Oron and Erez Segall – yet another two people I’ve never met – announced they were working on a more robust scraping code to get all the data from the MoH’s website and encode it reliably.

With the data in Alon, Udi and Erez’s capable hands, I focused on the front end with the goal of keeping it server-free – only HTML/JS code – thus allowing us to develop a quick, simple solution that’s easy to deploy and scale.

The final app is extremely simple. When opening tipa.li (Hebrew wordplay meaning “My drop” or “Tiny drop”) the user is presented with a map, zoomed to the city level and centered on her current location, showing nearby stations. Touching a marker (design donated by Ilan Dray, who I’ve also yet to meet) reveals its street address, opening hours and a phone number.

Tipa.li UI. This is all of it.

Tipa.li UI. This is all of it.

That’s all. No search or distance filtering features to clutter the UI. The user knows better – a more distant station might have better parking, for example. All the stations in the country are the one geoJSON file, so users can find clinics in other locations by just zooming and panning around.

The code is as simple as the UI. The app is one geoJSON file rendered on a MapBox map with the excellent Leaflet.js API. No searching, no AJAX calls to a backend server. Everything is client-side, served from the ultra scalable (and only occasionally down) GitHub Pages.

I’m pretty happy with tipa.li. It’s one of these rare cases where things just work right, from the start – the code, the UI, the development process. The media in Israel liked it too, giving it some nice coverage on Haaretz, Calcalist and some national radio/TV shows, helping us further the cause of opening government data. As for users – within 12 hours of posting the site on Facebook, we’ve passed MapBox’s free quota of 3000 requests. It was a good week.

Tipa.li — a Tool for Easily Finding Polio Vaccination Clinics

No one is sure what caused the Polio virus, eradicated from Israel since the 1990s, to reappear. The virus was detected in sewage samples in the south of the country in early summer and began spreading northwards, prompting Ministry of Health to start a massive vaccination drive.

Parents of children under the age of 9 were asked to bring them to the nearest Tipat Halav clinic for vaccination. Country-run Tipat Halav (in Hebrew, “drop of milk”) childcare clinics are a household name in Israel. Spread throughout the country, they helped it reach some of the world’s lowest infant mortality rates.

The Ministry of Health decided to create a mobile application to help parents find the nearest clinic. It commissioned one of the country’s largest development shops to create it. They decided to create a native app. This is the Android version:


It’s in Hebrew, but you get the idea.

The iOS version, presumably, is still undergoing the App Store approval process (Note: this was published 3 years ago. The iOS version was never released.)

We discussed the app during lunch at work. We’re no doctors, but we thought we could do something about the software. Going with a native app didn’t seem ideal for a single-use application which needs to be deployed on as many platforms ASAP. As for the UI, I’ll leave the image above as an exercise to the reader.

Lunch concluded with a particularly good Malabi. It’s one of the few deserts I ever bother with, so I’m pretty sure the extra sugar is the reason I shot off a message to the Public Knowledge Workshop mailing list as I got back to my laptop, asking who’s with me — help me scrape the clinic data and I’ll take care of the front end.

Malabi, by naamanus. This is good.

Within a few hours, a person I’ve never met sent me a link to a JSON file with all the clinics. I still have no idea who this is and how s/he had this file. I geo-encoded a few, put the data on map using GitHub’s geoJSON support, and sent a link back to the mailing list. At 1am that night, Alon Nisser (whom I’ve also never met before) sent some patches that fixed the major missing parts in my code.

By morning we had a working prototype. Meanwhile, Udi Oron and Erez Segall — yet another two people I’ve never met — announced they were working on a more robust scraping code to get all the data from the MoH’s website and encode it reliably.

With the data in Alon, Udi and Erez’s capable hands, I focused on the front end with the goal of keeping it server-free — only HTML/JS code — thus allowing us to develop a quick, simple solution that’s easy to deploy and scale.

The final app is extremely simple. When opening tipa.li (Hebrew wordplay meaning “My drop” or “Tiny drop”) the user is presented with a map, zoomed to the city level and centered on her current location, showing nearby stations. Touching a marker (design donated by Ilan Dray, who I’ve also yet to meet) reveals its street address, opening hours and a phone number.


Tipa.li UI. This is all of it.

That’s all. No search or distance filtering features to clutter the UI. The user knows better — a more distant station might have better parking, for example. All the stations in the country are the one geoJSON file, so users can find clinics in other locations by just zooming and panning around.

The code is as simple as the UI. The app is one geoJSON file rendered on a MapBox map with the excellent Leaflet.js API. No searching, no AJAX calls to a backend server. Everything is client-side, served from the ultra scalable (and only occasionally down) GitHub Pages.

I’m pretty happy with tipa.li. It’s one of these rare cases where things just work right, from the start — the code, the UI, the development process. The media in Israel liked it too, giving it some nice coverage on Haaretz, Calcalist and some national radio/TV shows, helping us further the cause of opening government data. As for users — within 12 hours of posting the site on Facebook, we’ve passed MapBox’s free quota of 3000 requests. It was a good week.


Originally published at niryariv.wordpress.com on September 3, 2013.

Around Here & the New GeoCities

I know I’m not the only one who needs a map in Jerusalem:


Problem is, a simple map is not enough here. Some places just really accentuate a dimension. Australia taught us to respect distance, driving our camper all day to cover a mere wrinkle on the map. Manhattan forces you to acknowledge it is 3 dimensional. Jerusalem is impossible to understand if you ignore the dimension of time.

So I made a little app I call “Around Here” which shows wiki articles around my current location:


It’s not a lot of code, but actually pretty useful. I mostly use it on my phone, but it works on laptop, tablet and would work right here too if WordPress would allow embedding JS.

Building it made me think of how much the web has changed in the last couple of years. Have you noticed how much you can do with JavaScript now? All the awesome libraries coming out? Not even node.js, just old fashioned client-side JS.

Programming languages are like musical genres. New ones are created, existing ones change and move in and out of fashion, but every once in a while a specific genre will experiences a sudden explosion of creativity. If JavaScript is Punk rock I guess this is the mid-1970s now. (Note: I’m importing this to Medium now, and realize in the four years since blogging this JS has shifted to the tedious, self absorbed and skill-obsessed prog rock of the late ‘70s)

HTML5 and modern browsers’ capabilities are a major factor, but also some slower moving, deep server side changes:

  1. Continued APIzation of everything allowed me to write the app using the WikiLocation API instead of my own DB backend. An embeddable service like Disqus enables pure HTML Jekyll blogs to have active comments. If your data is not sensitive you could even use a Google Spreadsheet as your DB.
  2. Decreasing costs of serving HTML/JS/CSS only pages now allow GitHub to let you serve your pages for free, with no restriction on content and almost no scaling limit. Basically you could do that in 1995 with GeoCities — look how much more you can do with just the above client side technologies now.

So, what we used to call “static pages” are now becoming increasingly powerful, and free. There’s an odd back to basics feel as we’re crossing a gap between very low cost to zero cost for serving a useful, highly scalable app. It might turn out a big deal. More importantly, coding is fun again.


Originally published at niryariv.wordpress.com on December 25, 2012.

Around Here, the New GeoCities

I know I’m not the only one who needs a map in Jerusalem:

Old City Map

Problem is, a simple map is not enough here. Some places just really accentuate a dimension. Australia taught us to respect distance, driving our camper all day to cover a mere wrinkle on the map. Manhattan forces you to acknowledge it is 3 dimensional. Jerusalem is impossible to understand if you ignore the dimension of time.

So I made a little app I call “Around Here” which shows wiki articles around my current location:

around-here

It’s not a lot of code, but actually pretty useful. I mostly use it on my phone, but it works on laptop, tablet and would work right here too if WordPress would allow embedding JS.

Building it made me think of how much the web has changed in the last couple of years. Have you noticed how much you can do with JavaScript now? All the awesome libraries coming out? Not even node.js, just old fashioned client-side JS.

Programming languages are like musical genres. New ones are created, existing ones change and move in and out of fashion, but every once in a while a specific genre will experiences a sudden explosion of creativity. If JavaScript is Punk rock I guess this is the mid-1970s now.

punk

HTML5 and modern browsers’ capabilities are a major factor, but also some slower moving, deep server side changes:

  1. Continued APIzation of everything  allowed me to write the app using the WikiLocation API instead of my own DB backend. An embeddable service like Disqus enables pure HTML Jekyll blogs to have active comments. If your data is not sensitive you could even use a Google Spreadsheet as your DB.
  2. Decreasing costs of serving HTML/JS/CSS only pages now allow GitHub to let you serve your pages for free, with no restriction on content and almost no scaling limit. Basically you could do that in 1995 with GeoCities – look how much more you can do with just the above client side technologies now.

So, what we used to call “static pages” are now becoming increasingly powerful, and free. There’s an odd back to basics feel as we’re crossing a gap between very low cost to zero cost for serving a useful, highly scalable app. It might turn out a big deal. More importantly, coding is fun again.