YourMap logo v. 1.12.2

YourMap is a fully featured HTML5/PHP application for displaying your custom maps, floor plans, creating custom marker labels and more.

It can be used to create office employee arrangement, conference seating, inventory equipment map and any other thing that you can show as points on a map.

This section describes basic terms used in YourMap application. It will allow you to understand basic terms and how they're used in the app.

Map

Maps are just big images that can be uploaded into app. The Images can be practically any size. Uploaded map images are divided into parts on different zoom levels which means that you can zoom up and down map image and move it to see any region. Maps can be organized freely in tree structure so any map can have a child map.

Region

Region is a defined point on the map used to display a specified region. It can have a defined zoom level. Displaying region will move map at a specified point and zoom to a defined zoom level if it was defined. It can be used i.e. to show any room in a building floor plan.

Marker

Marker is an element that is displayed on the map. Its role is to indicate something on the map.

Each marker has title and icon. Additionally it can contain image and up to 5 custom parameters which types are defined in their marker type.

Default behavior of a marker when it is clicked is to display popup information with its all available details.

All markers are displayed on the map in a following manner:

  • for map zoom below 50%, the markers are displayed as dots with color defined in admin panel.
  • for map zoom set to 50%, the marker is displayed as an icon that was defined in its marker type or overridden directly in marker settings
  • for map zoom set to 100%, the marker title, icon and all parameters defined as visible in marker type are displayed.

Label

Label is a simple text or an icon that is displayed on the map. It can be a link that after clicked show defined map or even a specific region on the map.

Labels are only visible when map zoom is at least 25%.

Marker type

Marker type is used to define basic things used in the marker. It defines marker color, default icon, is it visible on a map legend and what type of parameters it has.

Each marker type can define up to 5 parameters.

Parameters can be one of below types and can have different values:

  • Text - parameter value is a simple text.
  • Long text - it can contain any html data and can be very long; it will be displayed in marker info as a link that will show a popup window with value of this parameter.
  • Dictionary - the parameter value will become one of the defined in dictionary.
  • Link - clickable link that will open specified URL.

In every parameter you can define wheatear the user can search for it, label that may be displayed next to it's value.

Parameter can has "visible" attribute, its value will be displayed in marker info when map zoom is 100% or when marker is displayed in searching results.

Dictionary

Dictionaries are used in marker type parameters. It's a collection of defined entries / values.

Backend requirements:

  • www server with minimum PHP v.5.2.0 installed with GD Extension, and mod_rewrite module
  • MySQL ver min. 5.0.45 (Innodb engine required)

Frontend requirements:

  • web browser with HTML5 support (tested on: IE 8+, Chrome+, Opera 9+, Firefox 3+)
  • IE 8 is not recommended, but application will work

Follow this steps to install YourMap application onto your web server:

  1. unpack application package
  2. copy all content from yourmap_for_install directory into your ftp server (ensure that you have visible all hidden files)
  3. ensure that all directories and files have writing permissions:
    • uploads/icons
    • uploads/images
    • uploads/maps
    • gate/application/configs
    • gate/data/cache
    • gate/data/generated/types.css
    • gate/data/logs/application.log
    • gate/data/session
  4. open web browser and go to url that points into directory that you copied files in
  5. you should see YourMap db structure installator
  6. enter your MySQL database details and click Install db structure
  7. if everything was done right, you should see success message
  8. delete install directory from your ftp server
  9. in web browser type url pointing to application directory and add to it /admin to see administrator panel
  10. log in with default password: Pass01
  11. after you logged in, it is recommended that you should change default password
  12. all done

from: 1.10 or 1.11 to: 1.12

  1. backup all files from your ftp server
  2. delete all directories and files from server leaving only those:
    • uploads
    • gate/application/configs
    • gate/data
  3. copy all folders and files from yourmap_for_install directory skipping install dir into your ftp server (ensure that you have visible all hidden files) selecting "ovewrite" in yot ftp manager app

In this tutorial you will learn step by step how to create a map, region and add to it marker and label.

In this tutorial we will use office map to show seat arrangement for employees.

Assume that you have clean copy installed of YourMap component we can begin:

  1. Login into admin panel
  2. First step is uploading icons and images used in this example. First, we will upload icon. Select from menu Media->Upload icons
  3. Click Select files to upload... button and select all files from tutorial/icons directory that you can find in unpacked application package. When uploading is finished, click OK button to close uploading popup.
  4. Next step is to upload image that will be used by marker that we will create later.
  5. Select Media->Upload images from menu
  6. Click Select files to upload... button and select all files from tutorial/images directory that you can find in unpacked application package. When uploading is finished, click OK button to close uploading popup.
  7. Now we will create our first map. Click on Maps option from top menu and then click Add button.
  8. Fill in the form like shown in the picture below.
  9. Click Save button to save the map.
  10. After saving, screen will return to display map list and there will be visible only our map. Click on it to select it and click Upload image button.
  11. Click Select files to upload... button and select map.jpg file from tutorial/map directory that you can find in unpacked application package. When uploading and processing is finished (it can take a while) successfully, upload window will close automatically. If you experience any problem while uploading map image please refer to Uploading map image problems section.
  12. Now we will create map region. Select our map and chose Edit regions option from Actions dropdown button. Then click Add button and fill in displayed form like in the picture below.
  13. Click Save and position button. Now you will see your map with big crosshair in the center of the screen. Move map to desired position and zoom it to 50%, check Remember current zoom checkbox and click Save changes to store region position.
  14. Next step is a creating dictionary that will be used in created later marker type. This dictionary will store company department names. Select Map elements->Dictionaries and then click Add button.
  15. In name field type: Company departments and in entry value type: Reception then click Add new button. You can add more dictionary entries, however for this tutorial we will be fine with one.
  16. Click Save button to save the dictionary.
  17. Next step is creating marker type. Select Map elements->Marker types option from the top menu and then click Add button.
  18. Fill in the form like shown in the picture below. To select icon, use buttons next to it.
  19. Now we will define 3 parameters for this marker type. Select from parameters table first parameter and click Edit button.
  20. Fill in the displayed form as in the picture below and click Save in that window.
  21. Select second parameter from the table and click Edit button.
  22. Fill in displayed form as in the picture below and click Save in that window.
  23. Select third parameter from the table and click Edit button.
  24. Fill in the displayed form as in the picture below and click Save in that window.
  25. To save whole marker type. To do that click Save button.
  26. Now go to Map elements->Markers and click Add button.
  27. Fill the form like in the picture below. To select map, region and image use buttons next to them.
  28. Click Save and position button. Now you will see your map with the marker selected. Drag it to desired position and click Save changes to store its position.
  29. Next step is creating label. Go to Map elements->Labels and click Add button.
  30. Fill in the form like shown in the picture below. To select map, use buttons next to it.
  31. Click Save and position button. Now you will see your map with the label selected. Drag it to desired position and click Save changes to store it's position.
  32. Now logout from admin panel and go to frontend by deleting "/admin" part from current page url in browser.
  33. You can see our example map with one marker and label.
  34. On a left site of the screen, below map tree (with one map only), you can see our created region named Reception, when you click it, the map will move to indicated position and zoom it up to 50%.
  35. Try to use search option from menu on the left typing into the title field "John smith" and selecting from marker type field "Employee" option to show additional search options for the selected marker type.
  36. I hope that this tutorial allowed you to understand main concepts of managing YourMap. To learn more read manual or just try by yourself.