From 14636a1f504b168342d95ea0b2d7bb85f2a2f30e Mon Sep 17 00:00:00 2001 From: Juan Massuelles Date: Thu, 31 Aug 2023 11:25:17 +0200 Subject: [PATCH] [HTML/CSS/JS] sample code for mapping solution HERE adding leaflet example --- here-tests/README.md | 5 +++++ here-tests/css/main.css | 44 ++++++++++++++++++++++++++++++++++++++++ here-tests/css/main.css.map | 7 +++++++ here-tests/index.html | 16 +++++++++++++++ here-tests/js/main.js | 48 ++++++++++++++++++++++++++++++++++++++++++++ here-tests/leaflet.html | 36 +++++++++++++++++++++++++++++++++ here-tests/scss/main.scss | 49 +++++++++++++++++++++++++++++++++++++++++++++ 7 files changed, 205 insertions(+) create mode 100644 here-tests/css/main.css.map create mode 100644 here-tests/leaflet.html diff --git a/here-tests/README.md b/here-tests/README.md index e69de29..9ad74ad 100644 --- a/here-tests/README.md +++ b/here-tests/README.md @@ -0,0 +1,5 @@ + +## build css : +``` +sass --watch scss/main.scss:css/main.css +``` \ No newline at end of file diff --git a/here-tests/css/main.css b/here-tests/css/main.css index e69de29..74a557a 100644 --- a/here-tests/css/main.css +++ b/here-tests/css/main.css @@ -0,0 +1,44 @@ +:root { + font-family: sans-serif; + padding: 0; + margin: 0; } + +.overlay-search { + position: fixed; + top: 5px; + left: 5px; + border-radius: 5px; + padding: 10px; + background-color: white; + z-index: 1; } + +#map { + margin: 0; + box-sizing: border-box; + position: fixed; + width: 100vw; + height: 100vh; + top: 0; + left: 0; + background-color: pink; + z-index: 0; } + +.references { + position: fixed; + bottom: 5px; + right: 5px; + border-radius: 5px; + padding: 10px; + background-color: #d8d8d8; + z-index: 1; } + .references a { + padding: 5px; + margin: 0; + border-right: solid 1px gray; + display: inline-block; } + .references a:last-child { + border-right: none; } + .references a[href], .references a:link, .references a:hover, .references a:focus, .references a:active { + color: #4e4e4e; } + +/*# sourceMappingURL=main.css.map */ diff --git a/here-tests/css/main.css.map b/here-tests/css/main.css.map new file mode 100644 index 0000000..f9f6644 --- /dev/null +++ b/here-tests/css/main.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAAA,KAAK;EACH,WAAW,EAAE,UAAU;EACvB,OAAO,EAAC,CAAC;EACT,MAAM,EAAC,CAAC;;AAGV,eAAgB;EACd,QAAQ,EAAC,KAAK;EACd,GAAG,EAAC,GAAG;EACP,IAAI,EAAC,GAAG;EACR,aAAa,EAAC,GAAG;EACjB,OAAO,EAAC,IAAI;EACZ,gBAAgB,EAAC,KAAgB;EACjC,OAAO,EAAC,CAAC;;AAGX,IAAK;EACH,MAAM,EAAC,CAAC;EACR,UAAU,EAAE,UAAU;EACtB,QAAQ,EAAC,KAAK;EACd,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,GAAG,EAAC,CAAC;EACL,IAAI,EAAC,CAAC;EACN,gBAAgB,EAAE,IAAI;EACtB,OAAO,EAAC,CAAC;;AAGX,WAAY;EACV,QAAQ,EAAC,KAAK;EACd,MAAM,EAAC,GAAG;EACV,KAAK,EAAC,GAAG;EACT,aAAa,EAAC,GAAG;EACjB,OAAO,EAAC,IAAI;EACZ,gBAAgB,EAAC,OAAkB;EACnC,OAAO,EAAC,CAAC;EACT,aAAE;IACA,OAAO,EAAC,GAAG;IACX,MAAM,EAAC,CAAC;IACR,YAAY,EAAC,cAA0B;IACvC,OAAO,EAAE,YAAY;IACrB,wBAAa;MACX,YAAY,EAAC,IAAI;IAEnB,uGAAwC;MACtC,KAAK,EAAC,OAAe", +"sources": ["../scss/main.scss"], +"names": [], +"file": "main.css" +} \ No newline at end of file diff --git a/here-tests/index.html b/here-tests/index.html index e69de29..7c6ecc2 100644 --- a/here-tests/index.html +++ b/here-tests/index.html @@ -0,0 +1,16 @@ + + + + + + Here examples + + +
+ + + + +
+ + \ No newline at end of file diff --git a/here-tests/js/main.js b/here-tests/js/main.js index e69de29..12afadf 100644 --- a/here-tests/js/main.js +++ b/here-tests/js/main.js @@ -0,0 +1,48 @@ +const here = { + apiKey:'KJ-S3Fuz34beh9KbbbzJznJLyEEVmDAymadvIP2ju6Q', + geocodeUrl:'https://geocode.search.hereapi.com/v1/geocode', +} + +const locatethis = async () => { + + console.log("locating"); + let url = new URL((window.location.href).toLowerCase()); + let address = url.searchParams.get("q"); + + try { + + let here_locate = await fetch(here.geocodeUrl+"?q=" + encodeURIComponent(address) + "&apiKey=" + encodeURIComponent(here.apiKey), { + method: "GET", + headers: { "Content-type": "application/x-www-form-urlencoded" }, + cache: "no-cache" + }); + + let here_query_results = await here_locate.json(); + console.log(here_query_results); + return true; + } catch (error) { + console.log(error); + } +} + +document.addEventListener('DOMContentLoaded', function () { + + locatethis(); + + const style = 'normal.day'; + + const hereTileUrl = `https://2.base.maps.ls.hereapi.com/maptile/2.1/maptile/newest/${style}/{z}/{x}/{y}/512/png8?apiKey=${here.apiKey}&ppi=320`; + + const map = L.map('map', { + center: [37.773972, -122.431297], + zoom: 11, + zoomControl: false, + layers: [L.tileLayer(hereTileUrl)] + }); + + L.control.zoom({ + position: 'topright' + }).addTo(map); + + map.attributionControl.addAttribution('© HERE 2019'); +}, false); \ No newline at end of file diff --git a/here-tests/leaflet.html b/here-tests/leaflet.html new file mode 100644 index 0000000..0e8de15 --- /dev/null +++ b/here-tests/leaflet.html @@ -0,0 +1,36 @@ + + + + + + + + + + + + here + leaflet map tiles + + +
+
+ +

