From 8e404c4f3cf7880681b6f4cdf3c378e084ad54d2 Mon Sep 17 00:00:00 2001 From: hellekin Date: Tue, 2 Feb 2021 18:39:14 +0100 Subject: Add leaflet-geosearch This Leaflet plugin adds a live address search on the map. We anticipate the possibility to find POIs from their address, or to check whether an address is already in the database. For now it enables looking up an address. https://smeijer.github.io/leaflet-geosearch/leaflet-control/ --- app/javascript/controllers/map_controller.js | 10 ++++++++++ app/javascript/packs/application.js | 1 + app/javascript/scss/application.scss | 1 + package.json | 1 + yarn.lock | 9 ++++++++- 5 files changed, 21 insertions(+), 1 deletion(-) diff --git a/app/javascript/controllers/map_controller.js b/app/javascript/controllers/map_controller.js index 57bafa5..0a64f98 100644 --- a/app/javascript/controllers/map_controller.js +++ b/app/javascript/controllers/map_controller.js @@ -19,6 +19,7 @@ import "leaflet.markercluster/dist/leaflet.markercluster.js" import 'leaflet-extra-markers' import 'leaflet-easyprint' +import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch'; export default class extends Controller { static targets = [ "container" ] @@ -75,6 +76,15 @@ export default class extends Controller { sizeModes: ['A4Portrait', 'A4Landscape'] }).addTo(this.map); + /* Add search */ + const provider = new OpenStreetMapProvider(); + const searchControl = new GeoSearchControl({ + provider: provider, + style: 'button', + position: 'bottomright' + }); + this.map.addControl(searchControl); + // Allow calling the mapController from elsewhere. this.element[this.identifier] = this } diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 0ddfdb5..ea65dca 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -18,6 +18,7 @@ import "../scss/application" //= require leaflet //= require leaflet-defaulticon-compatibility +//= require leaflet-geosearch //= require leaflet.markercluster import "controllers" diff --git a/app/javascript/scss/application.scss b/app/javascript/scss/application.scss index 3bf6259..2775c69 100644 --- a/app/javascript/scss/application.scss +++ b/app/javascript/scss/application.scss @@ -28,6 +28,7 @@ /* Vendors */ @import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css"; +@import "leaflet-geosearch/dist/geosearch.css"; @import "leaflet.markercluster/dist/MarkerCluster.css"; @import "leaflet.markercluster/dist/MarkerCluster.Default.css"; diff --git a/package.json b/package.json index 48fd106..7b65da8 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "leaflet-defaulticon-compatibility": "^0.1.1", "leaflet-easyprint": "^2.1.9", "leaflet-extra-markers": "^1.2.1", + "leaflet-geosearch": "^3.2.1", "leaflet-providers": "^1.11.0", "leaflet.markercluster": "^1.4.1", "normalize.css": "^8.0.1", diff --git a/yarn.lock b/yarn.lock index 023c201..53bc800 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4317,6 +4317,13 @@ leaflet-extra-markers@^1.2.1: resolved "https://registry.yarnpkg.com/leaflet-extra-markers/-/leaflet-extra-markers-1.2.1.tgz#dcea9e0ab3850c4724afa6eda8dda8fa743739fa" integrity sha512-k3mGGBJg5wr4LY89MyLHcWCol3yNC9qcK1+5os+HjBk09RlxmqsywNSBwmpP1WKnkKCIgofnOFOhdM5GeK0kHQ== +leaflet-geosearch@^3.2.1: + version "3.2.1" + resolved "https://registry.yarnpkg.com/leaflet-geosearch/-/leaflet-geosearch-3.2.1.tgz#d28057e9383af8a11ae4dfc7e159e62265e76b7c" + integrity sha512-GAVuuDy3+Kva+JmuxGYLIaRTQgSVvWSh6IADtEJS0SLOuclxBd965qrrjtI1U4TYBLYr4p5IKOTQHwJQcrATtQ== + optionalDependencies: + leaflet "^1.6.0" + leaflet-providers@^1.11.0: version "1.11.0" resolved "https://registry.yarnpkg.com/leaflet-providers/-/leaflet-providers-1.11.0.tgz#e3787c2a45cc1baaaaedd9251a564e88ae882046" @@ -4327,7 +4334,7 @@ leaflet.markercluster@^1.4.1: resolved "https://registry.yarnpkg.com/leaflet.markercluster/-/leaflet.markercluster-1.4.1.tgz#b53f2c4f2ca7306ddab1dbb6f1861d5e8aa6c5e5" integrity sha512-ZSEpE/EFApR0bJ1w/dUGwTSUvWlpalKqIzkaYdYB7jaftQA/Y2Jav+eT4CMtEYFj+ZK4mswP13Q2acnPBnhGOw== -leaflet@^1.7.1: +leaflet@^1.6.0, leaflet@^1.7.1: version "1.7.1" resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.7.1.tgz#10d684916edfe1bf41d688a3b97127c0322a2a19" integrity sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw== -- cgit v1.2.3