By: Adarsh Pavani

It’s easier to navigate indoors when you can see your surroundings. Not just look at a dot on a grid, but move through space naturally as contextual information conforms to your view — not the other way around.

Using the Maps SDK for Unity, we made an app for navigating our San Francisco office in augmented reality, and we’ve open-sourced the project:

Learn more about using Mapbox in Unity or read on to learn how we built the demo. You can download the project here and open it with Unity 2017.2.0f3 or later. Then, set up an access token, and open the ButtonSyncronizationWorldScalescene.

We divided this project into 3 phases:

1. Import indoor map data to Mapbox: In phase one we uploaded a GeoTIFF image of our office blueprint to Mapbox Studio and created a dataset containing vector features such as walls, rooms, and hallways.
2. Consuming the custom data in Unity: In the second phase, we rendered a 3D map in Unity, so the rooms were scaled and positioned 1:1 with real-world space.
3. See it localized in world scale AR: In the third phase, we created a seamless augmented reality navigation experience with localized 3D features of our office space.

Phase 1: Importing the indoor map

For building vector features and adding indoor map data, we had to first add a geo-referenced image to Mapbox Studio. After that, we added walls, hallways, and conference room features to our dataset along with custom properties designed for consumption in Unity.

The conference rooms were digitized using points. Each point feature was assigned properties to help with identifying and navigating to the corresponding conference room. Here’s a snapshot of the properties we added:

After adding the necessary features and properties, we exported that data to a tileset which we used in our Unity project.

Phase 2: Render in Unity

For rendering the features from our tileset, we used a MapAtWorldScale with a RangeAroundTransformTileProvider. We chose MapAtWorldScale because we wanted the map to render at the real-world scale to support the augmented reality experience. RangeAroundTransformTileProvider uses the AR camera’s root transform to load tiles around it. The rendered tiles contain the vector data information that we added to our dataset.

For rendering the conference rooms, we used a POI Modifier for instantiating 3D prefabs of planets with their names under them — our conference rooms are named after planets in our solar system.

Additionally, we used height and material modifiers to extrude the walls and render them with a masked shader to provide occlusion in AR.

Here’s an overview of how we set up our modifier stack to render the features listed below:

1. Synchronization Points

We introduced a new modifier called FixedLocationMonoBehaviorModifier, which registers the location data associated with synchronization point with the help of SynchronizationPointsLocationProvider. The registration process sets up the required UI elements corresponding to the sync points.

2. Destination Points

To set up the destination points, we used SpawnPrefabModifier, a variation of FixedLocationMonoBehaviorModifier, which in addition to registering the destination points, also spawns a prefab (3D model of a planet) to represent the conference rooms.

3. Nav Mesh

We use Unity’s NavMesh to compute the navigation path for this demo. NavMesh requires a mesh as input that’s used as a navigable path. To create this navigable path, we added line features in our dataset connecting corridors with synchronization and destination point locations.

To consume the navigation path data, we use a modifier stack as shown below.

Phase 3: Localize in world-scale AR.

The real challenge is positioning, orienting, and tracking a user’s device in the AR world. Before starting the experience, we had to ensure that the 3D features in Unity were perfectly aligned with the real world position and orientation of the device. We solved this by adding a two-step process that a user had to complete before seeing the AR world positioned and oriented properly:

1. In the first step, a user has to scan the surrounding floor for a ground plane.
2. After completing the first step, the app brings up a UI showing different sync point ids. The user has to then walk up to a sync point and press the corresponding button to position and orient the AR map with respect to the device’s position and orientation.

For easy identification, we marked nine spots in the office with the corresponding sync point ids from our dataset. The table below shows the set of properties we added for those sync points:

Once the 3D map is aligned, we show the list of destinations that the user can navigate to. Then, based on the destination, the app places a continuous chain of arrow sprites on the NavMesh to show the directions to the chosen destination.

Future improvements

The primary purpose of this project was to take advantage of Mapbox Studio’s abilities to serve indoor map data, visualize it in AR with the Maps SDK for Unity, and implement map-based navigation in an indoor setting. For that reason, we restricted ourselves to synchronizing device position and orientation with a basic manual synchronization step that’s dependent on user input.

However, the experience would be significantly improved with the use of Bluetooth beacons. By tracking a user’s position and orientation continuously, this would provide automatic synchronization context at regular intervals. It would also allow a seamless transition between indoor and outdoor navigation, covering a wide variety of use cases.

Next steps

Experiment with the project and let us know what you build on Twitter, #BuiltWithMapbox. To get started, explore the tutorials on our help page and learn more about location-based games, AR, and VR applications.

Adarsh Pavani

Indoor navigation in AR with Unity was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.

Designing a custom map style to explore the globe

By: Nathaniel Slaughter

