People's map android. New Yandex.Maps, which everyone can now correct themselves

Yandex.Maps - free maps from a well-known Russian company. The main advantage of the application over its counterparts is the ability to view maps offline. To do this, the map of the city you need must first be loaded into the device's memory. This is done from the program interface and does not require any special skills from the user. Interestingly, before downloading, the program will offer you to choose which card suits you best - official or "national". If everything is more or less clear with the first option, then we need to dwell on the second in more detail. "People's" maps are created directly by community members, and are also modeled using data from open sources. On them you will find much more marks about institutions, stops and other everyday things. Immediately, we note that we recommend this type of maps only for large cities.

Among other useful features of the Yandex.Maps application, one can single out the basic functions of the navigator. You can turn on the navigation mode immediately after laying the route (manual or automatic). Like any other maps, the presented software solution is able to determine the user's location on the map. The program also has the ability to view street panoramas.

Key features and functions

• offers users offline maps of most cities in Russia, Ukraine and Belarus;
• allows you to view information about the nearest establishments;
• includes the ability to select a map view mode: diagram, satellite and "folk" version of the map;
• knows how to lay walking and car routes;
• displays information about traffic jams;
• makes it possible to view street panoramas.

What's new in this release?

8.4.2 (28.10.2016)

Hello dear readers of the blog site. Today I wanted to talk about Yandex Maps and their use on my website. The majority of webmasters are satisfied with the simplest features that are provided by the constructor available online, or they simply use the appropriate plugins or modules for their CMS.

But those who would like to get more features and functionality from the Yandex.Maps API will have to learn JavaScript and understand their documentation.

Unfortunately, I am not good at languages, and therefore in this post I will only talk about the simplest ways to insert Yandex Maps into your website or blog, and also show you where to look for information if it seems a little and what you can get if you want.

Search on Yandex Maps, People's Map and Yandex.Directory

The online map service itself from Yandex (read about that) appeared in 2004 and has continued to develop since then, especially since it has a very powerful competitor in the face of Google maps. Residents of many large cities in Russia, Ukraine, Kazakhstan or Belarus use advanced features such as Traffic Jams or Panoramas.

The last service (panoramas) was launched relatively recently (2009) and Yandexmobile (with four wide-angle cameras on the roof) has not yet managed to travel around all corners of our vast homeland, but where panoramas have already appeared, it has become much easier to plan trips along an unfamiliar route.

In addition to the car, Yandex Maps employees travel around some areas on bicycles or on foot (for example, in parks). Recently, panoramas made from a helicopter have also appeared, and in order to see them, you need to check the "From the air" box under the corresponding button, but the truth is such a thing is available only for Peter.

If your company is not there, then use the form for adding a new organization to the Directory, the call button of which will appear on the right side under the verification form:

Then follow the instructions in the video below (the specified data, such as, for example, phone number or address, will need to be confirmed, so they must not be fake, otherwise it will not be possible to add to the map):

At the same time, you need to be authorized on Yandex and it is best if this is not your personal account, because you may need to edit the data added to the map (or order a priority placement), and it will not always be correct to trust your account to an employee. It will be enough to follow the instructions given.

What else is attractive to users of Yandex Maps search is the fact that they can read and, if they wish, leave a review about the organization. Moreover, the reviews are moderated (not by the owners of the company, of course, but by the employees of the Runet mirror) and obvious spam or nonsense is eliminated.

By clicking on the reviews, you will be taken to the organization's card, where you can read them and, if you wish, leave your own. There may also be additional information on this company.

Creation of maps in Yandex, routes and mobile applications

We have described three main sources from where Yandex gets information when searching for geographic objects. But there is also a fourth. These are the so-called tags that the user leaves on the so-called "My cards" by storing them with the ability to publicly access them. Do you understand what I'm talking about? If not, then literally in a couple of paragraphs I will try to keep within with the explanations.

In the left column there is a tab "My cards". Its essence lies in the fact that here you can save all those labels, selections, paved routes and other things that you created on Yandex Maps. Personally, this is how I marked the places where I managed to ride a bike in the vicinity of my place of residence.

However, you can put a mark, select any building (plot a route) and write that your company is located there, adding the necessary tags to the description keywords(in this case, it will not be necessary to confirm the information), because there is a possibility that this information will be taken into account when searching on Yandex Maps. In this case, it would be better to save the map as public (marked "everyone") in the above screenshot.

Read the details in the article about getting free commercial traffic from Yandex Maps, which was published by the author of the Mystery Online blog. It describes some of the tricks that worked, at least at the time of this writing.

