Directory structure

Below there is an overview of the application directory structure.

Whole application directory structure

admin - all administrator panel files (js, css and html, see 'yourmap_css_js_sources' folder in app package)

common - common files (css, images, js, see 'yourmap_css_js_sources' folder in app package) used by frontend and administrator panel

css - css files used in frontend

gate - PHP script, directory structure described below

img - images used in frontend

install - this directory contains database structure installator, it should be removed after installation

js - js files used by frontend (see 'yourmap_css_js_sources' folder in app package)

uploads - here are stored all uploaded icons, images and map images

index.html - application start page

PHP gate directory structure

application/configs - configuration files

application/controlers - two main controllers that have methods called by frontend

application/filters - some filters used when creating html data

application/helpers - view hepers used for generating html data

application/models - classes responsible for mapping data to db layer

application/resources - custom zend application resources

application/router - main app router that translates frontend queries into controllers methods

application/validators - validator functions used to validate all data from frontend

application/vo - value object used to describe data in script

data/cache - directory that holds cached data that is used when user browses map

data/generated - here are css file that contains marker types colors

data/logs - main PHP script application log file

data/session - session storage for logged users

library - zend framework libraries and some others used in app

css.php - this file returns generated css file with marker types colors definied in administrator panel

index.php - main PHP script entry file

How map displaying works

Whole application communicate with PHP script using json format.

YourMap application uses modified PanoJS plugin to display maps.

In the HTML application structure there are div with id mapContainer defined. This div element holds mapViewer div used to display map image by Leaflet plugin.

<div id="mapContainer">
 <div id="mapViewer" class="viewer" style="width: 100%; height: 100%;" ></div>
 ...
</div>

When user zooms in and out the map there are css classes dynamically added to mapContainer div.

For example classes added to that div can look like this:
class="map-id-1 zoom-50 zoom-gt-1 zoom-gt-3 zoom-gt-6 zoom-gt-12 zoom-gt-25 zoom-lt-100"
This will tell you that current map id is 1, and zoom is 50%, similarly zoom-gt-1 means that current zoom value is more than 1% (it is 50%).

The described above class names are used by app to show appropriate elements on different zoom levels (like marker icons, marker details, etc.).

All rules that define what is displayed on various zoom levels are defined in map-elements.css file that can be found in application common/css path. To find it unminified version check yourmap_css_js_sources folder in app package.