Geekly Articles each Day
📜 ⬆️ ⬇️

Scaling the map, labeling and displaying the route without using javascript

image Once, I got excited about the idea of ​​creating a tool for viewing a route on a map of my city without using javascript. There were even arguments in favor of this. For example, the use of their image maps.
UPD: There are analogues in popular services with their maps (at the time of creation I did not yet know about them):

Thanks for the links to commenting.
But we make our own.


It turned out a tool that allows you to choose any image as a map on which markers will be applied. It is only necessary to specify in the settings the geographical coordinates of its corner points. I used the OSM data, namely the loader:
image
These coordinates are specified in the config.php variable, starting with the left counterclockwise
$box_str = 86.05627,55.33832,86.1076,55.36035; //ldru (    )

The exported image in png format is placed to the root and its name is specified in the settings.
 $source_file = "bigmap.png"; //,

We will cut the received big map into parts. The number of parts in each direction is set in the same settings
 $x_count_parts = 20; $y_count_parts = 16;

I didn’t want to experiment with speed with a different number of points to display and a different size of the original map.

Label overlay

Show.php is connected with index.php, the result of which is the display of a drawn map made up of several parts. The parts that have a marker on themselves are drawn using the file picture.php, the rest are simple output
The coordinates of all labels for output are transmitted by a GET request, for example:
points=86.0735,55.3529;86.0765,55.3519;86.0963,55.3519
Here, a marker is separated by a dot with each marker, and a comma is separated by two coordinates of each marker. If the variable is not set, then for the demonstration, (86.0995, 55.3619), (86.0765, 55.3629), (86.0765, 55.3529) are drawn.
By default, the scale is adjusted in such a way that a square containing all received coordinates of markers falls on the output.
image
Optionally, you can connect draw_area.php, the purpose of which is to increase the display area by a certain radius from the previously defined square. Zoom factors are customizable.
')
Management tools

image
Optionally connects controls.php. Upon completion of its operation, the $ controls variable contains an html-tex that draws tools with links. Actions are a shift to the left, right, up and down on the map.
Scale management:

You can blame me for not separating the presentation from the main code here, but I thought that for this tiny fragmentary it is irrational to connect a separate template.

Drawing a fragment containing a marker

image
This action takes place in picture.php. The marker itself looks like a red square, the width and color of which is configured in config.php.
The following variables are passed to the script by a GET request:

This is where the flaw immediately manifests itself: when the marker is located at the boundary of the fragment, it does not appear. But this can be avoided by providing small indents.

Purpose

It was planned to receive from the mobile phone an image of the route in the last 30-60 minutes. The server for accepting data from the GPS tracker has been configured and tested. Data was successfully transferred and displayed in the build tool. The same data could easily be selected from mysql tables by any criteria. The need to track this route was no longer faster than expected, and the project was still interesting to me. Brought him to some degree of readiness and abandoned, switching to other things.

In action
http://rghost.ru/8073291 - source
Forgive me for free hosting.

Source: https://habr.com/ru/post/120069/

More articles:


All Articles