Add map

assets/js/map.js

@@ -1,5 +1,4 @@
-import L from 'leaflet';
-
+import L, { LatLng } from 'leaflet';
 import 'leaflet/dist/leaflet.css';
 import '../css/map.less';
 
@@ -11,7 +10,39 @@ L.Icon.Default.mergeOptions({
     shadowUrl: require('leaflet/dist/images/marker-shadow.png').default
 });
 
-const map = L.map('map');
+const map = L.map('map', {
+    preferCanvas: true
+});
+
+// Load points
+map.on('moveend', moveMap);
+map.on('zoomend', moveMap);
+function moveMap () {
+    // eslint-disable-next-line no-undef
+    const url = appBaseUrl + 'map/' +
+        map.getBounds().getNorthEast().lat.toFixed(5) +
+        '_' + map.getBounds().getNorthEast().lng.toFixed(5) +
+        '_' + map.getBounds().getSouthWest().lat.toFixed(5) +
+        '_' + map.getBounds().getSouthWest().lng.toFixed(5) +
+        '.json';
+    const dataRequest = new XMLHttpRequest();
+    dataRequest.addEventListener('load', function () {
+        const data = JSON.parse(this.responseText);
+        data.forEach(function (e) {
+            // eslint-disable-next-line no-undef
+            const marker = L.circleMarker(new LatLng(e.lat, e.lng), {
+                radius: 2,
+                fillOpacity: 1.0,
+                stroke: false,
+                weight: 0,
+                color: '#ff2222'
+            });
+            marker.addTo(map);
+        });
+    });
+    dataRequest.open('GET', url);
+    dataRequest.send();
+}
 
 // Marker.
 let marker = null;
@@ -31,18 +62,23 @@ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 
 // Pointer interaction.
 map.on('click', clickEvent => {
+    if (!mapData.edit) {
+        return;
+    }
     if (!marker) {
         makeMarker(clickEvent.latlng);
     }
     moveMarker(clickEvent.latlng);
 });
+
 function makeMarker (latLng) {
     marker = new L.Marker(latLng, { draggable: true });
     map.addLayer(marker);
     marker.on('dragend', dragEvent => {
         moveMarker(dragEvent.target.getLatLng());
     });
 }
+
 function moveMarker (latLng) {
     marker.setLatLng(latLng, { draggable: true });
     map.panTo(latLng);

public/build/entrypoints.json

@@ -14,8 +14,8 @@
     "map": {
       "js": [
         "/build/runtime.d94b3b43.js",
-        "/build/0.5ec6e634.js",
-        "/build/map.a0c51778.js"
+        "/build/0.b868e304.js",
+        "/build/map.09d99380.js"
       ],
       "css": [
         "/build/0.8ccd45ee.css",

public/build/manifest.json

@@ -1,12 +1,12 @@
 {
   "build/0.8ccd45ee.css": "/build/0.8ccd45ee.css",
-  "build/0.5ec6e634.js": "/build/0.5ec6e634.js",
+  "build/0.b868e304.js": "/build/0.b868e304.js",
   "build/1.10bbd395.css": "/build/1.10bbd395.css",
   "build/1.d9793a66.js": "/build/1.d9793a66.js",
   "build/app.css": "/build/app.68d557f9.css",
   "build/app.js": "/build/app.2d2d6330.js",
   "build/map.css": "/build/map.f3a81ea1.css",
-  "build/map.js": "/build/map.a0c51778.js",
+  "build/map.js": "/build/map.09d99380.js",
   "build/runtime.js": "/build/runtime.d94b3b43.js",
   "build/images/layers-2x.png": "/build/images/layers-2x.8f2c4d11.png",
   "build/images/layers.png": "/build/images/layers.416d9136.png",

src/Controller/PostController.php

@@ -17,6 +17,7 @@
 use IntlDateFormatter;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\File\UploadedFile;
+use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\HttpFoundation\StreamedResponse;
@@ -249,4 +250,31 @@ public function dates(Request $request, PostRepository $postRepository)
             'posts' => $postRepository->findByDateRange($year, $month, $this->getUser()),
         ]);
     }
+
+    /**
+     * @Route("/map/{ne_lat}_{ne_lng}_{sw_lat}_{sw_lng}.json", name="mapdata", requirements={
+     *     "ne_lat"="[0-9.-]+",
+     *     "ne_lng"="[0-9.-]+",
+     *     "sw_lat"="[0-9.-]+",
+     *     "sw_lng"="[0-9.-]+"
+     * })
+     */
+    public function mapData(Request $request, PostRepository $postRepository)
+    {
+        return new JsonResponse($postRepository->findByBoundingBox(
+            $request->get('ne_lat'),
+            $request->get('ne_lng'),
+            $request->get('sw_lat'),
+            $request->get('sw_lng'),
+            $this->getUser()
+        ));
+    }
+
+    /**
+     * @Route("/map", name="map")
+     */
+    public function map()
+    {
+        return $this->render('post/map.html.twig');
+    }
 }

