Skip to content

Commit

Permalink
add geocoder and style fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@RomanistHere
RomanistHere committed Jul 19, 2021
1 parent a2afb91 commit 86e7e0a
Show file tree
Hide file tree
Showing 13 changed files with 132 additions and 84 deletions.
2 changes: 1 addition & 1 deletion back-end/helpers/email.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ const getHTML = (key, url, lang) => {

const templateFrom = {
'en': `Measureland mail service support@${process.env.MAILGUN_DOMAIN}`,
'ru': `Measureland mail service support@${process.env.MAILGUN_DOMAIN}`,
'ru': `Измерийская почтовая служба support@${process.env.MAILGUN_DOMAIN}`,
}

exports.sendEmail = async (data) => {
Expand Down
1 change: 1 addition & 0 deletions css/libs/esri-leaflet-geocoder.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file added css/libs/img/loading.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added css/libs/img/search.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 31 additions & 3 deletions css/main-non-crit.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -560,7 +560,7 @@ textarea {
}

.login__wrap-check {
height: 270px;
height: 320px;
}

.login__wrap-register {
Expand All @@ -572,7 +572,7 @@ textarea {
}

.login__wrap-onboarding {
height: 610px;
height: 660px;
}

.login__wrap-reset {
Expand All @@ -586,7 +586,7 @@ textarea {
}

.login__content-check {
height: 140px;
height: 190px;
}

.login__recover {
Expand Down Expand Up @@ -1133,6 +1133,19 @@ textarea {

/* // additional styles // */

.onboarding__content .rating__text {
margin-bottom: 0;
}

.adress_bar {
margin-bottom: 5px;

text-align: center;
font-style: italic;
font-size: 90%;
font-weight: bold;
}

div.rate__wrap .btn-hide {
display: none;
}
Expand Down Expand Up @@ -1301,6 +1314,21 @@ a::selection {
.footer {
font-size: 80%;
}

.login__wrap-onboarding {
width: 500px;
height: 560px;
}

.onboarding__content .rating__text {
margin-top: 10px;
}

.form__select {
margin-top: 10px;
border: 2px solid var(--bg-color-inp);
font-size: 16px;
}
}

@media screen and (max-width: 1023px) {
Expand Down
47 changes: 18 additions & 29 deletions css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,47 +123,33 @@ body {

/* // leaflet // */

.leaflet-touch .leaflet-control-geocoder-icon {
width: 36px;
height: 36px;
box-sizing: border-box;
.geocoder-control .geocoder-control-input,
.leaflet-control-zoom {
background-color: var(--bg-color);
}

.leaflet-touch .leaflet-control-geocoder {
border-radius: 0;
border: 2px solid var(--text-color);
box-sizing: border-box;
background-color: var(--bg-color-add-non-transparent);
box-shadow: 0 0 1px var(--text-color);
}

.leaflet-control-geocoder-alternatives {
width: 100%;
border-top: 1px solid var(--text-color);
background-color: var(--side-bg-color);
.leaflet-touch .leaflet-bar a {
background-color: var(--bg-color);
}

.leaflet-control-geocoder-alternatives li {
padding: 10px;
border-bottom-color: var(--text-color);
.leaflet-touch .leaflet-draw-toolbar a,
.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar {
border-color: var(--text-color);
}

.leaflet-control-zoom.leaflet-bar a {
width: 40px;
height: 40px;
line-height: 40px;
background-color: var(--bg-color);
.leaflet-touch .leaflet-draw-toolbar .leaflet-disabled {
background-color: var(--bg-color-add-non-transparent);
}

.leaflet-left .leaflet-control {
border-radius: 0;
border: 2px solid var(--text-color);
box-shadow: 0 0 1px var(--text-color);
.leaflet-touch .geocoder-control-suggestion {
background-color: var(--bg-color-add-non-transparent);
}

.leaflet-bar a {
border-bottom: 1px solid var(--text-color);
.leaflet-touch .geocoder-control-suggestion:hover {
background-color: var(--bg-color);
border-color: var(--bg-color);
}

/* // spinner // */
Expand Down Expand Up @@ -689,7 +675,10 @@ input:checked ~ .checkbox__checkmark::after {
background-color: var(--bg-color);
}

.leaflet-control-zoom.leaflet-bar a:hover {
.leaflet-control-zoom.leaflet-bar a:hover,
.leaflet-touch .leaflet-draw-toolbar a:not(.leaflet-disabled):hover,
.geocoder-control .geocoder-control-input:hover,
.leaflet-control-zoom:hover {
background-color: var(--bg-color-add-non-transparent);
}

Expand Down
15 changes: 10 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,20 +39,22 @@
<link rel="preload" href="/fonts/nunito-v16-latin_cyrillic-regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/star__icon.woff" as="font" type="font/woff" crossorigin>

<!-- critical -->
<link rel="stylesheet" href="css/main.css">
<!-- libs -->
<link rel="stylesheet" href="css/libs/esri-leaflet-geocoder.css">
<link rel="stylesheet" href="css/libs/leaflet.css">
<link rel="stylesheet" href="css/libs/control.geocoder.css">
<link rel="stylesheet" href="css/libs/leaflet.draw.css">
<!-- critical -->
<link rel="stylesheet" href="css/main.css">
<!-- common -->
<link rel="stylesheet" href="css/main-non-crit.css" media="print" onload="this.media='all'">

<!-- critical -->
<script defer src="js/critical.js"></script>
<!-- libs -->
<script defer src="js/libs/leaflet.js"></script>
<script defer src="js/libs/control.geocoder.js"></script>
<!-- <script defer src="js/libs/control.geocoder.js"></script> -->
<script defer src="js/libs/esri-leaflet.js"></script>
<script defer src="js/libs/esri-leaflet-geocoder.js"></script>
<script defer src="js/libs/polybool.js"></script>
<script defer src="js/libs/supercluster.js"></script>
<script defer src="js/libs/sentry.min.js"></script>
Expand Down Expand Up @@ -121,6 +123,9 @@ <h2 class="rating__title title rating__item_text sidebar__title">Your ratings</h
<div class="rating rate">
<div class="rating__wrap rate__wrap">
<div class="rating__popup rating__popup-active rate__popup" tabindex="0">
<div class="adress_bar">
Approximate address: <span class="adress_bar__string">calculating...</span>
</div>
<ul class="rating__list">
<li class="rating__stars rating__item">
<h2 class="rating__title title rating__item_text">Air quality</h2>
Expand Down Expand Up @@ -983,7 +988,7 @@ <h2 class="rating__title title rating__item_text settings__title sidebar__title"

<footer class="footer">
<div>
<span class="footer__version">Version: 1.0.1</span>.
<span class="footer__version">Version: 1.1.0</span>.
<a class="footer__link" target="_blank" href="blog/terms-of-use/">Terms of use</a>
</div>
<div>
Expand Down
21 changes: 21 additions & 0 deletions js/helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -276,3 +276,24 @@ const addToUrlOpenModalFlag = () => {

window.history.pushState(null, null, url)
}

// geocoding //

const esriApiKey = 'AAPKdec033141fc049a1936e3862bd2fec4ce1WeDmCkYfNW9w7DMLrt7bfPVl8vWPRistJ8w-fEzIg0u4I6uVRL1tIxuqajfw7Q'
const geocodeService = L.esri.Geocoding.geocodeService({ apikey: esriApiKey })

const fillAdress = latlng => {
geocodeService.reverse().latlng(latlng).language(state.lang).run((error, result) => {
if (error) {
console.log(error)
return
}
const adress = result.address.LongLabel
$All('.adress_bar__string').forEach(elem => elem.textContent = adress)
})
}

const resetAdress = () => {
const adressPlaceHolder = state.lang === 'en' ? 'calculating...' : 'высчитываем...'
$All('.adress_bar__string').forEach(elem => elem.textContent = adressPlaceHolder)
}
63 changes: 22 additions & 41 deletions js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,7 @@ const initQuizPopup = (latlng) => {
const onMapClick = e => {
state.flow.push('cm')
initQuizPopup(e.latlng)

// geocoder.reverse(e.latlng, map.options.crs.scale(map.getZoom()), resp => {
// console.log(resp[0])
// })
fillAdress(e.latlng)
}

const initMap = () => {
Expand All @@ -73,10 +70,6 @@ const initMap = () => {
if (zoom)
state = { ...state, zoom }

// const southWest = L.latLng(-89.98155760646617, -180)
// const northEast = L.latLng(89.99346179538875, 180)
// const maxBounds = L.latLngBounds(southWest, northEast)

const map = L.map('map', {
center: state.center,
minZoom: 4,
Expand All @@ -93,45 +86,33 @@ const initMap = () => {

map.zoomControl.setPosition('bottomleft')

// make screen after search without marker
const geocoder = L.Control.Geocoder.nominatim()
L.Control.geocoder({
defaultMarkGeocode: false
})
.setPosition('topleft')
.on('markgeocode', e => {
var bbox = e.geocode.bbox;
var poly = L.polygon([
bbox.getSouthEast(),
bbox.getNorthEast(),
bbox.getNorthWest(),
bbox.getSouthWest()
])
map.fitBounds(poly.getBounds())
})
.addTo(map)

// if (typeof URLSearchParams !== 'undefined' && location.search) {
// // parse /?geocoder=nominatim from URL
// const params = new URLSearchParams(location.search)
// const geocoderString = params.get('geocoder')
// if (geocoderString && L.Control.Geocoder[geocoderString]) {
// console.log('Using geocoder', geocoderString)
// geocoder = L.Control.Geocoder[geocoderString]()
// } else if (geocoderString) {
// console.warn('Unsupported geocoder', geocoderString)
// }
// }

map.on('click', onMapClick)

return {
map,
geocoder
map
}
}

const { map, geocoder } = initMap()
const { map } = initMap()

const addGeoSearch = () => {
const searchControl = L.esri.Geocoding.geosearch({
providers: [
L.esri.Geocoding.arcgisOnlineProvider({
apikey: esriApiKey
})
],
placeholder: state.lang === 'en' ? 'Search for places or addresses' : 'Поиск по местам и адресам',
useMapBounds: false,
}).addTo(map)

searchControl.on("results", function (data) {
console.log(data)
map.setView(data.results[0].latlng, 17)
})
}

addGeoSearch()

if ("serviceWorker" in navigator) {
window.addEventListener("load", function() {
Expand Down
5 changes: 5 additions & 0 deletions js/libs/esri-leaflet-geocoder.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 86e7e0a

Please sign in to comment.