Facebook Pixel Code
GoMap MAP
Tutorial: Adding GoMap into the web page. Easy to use GoMap TMS service

Version 0.4 - 01 june 2013.

Goal

The purpose of this tutorial show you how to create a simple web page with a GoMap map as well as to produce basic operations with it - zooming and dragging.

Details

You will need the editor HTML. The example uses the library OpenLayers, which is available at http://openlayers.org (opens in new window).

Easy to use GoMap.Az and Openlayers API

The tutorial allows you to create a simple map based on GoMap.Az and Openlayers API. Ready example be here (opens in new window).

In <head> section need to enable JavaScript library OpenLayers:

            <script src="http://openlayers.org/api/2.12/OpenLayers.js"></script>

Also in <head> section necessary create global variable var map; which will store the map object and function init() that will initialize the map.
In init() first of all create a map. In this case, it should be noted that in order to display the map will use the region <div id="map"> which is located in <body>
Projection units of the coordinate system (meters) and the boundary of the show can be set according to the example:

            map = new OpenLayers.Map({
                div: "map",
                projection: new OpenLayers.Projection("EPSG:900913"),
                units: "m",
                restrictedExtent: new OpenLayers.Bounds(4400000, 4600000, 5700000, 5500000)
});

Set the projection for display the map:

map.displayProjection = new OpenLayers.Projection("EPSG:4326");

Create a map layer - GoMap.Az. Map layer GoMap.Az works in the likeness of OSM layers (OpenStreetMap). In this library management OpenLayers three parameters x, y, x, where z is the zoom level. Lng parameter specifies the language (az, en, ru). The parameter f specifies the format of map tiles.

            var gomapLayer = new OpenLayers.Layer.OSM(
"GoMap.Az", "http://maps.gomap.az/info/xyz.do?lng=ru&x=${x}&y=${y}&z=${z}&f=jpg", {
'buffer': 0, attribution: "(c) <a href='http://gomap.az/'>GoMap.Az</a>",
tileOptions: { crossOriginKeyword: null },
transitionEffect: 'resize',
zoomOffset: 7,
numZoomLevels: 12,
maxResolution: 1222.99245234375
});

Add the created layer to the map map:

         map.addLayers([gomapLayer]);

The result indicates the center of the map and zoom level, and that will set the map display when you first open the page.

        map.setCenter(new OpenLayers.LonLat(5551660.2717726,4921653.5202719), 5);

In order to function init() worked when you first open the page, call it at the end of loading section <body>

<script  type="text/javascript">
              init();
        </script >

This example allows you to work with one layer map. The following describes the addition of a layer GoogleMaps and work with 2 layers.

Adding a layer GoogleMaps

Ready example be here (opens in new window).

In <head> section need to enable JavaScript library GoogleMaps:

         <script src="http://maps.google.com/maps/api/js?v=3.3&sensor=false"></script>

In init() besides a map layer GoMap.Az, added layer satellite map Google:

         var googlemapLayer = new OpenLayers.Layer.Google("Google Satellite", {type: google.maps.MapTypeId.SATELLITE, MIN_ZOOM_LEVEL: 7, MAX_ZOOM_LEVEL: 18});

Function to add layers to the map:

         map.addLayers([gomapLayer, googlemapLayer]);

In order to map layers can be switched, add a user interface element switching layers. This element will display near the right border region maps plus sign, which will select the displayed map.

         map.addControl(new OpenLayers.Control.LayerSwitcher());

Adding a marker on the map

Ready example be   here (opens in new window).
In <head> must create global variables

var sprintersLayer;
var defaultStyleMap = {
externalGraphic: "flag.png",
graphicOpacity: 1.0,
graphicWidth: 195,
graphicHeight: 100,
graphicXOffset: -125,
graphicYOffset: -95,
graphicZIndex: 99
});

The sprintersLayer is a vector layer, which will be placed markers.
The defaultStyleMap contains data about the drawing marker, width, height and location of the picture (not marker!)
In the init () function will initiate a vector layer

sprintersLayer = new OpenLayers.Layer.Vector("Sprinters", {
styleMap: new OpenLayers.StyleMap(defaultStyleMap)
});

Add a vector layer to the map

map.addLayers([gomapLayer,googlemapLayer,sprintersLayer]);

Add the "kinetics" to the smoothing effect when "dragging" cards (in particular for the convenience of using mobile devices)

map.addControl(new OpenLayers.Control.TouchNavigation({
dragPanOptions: {
enableKinetic: true
}
}));

Now add to the vector layer the possibility of "clicking" on a marker

click = new OpenLayers.Control.SelectFeature(
[sprintersLayer],{
clickout: true, toggle: false,
multiple: false, hover: false,
toggleKey: "ctrlKey",
multipleKey: "shiftKey"
});
map.addControl(click);

And describes the event

sprintersLayer.events.on({
"featureselected": function(e) {
alert('selected');
},
" featureunselected": function(e) {
alert('unselected');
}
});

click.activate();

Place a marker indicating its coordinates

var lonlat = new OpenLayers.LonLat(49.86694,40.39528).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);

Initiate marker (flag), ask him to coordinate and add to the vector layer

var flag = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(Math.floor(lonlat.lon), Math.floor(lonlat.lat)));
flag.x = lonlat.lon;
flag.y = lonlat.lat;
sprintersLayer.addFeatures(flag);

Center the map on it

map.setCenter(lonlat, 9);

Add object