src/Repository/PostRepository.php

@@ -90,6 +90,28 @@ public function recent(int $limit = 10, ?User $user = null): array
             ->getResult();
     }
 
+    public function findByBoundingBox(string $neLat, string $neLng, string $swLat, string $swLng, ?User $user = null)
+    {
+        $ne = "$neLng $neLat";
+        $se = "$neLng $swLat";
+        $sw = "$swLng $swLat";
+        $nw = "$swLng $neLat";
+        // Note start and end points are the same.
+        $wkt = "Polygon(($ne, $se, $sw, $nw, $ne))";
+        $groupList = $user ? $user->getGroupIdList() : UserGroup::PUBLIC;
+        $sql = "SELECT ST_X(location) AS lng, ST_Y(location) AS lat"
+            . " FROM post"
+            . " WHERE"
+            . "   location IS NOT NULL"
+            . "   AND ST_Contains(GeomFromText(:wkt), location)"
+            . "   AND view_group_id IN ($groupList)"
+            . " LIMIT 5000";
+        $stmt = $this->getEntityManager()->getConnection()->prepare($sql);
+        $stmt->bindParam('wkt', $wkt);
+        $stmt->execute();
+        return $stmt->fetchAll();
+    }
+
     public function createNew(): Post
     {
         $post = new Post();

templates/base.html.twig

@@ -16,6 +16,7 @@
                     <li><a href="{{ path('home') }}">Home</a></li>
                     <li><a href="{{ path('tags') }}">Tags</a></li>
                     <li><a href="{{ path('dates') }}">Dates</a></li>
+                    <li><a href="{{ path('map') }}">Map</a></li>
                     {% if is_granted('ROLE_ADMIN') %}
                         <li><a href="{{ path('post_create') }}">New post</a></li>
                         <li><a href="{{ path('post_upload') }}">Upload</a></li>
@@ -52,6 +53,9 @@
                 <li><a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html">GPL 3.0+</a></li>
             </ul>
         </footer>
+        <script>
+            const appBaseUrl = "{{ url('home') }}";
+        </script>
         {{ encore_entry_script_tags('app') }}
         {% block javascripts %}{% endblock %}
     </body>

templates/post/form.html.twig

@@ -73,7 +73,7 @@
                 <label>Location:</label>
                 <input type="hidden" name="latitude" id="latitude" value="{% if post.location %}{{ post.location.latitude }}{% endif %}" />
                 <input type="hidden" name="longitude" id="longitude" value="{% if post.location %}{{ post.location.longitude }}{% endif %}" />
-                <span id="map" class="form-input"
+                <span id="map" class="form-input" data-edit="1"
                       {% if post.location %}data-latitude="{{ post.location.latitude }}"{% endif %}
                       {% if post.location %}data-longitude="{{ post.location.longitude }}"{% endif %}
                 >

templates/post/map.html.twig

@@ -0,0 +1,24 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}
+    Map
+{% endblock %}
+
+{% block stylesheets %}
+    {{ encore_entry_link_tags('map') }}
+    <style>
+        #map { height: 70vh; }
+    </style>
+{% endblock %}
+
+{% block javascripts %}
+    {{ encore_entry_script_tags('map') }}
+{% endblock %}
+
+{% block body %}
+
+    <h1>Map</h1>
+
+    <div id="map"></div>
+
+{% endblock %}