Lè Shine is inspired by a globe Tristen Brown and I came across. It was sitting in a store: a beautiful relic to set a tone and convey the lifestyle brand of the company. But where globes once helped us enter the larger world as interactive day-dream tools (spin the globe, put your finger down and that’s where we’re headed next), their function has seemingly shifted to a static object within the mosaic of a ubiquitous aesthetic. I cannot blame this usage or non-usage of globes, as I find them incredibly beautiful even as dusty objects. And it’s here where I set off to transfer this globe’s style into an interactive, digital map.

The Globe

Unlike others I’ve seen, this globe has a monochromatic blue color palette. Some of the prominent features we liked were the country distinction through color, beautiful Futura place labels with a hierarchy based on population, predominant ocean currents, and dot-patterned hill shading.

In translating this static map into a digital one, we wondered what this globe would be like if it could move in and out of regions, cities, and places, and what would it look like at these smaller scales. What would Paris look like, or Fresno? What would the road network look like? What would the globe suggest to do with buildings and parks?

Behind the design

The map is divided into two parts: lower zoom levels present predominant ocean currents, colored country polygons, natural and built-up areas and place networks, whereas mid to high zoom levels show road networks, cities, transit systems, and points of interest.

To keep track of my high-level stylistic goals and ideas, I created a map taxonomy chart showing the rules of the map — road widths, color palette, label hierarchy, symbols, etc. If you want to customize this style, this chart is a good place to refer to as you make changes, especially if you want to change the colors. Since this map revolves around a primary color, it can quickly be transformed to match your brand’s palette.

Add Lè Shine to your account to use as is, or customize it to use in your next app or website. If you’re new to Mapbox, sign up to start creating custom maps for your next project.

Nathaniel Slaughter

Rise and Lè Shine was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.

Create unique experiences with your event data

By: Joe Gomez

With our tools for asset tracking and design, you can build interactive maps for events that incorporate real-time data showing where people are and what they’re experiencing as it happens. Whether it’s a marathon, a stand up paddle-board competition, or a race across the desert, every event has unique data, and there’s a lot you can do so fans can engage wherever they are.

Red Bull Heavy Water

For the 2017 Red Bull Heavy Water Stand-Up Paddle Race, we built a custom event map showing real-time locations of athletes along the course, as well as dynamic event data like wave height and speed/heading of currents.

The event organizers partnered with SpoonDrift to drop ocean buoy’s along the course and track live conditions. We built this real-time data into the map and styled the map’s features based on the data.

For example, markers update with live positions of racers; you can see who deviates from the course. A color gradient shows wave height with directional arrows indicating both speed and heading of currents. Using Mapbox GL JS, our web API, we added interactivity so users can hover over the base map to get a reading of the conditions for that location.

If you missed the SUP race, watch a sped-up recap of the event on the map. Red Bull has incorporated live content from the race into the map replay so fans can watch video footage where it actually happened.

Grant Washburn, organizer of Red Bull Heavy Water told us what inspired this year’s live map:

Before the event map, people just checked how they finished online after the race and our content was recorded for post-event commentary. Every little piece of data you add helps insert viewers in the experience. First you have a map, then you start asking yourself, ‘Ok how many ways can you experience this map? How can you fly through it and view the course from different perspectives?’ The more I looked at Mapbox and played with it, I thought there’s so much potential.

Rebelle Rally

We recently partnered with the Rebelle Rally, a women’s endurance rally where competitors spend 8 days driving and navigating public dirt roads, double tracks, and sand dunes across Nevada and Southern California. Drivers rely exclusively on traditional tools like compasses, paper maps, and plotters.

Rebelle Rally’s map tells the story of each team day-by-day. We overlayed checkpoints and interactive pins on top of our Satellite Streets map style, which shows roads and real imagery of the terrain. For anyone who couldn’t make it out to the desert, this was a way to check in each day, note the progress of teams, and explore the obstacles ahead.

Mapbox opens up a world of opportunities for our event, fanbase, and community, not only from a rich content experience, but from a business perspective. We’re able to go far beyond “dots on a map” and make these places and experiences come to life.

- Emily Miller, Founder of Rebelle Rally

Iditarod

This playback of the Iditarod helps spectators track the sled teams venturing through white-out conditions, sub-zero temperatures, and gale-force winds; they cover more than 1,150 miles in 8–15 days.

Crowds gather to cheer the dog teams off from Willow, AK but quickly lose site of the action, relying on static list-views to “watch” the leader’s jostle for position. It’s difficult to comprehend the distance, terrain, checkpoints, and standings, so we created a birds-eye-view with an updating leaderboard on the left. Using run-time styling, the map’s style changes with the time of day.

Drop your fans right into the dessert, ocean, tundra, or any action-packed arena with our developer toolset for live, updating maps. Get started with our tutorials for web apps, grab a Commercial subscription for tracking up to 1,000 assets, or contact our team for licenses that scale for however many athletes you’re tracking.

Joe Gomez