Although, the ability to save the created labels and markings can come in handy, as I mentioned, just for personal purposes. In this case, it would be best to save cards, having previously authorized on Yandex, so that later you can edit them, save them an unlimited number of pieces, and also mark them as personal (only to me) or as narrowly focused (only by the link that you then inform, and when viewing the list of your creations by another user, it will not be visible).

If you want to forward to someone link with paved route, then you can use the button located in the upper right corner of the "Link", where, in addition to the usual hyperlink, you will also be offered to share a link to the map you have created in popular social networks.

Since we're talking about laying a route on Yandex Maps, then I will say a few words about this. Convenient thing. When there was no car, it was important to plot a public transport route to an unfamiliar place.

Yandex talked about which bus or trolleybus to take to the nearest metro, talked about transfers when driving underground, and then also broadcast how to get to the end point up to the number of meters that would need to be walked.

In addition, Yandex Maps also warns about the time supposedly required to complete this pilgrimage and even offers alternative routes for your consideration.

When a car appeared, it became even more relevant to use routing, because the situation with traffic jams sometimes makes serious adjustments. To do this, simply enter two addresses (starting and ending points) in the left column, or simply put these points on the diagram with the mouse (the first click is the beginning of the route, the second is the end).

To count traffic jams, check the corresponding box, and to change the route in a separate place, it will be enough to click in this place with the left mouse button and when a white circle appears, grab it and drag it to the desired junction or track. True, if you manually adjust the route on Yandex map, traffic jams will no longer work - everything is under your responsibility.

By the way, since we are talking about the obvious, I’ll ask you, how many ways can you change the display scale? Personally, I only knew about the plus and minus buttons (and the slider between them) in the upper left corner, and about the rotation of the mouse wheel. But it turned out that double-clicks with the right and left mouse buttons also allow you to play with detail, which can sometimes be convenient.

But it is interesting to lay routes and traffic jams at home, of course, but most often we use it Yandex mobile applications(Maps, Navigator or Metro). The first program, I think, is installed on 90% of phones in large cities of Russia, where huge traffic jams are in the habit. It is understandable, because it is convenient, prompt and reliable. This shnyaga has not seriously let me down yet.

Mobile applications will be completely free download from the official website or to recognize the given QR code, with a link to download a file by a mobile phone (you should have some program on it that helps):

Mobile Yandex.Maps have very similar functionality to the online version (traffic jams, routing, search), however, for trips on an unfamiliar route, of course, their Navigator is best suited, the general principle of which is well shown in this video:

Although, personally, I keep the Navigator with Yandex Maps on my phone as a backup option, because the thin Garmin with an awesome screen, voice control and beautiful maps of Russia suits me completely, except that only traffic jams are not always loaded on it in a timely manner, because the radio channel is used for this and when all of Moscow is worth it, then you have to broadcast a lot, and until the turn comes to the area in which you are traveling, everything can change ten times.

Api Yandex maps and constructor for their creation

Well, that's done with the general questions, now it's time to move on to practice, namely, how to create in the constructor and insert a map from Yandex on your website... In fact, it is both easy and difficult at the same time.

If you have a business card site, blog or a simple online store with an extensive network of offices, then the basic capabilities of a designer will be enough for you, and even an amateur can insert the code into the site.

Actually, there is a very good video that will help you make a decision about the need to bother with all this - How to improve your site using the Yandex.Maps API(in examples):

If you approach the matter thoroughly, then a correctly drawn up route map or calculating the cost of delivery based on the location specified by the user can significantly improve usability and ultimately make the visitor a buyer.

For details, see the video, which tells how to improve your online store with maps:

It's another matter if you need to go beyond the basic framework of the Yandex Maps constructor and create something comparable in grandeur to the coverage schemes of leading mobile operators, a list of all Kiwi ATMs, the situation with traffic jams in your area, etc. of things. Here you need a programmer who knows JavaScript.

Yandex.Maps API, for example, allows you to overlay a layer with traffic jams on your site, but for this, the capabilities of the built-in constructor, unfortunately, will not be enough and you will have to use the services of a specialist who knows JavaScript, who will just need to read the API documentation.

Yes, the term API (application programming interface) itself means getting the opportunity to use some kind of software, not knowing at all how it works, but having a description of those tools (pens) that are necessary to connect it and implement certain features. This thing is widespread and often used.

