feat(wall): ability to add geopoint to post (#945)

* Гео-метки * Update Post.xml * Wall: geotag translation * Wall: design + sql fix * Карта ближайших постов * Update al_wall.js * VKAPI: Geo support (not tested idk) * Update WallPresenter.php * Better geo points * Редактирование названия геоточки через интерфейс при создании * SQL and geopoint name fixes * fix js * rewrite a lot --------- Co-authored-by: veselcraft <veselcraft@icloud.com> Co-authored-by: mrilyew <99399973+mrilyew@users.noreply.github.com>
2024-12-22 16:42:32 +03:00 · 2024-12-13 17:53:36 +03:00 · 2024-12-13 17:53:36 +03:00 · a714a0aa16
commit a714a0aa16
parent bec9079e36
19 changed files with 499 additions and 12 deletions
--- a/VKAPI/Handlers/Wall.php
+++ b/VKAPI/Handlers/Wall.php
@ -206,6 +206,9 @@ final class Wall extends VKAPIRequestHandler
            if($post->isDeactivationMessage())
                $post_temp_obj->final_post = 1;

+            if($post->getGeo())
+                $post_temp_obj->geo = $post->getVkApiGeo();
+
            $items[] = $post_temp_obj;

            if ($from_id > 0)
@ -321,14 +324,10 @@ final class Wall extends VKAPIRequestHandler
                    } else if ($attachment instanceof \openvk\Web\Models\Entities\Video) {
                        $attachments[] = $attachment->getApiStructure($this->getUser());
                    } else if ($attachment instanceof \openvk\Web\Models\Entities\Note) {
-                        if(VKAPI_DECL_VER === '4.100') {
-                            $attachments[] = $attachment->toVkApiStruct();
-                        } else {
                        $attachments[] = [
                            'type' => 'note',
                            'note' => $attachment->toVkApiStruct()
                        ];
-                        }
                    } else if ($attachment instanceof \openvk\Web\Models\Entities\Audio) {
                        $attachments[] = [
                            "type" => "audio",
@ -419,6 +418,9 @@ final class Wall extends VKAPIRequestHandler
                if($post->isDeactivationMessage())
                    $post_temp_obj->final_post = 1;

+                if($post->getGeo())
+                    $post_temp_obj->geo = $post->getVkApiGeo();
+
                $items[] = $post_temp_obj;

                if ($from_id > 0)
@ -493,7 +495,11 @@ final class Wall extends VKAPIRequestHandler
            ];
    }

-    function post(string $owner_id, string $message = "", string $copyright = "", int $from_group = 0, int $signed = 0, string $attachments = "", int $post_id = 0): object
+    function post(string $owner_id, string $message = "", string $copyright = "", int $from_group = 0, int $signed = 0, string $attachments = "", int $post_id = 0,
+    float $lat = NULL,
+    float $long = NULL,
+    string $place_name = ''
+    ): object
    {
        $this->requireUser();
        $this->willExecuteWriteAction();
@ -599,6 +605,45 @@ final class Wall extends VKAPIRequestHandler
                } catch(\Throwable) {}
            }
          
+            /*$info = file_get_contents("https://nominatim.openstreetmap.org/reverse?lat=${latitude}&lon=${longitude}&format=jsonv2", false, stream_context_create([
+                'http' => [
+                    'method' => 'GET',
+                    'header' => implode("\r\n", [
+                        'User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.2 (KHTML, like Gecko) Chrome/22.0.1216.0 Safari/537.2',
+                        "Referer: https://$_SERVER[SERVER_NAME]/"
+                    ])
+                ]
+            ]));
+
+            if ($info) {
+                $info = json_decode($info, true, JSON_UNESCAPED_UNICODE);
+                if (key_exists("place_id", $info)) {
+                    $geo["name"] = $info["name"] ?? $info["display_name"];
+                }
+            }*/
+            if($lat && $long) {
+                if(($lat > 90 || $lat < -90) || ($long > 180 || $long < -180)) {
+                    $this->fail(-785, 'Invalid geo info');
+                }
+
+                $latitude = number_format((float) $lat, 8, ".", '');
+                $longitude = number_format((float) $long, 8, ".", '');
+
+                $res = [
+                    'lat' => $latitude,
+                    'lng' => $longitude
+                ];
+                if($place_name && mb_strlen($place_name) > 0) {
+                    $res['name'] = $place_name;
+                } else {
+                    $res['name'] = 'Geopoint';
+                }
+
+                $post->setGeo(json_encode($res));
+                $post->setGeo_Lat($latitude);
+                $post->setGeo_Lon($longitude);
+            }
+
            if($should_be_suggested)
                $post->setSuggested(1);

