Creating maps in HTML and CSS

Abstract: When it comes to highlighting certain areas of a country, use map fonts instead of SVGs whenever possible. If you don’t have a map font, build one.

Imagine you wanted to highlight certain areas of a country for datavis reasons without using any Flash or flashy stuff. You only speak HTML and CSS. You want the map to work in all browsers and all resolutions. You want lossless scalability and you also want to provide mobile users with a fast and pleasant UX. And you don’t want to pay someone to do the job.

There are different ways to display cartographic data in your browser using only HTML and CSS, and embedding a JPG is obviously not an option. In this post, I shall discuss two methods, both of which use an SVG file of the desired area. The first one is to tinker with the XML source of a public domain SVG, the second one is to create a map font out of such. Each method caters to different needs and has different disadvantages. (more…)

Beautiful drawing of a Plant

« | »