Maps on Blackboard

Here goes the fully navigable (pinch, drag and rotate) OSM map overlaid with GeoJSON data. In fact many framework support that (except rotation) where you can configure source of the map tiles and your sloppy map is ready. While here my effort is to make the maps application modular you should be able to choose your own choice of modules like for interaction use Hammer.js or jQuery Touchy.

Two of my previous articles Can you rotate and pinch the SVG map? and Map of OSM tiles with rotation explain maps navigation of SVG map and mapping of OSM tiles respectively. For SVG map navigation I had used emptymap.js for maps calculations and Hammer.js for screen interaction. To make map with OSM tiles I had used map-the-tiles that calculates the image tiles for given map center, zoom and rotation.

Now I have created a navigable map with OSM tiles and GeoJSON data overlaid as SVG. emptymap.js module has the functionality to handle maps interactions on SVG (scalable layer) and image tiles (non-scalable layer) by applying the transformation matrix to respective HTML elements. These two previous articles Can you rotate and pinch the SVG map? and Map of OSM tiles with rotation explains in detail the concept and functionality of emptymap.js and map-the-tiles. So please go through these articles before continuing here.

more

I wanted to use svg fill patterns for thematic maps. I found an interesting library patternfills and filled the whole world with one of the pattern. Defining SVG patterns and using with geojson2svg was quite easy. I’ll explain the basic usage of SVG fill patterns here.

more