Location Services

last person joined: 13 days ago 

Location-based mobile app development and Bluetooth-based asset tracking with Meridian. Gathering analytics and business intelligence from Wi-Fi with Analytics and Location Engine (ALE).

Create and upload your custom Maps into Meridian Editor using free graphics editors

This thread has been viewed 1 times
  • 1.  Create and upload your custom Maps into Meridian Editor using free graphics editors

    Posted Dec 04, 2018 03:32 PM
      |   view attached

    Note: In this post we are guide you to a process to upload your own custom maps, but we highly recommend you work close with meridian specialized team for PoC in order to guaranteed and appropriate and professional map at maps@meridianapps.com

     

    During our internal demos or small demos to customers we need to upload our custom maps for a specific location into Meridian Accounts in order to catch the customer attention or engage it with our solutions. For that reason in this post we will to share a way to upload functional, custom maps into the Meridian Editor.

     

    To view the full tutorial, please refer to the attached file. 

     

    Step 1 - What will we need?

     We will need the following:

    • The floor map
    • An PC with an image editor

     Step 2 - Understanding map format basics

     

    Meridian Maps are created in SVG format and contain all the elements in group named Layers.

     

     

    The editor will validate if the format is either valid or invalid according with the layers you are using, for that, if you not use the correct layers you won't see what you want into the editor

     

    Step 3 - Installing Inkscape and GUI

     

     

    Firstly, you should consider that Meridian supports SVG (Scalable Vector Graphics) format to upload maps, for that reason, you need an image editor that supports that format to create your own maps.

     

    There are many software providers that offers their solutions as paid as free that support this format (the Meridian team recommends Illustrator® that is a paid suite from Adobe). In this post we will use Inkscape because it is a free tool, and has all the features and functionalities we need.

     

    To download Inkscape you have to go to Inkscape's official site https://inkscape.org/en/release/0.92.3/, select Download option and choose the operative system of your computer, after download the software run the installation wizard and follow the instruction in the window.

     1.png

     

     

    Once you have installed the program, go to the application desktop on your Desktop and open Inkscape

     

    2.png

      

    When you open Inkscape a new document is created,

     

    Unless you can configure the Inkscape GUI the basic configuration is organized in the above way

     

    At the Top of the file you can find a menu with features

     

    3.png

     

     

    At the middle you can find icons set with tools to create your own map and the work space

     

    Left

    Center

    Right

    4.png

     

     

     

    5.png

     

     

     

     

     

     

    And at bottom there is a pane to change the color objects

     

    6.png

     

    You can know more about Inkscape basic features in the Inkscape tutorial: Basic

     

    Step 4 - Hands on. Let's create a map

     

    First you will need a map to recreate it in the editor. For this tutorial we will use the following map simulating that is the floor plan for a customer demo.

     

    7.png

     

    To start with you should know in which scale you are going to work with your map in order it maintains the shape and will be displayed correctly in the editor.

     

    • Change size:  You can change the workspace height and width in the following route: File -> Document Properties (Also using Shift + Ctrl + D combining keys) and in custom size fields update the values for what you want.

    This will increased or reduce the size of your work space.

     

    8.png

     

     

    To continue we are going to create a layer named Base

     

    Creating a new Layer: To create a new Layer go to Layer option on tab menu bar and Select Add Layer (or press Shift +Ctrl+N)

     

    9.png

     

    Select a Layer_Name and click Add buttom

     

    10.png

     

    With Layer created, paste the image Map into the work space, and it is now an object in our file

     

     

    • See Objects in your file:  You can see all Objects in your file by clicking in Objects options, and select Objects…, this will show a panel with the objects grouped by Layers

     

    13.png

     

    This is an example with one object and one Layer14.png

      

    If you click the eye in the left of the object you will hide the object and it won't be seen in the editor unless you clicked again, if you click the eye in the left of the layer you will hide all elements in that Layer

     

    With the map image in the editor we will be creating the Layers required and adding the objects to represent the map.

    Note: You can choose the colors you want because they will be replaced in the editor. You can see the colors used by the editor in this page

     

    floor Add a new layer named floor and create a path of points that describes all outline of the map

    All objects

    Only current Layer

    15.png

     

     

    16.png

     

     

     

     

    Be careful that you are in the layer for the object you are drawing

     

     

    • Create object from path: Select Draw bezier curves and straight lines tool, and click
     

    And you can change properties with fill and stroke pane (To access to this panel go to Object and select Fill and Stroke option, you can also use Shift+Ctrl+F combination keys)

     

     19.png

     

    restrooms

    All objects

    Only current Layer

     

     

    20.png

     



    21.png

     

     

    stairs-elevators

     

    All objects

    Only current Layer

    22.png

     

     

     

    23.png

     

     

     

     

    exterior-walls

     

    All objects

    Only current Layer

    24.png

     

     

     

    25.png

     

     

     

     

    interior-walls

     

    All objects

    Only current Layer

     

    26.png

     

     

     

     

    27.png

     

     

    When you finished all Layers you want, erase the object that contain the map image and you will see the map:

     

    28.png

     

     

    29.png

     

     

     

     

    Now save the file in a location as Inkscape SVG. And we have completed the map.

     

    30.png

     

     

    31.png

     

     

     

     

    Step 5 - Parsing the file to be Readable by Meridian

     

    Unfortunately Inkscape Layer ID are not set by the name, therefore if you will upload the file (at this moment) to Meridian Editor you will receive an error message that the file has groups not supported.

     

    To overcome this,  you only need to change the id in each Layer for the correct name. You can do it manually using the file with a text editor

     

    The following image is an example of how a Layer is represented in a text editor, as you can see the name you defined before is assigned to inkscape:label tag and not in the id, so you can copy the value into the id

     

    As Is

     

    32.png

     

    To Be33.png

     

     

    Step 6 - Time to upload the Map

     

    To upload the map file its necessary a valid and active Meridian account, so please Log in into your account and location where you want to upload the map.

     

    34.png

     

    Go to Floors option

     

    35.png

     

     

    Select Add+ Option to create a new map and complete the fields you consider necessary

     

    36.png

     

    To load the map file click over the IMAGE (SVG) option and select the file in your computer. After validating the file a message will be show

     37.png

     

    The Meridian editor will be delete all information that he could not parse as the metadata added by inkscape, as this data it's not necessary the file will be shown correctly in the editor, so click Upload button to continue.

     38.png

     

    39.png

      

    Click Save button, and set the control points to complete the map setting

      

    40.png

     

    If you go to Floor option again, you will see the map in your map list, an you can already set placemarks or routings

     

    42.png

      

    Congratulations you have creating and uploading your new map!!!

     

    Note: when you are uploading your maps be sure you have no Invalid groups Ids listed. For example if you named the Layers with capital letters this will cause an error when the editor will parse the file

     43.png

     

    Created by Juan Gallego and Cesar Montaño. 

     


    #ArubaTags
    #ALE
    #LocationServices
    #Meridian