Real-time maps for live events was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.

By: Roy Ng

John Bonney is joining Mapbox as our Chief Financial Officer. His time as a finance leader/CFO at both public and private companies shows a track record of repeated success, having led all aspects of finance — Accounting, FP&A, Investor Relations, and M&A — which will allow him to be a core business partner across all of our teams.

When I shared details on what the team is building, John immediately grasped both the strategic and financial value of our location data platform. We dove deep into details around our financials, business, and operations — from our long-tail developer self-serve metrics, to our telemetry data processing, to our use of Spot with AWS. Then we jumped right back to business strategy going into areas like Auto, AR/VR, then on to people and organizational development.

During conversations with the team and board, John showed not only a mastery of running a finance organization at high growth, but also a sincere appreciation of our business, our strategy, and our people and organizational dynamics. Most importantly, John is genuine, passionate, and prioritizes people growth and development, demonstrated by the number of folks John hired and mentored previously on his teams who are now CFOs at various companies.

John was previously CFO at FinancialForce for over three years, driving the growth of the company from ~200 employees and ~$35M in revenue, to over 650 employees doing ~$100M in revenue. During his time at FinancialForce, he helped raise over $180M in equity and debt. Before FinancialForce, John was the Global VP of Finance and Divisional CFO of SAP Cloud, a $1B SaaS business, which he joined through the sale of Ariba to SAP. During his time at Ariba, he saw the business grow from $150M to over $350M in less than four years. He also played a key role in the $4.3B sale of Ariba to SAP.

John is excited to be a part of the team, saying:

“I could not be more thrilled and honored to be joining the amazing team here at Mapbox. The availability of real-time location data has never been more important in our increasingly data-intensive and on-demand world. Mapbox is already helping thousands of companies across multiple industries radically improve their own businesses by leveraging the feature-rich and data-rich Mapbox platform. I look forward to working with the entire Mapbox team to help the company scale to new heights while continuing the hyper-growth trajectory and fantastic culture.”

Welcome aboard, John!

P.S. — We’re growing — if you are looking to help us make a live map of the world, check out our jobs page.

Roy Ng

John Bonney joins as Chief Financial Officer was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.

Host a mapping event in your community

By: Mikel Maron

Celebrate Open Data Day on March 3rd, and join or organize one of the dozens of events around the world. We’re proud to support the mini-grants program to help local communities share the benefits of open data, particularly in Open Mapping.

Open Mapping mini-grants can cover events engaging local OpenStreetMap communities, as well as events in partnership with government and nonprofit organizations. The events can be hands-on like mapping parties, workshops, and mapathons that share tools and teach techniques. They can also be more inspirational, generating new ideas to apply Open Mapping to civic engagement, public health, disaster response, urban issues, environment, or any other social impact.

Apply for a mini-grant here, and share updates on your events with the #OpenDataDay and #OpenMapping hashtags. We’re excited to see the events come together on Open Data Day.

Mikel Maron

Apply for an Open Data Day mini-grant was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.

Add the new client-side hillshade layer

By: Molly Lloyd

With our new hillshade layer type, you can create a more detailed, realistic model of terrain (aka shaded relief map), representing a 3D view of hills, valleys, and mountains across a 2D surface. The rendering happens on the client, so every aspect of the visualization can be customized.

For example, more accurately simulate how the sun moves across terrain in the real world:

Or get real creative with different shading techniques and lighting effects. Properties like hillshade-exaggeration, hillshade-shadow-color, hillshade-highlight-color, hillshade-accent-color, and more can be customized at runtime.

How it works

Our hillshade layer type uses a raster digital elevation model (DEM) — high-resolution elevation data encoded into raster image tiles — to calculate the precise shadow or highlight for every individual pixel on the map. Because we calculate the slope and shadow pixel-by-pixel on the user’s computer, the resulting hillshading is much more detailed than the shading that is possible with a vector-terrain tileset. It’s the difference between styling individual pixels vs. broader, less detailed polygons.

You can see the difference side-by-side below. The current Mapbox Outdoors style (image left) uses the vector-terrain tileset’s hillshade layer to color polygons based on whether they represent a shaded or highlighted area. The new client-side hillshading layer (image right) references a raster DEM source that encodes elevation into the red, green, and blue color channels of each pixel in the tile. The result is terrain with more definition and detail.

Add the new client-side hillshade layer to your project using mapbox-gl-js v0.43.0 or later; we just released v0.44.0. To get started, create an account and follow this tutorial. You can report bugs or contribute to feature development in our public, open-source repo.

Molly Lloyd

Realistic terrain with custom styling was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.

By: Matt Daniels

Matt is a journalist and among the founding team at The Pudding, which explains ideas debated in culture with visual essays. He is a fan of media analysis with wide-spread coverage of his projects on music and film.