The Yandex Maps API is described at the link given just above, but there is also a simple constructor that will allow you to quickly create a map of the area you need, put the necessary labels with descriptions on it, highlight the necessary objects and show the path along which it is easiest to get to them. for example, from the nearest metro station.

Map constructor in Yandex

After that, the article or static page can be insert the code obtained in the Yandex maps constructor, using the following construction, where instead of "yandexmap" insert the identifier you are using:

Now you are not afraid of the visual editor, which is ready to cut everything that differs from the Html code. Hooray. If you need to insert a route map into the blog frame (header, sidebar or footer), then the script can be inserted there directly, but you will need to select the one you want so that the map is displayed where you want. Read about the purpose of templates at the link provided.

To insert API maps from Yandex to a site managed by Joomla it will be possible to use the same one, but first disable the visual editor so that the code, again, is not cut by it. After inserting, the editor can be turned back on.

If you need to add the driving directions code to a Joomla article, you can simply paste it with the visual editor disabled, or insert the content of an arbitrary code module using the plugin's capabilities.

In this case, the module with the Yandex card code must be placed in a non-existent template position (it is banal to type something like yandex-karta in the position selection field in the module settings for an arbitrary Html code). And then, already when writing or editing articles, you can insert the structure in the right place:

(loadposition yandex-karta)

By the way, if suddenly this method does not work for you, then go to the plugin manager (from the Joomla admin panel, select the menu items "Extensions" - "Plugin manager") and find and then activate "Content - Load Module". It is included in the standard Joomla package, so you must have it.

Here, it is also worth saying that you can pull out the scheme and insert it into your site from the “My cards” mentioned just above. Remember, I said there that you can get a link to the saved scheme, in addition to this, you could also get YMapsML file, which you can easily attach to the site by connecting the API to it in advance.

To connect the Yandex Api, it will be enough to place the following script call between the head tags (you can find them in the case of Joomla or WordPress in the same way as described in the article about) the following script call:

Well, in the right place (where the location map should be inserted and displayed), it will be enough to insert:

We will assume that we have somehow figured it out with the creation of the simplest driving directions and inserting it into our website. What's next? Probably, it is worth saying a few words about more complex versions of the Yandex Maps API, which are no longer subject to the mentioned constructor, but on the other hand, a person who is familiar with the JavaScript language is quite capable.

In this case, before you open up all the capabilities of the Yandex Maps API which are described at the link provided. All the necessary documentation is there, and the girl from this video will bring you up to date:

Great, pass these materials to your programmer and he will bungle you something like this (if necessary):

How to insert Yandex Maps into WordPress and Joomla using extensions

In principle, the constructor capabilities described just above should be sufficient in most cases. However, there are some extensions for that allow you to insert a map from Yandex on your site and add the necessary explanatory labels to it.

A list of such extensions can be found on the official website. If we consider WordPress, then, in my opinion, there is only one plugin for it called Yandex Maps for WordPress, which can be downloaded for free at the specified link. It is installed and activated in a standard way.

The only thing that looks like it is a little outdated and still requires entering the API key for its operation, the method of obtaining which I wrote a little higher. You will need to enter this key on the "Plugins" page - "Yandex Maps". After that, on the pages for creating or editing articles, you can find at the bottom of the data entry form to receive the Yandex Maps code.

In the top box, enter a title for the callout that will point to the desired location in the diagram. Next, enter the address of the place where the pointer arrow will look. Then you fill in the field with a description, set the dimensions of the inserted map horizontally and vertically, and also put a check mark so that the scale for changing the scale and choosing the type (scheme, satellite, etc.) is displayed.

Then move the cursor (click with the mouse) to the place of the article where you want to insert the Yandex map and click on the "Send Map To Editor" button. As a result, we will get something similar to this:

True, there are no panels with zoom and card type selection, but otherwise everything is correct. I am shown a screenshot from another blog of mine, because in this there was a slight conflict with the CSS styles (through my fault), which I did not want to fix now.

There are several extensions for Joomla of this type, none of which I have ever tried. Therefore, I will simply list them and give links to articles, which describe in detail their capabilities and how to use them to insert a map into your site.

Today we have one of the most significant updates to Yandex.Maps in its history. Firstly, the People's map is combined with the main one, which means that everyone can quickly and easily add their own house to the map or correct inaccuracies. The results of the changes will be available to everyone - on Yandex.Maps, as well as in Mobile Maps and Navigator. And secondly, Yandex.Maps received a new interface, the beta version of which we once talked about on Habré in the early stages of working on it (many thanks for all the comments and advice that were then expressed).

