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.