Last month I released this project on the cultural preferences for music. The idea was to blend Radiooooo and radio.garden with a Risk-style empire map (i.e. convex hulling). That is, if we were to think of Gucci Gang as the musical Roman empire of the US, how far would it span? When does Lil Pump’s empire end and a new, locally-relevant one begin? Every country has its own “Despacito,” and I thought this would be a good way to get out of my own musical filter bubble.

The internet is way better at describing my work than me. This tweet pretty much summarizes it:

This is a really cool look at the organic borders created by cultural pockets https://t.co/yMoNGOfC2Q

 — @philwitmer

Mapping Tools

I spent a ton of time looking at cartography packages. I found Mapbox to be, by far, the fastest experience out there with the most complete JS library for doing cool map stuff on the internet. The GUI for Mapbox (called Mapbox Studio) was also one of the best user experiences, allowing me to play around with music data before getting into any code (more on that later).

The Data

I decided early on to make it simple: just focus on the top song by city. To determine which song is “most popular,” I scraped the data from YouTube because the service is more widely available for free, unlike Spotify which biases the data towards people who can afford streaming.

I had song views by city and a lat/long associated with each city. All of the data is here. This is an example of the headers and the first row of data for Nicos’s hit in Sanaa, Yemen:

"artist_name","latitude","longitude","views","track_link","track_name","rank","country_code","geo_name","geonameid"

"Nicos",15.35472,44.20667,108707,"ykPmM7Me2fM","Secret Love",0,"YE","Sanaa",71137

We can map this pretty easily in Mapbox Studio (a GUI map tool) without any code! I started exploring my data by uploading the dataset to the web-based tool and styling the circle-size based on the song’s popularity. Mapbox also has amazing label collision detection so it only adds labels to the circles when they don’t overlap.

I was able to start seeing some regionality around cultural preferences, but it was a little intense, and I wanted to have one shape for each song’s “region.” For example, that whole area of purple from Mexico to Chile, let’s make it one big purple shape as opposed to 1,000 overlapping circles.

Choropleth’ing in Mapbox

You can use Mapbox Studio to create a choropleth, but I opted to do it programmatically using the web API, mapbox-gl-js. Here’s an example in the documentation of customizing a choropleth by zoom level.

The first thing I did was make a country-based choropleth, just to see what it looked like:

It sort of displayed what I wanted: a simplified regional picture of song preferences.

To do this, I added country boundaries to the map usingmap.addLayerand followed the style specifications to customize the fill-color based on stops in the data. We’re basically saying: “if country X, give it color Y”. In this example, CountryStopsFill is a big array of all the world’s countries and a corresponding color, where each song is always the same color eg [US, blue].

But most of the interesting-ness would be at a sub-country level. For that, I needed more granular polygons/tiles to fill-in with their respective #1 song.

Meta Choropleth’ing

Luckily I stumbled across Mapbox’s global administrative boundaries.

There are countless resources out there for sub-country (state, regional, county) data, but Mapbox has them all beautifully rendered at every zoom-level in a single, easy-to-add tileset.

It’s only available to their enterprise customers, so I asked the internet for a hook up with Mapbox.

internet friends. i'm looking for a hook up at @mapbox for a special request from their team. anyone know anyone?

 — @matthew_daniels

Luckily, several folks replied, and Paul Veugen set me up with their product team. They graciously gave me access to the enterprise admin boundaries and were immensely helpful setting me up.

TileQuery FTW

Aggregating up to the country level is easy — every city is associated with a country, so the logic is simple. But for a smaller shape (e.g. a county in Greece), it’s a bit harder. How do I query which cities are in that county, and how do I make sure the county corresponds to Mapbox’s county polygon?

Mapbox’s point-in-polygon query makes this straightforward, avoiding all of the crazy geo-hierarchy-mapping-stuff typically required for an idea like this.

Basically you say, “I have this point (a city). What polygons does it fall in?” I then iterate through every city in my dataset and pull the corresponding polygon at 9 different geographic levels, from zip code to state.

https://api.mapbox.com/v4/mapbox.enterprise-boundaries-a0-v1,mapbox.enterprise-boundaries-a1-v1,mapbox.enterprise-boundaries-a2-v1,mapbox.enterprise-boundaries-a3-v1,mapbox.enterprise-boundaries-a4-v1,mapbox.enterprise-boundaries-a5-v1,mapbox.enterprise-boundaries-p1-v1,mapbox.enterprise-boundaries-p2-v1,mapbox.enterprise-boundaries-p3-v1,mapbox.enterprise-boundaries-p4-v1/tilequery/"+longitude+","+latitude+".json?access_token=TOKEN

You can find the results here in this Google Sheet; every lat/long has an associated polygon ID.

For example, NYC has a polygon ID at a state level of USA136 (New York State) and a county level ID of USA236061.

Making the Choropleth

For the final project, I decided to use boundaries_postal_1 (a larger, aggregated polygon of zip codes); boundaries_admin_1 (state); and boundaries_admin_0 (country).

