diff --git a/components/map/map-pick-location.js b/components/map/map-pick-location.js index bc09f68..9d8cbe0 100644 --- a/components/map/map-pick-location.js +++ b/components/map/map-pick-location.js @@ -192,7 +192,7 @@ class MapPickLocation extends HTMLElement { this.addLatLngInputs(); let addLocation = document.getElementsByClassName('add-location-container'); - addLocation[0].addEventListener('click', function () { + addLocation[0].addEventListener('click', function() { updateLatLngInputs(); }) } @@ -213,11 +213,66 @@ class MapPickLocation extends HTMLElement { updateLocationParam(); }; + window.addEventListener('location-tpl', (ev) => { + const tpl = ev.detail.tpl; + const coordsParent = document.querySelector('.coordinates-input-container'); + + [...coordsParent.childNodes].forEach((a) => a.remove()); + const numTags = document.createElement('div'); + numTags.className = 'input-number-tags'; + + const latElems = document.createElement('div'); + latElems.className = 'latitude-elements'; + + const lngElems = document.createElement('div'); + lngElems.className = 'longitude-elements'; + + coordsParent.append(numTags); // static + coordsParent.append(latElems); // static + coordsParent.append(lngElems); // static + + tpl.places.forEach((place) => { + const numTags = document.querySelector('.input-number-tags'); + const latElems = document.querySelector('.latitude-elements'); + const lngElems = document.querySelector('.longitude-elements'); + + const latElemLabel = document.createElement('label'); + latElemLabel.for = 'latitude'; + latElemLabel.innerHTML = 'Latitude:'; + + const lngElemLabel = document.createElement('label'); + lngElemLabel.for = 'longitude'; + lngElemLabel.innerHTML = 'Longitude:' + + latElems.append(latElemLabel); // static + lngElems.append(lngElemLabel); // static + coordsParent.append(numTags); // static + coordsParent.append(latElems); // static + coordsParent.append(lngElems); // static + + latElems.value = place.latitude; + lngElems.value = place.longitude; + + [...latElems.querySelectorAll('input')].forEach((elem) => elem.setAttribute('name', place.id + 1)); + [...lngElems.querySelectorAll('input')].forEach((elem) => elem.setAttribute('name', place.id + 1)); + + let numTag = document.createElement('p'); + numTag.innerHTML = place.id + 1 + '.'; + numTag.className = "num-tags"; + + numTags.append(numTag); + latElems.append(createInput('latitude', 1)) + lngElems.append(createInput('longitude', 1)) + + updateLocationParam(); + }); + }); + map = L.map(this.mapRoot).setView(this.mapConfig.center, this.mapConfig.onLoad_zoom); layerGroup = L.layerGroup().addTo(map); L.tileLayer(tile_url, this.mapConfig.attribution_opts).addTo(map); window.locationNumber = 1; - map.on('click', function (e) { // => {} that contains the coordinates + map.on('click', function(e) { // => {} that contains the coordinates array.push({ id: 'mapclick_' + window.locationNumber, coords: [e.latlng.lat, e.latlng.lng], diff --git a/pages/location/index.html b/pages/location/index.html index 7c652f0..0fc9044 100644 --- a/pages/location/index.html +++ b/pages/location/index.html @@ -9,6 +9,7 @@ + + @@ -67,24 +69,22 @@
1. Pick the location
Click to drop a pin on the map or enter exact GPS coordinates. You may enter up to 10 locations. - You can retrieve latitude and longitude from an address using this tool. + You can retrieve latitude and longitude from an address using + this tool.
+
+
+
+ If you want to place your creation in more than 10 locations, you may upload your own JSON file by clicking
+ here.
+ If you don't know hwo to set up your own JSON file, you can follow this template.
+
Select the type of content you would like to link to your marker and then upload the file from your computer.
++ Please check the file name and remove whitepaces. +
2. Choose the content
Select the type of content you would like to link to your marker and then upload the file from your computer.
++ Please check the file name and remove whitepaces. +
+ If you have a Mac, an IPhone or an IPad please use the Safari browser. On iOS Chrome does not allow AR. +
++ If you have an Android or a PC you can use Chrome, Firefox, Samsung Internet and other browsers. +
`; }; diff --git a/pages/publish/publish.css b/pages/publish/publish.css index 81f3a54..54617ad 100644 --- a/pages/publish/publish.css +++ b/pages/publish/publish.css @@ -22,10 +22,6 @@ margin-bottom: 2rem; } -.bold { - font-weight: bold; -} - .disclaimer-color { color: #828282; } diff --git a/style.css b/style.css index e6d8d14..f27651f 100644 --- a/style.css +++ b/style.css @@ -14,6 +14,11 @@ --max-z-index: 99999; } +.bold { + font-weight: bold; + color: var(--link-color); +} + /* Typography */ .title { font-family: Chakra Petch;