Under the cut I will tell you about how we worked on the interface, how we solved the problem of quickly loading objects in the browser, came up with and implemented new tools that should protect user edits, how we made a new life possible at all, and why maps will now be update faster than ever and still be accurate, and more.

The first version of the People's Maps was launched exactly five years ago - on April 8, 2010. At that time, Yandex.Maps was completely dependent on the providers of map data. By launching the People's Map, we wanted to give people the opportunity to independently influence the completeness and quality of data. The reality has surpassed all our expectations: over these five years, through the efforts of users, many cities and towns of the Russian Federation and the near abroad have been drawn. When new interchanges are opened, corrections are made to the map during the day, and most often - in an hour.

This is what the first version of the People's Map looked like in 2010

But the world does not stand still, and the next challenge awaited us - to make a tool from the People's map, with the help of which even people who are not familiar with cartography could create professional maps suitable for use in automotive routing.

But, setting ourselves such a goal, we were aware of the tasks that we would have to solve. First, to make the interface of the new People's Map so intuitive and user-friendly that anyone can work with it. Second, I needed to learn how to edit very large objects in the browser. In the old People's map, when loading an object with a large number of nodes (> 20K), the browser freezes. In the new People's Map, as we conceived it, this is unacceptable.

And thirdly, since after today's changes we allow people to edit data, which will then be seen by tens of millions of Yandex.Maps users, it is necessary to even more reliably protect the results of the work of "people's" cartographers from unscrupulous users, whom we call vandals.

Work on the interface

• beginners who have never tried editing a map;
• experienced users, which include cartographers and active users of the People's Map.

We hypothesized that the interface should be two-tier. The first level is for completely new users, so that they can complete simple scenarios, and the second level is for advanced users, when it is required to do something more complex. I will give examples below.

To test this hypothesis, we studied user sessions on the People's Map and found that the following stand out among the most popular scenarios for creating and editing data:

• editing the organization;
• editing the building and its address;
• editing simple areal objects (park, lawn, school or kindergarten territory);
• road editing.

And since these scenarios begin to familiarize yourself with editing a map, it means that they should be super logical and intuitive. If a person understands them, and he is still interested in editing the map, then he can click the "Show more" button. After this click, the user will find more tools with which he will have to figure out - read the instructions, ask the advice of more experienced users.

In the process of designing the user interface, we immediately faced the need for dynamic prototypes. It turned out to be very difficult to discuss complex editing scenarios with static layouts in hand. A lot of questions arose like: "What will happen if I press this button and do this?" When there are a lot of scenarios and they branch and intersect with every button click, "dynamic prototypes" are a great solution. They help to quickly and visually demonstrate how the interaction of the user with the interface should occur.

We started testing the user interface with them. Our first subjects were our developers. As soon as we showed them the desired user interaction with our product, they heard: “We do not understand how to do this magic. Let's make it simple from a development point of view first, and then we'll try to simplify the interface for users. "

Any solution is better than none. Therefore, we redid all the prototypes of the interfaces to an implementation that we understand. As a result, we have a prototype in which all data is edited, but in some places it is inconvenient and illogical.

Let's explain better with an example. Let's take Lake Baikal. How convenient is it for a simple user to edit? Baikal is an areal object, so it is natural to edit it as an areal object. But there is a problem - Baikal consists of 527 closed contours (the contour itself plus the carved islands), more than 59,200 nodes and, moreover, has common borders with many rivers.

If you try to download all this data from the server to the user into the browser, everything will freeze. Therefore, in our data, everything is presented a little differently.

There is a hydrographic object "Lake Baikal", which has only a name and no geometry.


When you select an object, all its contours are shown

There are closed contours associated with this object, which represent the outer contour of the lake and cut holes for the islands. They have the attribute "external" or "internal" (contour), but also do not have their own geometry.

Please note that I have selected only one outline - the highlighting of all the others is gone.

All of these contours are composed of one or more often a plurality of hydrographic boundary sections that represent the actual geometry.

One of the sections of the outer contour of Lake Baikal is highlighted in the picture.

This means that in order to create such a lake, we must:

• draw the actual boundaries of the lake and all islands;
• create an object "Lake Baikal" and add to it the contours collected from the previously drawn sections of the boundaries.

This is how our cartographers see and create data. And we chose this option for editing data as a starting point for a step-by-step improvement of the interface.

At the moment when the first version of the editing interface was developed and brought up on the test service, our whole team went to test it. Based on the test results, we got back together and discussed what could be improved in this way of editing.