@ -1129,6 +1174,52 @@ final class Wall extends VKAPIRequestHandler
        return 1;
    }

+    function getNearby(int $owner_id, int $post_id)
+    {
+        $this->requireUser();
+
+        $post = (new PostsRepo)->getPostById($owner_id, $post_id);
+        if(!$post || $post->isDeleted())
+            $this->fail(100, "One of the parameters specified was missing or invalid: post_id is undefined");
+
+        if(!$post->canBeViewedBy($this->getUser()))
+            $this->fail(15, "Access denied");
+
+        $lat = $post->getLat();
+        $lon = $post->getLon();
+
+        if(!$lat || !$lon)
+            $this->fail(-97, "Post doesn't contains geo");
+
+        $query = file_get_contents(__DIR__ . "/../../Web/Models/sql/get-nearest-posts.tsql");
+        $_posts = \Chandler\Database\DatabaseConnection::i()->getContext()->query($query, $lat, $lon, $post->getId())->fetchAll();
+        $posts = [];
+
+        foreach($_posts as $post) {
+            $distance = $post["distance"];
+            $post = (new PostsRepo)->get($post["id"]);
+            if (!$post || $post->isDeleted() || !$post->canBeViewedBy($this->getUser())) continue;
+
+            $owner = $post->getOwner();
+            $preview = mb_substr($post->getText(), 0, 50) . (strlen($post->getText()) > 50 ? "..." : "");
+            $posts[] = [
+                "message" => strlen($preview) > 0 ? $preview : "(нет текста)",
+                "url" => "/wall" . $post->getPrettyId(),
+                "created" => $post->getPublicationTime()->html(),
+                "owner" => [
+                    "domain" => $owner->getURL(),
+                    "photo_50" => $owner->getAvatarURL(),
+                    "name" => $owner->getCanonicalName(),
+                    "verified" => $owner->isVerified(),
+                ],
+                "geo" => $post->getGeo(),
+                "distance" => $distance
+            ];
+        }
+
+        return $posts;
+    }
+
    private function getApiPhoto($attachment) {
        return [
            "type"  => "photo",
--- a/Web/Models/Entities/Post.php
+++ b/Web/Models/Entities/Post.php
@ -456,5 +456,30 @@ class Post extends Postable
        return $item;
    }

+    function getGeo(): ?object
+    {
+        if (!$this->getRecord()->geo) return NULL;
+
+        return (object) json_decode($this->getRecord()->geo, true, JSON_UNESCAPED_UNICODE);
+    }
+
+    function getLat(): ?float
+    {
+        return (float) $this->getRecord()->geo_lat ?? NULL;
+    }
+
+    function getLon(): ?float
+    {
+        return (float) $this->getRecord()->geo_lon ?? NULL;
+    }
+
+    function getVkApiGeo(): object
+    {
+        return (object) [
+            'type'  => 'point',
+            'coordinates' => $this->getLat() . ',' . $this->getLon(),
+        ];
+    }
+    
    use Traits\TRichText;
 }
--- a/Web/Models/sql/get-nearest-posts.tsql
+++ b/Web/Models/sql/get-nearest-posts.tsql
@ -0,0 +1,11 @@
+SELECT *,
+    SQRT(
+        POW(69.1 * (? - geo_lat), 2) +
+        POW(69.1 * (? - geo_lon) * COS(RADIANS(geo_lat)), 2)
+    ) AS distance
+FROM posts
+WHERE id <> ?
+AND FROM_UNIXTIME(created) >= DATE_SUB(NOW(), INTERVAL 1 MONTH)
+HAVING distance < 1 AND distance IS NOT NULL
+ORDER BY distance
+LIMIT 25;
--- a/Web/Presenters/WallPresenter.php
+++ b/Web/Presenters/WallPresenter.php
@ -309,6 +309,19 @@ final class WallPresenter extends OpenVKPresenter
            $this->flashFail("err", tr("failed_to_publish_post"), "Poll format invalid");
        }