I added these pretty easily:

And then:

So same thing as before: the fill-color is a big array of state IDs and colors (each song gets one color). I did all of this in JS.

The first thing I did was nest the dataset (each city and its top song, as well as its associated polygon IDs) by every tileset (e.g. boundaries_admin_1).

This nests the data by that particular tileset’s polygons and declares a top-song based on a sum of views.

From there, we assign it a color:

This is a big array of each polygon’s ID (d.key) and a color that’s consistent across the dataset eg [d.key,color], therefore, “Gucci Gang” is always green.

Label-click -> YouTube Video

I created click events on the song labels, triggering the YouTube video to begin playing.

In D3 (or some other library), this would be an absolute nightmare. At any moment there are up to thousands of labels visible on the map. It’s just that they are hidden due to automatic collision detection by Mapbox, which means everything is legible. We want an event to fire only when a visible label is clicked.

I already had the track data on the label properties. I uploaded the label dataset via Mapbox Studio and positioned it based on its city’s lat/long.

This says “if someone clicks on the map, check if it was only on rendered labels in X, Y, and Z layers. If true, get the properties (i.e. the data) joined to that label.” With that data, we can use it to trigger a YouTube video to begin playing.

Same thing on the hover events:

On mousemove, we look for whether it was over a certain rendered layer, in this case the admin-0-fill (which is our country polygons). If true, we then take the country’s name and place it in a tool tip.

Explore the map and keep building

There’s many more features in this map, but it’s all vanilla JS and D3. The project is entirely front-end code so feel free to check out the source code and email me with any questions.

Thanks again to Mapbox for making this project possible!

Matt Daniels (@matthew_daniels) | Twitter

Mapping global music preferences: How I built it was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.

By: Leslie Nakajima

Consumers need personalized services and hyper-local content, which is why location is such a valuable ingredient in the next generation of software and mobile applications. Location services — maps, navigation, search — are driving innovation across industries supporting real-time decision making, autonomous vehicles, and data visualization at a new scale.

After surveying the current state of location-based services, consulting firm Frost & Sullivan, has singled us out as a leader in the space. They reviewed key players in the industry, honoring us with the 2018 North American Location-based Services Enabling Technology Leadership Award 🏆.

Frost & Sullivan found that our platform enables new levels of location context for mobile and web users, and that because of our open-source approach, we’ve been able to tackle some of the key hurdles in the space.

Each year, Frost & Sullivan presents this award to a company that has developed a pioneering technology that not only enhances current products but also enables new product and application developments. The award recognizes the high market acceptance potential of our platform. We’re thankful for the honor and humbled at the acknowledgment of our work.

Alongside the award, Frost & Sullivan created a full analyst report exploring how Mapbox fits into the greater location-based services community. View the full report on their website.

Leslie Nakajima

Frost and Sullivan award was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.

By: Eric Gundersen

Our 1,000,000th registered developer just made a map! We want to hear your stories and milestones, so celebrate this moment by sharing your own memories using #1millionexploring.

Every time someone uses a map, the map gets smarter. Almost 10% of our registered developers are actively hitting our map APIs each month, meaning we’re in apps touching more than 300 million people, all around the world. Over 60% of our developers come from outside the US, from over 217 countries. The more people in more places touching our maps, the more anonymous data streams back into the map, making a live updating map of the world for everyone. Cheers!

Eric Gundersen

1 Million Registered Developers was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.

Fast and reliable Chinese maps

By: Sean Heffernan

Hotels.com uses Mapbox.cn, our in-country infrastructure, to maintain a seamless map experience for Chinese users both in China and out. Fast and efficient map performance is essential to the hotel booking process, allowing customers to quickly locate accommodations and explore added context.

Due to Chinese-specific mapping laws, many traditional map providers are either blocked from completing map requests or suffer slow loading speeds, making it a difficult and complex location service environment. Mapbox.cn helps avoid this problem, through our legal, accurate, and performant endpoint based in China. Network requests to our China endpoint reach our local partner’s data centers, enabling 10x faster map loads for users based in China. This allows users in China to experience map loads as fast as users would outside the country.

If you need fast, reliable maps in China check out the specifics of the platform on Mapbox.cn, or reach out to our China sales team with any questions.

Sean Heffernan

Hotels.com launches maps in China was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.

By: Kevin Kreiser

Valhalla is now up and running on Mapbox’s global infrastructure, using Docker containers on AWS with multiple layers of targeted caching that can autoscale to support traffic spikes worldwide.

Our Valhalla team just joined a month ago, and we immediately got to work on our combined navigation offerings for auto and logistics.

Valhalla running at scale allows us to combine its open source APIs with real-time traffic, powered by 225 million miles of anonymized mobile sensor data we collect each day.

