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.




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




    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





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
















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




    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.




    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.





    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)




    Select a Layer_Name and click Add buttom




    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




    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









    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)





    All objects

    Only current Layer










    All objects

    Only current Layer












    All objects

    Only current Layer












    All objects

    Only current Layer










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










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










    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




    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.




    Go to Floors option





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




    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



    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.





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




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




    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



    Created by Juan Gallego and Cesar Montaño.