• Overview
    • Introduction
    • User Interface Description
    • Installing Umajin
    • Shortcuts
    • Asset Management
    • Responsive Content
    • Project Icon
    • Text Styles
    • Guidewires
    • Presets
    • Glossary
    • Multi-user
  • Components
    • Intro
    • Page
    • Basic
      • Arrow
      • Button
      • Circle
      • HTML Article
      • Image
      • Image Zoomer
      • Nine Slice
      • Rectangle
      • Text
      • Tiler
      • Toggle Button
      • Web View
    • Navigation
      • Carousel
      • Dropdown Menu
      • Glass Shelf
      • Hamburger Menu
      • Tool Bar
    • Data Driven
      • Animated Feed
      • Dynamic Article
      • Feed Item View
      • Feed List
    • Forms
      • Form
      • Text Entry
    • Layout
      • Gallery
      • Group
      • Layout Group
      • Scroll Panel
    • Media
      • 3D Model
      • Spine Animation
      • Lottie Animation
      • Avatar
      • Canvas
      • Particle
      • Render Kit
      • Speech Player
      • Video
    • Maps
      • Google Maps
      • Offline Map
      • Offline Map Route Editor
      • Map creation guide
      • Beacon installation for indoor mapping
    • Internet of Things (IoT)
      • Bluetooth BLE
    • Masters
    • Custom Components
  • Actions
    • Add and Configure Actions
    • Basic Actions
    • Navigation Actions
    • Layout Actions
    • Appearance Actions
    • Animation Actions
    • Media Actions
    • Avatar Actions
    • Gallery Actions
    • Form Actions
    • Data Driven Actions
    • Maps Actions
    • IOT (Internet of Things) Actions
    • Advanced Actions
    • Custom Actions
  • Tutorials
  • Cloud Services
    • Overview of Cloud Services
    • Google Analytics
    • Umajin Analytics
  • Publishing
    • Introduction
    • Umajin Editor Lite
    • iOS – Apple App Store
    • Android – Google Play Store
    • Mac
    • Windows
Menu
  • Overview
    • Introduction
    • User Interface Description
    • Installing Umajin
    • Shortcuts
    • Asset Management
    • Responsive Content
    • Project Icon
    • Text Styles
    • Guidewires
    • Presets
    • Glossary
    • Multi-user
  • Components
    • Intro
    • Page
    • Basic
      • Arrow
      • Button
      • Circle
      • HTML Article
      • Image
      • Image Zoomer
      • Nine Slice
      • Rectangle
      • Text
      • Tiler
      • Toggle Button
      • Web View
    • Navigation
      • Carousel
      • Dropdown Menu
      • Glass Shelf
      • Hamburger Menu
      • Tool Bar
    • Data Driven
      • Animated Feed
      • Dynamic Article
      • Feed Item View
      • Feed List
    • Forms
      • Form
      • Text Entry
    • Layout
      • Gallery
      • Group
      • Layout Group
      • Scroll Panel
    • Media
      • 3D Model
      • Spine Animation
      • Lottie Animation
      • Avatar
      • Canvas
      • Particle
      • Render Kit
      • Speech Player
      • Video
    • Maps
      • Google Maps
      • Offline Map
      • Offline Map Route Editor
      • Map creation guide
      • Beacon installation for indoor mapping
    • Internet of Things (IoT)
      • Bluetooth BLE
    • Masters
    • Custom Components
  • Actions
    • Add and Configure Actions
    • Basic Actions
    • Navigation Actions
    • Layout Actions
    • Appearance Actions
    • Animation Actions
    • Media Actions
    • Avatar Actions
    • Gallery Actions
    • Form Actions
    • Data Driven Actions
    • Maps Actions
    • IOT (Internet of Things) Actions
    • Advanced Actions
    • Custom Actions
  • Tutorials
  • Cloud Services
    • Overview of Cloud Services
    • Google Analytics
    • Umajin Analytics
  • Publishing
    • Introduction
    • Umajin Editor Lite
    • iOS – Apple App Store
    • Android – Google Play Store
    • Mac
    • Windows
Expert > Map Creation Guide to use with Offline Maps Component
Map Creation Guide to use with Offline Maps Component
Expert
  
August 22, 2017
  
Allison Brebner

This page outlines a workflow for creating custom map tiles for use with the Umajin Editor’s Offline Map component.

Tips for map creation

    1. Obtain any and all visual maps related to the area you are working with, as typically they will all contain slightly different information.
    2. If your map needs to be geographically accurate, obtain a (large) google maps screen capture of the area you are working with.
    3. Visually verify your collected visual material against the real thing. Go to your area and check that what you see is what you get. Make notes and record any differences.
    4. Combine your visual material into an imaging editing software program (Illustrator or Photoshop recommended). Align google maps, architectural plans and any other relevant material together to get a full and consistent picture. If things do not sync up, then go to your area and make a judgement call as to which is correct.
    5. This step is not necessary, but is recommended for future maintenance and speed of creation. Apply a grid to your document and align your maps to it. This will keep things consistent and right angles are far simpler to work with. The scale of the grid is up to you, however note that the larger the squares, the more your map will distort in order to fit.
    6. Once you have your visuals collected and aligned, start drawing over the top to reproduce the areas relevant to your project.
      • You may not want to show all the detail available to you on the map, as it could confuse users by showing unnecessary information or areas they can’t access.
      • The goal of the map could be only to get people to places, in which case only choices along the way are important.
      • If it is to show people what is nearby, in that case the emphasis will be on presenting POIs (Points of Interest).

Loading images into Maptiler

  1. Go to www.maptiler.com and download + Install Maptiler. I recommend getting the Plus license at the very least.
  2. Open Maptiler and select the Standard Tiles option.
  3. Click Open a file or drag and drop the map image you wish to tile.
  4. Under geographical location, select change.
  5. From the menu select Assign location visually.
  6. Using the side by side tab, use the viewer on the right to assign points to your map, and use the viewer on the left to align them with Open street maps. Hit save when you are finished. This step aligns your map with real world locations so that latitude and longitude of points will be accurate. The more points you use, the more accurate your map will become.
  7. Click continue and select the folder option. Locate or create an empty folder to save your map tiles into. You can set the number of zoom levels you wish to render using the zoom from options.
  8. Before saving, click on advanced options and make sure that sparse output is checked. This will reduce your file size by removing any tiles that would be 100% transparent.tiles that would be 100% transparent.
  9. When you are ready, hit Render.
  • Umajin
  • Developers
  • Support Home
Menu
  • Umajin
  • Developers
  • Support Home