User:Yurik/CenterMap

 { "version": 2, "width": 800, "height": 500, "padding": 0, "signals": [ {     "name": "isDragging", "init": false, "streams": [ {"type": "@handle:mousedown","expr": "true"}, {"type": "mouseup","expr": "false"} ]   },    {      "name": "handlePosition", "streams": [{"type": "mousemove[isDragging]","expr": "eventX"}] },   {      "name": "scaledHandlePosition", "init": 13000, "expr": "handlePosition", "scale": {"name": "scaleScale","invert": true} },   {      "name": "rotate", "init": 0 },   {      "name": "down", "init": {}, "streams": [{ "type": "mousedown", "expr": "{angle: rotate, x: eventX}" }]   },    {      "name": "rotate", "init": 0, "streams": [{ "type": "[mousedown, window:mouseup] > window:mousemove", "expr": "(down.angle + (eventX - down.x)) % 360" }]   }  ],  "scales": [ {     "name": "scaleScale", "type": "linear", "zero": false, "domain": [100, 25000], "range": "width" } ],  "data": [ {     "name": "world", "url": "https://www.mediawiki.org/w/index.php?title=User:Ad_Huikeshoven/gemeenten/topojson&action=raw", "format": {"type": "topojson","feature": "gemeenten"}, "transform": [{ "type": "geopath", "projection": "mercator", "rotate": {"signal": "rotate"}, "scale": {"signal":"scaledHandlePosition"}, "center": [5,53], }]   }  ],  "marks": [ {     "name": "scrollLine", "type": "rule", "properties": { "enter": { "x": {"value": 0}, "y": {"value": 40}, "x2": {"value": 300}, "stroke": {"value": "#000"}, "strokeWidth": {"value": 2} }     }    },    {      "name": "handle", "type": "path", "properties": { "enter": { "y": {"value": 40}, "path": {"value": "m-5.5,-10l0,20l11.5,-10l-11.5,-10z"}, "stroke": {"value": "#880"}, "strokeWidth": {"value": 2.5} },       "update": { "x": {"signal": "handlePosition"}, "fill": {"value": "#fff"} },       "hover": {"fill": {"value": "#f00"}} }   },    {      "type": "path", "from": {"data": "world"}, "properties": { "enter": { "stroke": {"value": "#fff"} },       "update": { "path": {"field": "layout_path"}, "fill": {"value": "#ccc"} },       "hover": { "fill": {"value": "pink"} }     }    }  ] }