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

As I am writing the blog you might have guessed that answer is going to be yes. I mean not only drag, pinch and rotation but also retrieving map’s view (center coordinate, zoom level/ resolution and rotation angle) after applying many touch operations. So I want to create all maps navigation features and along with handling of maps view state in maps coordinate system. In some of my previous articles like Thematic map with geojson2svg and Interactive map for data visualization I have explained how easily we can create the SVG maps with GeoJSON data. In this article I’ll implement emptymap.js with Hammer.js to achieve maps navigation.

more