Unlike traditional raster tiles, vector maps are drawn by the browser on the fly, making them completely scalable at any zoom level. This means that transitions across zoom levels are smooth, with no jumps between levels.
This makes animations seamless, for incredibly interactive, game-like applications.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js" charset="utf-8"></script> | |
| <script src="https://developer.mapsense.co/mapsense.js" charset="utf-8"></script> | |
| <link type="text/css" href="https://developer.mapsense.co/mapsense.css" rel="stylesheet"/> | |
| <style> | |
| html, body, #myMap{ | |
| height: 100%; | |
| width: 100%; | |
| margin: 0; padding: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="myMap"></div> | |
| <script> | |
| var map = mapsense.map("#myMap"); //tell it where to go | |
| map.add( | |
| mapsense.basemap() | |
| .apiKey("key-2d5eacd8b924489c8ed5e8418bd883bc") | |
| ) | |
| .center( {lon: -82.645, lat: 40.985}) //set a center | |
| .zoom(5); //set a zoom | |
| /** | |
| * Transition the map over the great arc from its center to 'to'. | |
| * | |
| * @param map The map | |
| * @param to [lon, lat] | |
| * @param duration The length of the transition, in millis. | |
| * @param ease An optional easing function, as produced by d3.ease. | |
| * Defaults to d3.ease('cubic-in-out'). | |
| */ | |
| function panBounce(map, to, duration, ease) { | |
| if (!ease) ease = d3.ease('cubic-in-out'); | |
| var from = [map.center().lon, map.center().lat]; | |
| var interp = d3.geo.interpolate(from, to); | |
| var start = Date.now(); | |
| function t() { return (Date.now() - start) / duration; }; | |
| d3.timer(function() { | |
| var _t = t(); | |
| if (_t < 1) { | |
| var mid = interp(ease(_t)); | |
| map.center({lon: mid[0], lat: mid[1]}); | |
| return false; | |
| } else { | |
| map.center({lon: to[0], lat: to[1]}); | |
| panBounce(map, from, duration, ease); | |
| return true; | |
| } | |
| }); | |
| } | |
| panBounce(map, [ -122.279109, 37.838074], 2500) | |
| </script> | |
| </body> | |
| </html> |
| .map { | |
| background-color: white; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| path { | |
| vector-effect: non-scaling-stroke; | |
| stroke-linejoin: round; | |
| stroke-linecap: round; | |
| } | |
| .tile-background { | |
| fill: rgb(184, 189, 193); | |
| } | |
| .agriculture { | |
| display: none; | |
| } | |
| path._undefined.none { | |
| fill: none; | |
| } | |
| .land { | |
| fill: rgb(227, 214, 197); | |
| stroke: rgb(151, 111, 96); | |
| stroke-width: 1; | |
| } | |
| .water_polygon { | |
| fill: rgb(184, 189, 193); | |
| stroke: rgb(151, 111, 96); | |
| stroke-width: .5; | |
| } | |
| .water_line { | |
| stroke: rgb(184, 189, 193); | |
| stroke-width: 1; | |
| opacity: .3; | |
| fill: none; | |
| } | |
| .park { | |
| fill: rgb(203, 188, 166); | |
| stroke-width: .55; | |
| stroke: none; | |
| opacity: .3; | |
| } | |
| .building { | |
| fill: rgb(212, 201, 186); | |
| stroke: none; | |
| stroke-width: .52; | |
| } | |
| .school { | |
| fill: rgba(90, 46, 5, 0.12); | |
| stroke: none; | |
| } | |
| .other { | |
| fill: rgb(227, 214, 197); | |
| stroke: none; | |
| } | |
| .urban { | |
| fill: rgba(255, 255, 255, 0.3); | |
| stroke: none; | |
| } | |
| .roads { | |
| stroke-linejoin: round; | |
| fill: none; | |
| } | |
| .ne_10m_roads { | |
| stroke: rgb(174, 162, 149); | |
| stroke-width: 1; | |
| } | |
| .motorway { | |
| stroke: rgb(161, 141, 127); | |
| stroke-width: 1; | |
| } | |
| .arterial_major { | |
| stroke: rgb(213, 197, 183); | |
| stroke-width: 1; | |
| } | |
| .arterial_minor { | |
| stroke: rgb(202, 183, 170); | |
| stroke-width: 1; | |
| } | |
| .road_med { | |
| stroke: rgb(216, 200, 187); | |
| stroke-width: 1; | |
| } | |
| .road_minor { | |
| stroke: rgba(198, 176, 159, 0.55); | |
| stroke-width: 1; | |
| } | |
| .rail_major { | |
| stroke: rgb(151, 125, 101); | |
| stroke-dasharray: 3 5; | |
| stroke-width: 1; | |
| } | |
| .rail_minor { | |
| stroke: rgb(172, 157, 140); | |
| stroke-dasharray: 3 3; | |
| stroke-width: 1; | |
| } | |
| .runway { | |
| stroke-width: black; | |
| stroke: rgb(198, 165, 144); | |
| } | |
| .path { | |
| stroke: rgb(185,185,185); | |
| stroke-dasharray: 3 3; | |
| stroke-width: 1; | |
| } | |
| .country_border disp_border{ | |
| stroke: rgb(151, 111, 96); | |
| stroke-dasharray: 6 2; | |
| stroke-width: 1; | |
| fill: none; | |
| } | |
| .state_border{ | |
| stroke: rgb(151, 111, 96); | |
| stroke-dasharray: 3 3; | |
| fill: none; | |
| } | |