OpenLayers or doing transport monitoring service

Now on the market a lot of proposals for the sale of mobile devices designed to control moving objects or trackers. Most of them have the function of transmitting information via GPRS to any given web address after a certain time interval. Most often the data transfer format is different. Therefore, we will not consider the issue of downloading data from the tracker to the database. Suppose there is data and we want to start creating a service for monitoring transport. The basis of such a system is formed by the possibilities:
-select map and its display
-Display point or image and captions
- display of the polygon and its editing
- display of the line and its editing
- display of information connected with polygons, lines, dots (tooltips)
- a little mathematics (counting the distance traveled, the area of ​​the polygon, the point belonging to the polygon)
All of these functions are easy to implement using OpenLayers , a JavaScript library.


Map selection and display
To do this, on your page you need to create a div element with the desired size. It will display the map. Example:

div id="map" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;" 

Connect OpenLayers:

 script type="text/javascript" src="Scripts/OpenLayers.js" 

Create a global map variable in which the map object will be stored. Create a function call on the page loading event, which will contain the code for creating the map directly. Example:

 body onload="LoadMap()" 

Describe the LoadMap function:

 //    EPSG:900913. var maxExtent = new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508); var restrictedExtent = maxExtent.clone(); var maxResolution = 156543.0339; //     EPSG:4326. var options = { projection: new OpenLayers.Projection("EPSG:900913"), displayProjection: new OpenLayers.Projection("EPSG:4326"), numZoomLevels: 18, maxResolution: maxResolution, maxExtent: maxExtent, restrictedExtent: restrictedExtent }; //  map = new OpenLayers.Map('map', options); //  - VirtualEarth var veroad = new OpenLayers.Layer.VirtualEarth("Virtual Earth Roads", { 'type': VEMapStyle.Road, sphericalMercator: true }); var veaer = new OpenLayers.Layer.VirtualEarth("Virtual Earth Aerial", { 'type': VEMapStyle.Aerial, hericalMercator: true }); var vehyb = new OpenLayers.Layer.VirtualEarth("Virtual Earth Hybrid", { 'type': VEMapStyle.Hybrid, sphericalMercator: true }); //  - OpenStreet var mapnik = new OpenLayers.Layer.OSM(); //       map.addControl(new OpenLayers.Control.ScaleLine()); map.addControl(new OpenLayers.Control.MousePosition()); //     OpenLayers.Map map.addLayers([ mapnik, veroad, veaer, vehyb]); //    map.addControl(new OpenLayers.Control.LayerSwitcher()); //         var point0 = new OpenLayers.Geometry.Point(37.600328, 55.574624); //      ,       . point0.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")); //       9.    15. map.setCenter(new OpenLayers.LonLat(point0.x, point0.y), 9); } 

On the project site openlayers you can find many examples , about two hundred. An example of visualization of a map from a given service can be seen here . Most of the tasks in the article cover these examples. In the presented code, there is no accession of google and yandex cards, these cards need keys to work. You have to register, get the access key to the service and only after that you can connect to these services. Result code above:

Display point or image and captions
Create layers that our objects will store (dots and images).

 //    .   , ,     , (${} -   ,      ), url  ,  . var styleImage = new OpenLayers.Style( { graphicWidth: 21, graphicHeight: 25, graphicYOffset: -28, label: "${label}", externalGraphic: "http://www.openlayers.org/dev/img/marker.png", fontSize: 12 }); //labelYOffset -       var stylePoint = new OpenLayers.Style( { pointRadius: 5, strokeColor: "red", strokeWidth: 2, fillColor: "lime", labelYOffset: -16, label: "${label}", fontSize: 16 }); //   .   styleMap      .  select     . var vectorPoint = new OpenLayers.Layer.Vector("", { styleMap: new OpenLayers.StyleMap( { "default": stylePoint, "select": { pointRadius: 20} }) }); //     ,       ,         45  var vectorImage = new OpenLayers.Layer.Vector("", { styleMap: new OpenLayers.StyleMap( { "default": styleImage, "select": { rotation: 45} }) }); //    map.addLayer(vectorImage ); map.addLayer(vectorPoint ); 

