Tag: svg

Rotate and pinch OSM map with geojson data

21. September 2015

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