“Mapzen originally built Valhalla because we saw a real need for a global, open, multi-modal routing engine, and I’m very proud of the results. I’m excited that Mapbox is continuing the work with the Valhalla team and extending it to real-time traffic. This means that users will continue to be supported, and they can expect the product to evolve to meet future market needs.” — Randy Meech, CEO of Mapzen

Valhalla brings more customizable and flexible routing features including support for public transit routing in 35+ countries, elevation-based routing, on-device streaming of map data, and the offline environment necessary for in-car navigation.

If you’ve recently migrated from Mapzen or are interested in Valhalla-powered services, please reach out to me personally at kevin.kreiser@mapbox.com and I will connect you to the right people on our team to get you started. If you want to stay up-to-date on Valhalla, follow this blog tag or subscribe to our newsletter.

Kevin Kreiser | Professional Profile | LinkedIn

Valhalla is live on Mapbox was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.

By: Thiago Santos

We’re encoding millimeter precision into HD Vector Maps that define Protobuf (PBF) for serialization designed to encode data with variable precision, optimizing the data size for the exact resolution needed by the dataset.

Coordinates traditionally are represented in memory as double triplet (Latitude, Longitude, Altitude). Our HD map format turns real world coordinates into a local tile grid. This means a long sequence of coordinates is now represented as sequence instructions. This radically saves bandwidth for streaming data to a car and reduces storage size for larger area coverage offline.

The HD map format uses “pen” commands to move a cursor in the tile grid, making it possible to encode a coordinate into something as small as 32-bits integer. Describing a four points 3D line would look like:

MoveTo(+2,+2,+5)

LineTo(+0,+8,+3)

LineTo(+3,+2,+5)

LineTo(+1,+0,+2)

The local tile coordinates are then converted back to the source projection when decoding the vector tile, to be consumed by the autonomous navigation engine.

HD Vector Maps support encoding arbitrary metadata. This lets each automotive company or tier 1 customize for their proprietary HD map formats. A point representing a road traffic sign valid in only four countries in Europe could have properties like:

The metadata is flexible and can be used for encoding strings, numbers, arrays and serialized nodes used to reconstruct a connected road graph inside a car with full level of detail.

The data is tiled in small pieces, distributed with low latency around the globe and receive partial updates in real-time as the road network gets smarter. Basically this brings Snapchat level scale for HD automotive maps, giving your fleet the latest up-to-date maps, in the fastest way possible, anywhere in the globe.

The code to encode, decode, optimize, and visualize HD Vector Maps is open source. For example, take a look at vtzero, our favorite decoder for embedded devices. It has a small memory footprint, is highly performant and it is designed to minimize memory allocations. Our open source approach fosters a healthy ecosystem of tools and means OEMs and suppliers can modify functionality to fit their exact needs and then use the Mapbox platform for visualization and distribution of HD Vector Maps to global fleets of vehicles.

Thiago Santos

Millimeter precision HD Vector Maps was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.

Turn up the heat with flexible and custom designs in just 5 lines of code

By: Paul Veugen

Our next Maps SDK release for Android and iOS lets you create interactive heatmaps with five lines of code. Show trends of where people are and what they’re doing in a social app, visualize activity data from thousands of users in your fitness app, or inspire travelers to discover the best spots in a new city at a glance. Combine millions of points into a single interactive heatmap.

Heatmaps in GL render on-the-fly. You can create heatmaps from massive datasets and make real-time adjustments to how points are getting clustered and how the heatmaps are styled. Adjust the intensity, color, radius, weighting, and zoom-level interactions at runtime to create beautiful interactive experiences that update based on user interactions, zoom-level, and real-time data.

Want to add heatmaps to your app? Hit up our sales team and keep an eye on our mobile releases this month. If you’re building for the web, check out our post on heatmaps for the web and this tutorial to start building.

Paul Veugen

Interactive heatmaps on mobile was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.

Join our Business Intelligence webinars

By: Angelina Calderon

We recently held a webinar in partnership with PubNub, a company that provides infrastructure-as-a-service for live data streaming. With our tools you can create dynamic map visualizations from real-time data and incorporate features like asset tracking, geocoding, and heatmaps.

In the webinar, sales engineer Chris Toomey shows you how to use PubNub and Mapbox to build an asset tracking app in the React framework — animate geospatial data, geocode its exact location, and predict arrival times from A-to-B. You also get to see heatmaps in action at scale. Watch the webinar, and check out more examples of Mapbox + Pubnub integrations.

Want more? Join us in our upcoming webinar on 2/21 where Chris teams up with designer and cartographer Amy Lee Walton. In the 45-minute, live session, they’ll walk you through creating custom dashboard applications, as well as how to leveraging the design capabilities of our platform for deriving better insights. Register here and tweet at #mapboxforBI with your questions.

Angelina Calderon

Maps, IoT, and asset tracking in real-time was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.

By: Erin Quinn

