CINXE.COM
Mapzen 路 an open, sustainable, and accessible mapping platform
<!DOCTYPE html> <html lang='en-us'> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width, initial-scale=1'> <title> Mapzen 路 an open, sustainable, and accessible mapping platform </title> <meta name='description' content='Start where you are'> <link rel='apple-touch-icon' href='/assets/common/styleguide/images/favicons/apple-touch-icon.png' sizes='180x180'> <link rel='icon' type='image/png' href='/assets/common/styleguide/images/favicons/favicon-16x16.png' sizes='16x16'> <link rel='icon' type='image/png' href='/assets/common/styleguide/images/favicons/favicon-32x32.png' sizes='32x32'> <link rel='manifest' href='/assets/common/styleguide/images/favicons/manifest.json'> <link rel='mask-icon' href='/assets/common/styleguide/images/favicons/safari-pinned-tab.svg' color='#2C1E3F'> <link rel='stylesheet' href='/stylesheets/pygments.css' type='text/css'> <link rel='stylesheet' href='/assets/common/styleguide/styles/website.min.css?1624544694359593085' type='text/css'> <link rel='canonical' href='https://mapzen.com/'> <link rel='alternate' type='application/atom+xml' title='Mapzen (Atom)' href='/atom.xml'> <link rel='alternate' type='application/rss+xml' title='Mapzen (RSS)' href='/rss.xml'> <!-- start Mixpanel --><script type="text/javascript">(function(e,a){if(!a.__SV){var b=window;try{var c,l,i,j=b.location,g=j.hash;c=function(a,b){return(l=a.match(RegExp(b+"=([^&]*)")))?l[1]:null};g&&c(g,"state")&&(i=JSON.parse(decodeURIComponent(c(g,"state"))),"mpeditor"===i.action&&(b.sessionStorage.setItem("_mpcehash",g),history.replaceState(i.desiredHash||"",e.title,j.pathname+j.search)))}catch(m){}var k,h;window.mixpanel=a;a._i=[];a.init=function(b,c,f){function e(b,a){var c=a.split(".");2==c.length&&(b=b[c[0]],a=c[1]);b[a]=function(){b.push([a].concat(Array.prototype.slice.call(arguments, 0)))}}var d=a;"undefined"!==typeof f?d=a[f]=[]:f="mixpanel";d.people=d.people||[];d.toString=function(b){var a="mixpanel";"mixpanel"!==f&&(a+="."+f);b||(a+=" (stub)");return a};d.people.toString=function(){return d.toString(1)+".people (stub)"};k="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config reset people.set people.set_once people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" "); for(h=0;h<k.length;h++)e(d,k[h]);a._i.push([b,c,f])};a.__SV=1.2;b=e.createElement("script");b.type="text/javascript";b.async=!0;b.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";c=e.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c)}})(document,window.mixpanel||[]); mixpanel.init("214dee7834f4d1f4740fcd5f15f38152");</script><!-- end Mixpanel --> </head> <body class='default_fluid '> <nav class='navbar navbar-default navbar-fixed-top' role='navigation'> <div class='container-fluid'> <div class='navbar-header'> <button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#navbar-menu'> <span class='sr-only'>Toggle navigation</span> <span class='icon-bar top-bar'></span> <span class='icon-bar middle-bar'></span> <span class='icon-bar bottom-bar'></span> </button> <a class='navbar-brand' href='/'> <div class='mapzen-logo'></div> <h1 class='sr-only'>Mapzen</h1> </a> </div> <!-- new nav bar showing user's login status --> <div class='collapse navbar-collapse' id='navbar-menu'> <ul class='nav navbar-nav navbar-left'> <li class='inactive'><a href='/projects/'>Projects</a></li> <li class='inactive'><a href='/documentation/'>Documentation</a></li> <!--<li class='inactive'><a href='/pricing/'>Pricing</a></li>--> <li class='inactive'><a href='/blog/'>Blog</a></li> </ul> <!-- <ul class='nav navbar-nav navbar-right'> <li class="inactive dropdown"><a id='sign-in' href='/developers/sign_in'> </a></li> <li class="inactive"><a id='sign-up' href='/developers/sign_up'> </a></li> </ul> --> </div> </div> </nav> <div class='container-fluid' id='content'> <!-- This purple-contour background is temporary, we should have some images for mobile --> <div id="hero-video-wrapper" class='index-main-hero row'> <iframe id="hero-video" class="hero-background-wrapper video" src="https://player.vimeo.com/video/222707958?loop=1&title=0&byline=0&portrait=0&background=1"> <img src="/resources/placeholders/minified-placeholder.jpg"></iframe> </iframe> <div class="preview-image" id="video-placeholder-img"></div> <!-- <div id="hero-mobile-image" class="with-background purple-contour hero-background-wrapper mobile-image"></div> --> <div class="index-hero-float-box"> <div class="container headroom-extra-large"> <div class="row"> <div class="col-xs-12"> <div class="index-hero-copy-wrapper"> <h1> Get driving, biking, walking and transit navigation in your app</h1> <div class="row"> <div class="hidden-xs col-sm-12"> <a class="btn btn-with-arrow" href="/products">View all projects</a> </div> <div class="col-xs-12 hidden-sm hidden-md hidden-lg"> <a class="btn btn-mapzen btn-flexible" href="/products">View all projects</a> </div> </div> </div> </div> </div> </div> </div> </div> <section class='row full-section expanded'> <div class='col-xs-12'> <div class='container'> <div class='row'> <div class='col-sm-6'> <h2 class='mt-md-5 mt-sm-0'>Route. Search. Map.</h2> <p> Make fast and responsive maps look good anywhere your customers are. Search the planet, and get there fast with turn by turn navigation. </p> <a href="/products" class='btn hidden-xs btn-primary headroom-med'> View all Projects</a> <a href="/documentation" class='btn hidden-sm hidden-md hidden-lg btn-with-arrow headroom-med footroom-med'> View Documentation </a> </div> <div class='col-sm-6'> <div class='overflowing-right gradation'> <img src='resources/feature1.png' width = "100%"> </div> </div> </div> </div> </div> </section> <section class='row full-section with-background purple-contour expanded'> <div class='col-xs-12'> <div class='container'> <div class='row'> <div class='col-xs-12 col-sm-6'> <h2 class='footroom-med'>Maps for every device and platform.</h2> <p> Build a map in minutes, whether you're using JavaScript, Android, iOS, or Tizen. </p> <p > With Mapzen's developer tools, you can get a map anywhere: on a browser, a phone, a tablet, or a watch. Build your map in minutes, whether you're using JavaScript, Android, iOS, or Tizen. Use gorgeous 2D and 3D styles created by our expert designers, or customize your own with our flexible styling tools. Use our data, or your own. </p> <a href="/documentation" class='btn btn-white btn-flexible headroom-med'> View Documentation </a> </div> <div class='hidden-xs col-sm-6'> <div class='overflowing-right'> <div class='editor-wrapper'> <pre class='editor-snippet'> <span class="cp"><!DOCTYPE html></span> <span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span> <span class="nt"><head></span> <span class="nt"><title></span>My Web Map<span class="nt"></title></span> <span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">></span> <span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://www.nextzen.org/js/nextzen.css"</span><span class="nt">></span> <span class="nt"><script </span><span class="na">src=</span><span class="s">"https://www.nextzen.org/js/nextzen.min.js"</span><span class="nt">></script></span> <span class="nt"><style></span> <span class="nf">#map</span> <span class="p">{</span> <span class="k">height</span><span class="o">:</span> <span class="m">100%</span><span class="p">;</span> <span class="k">width</span><span class="o">:</span> <span class="m">100%</span><span class="p">;</span> <span class="k">position</span><span class="o">:</span> <span class="k">absolute</span><span class="p">;</span> <span class="p">}</span> <span class="nt">html</span><span class="o">,</span> <span class="nt">body</span> <span class="p">{</span> <span class="k">margin</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> <span class="k">padding</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> <span class="nt"></style></span> <span class="nt"></head></span> <span class="nt"><body></span> <span class="nt"><div</span> <span class="na">id=</span><span class="s">"map"</span><span class="nt">></div></span> <span class="nt"><script></span> <span class="kd">var</span> <span class="nx">map</span> <span class="o">=</span> <span class="nx">L</span><span class="p">.</span><span class="nx">Mapzen</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="s1">'map'</span><span class="p">);</span> <span class="nx">map</span><span class="p">.</span><span class="nx">setView</span><span class="p">([</span><span class="mf">37.7749</span><span class="p">,</span> <span class="o">-</span><span class="mf">122.4194</span><span class="p">],</span> <span class="mi">12</span><span class="p">);</span> <span class="nt"></script></span> <span class="nt"></body></span> <span class="nt"></html></span> </pre> </div> </div> </div> </div> </div> </div> </section> <section class='row full-section expanded'> <div class='col-xs-12'> <div class='container'> <div class='row'> <div class='col-sm-6'> <p> <small class='copyright'>This site is powered by <a href="https://www.netlify.com">Netlify</a>, thanks!</small> </p> </div> </div> </div> </div> </section> <script src='https://player.vimeo.com/api/player.js'></script> <script> (function() { var heroVideoWrapper = document.getElementById('hero-video-wrapper'); var heroVideo = document.getElementById('hero-video'); var placeholderImg = document.getElementById('video-placeholder-img'); var player = new Vimeo.Player(heroVideo); var controlHeight = 80; var controlWidth = 50; var hdRatio = 1.77; var videoStarted = false; var resize = function (elem) { var windowH = heroVideoWrapper.clientHeight; var windowW = heroVideoWrapper.clientWidth; /* getting right ratio for video */ if (windowW/windowH > hdRatio) { elem.style.width = windowW + controlWidth + (controlHeight * hdRatio) + 'px'; elem.style.height = ((windowW + controlWidth) * 1/hdRatio)+ controlHeight + 'px'; } else { elem.style.height = (windowH + controlHeight) + (controlWidth * 1/hdRatio) + 'px'; elem.style.width = ((windowH + controlHeight) * hdRatio) + controlWidth + 'px'; } } var showVideo = function () { /* on small screen, don't play video */ var windowW = heroVideoWrapper.clientWidth; if (windowW >= 768 ) { player.play().then(function() { /* add cue point event */ player.addCuePoint(0.3, { customKey: 'showVideo' }).then(function(id) { // cue point was added successfully player.on('cuepoint', function() { videoStarted = true; placeholderImg.style.display = 'none'; resize(heroVideo); }); }).catch(function(error) { /* Do not do anything (just leave preview image) when error occurs */ /* switch (error.name) { case 'UnsupportedError': // cue points are not supported with the current player or browser break; case 'RangeError': // the time was less than 0 or greater than the video鈥檚 duration break; default: // some other error occurred break; } */ }); }).catch(function(error) { /* do nothing */ }); } } showVideo(); resize(heroVideo); resize(placeholderImg); /* optimize window resize event */ function actualResizeHandler() { if (!videoStarted) resize(placeholderImg); resize(heroVideo); } var resizeTimeout; function resizeThrottler() { // ignore resize events as long as an actualResizeHandler execution is in the queue if (!resizeTimeout) { resizeTimeout = setTimeout(function() { resizeTimeout = null; actualResizeHandler(); // The actualResizeHandler will execute at a rate of 15fps }, 66); } } window.addEventListener('resize', resizeThrottler, false); })(); </script> </div> <footer> <div class='container hidden-print footer-no-background'> </div> <div class='headroom-large footer-background'> <div class='container'> <div class='row headroom-large footer-menu hidden-print'> <div class='col-xs-5 col-xs-offset-1 col-sm-5 col-sm-offset-0'> <div class='row'> <div class="col-xs-12 col-sm-6"> <h6><a href="https://mapzen.com/products/">Projects</a></h6> <ul> <li><a href="https://mapzen.com/products/maps/">Map display</a></li> <li><a href="https://mapzen.com/products/search">Search</a></li> <li><a href="https://mapzen.com/products/search">Autocomplete</a></li> <li><a href="https://mapzen.com/products/turn-by-turn">Turn-by-Turn</a></li> <li><a href="https://mapzen.com/products/isochrone/">Isochrone</a></li> <li><a href="https://mapzen.com/products/map-matching/">Map Matching</a></li> <li><a href="https://mapzen.com/products/optimized-route/">Optimized Route</a></li> <li><a href="https://mapzen.com/products/time-distance-matrix/">Time-distance Matrix</a></li> <li><a href="https://mapzen.com/projects/mobile/">Mobile</a></li> <!--<li><a href="https://mapzen.com/pricing/">Pricing</a></li>--> </ul> </div> <div class="col-xs-12 col-sm-6"> <h6><a href="https://mapzen.com/products/#data">Data</a></h6> <ul> <li><a href="https://mapzen.com/projects/vector-tiles/">Vector Tiles</a></li> <li><a href="https://mapzen.com/documentation/terrain-tiles/">Terrain Tiles</a></li> <li><a href='https://whosonfirst.org/'>Who's On First</a></li> <li><a href='https://transit.land/'>Transitland</a></li> <li><a href="https://mapzen.com/data/elevation/">Elevation</a></li> <li><a href="https://mapzen.com/data/metro-extracts/">Metro Extracts</a></li> </ul> </div> </div> </div> <div class='col-xs-5 col-sm-7'> <div class='row'> <div class="col-xs-12 col-sm-5"> <h6>Developers</h6> <ul> <!-- <li><a href="https://mapzen.com/dashboard">Developer Platform</a></li> --> <li><a href="https://mapzen.com/documentation/">Documentation</a></li> </ul> </div> <div class="col-xs-12 col-sm-4"> <h6>About</h6> <ul> <li><a href="https://mapzen.com/about/">Who we are</a></li> <li><a href="https://mapzen.com/code-of-conduct/">Code of conduct</a></li> <!--<li><a href="https://mapzen.com/jobs/">Jobs</a></li>--> <!--<li><a href="https://mapzen.com/terms/">Terms</a></li>--> <!--<li><a href="https://mapzen.com/privacy/">Privacy policy</a></li>--> <li><a href="https://mapzen.com/media-resources/">Media resources</a></li> <!-- <li><a href="http://status.mapzen.com">Status</a></li> --> </ul> </div> <div class="col-xs-12 col-sm-3"> <h6>Hello</h6> <ul> <li><a href="https://mapzen.com/blog/"><i class='fa fa-fw fa-rss'></i>Blog</a></li> <li><a href='https://github.com/mapzen/'><i class='fa fa-fw fa-github'></i>GitHub</a></li> <li><a href='https://twitter.com/mapzen/'><i class='fa fa-fw fa-twitter'></i>Twitter</a></li> <!-- <li><a href='mailto:hello@mapzen.com'><i class='fa fa-fw fa-envelope'></i>E-mail</a></li> --> </ul> </div> </div> </div> </div> <div class='row headroom-large footroom-large'> <div class='col-xs-12 text-center'> <div class="compass-logo"></div> <small class='copyright'>© 2021 Mapzen</small> </div> </div> </div> </div> </footer> <script src='/assets/common/styleguide/scripts/mapzen-styleguide.min.js?1624544694359593085'></script> </body> </html>