×
Menu
Search
 
   
   
   
 
 

2.22. Applications

 
Create a new application
To create a new application, you must have access to the administration panel as a partner or administrator. In the "Applications" section of the main menu
 
Next, click the "Add" button, fill out the form and save it.
 
 
Parameter values:
 
After creating the application, it is necessary to contact technical support to activate proxying to the application address. In the future, this process will be automated.
As a result, proxying from the address https://pilot-gps.com/store/{name} → application URL will be configured. For example https://pilot-gps.com/store/countries → http://example.com/countries
After that, it is possible to start building and testing the application. Until the final publication of the application (done by the technical support team), the application will be available in the app store only to users with the 'master' role (authorization from the admin panel), in the 'Draft' status. We install the application in the contract on which we will test and turn on the application for the current user.
 
 
 
 
 
Application programming.
At startup, the application loads a base module called Store.{name}.Module. For example: Store.countries.Module. The module must be a descendant of the Ext.Component class and have the initModule function, which specifies the operations necessary to load the module and determined by the module's logic. The module must be placed in the root folder of the project. You can download all other necessary application files from it.
 
Module code example:
Ext.define('Store.airports.Module', {
    extend: 'Ext.Component', // функция инициализации модуля
    initModule: function () {
        var cmp = this;
        //создаем панель - закладку для раздела навигации
        var nav = Ext.create('Store.airports.Tab', {});
        // создаем панель для отображения в области карты связянную с панелью навигации
        nav.map_frame = Ext.create('Store.airports.Map', {});
        // размещаем элементы в нужные позиции
        skeleton.navigation.add(nav);
        skeleton.mapframe.add(nav.map_frame);
        //if you need to load css file
        // загружаем дополнительный файл стилей
        var css = document.createElement("link")
        css.setAttribute("rel", "stylesheet")
        css.setAttribute("type", "text/css")
        css.setAttribute("href", '/store/airports/airports.css');
 
    }
});
 
In this example, the module consists of 3 JS files - classes Store.airports.Module, Store.airports.Tab, Store.airports.Map
 
The only required files are Module.js and doc/index.html (application documentation that is displayed in the app store)
Everything else is determined by the logic of the project. Access to any project files occurs along the path /store/{name}/
For example /store/countries/countries.css
 
 
 
1 - skeleton.navigation
2 - skeleton.mapframe
3 - skeleton.header
4 - skeleton.footer
5 - skeleton.navigation.online
6 - skeleton.navigation.online.online_tree
7 - skeleton.navigation.online.online_tree.contextmenu
 
The global template for the PILOT window is available at the global reference skeleton. This is a global system panel with a border type layout. It is possible to embed additional panels into it.
 
Example:
var new_panel= skeleton.add({xtype:"panel",region:"east",width:250,split:true,html:"<h1>NEW PANEL</h1>"});
 
Result:
 
skeleton.navigation - navigation bar. the component added to it must be inherited from the class Ext.panel.Panel or its descendants and have the parameters title and iconCls and iconAlign: 'top', to display the main menu tab.
 