You can now print high-resolution images directly from Mapbox Studio via the Style Editor:

How it works

Under the hood of this early release, all rendering for Mapbox core styles or your own designer maps happens on the client. Studio uses Mapbox GL JS to write WebGL to a canvas element — it’s this element type that allows you to export your map as a gorgeous image.

In the new print UI in Studio, the values of resolution, width, height are up to you. The only limit is a final output restriction of 8,000px width by 8,000px height. At that image size, you can print a 27” by 27” map with a 300 DPI resolution. Going bigger in print size? Try setting a lower resolution value, like 150 to capture a larger surface area. If you are printing something for a 4x6 frame, just make sure to use the highest resolution possible to ensure the details look crisp.

Once you’ve configured your image export to your liking, send it to your printer or your favorite local print shop to print beautiful, physical maps to hang on your walls or give away at your next event:

The fine print

We’ve already enabled high-res printing for our Enterprise customers with print licenses, and we’re now including 50 prints with the Commercial plan and 5 prints for all Pay-as-you-go users. Reach out to our sales team to discuss high volume, high-res printing rights. NGO, non-profits, and our community partners can reach out to us at community@mapbox.com

If you need map images at a lower resolution and lower budget, we’ve also launched a new API playground for creating static maps, the Static API:

To get started, review our print policy and check out the new Help guide for high resolution image exporting and printing in Studio. Tweet Mapbox with your best prints!

Erin Quinn

High-resolution printing arrives in Mapbox Studio was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.

Building the user experience around the map

By: Joe Gomez

Everything from prices, legal risks, and brokerage services are difficult to navigate when buying a home in Russia. HomeApp.ru is improving the buying experience with detailed maps, real-time data, and AI-powered recommendations.

They used Mapbox Studio, our Maps SDK for Mobile, our Directions API, and dynamic features like animations and 3D buildings to engineer a web and mobile experience that’s centered around the map:

In 2018, online real estate search apps need to be mobile and map-based. User retention is critical for our business — the more our client uses our app for search, the more we know what he or she wants and the better services we can offer. It’s simple: Our customers want mobile, map-based search. -Alexey Igoshin, Founder/CEO

HomeApp.ru wanted to display thousands of homes, neatly organized by different geographic boundaries and zoom levels while also maintaining performance on mobile. They needed to create their own map layers and custom-style the data.

Because of the speed and customization, vector maps were on their radar from the beginning. Here’s why they chose us:

After extensive research on providers, we chose Mapbox because transitions between different zoom levels are smooth and clear. Each zoom level is fully customizable and provides so many opportunities for a better user experience like aggregating statistics at higher zoom levels and very detailed and specific information on low levels like 3D buildings. Mapbox Studio is also a powerful map customization tool that doesn’t require programming skills from our design team. -Viktor Kotlovsky, Head of UX/Design

A key factor for a lot of homebuyers is distance and mobility. How far are schools? Transit? and Entertainment? HomeApp.ru is leveraging our Directions API so users can explore this information while viewing a property.

Routing is a “killer” Mapbox feature. For our users, surroundings are as important as the real estate listing information. This gave us a powerful visual tool to highlight accurate distances to the most important places around like hospitals, schools, and public transport. -Viktor Kotlovsky, Head of UX/Design

As you explore the map, some of the finer details stand out like hover effects, fly-to animations based on scroll position, and custom markers. The ability to manipulate data based on map events allowed the developers to make content in the side panel responsive to map interactions, turning the map into an intuitive interface.

HomeApp.ru is taking data-driven mapping beyond the consumer experience. They’re using our heatmaps as a tool for the real estate operations team to better understand clients’ preferences based on actual search data.

Mapbox has a lot of great products that help us create really fast and beautiful vector maps. We used turf.js to prepare data for the map; Tippecanoe to create lightweight tilesets of custom layers like buildings and administrative boundaries; OSRM to normalize textual directions data, and Mapbox Studio for fast design prototyping.

Combining these instruments made the features that would seem impossible, easy and fast to implement. -Alexander Lashkevich, CTO

Use our SDKs and APIs to add context to real estate applications with custom data layers, directions, and fast maps. Have questions? Reach out to our team.

Joe Gomez

The HomeApp.ru real estate app was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.

Automatic data updates and fully compliant with Chinese laws

By: Chris Wu

We’re now offering 3 government-certified map styles available via Mapbox.cn: Mapbox Streets Chinese, Mapbox Dark Chinese, and Mapbox Light Chinese.

These maps were built in collaboration with a leading Chinese mapping provider, eMapgo (EMG), and reviewed by the State Bureau of Surveying and Mapping for full compliance with Chinese mapping laws. As always, we provide automatic data updates to customers that launch with Mapbox.cn without needing to reconfigure any APIs.

