Yandex maps api 2.1 transition

In this article, I want to start a series of articles on working with the Yandex.Maps API. The Yandex.Maps documentation is quite complete, but the degree of fragmentation of information in it is high, when you first enter the documentation without half a liter, you can’t figure it out, and to solve a problem, you can spend a lot of time searching through the documentation and in a search engine. This series of articles will talk about practical solutions to the most common cases of using the Yandex.Maps API of the latest, at the time of this writing, version 2.1.

When laying out a site in contact information, it is often necessary to insert a map on which the location of the organization for which the site is being developed will be marked. In the simplest cases, this can be just a screenshot from online maps (or not online):

For insert interactive map map builder can be used
https://tech.yandex.ru/maps/tools/constructor/ :

If we need a more advanced use of maps (our own labels, programmatic movement of maps, etc.), then for this we need to use the Yandex.Maps API: https://tech.yandex.ru/maps/jsapi/ . As an example of how to use maps, this article will look at creating a map with the simple addition of a custom label and balloon.

First, let's connect the API components:

If some large application is being developed using maps, then it is better to connect the API components of a certain version so that when updating the API on the Yandex side, nothing breaks in production:

The map will need to be placed in some block, for example in div#map. Next, the map must be created in this block (after the map and DOM readiness event is triggered):

Here we indicate:

1. block identifier map, where we will create a map;
2. center— the center of the map indicating the width and longitude;
3. zoom— map scale factor.

By default, Yandex.Maps creates a lot of unnecessary elements, which in most cases are not needed on websites. Basically, it is enough to apply 2 conditions to the controls and to the behavior of the map:

1. of the map elements, only the zoom slider is present;
2. the map should not be zoomed with the mouse scroll.

To fulfill these requirements, we supplement the code:

Here we have disabled scrollzoom and added "zoom control" positioned from the top left corner.

Now we need to add a label to the map, for the article we will download its image from http://medialoot.com/item/free-vector-map-location-pins/ and place it in the code as follows:

Here we declare a variable myPlacemark, in which we write the marker, in the first parameter ymaps.Placemark specify the label coordinates, and in the third parameter:

1. indicate in iconLayout that a custom label image will be used;
2. iconImageHref- path to the image;
3. iconImageSize- specify the size of the image;
4. iconImageOffset- we indicate the shift from the upper left corner of the picture to the point of the image, which we point to the object we need. This is necessary so that when the map is scaled, the position of the label does not go astray. Why the offset is indicated in negative values ​​- only God knows the creator of the API.

And through myMap.geoObjects.add() add a marker to the map.

And now let's make a balloon that will be shown when we click on the map label, we will take the layout of the balloon and its contents from http://designdeck.co.uk/a/1241

ymaps.ready(init) ; function init() ( var myMap; myMap = new ymaps.Map ("map" , ( center: [ 55.7652 , 37.63836 ] , zoom: 17 , controls: ) ) ; myMap.behaviors .disable ("scrollZoom" ) ; myMap. controls .add ("zoomControl" , ( position: ( top: 15 , left: 15 ) ) ) ; var html = " "; html += "" ; html +=" "; html += " The Victoria Tower Gardens " ; html += "" ; html +=" City of London " ; html += "" ; html += " United Kingdom " ; html += " 020 7641 5264 " ; html += " " ; html += " " ; var myPlacemark = new ymaps.Placemark ([ 55.7649 , 37.63836 ] , ( balloonContent: html ) , ( iconLayout: "default#image" , iconImageHref: "http://site/files/APIYaMaps1/min_marker.png", iconImageSize: [ 40 , 51 ] , iconImageOffset: [ - 20 , - 47 ] , balloonLayout: "default#imageWithContent" , balloonContentSize: [ 289 , 151 ] , balloonImageHref: "http://site/files/APIYaMaps1/min_popup.png", balloonImageOffset: [ - 144 , - 147 ] , balloonImageSize: [ 289 , 151 ] , balloonShadow: false ) ) ; myMap.geoObjects .add (myPlacemark) ; )