Layers are created, we create functions that will work with layers.

 //    . : , , ,  , .  ,          . function addImg(lon,lat,title,ident, layr){ var ttt = new OpenLayers.LonLat(parseFloat(lon), parseFloat(lat)); ttt.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")); // features-   .    : , , ,  for (var k = 0; k < layr.features.length; k++) { //   features  ,       if(layr.features[k].attributes.ImgId==ident) { // move -       layr.features[k].move(ttt); layr.features[k].attributes.label=title; return false; } } var point0 = new OpenLayers.Geometry.Point(parseFloat(lon), parseFloat(lat)); point0.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")); //   Feature   OpenLayers.Feature.Vector layr.addFeatures(new OpenLayers.Feature.Vector(point0, { label: title, name: title, ImgId: ident })); } function addPoint(lon,lat,title,ident){ var ttt = new OpenLayers.LonLat(parseFloat(lon), parseFloat(lat)); ttt.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")); for (var k = 0; k < map.layers[5].features.length; k++) { if(map.layers[5].features[k].attributes.PointId==ident) { map.layers[5].features[k].move(ttt); map.layers[5].features[k].attributes.label=title; return false; } } var point0 = new OpenLayers.Geometry.Point(parseFloat(lon), parseFloat(lat)); point0.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")); map.layers[5].addFeatures(new OpenLayers.Feature.Vector(point0, { label: title, name: title, PointId: ident })); } </code>       : <code> addPoint(37,55.5,' 1','1',map.layers[4]); addPoint(37,55.1,' 2','2',map.layers[4]); addImg(37,55.6,' 1','2',map.layers[5]); addImg(37,55.9,' 2','2',map.layers[5]); 

Result:

Only one image was added because the function call was with the same image identifiers. The object has shifted, the name has been changed to a new one.
Polygon mapping and editing
Polygon creation function:

 //  :     ,      function addPoly(data,title,ident,layr){ var featuress = Array(); var coords = data.split(';'); for (var i = 0; i < coords.length; i++) { var d = coords[i].split(' '); var ttt = new OpenLayers.LonLat(parseFloat(d[0]), parseFloat(d[1])); var point0 = new OpenLayers.Geometry.Point(ttt.lon, ttt.lat); point0.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")); featuress.push(point0); } //   ,     var linearRing2 = new OpenLayers.Geometry.LinearRing(featuress); var polygonFeature2 = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Polygon([linearRing2]), { label: title, PolyID: ident }); layr.addFeatures(polygonFeature2); } 

An example of calling the polygon drawing function:

 addPoly('37 55.9;37.5 55.4;37 55','','1',map.layers[5]); 

Editing in OpenLayrs is done using OpenLayers.Control.ModifyFeature. You need to create an instance of this class specifying the layer whose objects you want to modify:

 var modef = new OpenLayers.Control.ModifyFeature(map.layers[5]) modef.clickout = false; modef.toggle = false; modef.standalone = true; map.addControls([ modef]); modef.activate(); //   modef.selectFeature(map.layers[5].features[2]); //   var centr = map.layers[5].features[2].geometry.getCentroid() //     map.setCenter(new OpenLayers.LonLat(centr.x, centr.y)); 

Each vertex of the polygon at the moment of editing is indicated by a point and due to the fact that we placed the polygon on the layer for points, the style of this layer was applied to them. Result: the caption "undefined" at the vertices of the polygon. This is an example of the fact that for each type of objects it is better to create separate layers. Display mode example:

Exit edit mode:

 modef.deactivate(); 

Line display and editing
As already mentioned, the polygon is created from the line, so in the AddPoly function you need to change one line:

  layr.addFeatures(polygonFeature2); 

on

 layr.addFeatures(linearRing2 ); 

The editing process is no different.
Tooltips
To implement a tooltip, you need to add an event handler to the map, which is an instance of the class: OpenLayers.Control.SelectFeature.

 var selectControl = new OpenLayers.Control.SelectFeature([map.layers[5]]); map.addControls([selectControl], { clickout: true, toggle: false, multiple: false, hover: true, toggleKey: "ctrlKey", multipleKey: "shiftKey" }); selectControl.activate(); 

After that, the processing of clicks on layer objects will take place. The points will increase in size, the pictures rotate 45 degrees. Create a point selection event handler:

 // on -    map.layers[5].events.on( { "featureselected": function (e) { var HTMLcontent; var point //     HTMLcontent = 'table style="width: 100%;" tr td    td tr table '; //getCentroid() -   ,    ,         point = new OpenLayers.LonLat(e.feature.geometry.getCentroid().x, e.feature.geometry.getCentroid().y); //OpenLayers.Popup.AnchoredBubble -  ,     OpenLayers.Popup var popup = new OpenLayers.Popup.AnchoredBubble("SDVegetationInfo", point, new OpenLayers.Size(100, 100), HTMLcontent, null, false); popup.opacity = 0.9; popup.autoSize = true; popup.setBackgroundColor("#bcd2bb"); //   map.addPopup(popup, true); } //   ,     , "featureunselected": function (e) { setTimeout('if(map.popups.length - 1>-1){map.removePopup(map.popups[map.popups.length - 1]);}', 1000); } }); 

Counting the distance traveled, the area of ​​the polygon, the belonging point to the polygon
Counting the distance traveled

 map.layers[4].features[2].feature.geometry.getLength() 

polygon area

 map.layers[4].features[2].feature.geometry.getArea() 

polygon point

 map.layers[4].features[2].containsPoint(map.layers[4].features[0]) 

The result of all previous actions can be seen on the page: link

In conclusion, many companies have already made their trackers on OpenLayers is cheap and easy. OpenLayers documentation can be found here .