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 mapmap:
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);