Facebook Pixel Code
GoMap MAP
Tutorial: The set of markers and information cloud

Version 0.1, 11 feb 2015.

In the first tutorial were considered the connection map layer - GoMap, as well as the setting the marker on the map. Now we will look at how to set multiple markers on the map and when you print the information in the "cloud".

We will need to create a file that will contain the coordinates and description of the objects. We will use this structure on JSON-based document.

Create a file markers.js which will contain:

{
"markers": [
{
"id": "1",
"lat": "40.378729",
"lon": "49.851327",
"nm": "Marker 1",
"info": "Info for Marker 1"
},
{
"id": "2",
"lat": "40.3689631",
"lon": "49.8376389",
"nm": "Marker 2",
"info": "Info for Marker 2"
},
{
"id": "3",
"lat": "40.3736876",
"lon": "49.8153014",
"nm": "Marker 3",
"info": "Info for Marker 3"
}
]
}

Where id - unique identification number of the object; lat , lon - coordinates of the object; nm - the name of the object; info - other information which will be displayed in the "cloud."

Connect the library jQuery.

             < script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

Now you need to put markers on the map, we will do as described in the first lesson.Let us describe the function loadMarkers() :

function loadMarkers(){
$.getJSON("markers.js", function (data) {
var i=0;
$.each(data.markers, function () {
var lonlat = new OpenLayers.LonLat(this.lon, this.lat).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);

var flag = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(Math.floor(lonlat.lon), Math.floor(lonlat.lat)), { description: 'flag' }, defaultStyleMap);
flag.fid = i++;
flag.x = lonlat.lon;
flag.y = lonlat.lat;
flag.lonlat = lonlat;
flag.nm = this.nm;
flag.info = this.info;
sprintersLayer.addFeatures(flag);
});
mapShowArea();
});
}

We now describe the function mapShowArea () which will zoom the map in sight markers.

function mapShowArea(){
var features = sprintersLayer.features;
if (features.length > 1){
var k=0;
for(var j=0; jvar feature = features[j];
k++;
if (k==1){
xmin = feature.x;
ymin = feature.y;
xmax = feature.x;
ymax = feature.y;
}

if (feature.x < xmin) xmin = feature.x;
if (feature.x > xmax) xmax = feature.x;
if (feature.y < ymin) ymin = feature.y;
if (feature.y > ymax) ymax = feature.y;
}

var bounds = new OpenLayers.Bounds();
bounds.extend(new OpenLayers.LonLat(xmin, ymin));
bounds.extend(new OpenLayers.LonLat(xmax, ymax));
map.zoomToExtent(bounds);
}else if (features.length == 1){
var feature = sprintersLayer.features[0];
var lonlat = new OpenLayers.LonLat(feature.x, feature.y);
map.setCenter(lonlat, 11);
}
}

Now move on to the creation of an information cloud. Let us describe the function showPopup (flag). Where the flag parameter is marker.

function showPopup (flag) {
if (Popup == undefined) {
Popup = new OpenLayers.Popup.FramedCloud("Info",
map.getCenter(),
new OpenLayers.Size(300, 200),
flag.info,
null,
true,
null);

Popup.autoSize = true;
Popup.fixedRelativePosition = true;
PopuprelativePosition = "br";
Popup.panMapIfOutOfView = true;
map.addPopup(Popup);
}

Popup.hide();

if (flag.lonlat) {
Popup.lonlat = flag.lonlat;
Popup.updatePosition();
}

Popup.setContentHTML(flag.info);
Popup.updateSize();
Popup.show();
}

Further call this function when you click on a marker.

sprintersLayer.events.on({
"featureselected": function(e) {
click.unselectAll();
map.panTo(e.feature.lonlat);
showPopup(e.feature);
},
"featureunselected": function(e) {
}
});

Ready working example can be found following this link

Add object