+        $geo = NULL;
+
+        if (!is_null($this->postParam("geo")) && $this->postParam("geo") != "") {
+            $geo = json_decode($this->postParam("geo"), true, JSON_UNESCAPED_UNICODE);
+            if($geo["lat"] && $geo["lng"] && $geo["name"]) {
+                $latitude = number_format((float) $geo["lat"], 8, ".", '');
+                $longitude = number_format((float) $geo["lng"], 8, ".", '');
+                if($latitude > 90 || $latitude < -90 || $longitude > 180 || $longitude < -180) {
+                    $this->flashFail("err", tr("error"), "Invalid latitude or longitude");
+                }
+            }
+        }
+        
        if(empty($this->postParam("text")) && sizeof($horizontal_attachments) < 1 && sizeof($vertical_attachments) < 1 && !$poll)
            $this->flashFail("err", tr("failed_to_publish_post"), tr("post_is_empty_or_too_big"));
        
@ -332,6 +345,11 @@ final class WallPresenter extends OpenVKPresenter
            if($should_be_suggested)
                $post->setSuggested(1);
            
+            if ($geo) {
+                $post->setGeo(json_encode($geo));
+                $post->setGeo_Lat($latitude);
+                $post->setGeo_Lon($longitude);
+            }
            $post->save();
        } catch (\LengthException $ex) {
            $this->flashFail("err", tr("failed_to_publish_post"), tr("post_is_too_big"));
--- a/Web/Presenters/templates/@layout.xml
+++ b/Web/Presenters/templates/@layout.xml
@ -404,6 +404,11 @@
            {script "js/al_feed.js"}
        {/ifset}

+        {script "js/node_modules/leaflet/dist/leaflet.js"}
+        {script "js/node_modules/leaflet-control-geocoder/dist/Control.Geocoder.js"}
+        {css "js/node_modules/leaflet/dist/leaflet.css"}
+        {css "js/node_modules/leaflet-control-geocoder/dist/Control.Geocoder.css"}
+        
        <script>bsdnHydrate();</script>

        <script n:if="OPENVK_ROOT_CONF['openvk']['telemetry']['plausible']['enable']" async defer data-domain="{php echo OPENVK_ROOT_CONF['openvk']['telemetry']['plausible']['domain']}" src="{php echo OPENVK_ROOT_CONF['openvk']['telemetry']['plausible']['server']}js/plausible.js"></script>
--- a/Web/Presenters/templates/Wall/Feed.xml
+++ b/Web/Presenters/templates/Wall/Feed.xml
@ -20,7 +20,7 @@
    </div>

    <div n:class="postFeedWrapper, $thisUser->hasMicroblogEnabled() ? postFeedWrapperMicroblog">
-        {include "../components/textArea.xml", route => "/wall" . $thisUser->getId() . "/makePost", graffiti => true, polls => true, notes => true, hasSource => true}
+        {include "../components/textArea.xml", route => "/wall" . $thisUser->getId() . "/makePost", graffiti => true, polls => true, notes => true, hasSource => true, geo => true}
    </div>
    
    <div class='scroll_container'>
--- a/Web/Presenters/templates/Wall/Wall.xml
+++ b/Web/Presenters/templates/Wall/Wall.xml
@ -28,7 +28,7 @@
            </div>

            <div n:if="$canPost && $type == 'all'" class="content_subtitle">
-                {include "../components/textArea.xml", route => "/wall$owner/makePost", graffiti => true, polls => true, notes => true, hasSource => true}
+                {include "../components/textArea.xml", route => "/wall$owner/makePost", graffiti => true, polls => true, notes => true, hasSource => true, geo => true}
            </div>
            
            <div class="content scroll_container">
--- a/Web/Presenters/templates/components/post/microblogpost.xml
+++ b/Web/Presenters/templates/components/post/microblogpost.xml
@ -92,6 +92,14 @@
                            </div>
                        </div>
                    </div>
+                    <div n:if="$post->getGeo()" class="post-geo">
+                        <a onclick="javascript:openGeo({$post->getGeo()}, {$post->getTargetWall()}, {$post->getVirtualId()})">
+                            <svg class="map_svg_icon" width="13" height="12" viewBox="0 0 3.4395833 3.175">
+                                <g><path d="M 1.7197917 0.0025838216 C 1.1850116 0.0049444593 0.72280427 0.4971031 0.71520182 1.0190592 C 0.70756921 1.5430869 1.7223755 3.1739665 1.7223755 3.1739665 C 1.7223755 3.1739665 2.7249195 1.5439189 2.7243815 0.99632161 C 2.7238745 0.48024825 2.2492929 0.00024648357 1.7197917 0.0025838216 z M 1.7197917 0.52606608 A 0.48526123 0.48526123 0 0 1 2.2050334 1.0113078 A 0.48526123 0.48526123 0 0 1 1.7197917 1.4965495 A 0.48526123 0.48526123 0 0 1 1.23455 1.0113078 A 0.48526123 0.48526123 0 0 1 1.7197917 0.52606608 z " /></g>
+                            </svg>
+                            {$post->getGeo()->name ?? tr("admin_open")}
+                        </a>
+                    </div>
                    <div n:if="$post->isAd()" style="color:grey;">
                        <br/>
                        &nbsp;! {_post_is_ad}
--- a/Web/Presenters/templates/components/post/oldpost.xml
+++ b/Web/Presenters/templates/components/post/oldpost.xml
@ -90,6 +90,14 @@
                            </div>
                        </div>
                    </div>
+                    <div n:if="$post->getGeo()" class="post-geo">
+                        <div onclick="javascript:openGeo({$post->getGeo()}, {$post->getTargetWall()}, {$post->getVirtualId()})">
+                            <svg class="map_svg_icon" width="13" height="12" viewBox="0 0 3.4395833 3.175">
+                                <g><path d="M 1.7197917 0.0025838216 C 1.1850116 0.0049444593 0.72280427 0.4971031 0.71520182 1.0190592 C 0.70756921 1.5430869 1.7223755 3.1739665 1.7223755 3.1739665 C 1.7223755 3.1739665 2.7249195 1.5439189 2.7243815 0.99632161 C 2.7238745 0.48024825 2.2492929 0.00024648357 1.7197917 0.0025838216 z M 1.7197917 0.52606608 A 0.48526123 0.48526123 0 0 1 2.2050334 1.0113078 A 0.48526123 0.48526123 0 0 1 1.7197917 1.4965495 A 0.48526123 0.48526123 0 0 1 1.23455 1.0113078 A 0.48526123 0.48526123 0 0 1 1.7197917 0.52606608 z " /></g>
+                            </svg>
+                            <a>{$post->getGeo()->name ?? tr("admin_open")}</a>
+                        </div>
+                    </div>
                    <div n:if="$suggestion && $canBePinned" class="suggestionControls" style="margin-bottom: 7px;">
                        <input type="button" class="button" id="publish_post" data-id="{$post->getId()}" value="{_publish_suggested}">
                        <input type="button" class="button" id="decline_post" data-id="{$post->getId()}" value="{_decline_suggested}">
--- a/Web/Presenters/templates/components/textArea.xml
+++ b/Web/Presenters/templates/components/textArea.xml
@ -14,6 +14,7 @@
            <div class="post-has-poll">
                {_poll}
            </div>
+            <div class="post-has-geo"></div>
            <div class="post-source"></div>

            <div n:if="$postOpts ?? true" class="post-opts">
@ -54,10 +55,12 @@
                    <input type="checkbox" name="as_group" /> {_comment_as_group}
                </label>
            </div>
+
            <input type="hidden" name="horizontal_attachments" value="" autocomplete="off" />
            <input type="hidden" name="vertical_attachments" value="" autocomplete="off" />
            <input type="hidden" name="poll" value="none" autocomplete="off" />
            <input type="hidden" id="source" name="source" value="none" autocomplete="off" />
+            <input type="hidden" name="geo" value="" autocomplete="off" />
            <input type="hidden" name="type" value="1" autocomplete="off" />
            <input type="hidden" name="hash" value="{$csrfToken}" />
            <br/>
@ -95,6 +98,10 @@
                        <img src="/assets/packages/static/openvk/img/oxygen-icons/16x16/actions/office-chart-bar-stacked.png" />
                        {_poll}
                    </a>
+                    <a n:if="$geo ?? false" id="__geoAttacher">
+                        <img src="/assets/packages/static/openvk/img/oxygen-icons/16x16/apps/amarok.png" />
+                        {_geo_place}
+                    </a>
                    <a n:if="$hasSource ?? false" id='__sourceAttacher'>
                        <img src="/assets/packages/static/openvk/img/oxygen-icons/16x16/actions/insert-link.png" />
                        {_source}
--- a/Web/Presenters/templates/components/wall.xml
+++ b/Web/Presenters/templates/components/wall.xml
@ -10,7 +10,7 @@
    <div class="insertThere" id="postz"></div>
    <div id="underHeader">
        <div n:if="$canPost" class="content_subtitle">
-            {include "../components/textArea.xml", route => "/wall$owner/makePost", graffiti => true, polls => true, notes => true, hasSource => true}
+            {include "../components/textArea.xml", route => "/wall$owner/makePost", graffiti => true, polls => true, notes => true, hasSource => true, geo => true}
        </div>
        
        <div class="content scroll_container">
--- a/Web/static/css/main.css
+++ b/Web/static/css/main.css
@ -851,6 +851,11 @@ h4 {
    margin-bottom: 2px;
 }

+.post-geo {
+    margin: 1px 0px;
+    padding: 0 4px;
+}
+
 .post-signature span {
    color: grey;
 }
@ -3925,3 +3930,9 @@ hr {
    top: 3px;
    font-size: 15px;
 }
+
+.map_svg_icon {
+    display: inline-block;
+    margin-bottom: -2px;
+    fill: #7d7d7d;
+}
--- a/Web/static/js/al_wall.js
+++ b/Web/static/js/al_wall.js
@ -2588,6 +2588,247 @@ async function changeStatus() {
    document.status_popup_form.submit.disabled = false;
 }

+const tplMapIcon = `<svg class="map_svg_icon" width="13" height="12" viewBox="0 0 3.4395833 3.175">
+<g><path d="M 1.7197917 0.0025838216 C 1.1850116 0.0049444593 0.72280427 0.4971031 0.71520182 1.0190592 C 0.70756921 1.5430869 1.7223755 3.1739665 1.7223755 3.1739665 C 1.7223755 3.1739665 2.7249195 1.5439189 2.7243815 0.99632161 C 2.7238745 0.48024825 2.2492929 0.00024648357 1.7197917 0.0025838216 z M 1.7197917 0.52606608 A 0.48526123 0.48526123 0 0 1 2.2050334 1.0113078 A 0.48526123 0.48526123 0 0 1 1.7197917 1.4965495 A 0.48526123 0.48526123 0 0 1 1.23455 1.0113078 A 0.48526123 0.48526123 0 0 1 1.7197917 0.52606608 z " /></g>
+</svg>`
+
+u(document).on('click', "#__geoAttacher", async (e) => {
+    const form = u(e.target).closest('#write')
+    const buttons = form.find('.post-buttons')
+
+    let current_coords = [54.51331, 36.2732]
+    let currentMarker  = null
+    const getCoords = async () => {
+        const pos = await new Promise((resolve, reject) => {
+            navigator.geolocation.getCurrentPosition((position) => {
+                resolve([position.coords.latitude, position.coords.longitude])
+            }, () => {
+                resolve([54.51331, 36.2732])
+            },
+            {
+                enableHighAccuracy: true,
+                timeout: 5000,
+                maximumAge: 0,
+            })
+        })
+
+        return pos
+    }
+
+    current_coords = await getCoords()
+
+    const geo_msg = new CMessageBox({
+        title: tr('attach_geotag'),
+        body: `<div id=\"osm-map\" style='height:75vh;'></div>`,
+        buttons: [tr('attach'), tr('cancel')],
+        callbacks: [() => {
+            if(!currentMarker) {
+                return
+            }
+            
+            const geo_name = $(`#geo-name`).html()
+            if(geo_name == '') {
+                return
+            }
+
+            const marker = {
+                lat: currentMarker._latlng.lat,
+                lng: currentMarker._latlng.lng,
+                name: escapeHtml(geo_name)
+            }
+            buttons.find(`input[name='geo']`).nodes[0].value = JSON.stringify(marker)
+            buttons.find(`.post-has-geo`).html(`
+                ${tplMapIcon}
+                <span>${escapeHtml(geo_name)}</span>
+                <div id="small_remove_button"></div>
+            `)
+        }, () => {}]
+    })
+
+    // by n1rwana
+    const markerLayers = L.layerGroup()
+    const map = L.map(u('#osm-map').nodes[0], {
+        center: current_coords,
+        zoom: 10,
+        attributionControl: false,
+        width: 800
+    })
+    markerLayers.addTo(map)
+
+    map.on('click', async (e) => {
+        const lat = e.latlng.lat
+        const lng = e.latlng.lng
+
+        if(currentMarker) map.removeLayer(currentMarker);
+
+        const marker_fetch_req = await fetch(`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lng}&format=jsonv2`)
+        const marker_fetch = await marker_fetch_req.json()
+
+        markerLayers.clearLayers()
+        currentMarker = L.marker([lat, lng]).addTo(map)
+
+        let marker_name = marker_fetch && marker_fetch.display_name ? short_geo_name(marker_fetch.address) : tr('geotag')
+        const content = `<span id="geo-name">${marker_name}</span>`;
+
+        currentMarker.bindPopup(content).openPopup()
+        markerLayers.addLayer(currentMarker)
+    })
+
+    const geocoderControl = L.Control.geocoder({
+        defaultMarkGeocode: false,
+    }).addTo(map)
+
+    geocoderControl.on('markgeocode', function (e) {
+        console.log(e.geocode.properties)
+        const lat = e.geocode.properties.lat
+        const lng = e.geocode.properties.lon
+        const name = e.geocode.properties?.display_name ? short_geo_name(e.geocode.properties?.address) : tr('geotag')
+
+        if(currentMarker) map.removeLayer(currentMarker)
+
+        currentMarker = L.marker([lat, lng]).addTo(map)
+        currentMarker.bindPopup(`<span id="geo-name">${escapeHtml(name)}</span>`).openPopup()
+
+        marker = {
+            lat: lat,
+            lng: lng,
+            name: name
+        };
+        map.setView([lat, lng], 15);
+    })
+
+    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(map)
+
+    geo_msg.getNode().nodes[0].style = 'width:90%'
+    setTimeout(function(){ map.invalidateSize()}, 100)
+})
+
+u(document).on('click', '.post-has-geo #small_remove_button', (e) => {
+    const form = u(e.target).closest('#write')
+    const geo  = form.find('.post-has-geo')
+    geo.remove()
+    form.find(`input[name='geo']`).nodes[0].value = ''
+})
+
+function openGeo(data, owner_id, virtual_id) {
+    MessageBox(tr("geotag"), "<div id=\"osm-map\"></div>", [tr("nearest_posts"), tr("close")], [async () => {
+        const posts = await OVKAPI.call('wall.getNearby', {owner_id: owner_id, post_id: virtual_id})
+        openNearPosts(posts)
+    }, Function.noop]);
+
+    let element = document.getElementById('osm-map');
+    element.style = 'height: 80vh;';
+
+    let map = L.map(element, {attributionControl: false});
+    let target = L.latLng(data.lat, data.lng);
+    map.setView(target, 15);
+
+    let marker = L.marker(target).addTo(map);
+    marker.bindPopup(escapeHtml(data.name ?? tr("geotag"))).openPopup();
+
+    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(map);
+
+    $(".ovk-diag-cont").width('80%');
+    setTimeout(function(){ map.invalidateSize()}, 100);
+}
+
+function tplPost(post) {
+    return `<a style="color: inherit; display: block; margin-bottom: 8px;" href="${post.url}">
+            <table border="0" style="font-size: 11px;" class="post">
+                <tbody>
+                    <tr>
+                        <td width="54" valign="top">
+                            <a href="${post.owner.domain}">
+                                <img src="${post.owner.photo_50}" width="50">
+                            </a>
+                        </td>
+                        <td width="100%" valign="top">
+                            <div class="post-author">
+                                <a href="${post.owner.domain}"><b>${escapeHtml(post.owner.name)}</b></a>
+                                ${post.owner.verified ? `<img class="name-checkmark" src="/assets/packages/static/openvk/img/checkmark.png">` : ""}
+                                <br>
+                                <a href="${post.url}" class="date">
+                                    ${post.created}
+                                </a>
+                            </div>
+                            <div class="post-content">
+                                <div class="text">
+                                    ${escapeHtml(post.message)}
+                                </div>
+                                <div style="padding: 4px;">
+                                    <div style="border-bottom: #ECECEC solid 1px;"></div>
+                                    <div style="cursor: pointer; padding: 4px;">
+                                        ${tplMapIcon}
+                                        ${escapeHtml(post.geo.name)}
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+       </a>`;
+}
+
+function openNearPosts(posts) {
+    if (posts.length > 0) {
+        let MsgTxt = "<div id=\"osm-map\"></div>";
+        MsgTxt += `<br /><br /><center style='color: grey;'>${tr('shown_last_nearest_posts', 25)}</center>`;
+
+        MessageBox(tr('nearest_posts'), MsgTxt, ["OK"], [Function.noop]);
+
+        let element = document.getElementById('osm-map');
+        element.style = 'height: 80vh;';
+
+        let markerLayers = L.layerGroup();
+        let map = L.map(element, {attributionControl: false});
+
+        markerLayers.addTo(map);
+
+        let markersBounds = [];
+        let coords = [];
+
+        posts.forEach((post) => {
+            if (coords.includes(`${post.geo.lat} ${post.geo.lng}`)) {
+                markerLayers.getLayers().forEach((marker) => {
+                    if (marker.getLatLng().lat === post.geo.lat && marker.getLatLng().lng === post.geo.lng) {
+                        let content = marker.getPopup()._content += tplPost(post);
+                        if (!content.startsWith(`<div style="max-height: 300px; overflow-y: auto;">`))
+                            content = `<div style="max-height: 300px; overflow-y: auto;">${content}`;
+
+                        marker.getPopup().setContent(content);
+                    }
+                });
+            } else {
+                let marker = L.marker(L.latLng(post.geo.lat, post.geo.lng)).addTo(map);
+                marker.bindPopup(tplPost(post));
+                markerLayers.addLayer(marker);
+                markersBounds.push(marker.getLatLng());
+            }
+
+            coords.push(`${post.geo.lat} ${post.geo.lng}`);
+        })
+
+        let bounds = L.latLngBounds(markersBounds);
+        map.fitBounds(bounds);
+
+        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        }).addTo(map);
+
+        $(".ovk-diag-cont").width('80%');
+        setTimeout(function () {
+            map.invalidateSize()
+        }, 100);
+    } else {
+        MessageBox(tr('nearest_posts'), `<center style='color: grey;'>${tr('no_nearest_posts')}</center>`, ["OK"], [Function.noop]);
+    }
+}
+
 u(document).on('click', '#_bl_toggler', async (e) => {
    e.preventDefault()

--- a/Web/static/js/package.json
+++ b/Web/static/js/package.json
@ -9,6 +9,8 @@
    "jquery": "^3.0.0",
    "knockout": "^3.5.1",
    "ky": "^0.19.0",
+    "leaflet": "^1.9.4",
+    "leaflet-control-geocoder": "^2.4.0",
    "literallycanvas": "^0.5.2",
    "monaco-editor": "^0.20.0",
    "msgpack-lite": "^0.1.26",
--- a/Web/static/js/router.js
+++ b/Web/static/js/router.js
@ -164,6 +164,10 @@ window.router = new class {
            return false
        }

+        if(url.indexOf('#close') != -1) {
+            return false
+        }
+
        return true
    }

@ -235,6 +239,7 @@ window.router = new class {

 u(document).on('click', 'a', async (e) => {
    if(e.defaultPrevented) {
+        console.log('AJAX | Skipping because default is prevented')
        return
    }
    
--- a/Web/static/js/utils.js
+++ b/Web/static/js/utils.js
@ -284,3 +284,30 @@ function collect_attachments_node(target)
    })
    vertical_input.nodes[0].value = vertical_array.join(',')
 }
+
+function short_geo_name(address_osm)
+{
+    let final_arr = []
+    if(address_osm.country) {
+        final_arr.push(address_osm.country)
+    }
+    if(address_osm.state) {
+        final_arr.push(address_osm.state)
+    }
+    if(address_osm.state_district) {
+        final_arr.push(address_osm.state_district)
+    }
+    if(address_osm.city) {
+        final_arr.push(address_osm.city)
+    } else if(address_osm.town) {
+        final_arr.push(address_osm.town)
+    }
+    if(address_osm.city_district) {
+        final_arr.push(address_osm.city_district)
+    }
+    if(address_osm.road) {
+        final_arr.push(address_osm.road)
+    }
+
+    return escapeHtml(final_arr.join(', '))
+}
--- a/install/sqls/00051-posts-geo.sql
+++ b/install/sqls/00051-posts-geo.sql
@ -0,0 +1,4 @@
+ALTER TABLE `posts`
+    ADD `geo`     LONGTEXT       NULL DEFAULT NULL AFTER `deleted`,
+    ADD `geo_lat` DECIMAL(12, 8) NULL DEFAULT NULL AFTER `geo`,
+    ADD `geo_lon` DECIMAL(12, 8) NULL DEFAULT NULL AFTER `geo_lat`;
--- a/locales/en.strings
+++ b/locales/en.strings
@ -240,6 +240,7 @@
 "detach" = "Detach";
 "attach_photo" = "Attach photo";
 "attach_video" = "Attach video";
+"attach_geotag" = "Attach geotag";
 "draw_graffiti" = "Draw graffiti";
 "no_posts_abstract" = "Nobody wrote anything here... So far.";
 "attach_no_longer_available" = "This attachment is no longer available.";
@ -281,6 +282,15 @@
 "liked_by_x_people_other" = "Liked by $1 users";
 "liked_by_x_people_zero" = "Nobody liked";

+"geo_place" = "Place";
+"geotag" = "Geotag";
+"nearest_posts" = "Nearest posts";
+"Latitude" = "Latitude";
+"longitude" = "Longitude";
+"name_of_the_place" = "Place's name";
+"no_nearest_posts" = "No nearby posts";
+"shown_last_nearest_posts" = "Showing last $1 posts per month";
+
 /* Friends */

 "friends" = "Friends";
@ -1604,6 +1614,8 @@
 "error_adding_source_long" = "Error adding source: link is too long.";
 "error_adding_source_sus" = "Error adding source: suspicious link.";
 "error_playlist_creating_too_small" = "Add at least one audio";
+"error_geolocation" = "Error while trying to pin geolocation";
+"error_no_geotag" = "There is no geo-tag pinned in this post";

 /* Admin actions */

--- a/locales/ru.strings
+++ b/locales/ru.strings
@ -223,6 +223,7 @@
 "detach" = "Открепить";
 "attach_photo" = "Прикрепить фото";
 "attach_video" = "Прикрепить видео";
+"attach_geotag" = "Прикрепить геометку";
 "draw_graffiti" = "Нарисовать граффити";
 "no_posts_abstract" = "Здесь никто ничего не написал... Пока.";
 "attach_no_longer_available" = "Это вложение больше недоступно.";
@ -260,6 +261,15 @@
 "liked_by_x_people_other" = "Понравилось $1 людям";
 "liked_by_x_people_zero" = "Никому не понравилось";

+"geo_place" = "Место";
+"geotag" = "Геолокация";
+"nearest_posts" = "Ближайшие посты";
+"Latitude" = "Широта";
+"longitude" = "Долгота";
+"name_of_the_place" = "Название места";
+"no_nearest_posts" = "Нет ближайших постов";
+"shown_last_nearest_posts" = "Показаны последние $1 постов за месяц";
+
 /* Friends */

 "friends" = "Друзья";
@ -1507,6 +1517,8 @@
 "error_adding_source_long" = "Ошибка добавления источника: слишком длинная ссылка.";
 "error_adding_source_sus" = "Ошибка добавления источника: гиперссылка заблокирована.";
 "error_playlist_creating_too_small" = "Добавь хотя бы одну аудиозапись.";
+"error_geolocation" = "Ошибка при прикреплении геометки";
+"error_no_geotag" = "У поста не указана гео-метка";

 /* Admin actions */