✨Introduction to using adding custom maps✨

  • 2
  • Article
  • Updated 2 years ago
  • (Edited)
mapbox6

Above: A Mapbox with a 'noir' city style and RSS Widget

To add custom maps to your digital signage Presentations, look no further than the web mapping platform called Mapbox. Not only do they have a web app called Mapbox Studio which you can use to further customize your maps, they also have a developer platform where you can take advantage of their various APIs. In this entry, we'll only be doing a quick introduction to the platform so that anyone can add their maps!

First of all, you will need to sign up to their platform.

After signing in, you should be taken to the Welcome Page. If not, the link is here.

mapbox1

Before we select 'Create A Map', let's first see how a default map looks. Do this by going to the Develop tab, and choose the second option Web - Initialize a map with Mapbox GL JS.

mapbox2

You will then be taken to the Display a map page. Copy and paste the entire HTML code located within that page into the HTML Widget in your Rise Vision Presentation.

There are two snippets of code in that HTML that are going to be unique. You will need to take note of these two:

mapboxgl.accessToken is the Access Token that you need to differentiate your map from the other maps that you (and others) have created.

Located in mapboxgl.Map function is the style: link. After you finish customizing the map, Mapbox will provide the custom stylesheet link.


Creating your first map

Now let's go back to the Welcome page for Mapbox and select the Create A Map. You have the option to Create A Style from a set of presets or to Upload A Style. I've chosen a Basic template to start off with. mapbox3

When the template first loads you will be taken to the generic world map screen.

Here, you need to lock in the default location. Do this by either inputting the zoom level, longitude and latitude values or you can zoom in on the map until you reach the location that you want.

After reaching the coordinates you want, select 'Lock in default position'.

mapbox4

Once you are happy with the changes, select Publish, and then Publish as New. If you go back to the main Styles page, you should see this new style come up with the new coordinates.

Once you are ready to publish, locate the Share, develop and use button for that Style and then note down the Style URL and Access Token. Replace these two in the HTML code that is referenced earlier (mapboxgl.accessToken and, located within the mapboxgl.Map function, the style: statement). After you finish customizing the map, you can update the HTML code that was generated earlier or you can refer to the MapboxGL quick start guide.

Here's an example below that I've created with a noir-style look. You can preview it in a Rise Vision Presentation here.



Want to make your map interactive on a touch screen?

Create interactive maps in your Presentation by unchecking the 'Hide Mouse Pointer' in your Presentation’s properties.

Scheduling Presentations that contain custom maps

If you schedule a presentation that contains a custom map as well as other content in a Placeholder, you will notice the map resources loading each time the map is displayed in the HTML Widget. To stop this from happening, you can host the code you copied in an .html page, upload that page to Rise Vision Storage, use the Web Page Widget instead of the HTML Widget, and make sure to uncheck the 'Unload Web Page when not visible in Presentation' option.

Need more questions for Mapbox?

Since this is a third party application, if you have any questions on their terms and service, you can go through their documentation and their Contacts page.

Have fun mapping! If you have used this article or have other ideas for custom mapping tools, let us know below.
Photo of HSuarez

HSuarez

  • 11,896 Points 10k badge 2x thumb

Posted 2 years ago

  • 2

There are no replies.