Each carefully designed style features rich POIs, extensive road coverage, and public transit lines throughout China. Because the maps are hosted in country by our partner in China, users can expect up to 10x faster map loads than those hosted outside the country. Mapbox Streets Chinese, Mapbox Dark Chinese, and Mapbox Light Chinese are licensed under one publisher ID and are available on both web and our Maps SDKs for iOS and Android.

Contact our sales team about using these map styles or learn more about Mapbox.cn, our legal, accurate, and performant location services based in China.

Chris Wu

Three new map styles for Mapbox.cn was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.

By: Casey Miller

Each year tens of thousands of football fans descend upon one lucky U.S. city to see The Big Game. This year that city was Minneapolis. We wondered, how does this massive influx of people cause congestion in a city and affect travel times?

To explore this question, I explored a few hypothetical routes that people might take around the city that I could then use to query our Directions API and pull real-time navigation route and duration estimates.

Every day, we collect over 225 million miles of aggregated, anonymized telemetry data that feeds back into our Maps and Directions APIs, providing a real-time view of traffic patterns across the world. With the help of my colleague Scott Farley, I set up a lambda function on AWS S3 that gathered route data every 20 minutes in Minneapolis.

Route duration estimates on game day are compared to those at the same times on the Sunday before, January 28. If we were to replicate the study, we’d have aggregated data for multiple Sundays. Take a look at the full analysis, which includes multiple routes and simulated driver profiles.

Use our Navigation SDK and Directions APIs to incorporate directions, real-time traffic, optimized routing, and accurate ETAs into your applications. Have questions? Reach out to our team.

Casey Miller

How did the Big Game affect travel times in Minneapolis? was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.

By: Emily DuBois

Our latest map style, Carson, illustrates how to visualize geographic data over a map image for black and white print. The design is inspired by the fill patterns used in scientific journals. Explore the map.

The inspiration

Two years ago, I was authoring a paper that sought to better understand how corals respond to seawater temperature anomalies in the context of their assemblages. To help demonstrate our conclusions, I needed to place some styled markers on a map. The process involved Mapbox.js, Mapbox Studio Classic, Adobe Illustrator, and some painstaking data updates.

Now, with the dataset editor and new high-resolution print feature, these figures can be managed entirely within Mapbox Studio. While recreating the above images with these new tools, I wanted to develop a style compatible with black and white journal specifications that’s also consistent with the types of fill patterns used in neighboring charts and diagrams.

Behind the design

Carson is a simple grayscale style with an SVG fill pattern starter pack. The inclusion of subtly-styled hillshade and bathymetry data sources afford visual depth while keeping the focus on the data. I’ve also included the dataset used to create the original paper figures to exemplify how you can use fill patterns for your data visualization. Explore the corals-prefixed layers to see how you can leverage source data filtering on GeoJSON properties and layer grouping to visualize multi-dimensional data.

The process

I used the open-source hextile library to generate hexagons for each of my data points and loaded the resulting GeoJSON features into Studio’s dataset editor where I tweaked feature placement. Each datapoint was then categorized by dhw, which determined the layer group it belonged to, and sbri, which determined the polygon fill pattern. I exported my dataset to a tileset and added the tileset to the style. In the style editor, I created a layer for every unique dhwand sbri value combination and grouped the layers by their dhw value.

I then used the Filter layers feature to apply the same fill pattern to all layers with the same sbri value.

Finally, I used the high-resolution print feature to export 3 images, each with only one of the coral data layer groups visible, to replicate the maps in the original paper.

Add Carson and start customizing your map in Mapbox Studio. Choose from more professionally designed map styles by our cartography team or create your own.

Emily DuBois

Carson: A map style inspired by scientific journals was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.

By: Bruno Abinader

Rightware’s Kanzi Studio is like Photoshop for designing and building the human-machine interface (HMI) in cars and other interfaces for the automotive industry. The latest Kanzi Studio plug-in now adds our HD Vector Maps into their 3D design environment. From digital instrument clusters to infotainment (IVI) systems to head-up displays (HUDs) the Kanzi software is deployed by 35 automotive brands and live in millions of cars worldwide. Here is a look at the new maps design studio:

The HD Vector Maps use Protocol Buffers for serialization and it is optimized to the exact resolution required by the dataset. This makes streaming streets, satellite imagery, and terrain data into Kanzi insanely fast and radically saves bandwidth for streaming data to a car and reduces storage size for larger area coverage offline. Vector tiles offer styling flexibility, and the result is accelerated development while introducing a unique appearance, true to the OEM brand identity.

Kanzi Maps provide car manufacturers, automotive suppliers, and design studios a streamlined tool for creating beautiful maps that run in digital instrument clusters, infotainment systems, and head-up displays.

We’re a Kanzi Technology Partner working closely with the Rightware team to make maps available out-of-the-box. Follow me @brunoabinader or @RightwareLtd to track our progress.

Bruno Abinader

HD Vector Maps in Rightware’s Kanzi was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.