Examples:
Ext.define('Store.airports.Tab', {
    extend: 'Ext.grid.Panel',
    xtype: 'store-airports-tab',
    iconCls: 'fa fa-plane',
    title:'Airports',
    iconAlign: 'top',
    layout: 'fit',
.......
 
Ext.define('Store.planets.Tab', {
    extend: 'Ext.grid.Panel',
    xtype: 'store-planets-tab',
    iconCls: 'fa fa-sun',
    title:'Planets',
    iconAlign: 'top',
    layout: 'fit',
........
 
 
Result:
 
skeleton.mapframe - map panel. It has a layout of type card. When creating a component added to it, it must be associated with an already created element in the navigation panel. In this case, it will open when you switch to the corresponding tab in the navigation panel.
 
Example:
var navigation=Ext.create('Store.planets.Tab',{});
var mapframe= Ext.create('Store.planets.Map',{});
navigation.map_frame =mapframe;
skeleton.navigation.add(navigation);
skeleton.mapframe.add(mapframe);
 
Result:
 
skeleton.header - top toolbar. You can add components to it using the add and insert methods.
 
Example:
skeleton.header.insert(4,{xtype:'button',iconCls:'fa fa-star',handler:function(){alert('STAR!');}});
 
Result:
 
skeleton.footer - bottom toolbar. You can add components to it using the add and insert methods.
 
 
Example:
skeleton.footer.insert(4,{xtype:'button',iconCls:'fa fa-star',handler:function(){alert('STAR!');}});
 
Result:
 
skeleton.navigation.online - tab bar of the global tab Online. the component added to it must be inherited from the Ext.panel.Panel class or its descendants and have the iconCls and iconAlign: 'top' parameters to display the tab.
 
 
Example:
skeleton.navigation.online.add({xtype:'panel',iconCls:'fa fa-star'});
 
Result:
 
skeleton.navigation.online.online_tree - the main online object tree. It is possible to manipulate the tree as an Ext.tree.Panel object
 
skeleton.navigation.online.online_tree.contextmenu - object's context menu. you can add a menu and get a record in the handler with the properties of the object.
 
 
Example:
skeleton.navigation.online.online_tree.contextmenu.insert(2,{text:'show object IMEI', iconCls:'fa fa-barcode',scope:
skeleton.navigation.online.online_tree,handler:function(){alert(skeleton.navigation.online.online_tree.record.get('uniqid'));
 
Result:
 
 
Using Backend PILOT API Functions
getting object tree (GET)
can be used in  Ext.data.TreeStore
Available at url base_url+' /ax/tree.php'
 
Options:
 
 
 
Using the Maps API Functions
Map initialization. 
 
var map = new MapContainer('map_name');
map.init(lat, lon, zoom, div_id, config);
 
The html element into which the map is embedded must exist at the time the map is created, therefore, when initializing the component, it is recommended to call the map initialization code in the render event handler.
 
 
Example for a component inherited from Ext.panel.Panel:
 
Ext.define('Store.airports.Map', {
        extend: 'Ext.panel.Panel',
        xtype: 'store-airports-map',
        layout: 'fit',
        initComponent: function () {
            this.listeners= {
                render: function () {
                    var zoom = localStorage.getItem('zoom');
                    if (!zoom) {
                        zoom = 4;
                    }
                    var lat = localStorage.getItem('lat');
                    if (!lat) {
                        lat = 55.75;
                    }
                    var lon = localStorage.getItem('lon');
                    if (!lon) {
                        lon = 37.65;
                    }
                    this.map = new MapContainer('airports');
                    this.map.init(lat, lon, zoom, this.id + '-body', false);
                },
                resize: function (me, width, height, oldWidth, oldHeight, eOpts) {
                    this.map.checkResize();
                }
            };
 
            this.callParent();
 
        }
    }
);
 
Working with polygons
create a polygon:
map.setPolygon(points,options);
remove polygon:
map.removePolygon(id);
remove all polygons:
map.clearAllPolygons();
Options:
 
Example:
 
var latlngs = [[51, 17 ],[54.2, 16.3],[53, 20.44],[52, 23.1],[49,21]];
 
mapContainer.setPolygon(latlngs,{color:"#ee0033",id:1,label:"My NEW Polygon"});
 
 
Result:
 
Working with markers
 
Create marker:
map.addMarker();
Remove marker:
map.deleteMarker(id);      
Parameters:
{msg: "marker text",
                 options: {
                     direction: 'bottom' // position
                 }
             },
 
 
 
[{
name: 'bounce', animation type
options: { animation options
times: 3
}
}],
 
contextmenu - context menu, object:
 
 [{
text: 'element',
index: 0,
callback: function(){}
}],
 
 notBindToMap -  true - do not show the marker on the map (required for clusters ),
 notPushedState -  true - Do not add to the array of global markers
 label - marker label
 
{
text: -- marker label - text
options: {} -- marker label options
},
 
 
customOptions: 
 
{
type: string -- можно выделить маркеры в скоуп, потом удалить все разом
}
 
   Marker control functions:
 
 
 Marker events:
 
Example :
map.addMarker({id:"111",lat:55.75455,lon:37.62165,icon:'https://pilot-gps.com/images/icons/bus.png',
 x:60, y:40 ,opacity:1,label:{text:'BUS'}});
 
 
Result :
 
Clusters.
Clusters on the map are groups of closely spaced markers that are combined into one icon to reduce the number of objects displayed on the map. This allows to reduce the load on the map and improve its performance. When you click on a cluster, the scale of the map changes in such a way as to display all the markers included in the cluster. Clusters are often used in interactive maps such as store maps, tourist maps, and restaurant maps where a large number of markers need to be displayed on the map.
 
Method: addCluster
Parameters:
•markers - An object containing the markers to be added to the cluster. The object must have the structure [{lat, lng, id}, {lat, lng, id}, ...], where lat and lng are marker coordinates, id is a unique marker identifier.
•options - An object containing the options for the cluster. Settings can be as follows:
 
 
Cluster object methods:
•     focus() - the method allows you to set the map scale so that all cluster markers are visible on it.
•     removeMarkers(layers) - method to remove markers from the cluster. Accepts an array of markers to be removed.
•     appendMarkers(markers) - method to add markers to the cluster. Accepts an array of markers to be added.
•     updateMarkers(updateMarkers) - method to update cluster markers. Accepts an array of markers to be updated.
 
Return value:
The function returns a cluster object.
Create a cluster
 
const markers = [{
     lat: 50.1, lon: 30.5, id: 'marker1'
 }, {
     lat: 50.2, lon: 30.6, id: 'marker2'
 }, {
     lat: 50.3, lon: 30.7, id: 'marker3'
 }];
 const cluster = mapContainer.addCluster(markers, {
     chunkedLoading: false,
     spiderfyDistanceMultiplier: 4,
     isClusterHoverContent: true,
     id: 'cluster1'
 });
 cluster.focus();
 
 
 
Method: getCluster
The getCluster(id) function returns a cluster with the given identifier (id) from an array of clusters.
 
Options :
Returns :
Exceptions :
•If the id argument is not given, the function throws an error with the message "Call method getCluster. Argument id is null".
If a cluster with the given identifier (id) is found, the function returns this cluster. Otherwise, the function prints a warning to the console with the message "Cluster with id: {id} not found" and returns null.
 
 
Deleting a cluster
сonst cluster = map.getCluster('cluster-1');cluster.focus();
 
Method: removeCluster
The removeCluster function removes a cluster from the map by its id and removes all markers belonging to this cluster.
 
Options:
Return value:
The function returns a reference to the current map object.
 
Usage example:
Deleting a cluster
// Delete the cluster с id "cluster-1"
map.removeCluster("cluster-1");
 
// Delete the clusterр с id "cluster-2"
map.removeCluster("cluster-2");
 
Method: clearAllClusters
The function clearAllClustersremoves all clusters from the map.
Options:
The function takes no parameters.
Return value:
The function does not return a value.
 
Usage example:
Removing clusters
map.clearAllClusters()
 
Method: recreateVehiclesCluster
The function recreateVehiclesClusterrecreates vehicle marker clusters.
Parameters: The function does not take any parameters.
Return value: The function does not return any values.
 
Actions:
1.The presence of a cluster of vehicle markers is checked using the getCluster method.
2.If the cluster is found, then all animated markers on the map are removed using the removeAllAnimateMarkers method.
3.Then the found cluster is removed using the removeCluster method.
4.A new cluster is created, markers from the previous cluster are added using the addCluster method, and the cluster settings are passed to the options object.
5.Expect 1 second with setTimeout method.
 
 
Usage example:
recreateVehiclesCluster
map.recreateVehiclesCluster()
 
 
Circles. 
addCircle function
The addCircle(options, marker) method adds a circle element to the map.
 
Options :
•options - an object with parameters that can be passed to create a circle. Possible options:
•marker - the marker to which the circle should be attached. Optional parameter.
 
Methods :
Returns : the circle created on the map.
 
Usage example:
recreateVehiclesCluster
 const circle = mapContainer.addCircle({
    id: "myCircle",
    lat: 35.71084,
    lng: 45.35156,
     radius: 500,
     label: "My"
});
 
 
 
GetCircle function
The addCircle(options, marker) method adds a circle element to the map.
 
The getCircle(id) method is a function that takes an id as a parameter and returns a circle from the circles array whose id property value matches the passed id value.
 
Options:
Return value:
Usage example:
recreateVehiclesCluster
const circle = mapContainer.getCircle('myCircle')
 
RemoveCircle function
The removeCircle(id) method is a function that removes a circle from the circles array whose id property value matches the passed id value. Deleting a circle also deletes its associated lines and elements on the canvas associated with the circle.
 
Options:
Return value:
Usage example:
recreateVehiclesCluster
mapContainer.removeCircle('myCircle')
 
RemoveAllCircles function
The removeAllCircles(type) method is a function that removes all circles from the circles array. The method also removes the items on the canvas associated with each circle.
 
Options:
Return value:
Usage example:
recreateVehiclesCluster
[
  { id: 1, radius: 10, type: 'red' },
  { id: 2, radius: 20, type: 'green' },
  { id: 3, radius: 30, type: 'red' }
].forEach(circle => mapContainer.addCircle(circle));
 
mapContainer.removeAllCircles('red');
 
console.log(mapContainer.circles); // [{ id: 2, radius: 20, type: 'green' }]
 
CustomControls.
The addCustomContro l(name, domEl, position) method allows you to add a custom control to the map.
 
AddCustomControl Function
Options:
Return value:
Usage example:
recreateVehiclesCluster
var customControl = document.createElement('div');
customControl.style.background = '#ff0000';
customControl.innerHTML = 'Custom Control';
mapContainer.addCustomControl('customControl1', customControl, 'bottomright');
 
 
removeCustomControl function
The method removeCustomControl(name)removes the user control from the map.
Options:
Return value:
Usage example:
recreateVehiclesCluster
mapContainer.removeCustomControl('customControl');
 
How the method works:
 
setFullscreen function
The method setFullscreen(isActive)allows you to set the full screen mode of the map.
Options:
Return value:
Usage example:
recreateVehiclesCluster
mapContainer.setFullscreen(true);
 
How the method works:
•The method uses localStorage.setItem() to save the value of the boolean variable isActive with key 'fullscreen'.
•If isActive is true, the method creates a new instance of the L.Control.Fullscreen() control and adds it to the map using this.addControlMap(). This allows you to switch the map to full screen mode.
•If isActive equals false, the method removes the control with ID 'fullscreen' using this.removeControlMap(). This exits full screen mode.
 
 
Errors:
 
 
Polylines.
addPolyline function
The method addPolyline(points, options)adds a polyline to the map.
Options:
•points - array of polyline points, each point is an array [lat, lng] with point coordinates.
•options - object with polyline settings:
 
 
Return value:
Usage example:
recreateVehiclesCluster
var points = [[51.505, -0.09], [51.51, -0.1], [51.51, -0.12]];
var options = {
    color: '#FF0000',
    id: 'myPolyline'
};
var polyline = mapContainer.addPolyline(points, options);
 
How the method works:
•The method uses L.polyline() to create a new polyline based on the points array and the options object.
•If the options object has a color parameter, the method uses layer.setStyle() to set the color of the polyline.
•The method creates a unique polyline identifier based on the points array of points if the options.id parameter is not specified.
•The method removes an existing polyline with the same id, if any, using this.removePolyline(id).
•The method adds a new polyline layer to the map using layer.addTo().
•The method adds a new polyline to the polylines array as an object with an identifier and a polyline layer.
•The method returns a polyline object.
 
Errors:
•If points are not an array or does not contain arrays of points [lat, lng], the method will not work correctly.
•If options.className is not a string, the method will not work correctly.
•If options.color is not a string in the format '#RRGGBB', the method will not work correctly.
•If options.id is not a string, the method will not work correctly.
 
 
RemovePolyline function
This method is used to remove a polyline from the map and from the list of lines on the map. It takes one argument id - the ID of the line to be removed.
 
If the id argument is missing, the method throws an "Error call method removePolyline" error.
 
 
RecreateVehiclesCluster
mapContainer.removePolyline('myPolyline');
 
getPolyline Function
This method is used to get the line with the specified ID. It takes one argument id - the ID of the line to get.
 
The method iterates through the list of lines on the map and finds the line with the passed ID using the find() method. If no line with the specified ID is found, the method returns undefined. If the line is found, the method returns an object with two properties: id - line identifier, layer - line layer object on the map.
 
recreateVehiclesCluster
mapContainer.getPolyline('myPolyline');
 
 
History tracks
 
addHistoryTrack function
The addHistoryTrack function is used to add and display a route on the map.
 
Function parameters
data: An object containing information about the route. It must contain the following properties:
 
•points (required): An array containing the coordinates of the waypoints. Each array element must be an array containing latitude, longitude, speed, timestamp values
•markers (optional): An array of marker objects on the map.
 
Parameters: An object containing additional options. It may contain the following properties:
 
•id (optional): Route ID.
•color (optional): The color of the route on the map.
•width (optional): The width of the route on the map.
•polyline (optional): Additional options for the route line.
 
 
Return Values
The historyTrack object is returned.
Methods
•addMarker(options): Adds a marker to the map and stores it in the markers array.
•getMarker(id): returns the marker with the given id from the markers array.
•updateMarker(options, callback): updates the coordinates of the marker with the given id or adds a new marker to the map if there is no marker with the same id yet. If a callback is given, it will be called after the token has been updated.
•removeMarker(id): removes the marker with the given id from the markers array and from the map.
•focus(): Centers the map on the polylines.
 
Usage example:
RecreateVehiclesCluster
var data = {
    points: [
        [55.75222, 37.61556, 0, 1617206400], // 0 lat, 1 lng, 2 speed, 3 timestamp
        [55.74896, 37.62011, 10, 1617206460],
        [55.7437, 37.62343, 20, 1617206520],
        [55.7379, 37.62368, 30, 1617206580],
        [55.73148, 37.62289, 40, 1617206640],
        [55.72444, 37.621, 50, 1617206700],
        [55.71629, 37.61875, 60, 1617206760],
        [55.71145, 37.61775, 70, 1617206820],
        [55.7054, 37.61752, 80, 1617206880],
        [55.69833, 37.61611, 90, 1617206940],
        [55.69164, 37.61401, 100, 1617207000]
    ],
    markers: [
        {
            lat: 55.75222,
            lon: 37.61556,
            id: 1,
            popup: {
                content: 'Start'
            }
        },
        {
            lat: 55.69164,
            lon: 37.61401,
            id: 2,
            popup: {
                content: 'Finish'
            }
        }
    ]
};
 
var options = {
    id: 1,
};
 
mapContainer.addHistoryTrack(data, { id: 'history-track', width: 10 });
 
 
 
RemoveHistoryTrack function
The method removeHistoryTrack(id)removes historyTrack from the map
Options:
Usage example:
recreateVehiclesCluster
mapContainer.removeHistoryTrack('history-track');
 
getHistoryTrack function
The getHistoryTrack method (id)returns a historyTrack object
Options:
Usage example:
recreateVehiclesCluster
mapContainer.getHistoryTrack('history-track');