We are here:

1. in balloonContent specify the content that will be displayed when the balloon is opened;
2. balloonLayout- specify that a custom image will be used as the balloon layout;
3. balloonContentSize and balloonImageSize— sizes of content and images, respectively;
4. balloonImageHref- path to the image;
5. balloonImageOffset- offset relative to the upper left corner;
6. balloonShadow— disabling the shadow of the balloon (it doesn't affect anything with custom images).

A release candidate is a version of the API, which is available for public use, but is still under approval. Before installing the release candidate as a stable version, as soon as it is released, it is tested for bugs that may lead to API functionality degradation. By using release candidates in your projects, you can help us timely identify potential errors. You can also pretest your app"s operation with a new version of the API.

Release candidates should be used in the app development and testing environment. This will help you avoid errors in the production environment. You can enable a release candidate as follows:

At the very beginning, we connect the maps API at http://api-maps.yandex.ru/

Let's look at the options in more detail:

lang - set by two parameters language_region,

language - two-digit language code. Specified in ISO 639-1 format.
region - two-digit country code. Specified in ISO 3166-1 format.

On the this moment the following locales are supported:

lang=ru_RU;
lang=en_US;
lang=ru_UA;
lang=uk_UA;
lang=tr_TR.

Additional options can be used:

coordorder - the order in which geographic coordinates are specified in API functions that accept longitude-latitude pairs as input (for example, Placemark).

Possible values:

latlong - [latitude, longitude] - used by default;
longlat - [longitude, latitude].

Default value: latlong.

load - List of modules to load.

Default value: package.full.

mode - API loading mode.

mode=release - API code can be downloaded in packaged form to minimize traffic and execution speed in the browser;
mode=debug - download mode as source code.

Default value: release.

Read more about connection options

To display the map, a container of a non-zero size is specified, any block-type HTML element can be used as a container, in the example it is div.

Map parameters are set in the code:

myMap = new ymaps.Map('map', (
center: , // center of the Nizhny Novgorod map
zoom: 12 - zoom level
});

The map should be created after the entire web page has loaded. This will make sure that the container for the map has been created and can be accessed by id. To initialize the map after the page has loaded, you can use the ready() function.

The ready function will be called when the API has been loaded and the DOM has been generated.

ymaps.ready(init);

function init()(
// Create an instance of the map and bind it to the container with
// given id ("map").
myMap = new ymaps.Map('map', (
// When initializing the map, you must specify
// its center and scale factor.
center: , // Nizhny Novgorod
zoom: 12
});

By default, the map displays all available controls.

Map type - scheme.

The API provides five built-in map types:

Scheme (yandex#map) - by default;
Satellite (yandex#satellite);
Hybrid (yandex#hybrid);
People's map (yandex#publicMap);
Hybrid of the national map (yandex#publicMapHybrid).

Example with determining the type of map Satellite

Example code:

As I said before, the default set of 'mediumMapDefaultSet' controls is added to the map by default.

In order to add the necessary controls to the map, you can specify a list of corresponding keys in the controls parameter when creating the map.

Here is the example code for map scale and type controls.

Example code:

It is possible to set the behavior of the map using the behaviors parameter.

By setting its values, we can enable or disable various options for the map's behavior:

scaling the map by double-clicking the mouse button;

dragging the map with the mouse or single touch;

scaling the map when selecting an area with the left mouse button;

scaling the map with a multi-touch touch;

scaling the map when selecting an area right click mice;

distance measurement;

zooming the map with the mouse wheel.

Code example with mouse wheel zoom disabled.

It is possible to change the parameters of a map after it has been created.

Turn on mouse wheel zoom

myMap.behaviors.enable("scrollZoom");

Turn off

myMap.behaviors.disable("scrollZoom");

Installing a new type of map Folk

myMap.setType('yandex#publicMap');

Setting up a new map center

That's all for now.

To be continued…