+ + Add a HERE base map to Leaflet +
here documentation on leaflet + + Leaflet Quick Start Guide +
leaflet quick start documentation + + How to locate leaflet zoom control in a desired position +
Change zoom position + + + Vanilla Javascript to Get URL Parameter Values / Query String +

+ + \ No newline at end of file diff --git a/here-tests/scss/main.scss b/here-tests/scss/main.scss index e69de29..87ffd7a 100644 --- a/here-tests/scss/main.scss +++ b/here-tests/scss/main.scss @@ -0,0 +1,49 @@ +:root{ + font-family: sans-serif; + padding:0; + margin:0; +} + +.overlay-search { + position:fixed; + top:5px; + left:5px; + border-radius:5px; + padding:10px; + background-color:rgb(255,255,255); + z-index:1; +} + +#map { + margin:0; + box-sizing: border-box; + position:fixed; + width: 100vw; + height: 100vh; + top:0; + left:0; + background-color: pink; + z-index:0; +} + +.references { + position:fixed; + bottom:5px; + right:5px; + border-radius:5px; + padding:10px; + background-color:rgb(216, 216, 216); + z-index:1; + a { + padding:5px; + margin:0; + border-right:solid 1px rgb(128,128,128); + display: inline-block; + &:last-child { + border-right:none; + } + &[href],&:link,&:hover,&:focus,&:active { + color:rgb(78, 78, 78); + } + } +} \ No newline at end of file