The first thing we decided on was that drawing Baikal is a rare case, and a beginner user is more likely to go to draw something easier. For example, a local pond. And this is a trivial case, and the pond will consist of one hydrographic object, one contour and one section of boundaries. So let's in such cases, he will create it as a simple areal object without all this hassle with sections of boundaries and contours, and we will save it as three separate objects (hydrographic object, contour, border). No sooner said than done.

Creation of object boundary, contour and hydrographic object in one step

And if it turns out to create trivial objects in this way, then let's edit trivial objects in the same way. Ready!

Editing a feature consisting of one feature boundary, one contour, and a hydrographic feature

Fine! And let's also edit those objects that consist of one contour, but several sections.

Editing a feature consisting of three feature boundaries, one contour, and a hydrographic feature

Fine. And let's also edit objects with "common borders", and those that have a lot of contours. But here it will not work. In the case of an object that has borders in common with other objects, we do not know what the user wants to do - move the common border or unlink the object from this common border. And in the case of objects with a large number of contours, it is necessary to understand which contour the user will now edit. This means that it is necessary to think over the scenarios for these cases and implement the selection and editing tools.

Pond, which has one outer contour, several inner and outer contour has a common border with the channel

Okay, now we understand where the border lies between simple and complex editing scenarios. But we have already implemented simple cases, and ... you will not believe, they look almost the same as the interfaces were designed at the very beginning of the project. It's just that magic has become comprehensible and realizable.

In the course of the following research, we figured out how to make complex and complex data editing scenarios clear, but the solution turned out to be not as elegant as we wanted. We learned how to detect when a user is faced with a complex scenario. The service offers to get acquainted with the rules for editing adjacent objects and even prompts the user where an error may have occurred.

An error is shown with a link to the documentation and a marker where the error was found

Download speed

Let's solve this problem in stages, too. You can edit attributes and geometry, and if there are many contours, then in one stage you can work out the geometry of only one contour:

Editing is available only from a certain scale of the map, and the user is prompted to select the geometry of which contour he wants to edit

And so, when the user selects a contour for editing, the "magic" is triggered again - if the contour is small (for example, the inner contour for the island), we load it completely and let it be edited as a simple areal object.

The case of editing a simple outline object

And if the contour is very large, then we load only the visible sections of the boundaries and allow them to be edited. If the user moves the map and there are only new sections of borders on it, we will also load them for editing. Thus, the user can edit complex objects in an almost simple mode without even noticing it.

Loaded only one part of the boundary of the object from the set

In this clever way, we bypassed the browser's limitations - the speed of loading data for editing and the limitation on the number of simultaneous points available to it.

Protection of edits

To do this, we changed the moderation system for all user edits - from post-moderation to pre-moderation. That is, from today, all edits in the People's Map will be subject to mandatory verification by moderators. We hope that this will further improve the quality of the data.

We do not have a task to roll back all data to a specific date or revision, we have a task to delete only a part of user edits, while preserving all the rest, and even preserve the integrity of the data. The result was our internal development of data storage, revisions and separate presentation.

One of the important advantages of our system is that we have learned to control data integrity well. For example, I'm editing a section of a road and changing its geometry.

Editing the geometry of the road section directly

Then I go to a neighboring node, where several road sections intersect, and try to edit it, but indirectly I correct the geometry of the previous section.

Editing the geometry of a road section indirectly

This means that I have two related edits. If we did not know how to control and version such indirect edits, then we would not be able to return the object to the state in which it was before the indirect edits. This means that it would be necessary to prohibit all indirect edits on top of direct ones.

In principle, there is nothing wrong with such a solution, some map services do just that. But such a solution completely excludes the possibility of editing a road junction, since when editing a road graph, indirect data changes always occur.

Another important topic related to data versioning is the visual representation of diff edits. You can always see what the latest version of the object looks like, but for convenient moderation it is important to see how the object looked before and after editing. It is especially important to make a diff like this for the geometry of the object:

This is what the geometric and attributive diff looks like for the edits I made to demonstrate direct and indirect editing of an object.

But I finished drawing the pedestrian road, which cut the road into two sections.

And this is what diff looks like for simple objects such as a building.

This visual representation of edits makes it faster and easier to understand who edited what and how.

As a result, we managed to implement a simple and intuitive interface for users who are not familiar with cartography and do not want to understand the data structure. At the same time, we made a convenient and flexible interface for experienced users. Along the way, we learned how to edit very large and "heavy" objects in the browser and put all user edits under version control.

And all this to make it even more convenient for users to share their knowledge of the area with others.