DUOLABS
Work

Web map service build

We took part in building an oil refiner's web map service that shows customers fuel stations and nearby facilities across the country. Most web maps at the time slid static images around; this one chose to let people drag and zoom the map right inside the browser. Internet connections were slow, so a map that opened late or tiles that looked misaligned broke the whole point of a locator. Our part was aligning map tiles with the source map data on screen coordinates, cutting the amount of data sent, and the pan and zoom transitions.

Launch
2007
Client
A Korean oil refiner
Type
Maps & Geospatial
01 / 04

Instead of sliding images, a map that moves inside the browser

This web map service lets customers look up fuel stations and nearby facilities across the country in their browser. Most web maps at the time moved by sliding images sideways. This service chose to take dragging and zooming directly inside the browser. We took part in building it by combining a map library with the source map data.

Instead of sliding images, a map that moves inside the browser
02 / 04

Alignment that keeps map tiles and source data in register

A web map stitches together small map images (tiles) and places positions from the source map data on top. If the two coordinate systems drift even slightly, a fuel station marker lands in the wrong place. We mapped the tiles and the source data onto the same screen coordinates, and found and corrected the map images wherever they looked misaligned on the live screens.

Alignment that keeps map tiles and source data in register
03 / 04

Less data sent, so the map opens on a slow connection

A web map has to fetch the data that fills the screen every time, and connections back then took real time to deliver it. We reduced the amount of map data sent and refined how it was displayed so the map would open even on slow lines. Data exchanged with the server also moved from a heavy tag-wrapped format to a more compact one, lowering the traffic.

Less data sent, so the map opens on a slow connection
04 / 04

Transitions that keep your place while you drag and zoom

When dragging or zooming a map makes the screen jump abruptly, people lose track of where they are looking. We added smooth transitions to panning and zooming so users could follow their position while the scale changed. The map technology built here was later carried over to a fuel-station locator, a bus information map for new towns, and services abroad.

Transitions that keep your place while you drag and zoom

Highlights

01

A web map you drag and zoom inside the browser

02

Map tiles and source map data aligned to screen coordinates

03

Less data on the wire so the map opens on slow connections

Insights

Read the blog