[HTML/CSS/JS] sample code for mapping solution HERE

adding leaflet example
1 year ago · 14636a1f50
parent 8637577466
commit 14636a1f50
7 changed files with 205 additions and 0 deletions
--- a/here-tests/README.md
+++ b/here-tests/README.md
@ -0,0 +1,5 @@
+
+## build css : 
+```
+sass --watch scss/main.scss:css/main.css
+```
--- 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 */
--- a/here-tests/css/main.css.map
+++ 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"
+}
--- a/here-tests/index.html
+++ b/here-tests/index.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <link rel="stylesheet" href="./css/main.css" />
+    <title>Here examples</title>
+  </head>
+  <body>
+    <form id="find-me" class="" name="" action="https://geocode.search.hereapi.com/v1/geocode">
+      <input type="search" name="q" />
+      <input type="hidden" name="apiKey" value="KJ-S3Fuz34beh9KbbbzJznJLyEEVmDAymadvIP2ju6Q" />
+      <!-- https://geocode.search.hereapi.com/v1/geocode?q=Invalidenstr+117+Berlin&apiKey=KJ-S3Fuz34beh9KbbbzJznJLyEEVmDAymadvIP2ju6Q -->
+      <button type="submit">find</button>
+    </form>
+  </body>
+</html>
--- 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('&copy; HERE 2019');
+}, false);
--- a/here-tests/leaflet.html
+++ b/here-tests/leaflet.html
@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <!-- load leaflet-->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>    
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="./css/main.css">
+    <script src="./js/main.js" defer></script>    
+    <title>here + leaflet map tiles</title>
+  </head>
+  <body>
+    <div id="map" class="here-map">
+    </div>
+    <form id="find-me" class="overlay-search" name="" action="">
+      <input type="search" name="q" />
+      <button type="submit">find</button>
+    </form>
+    <p class="references">
+      <a href="https://developer.here.com/tutorials/raster-tile-leaflet/">
+        <strong>Add a HERE base map to Leaflet</strong>
+        <br/><span>here documentation on leaflet</span>
+      </a><a href="https://leafletjs.com/examples/quick-start/">
+        <strong>Leaflet Quick Start Guide</strong>
+        <br/><span>leaflet quick start documentation</span>
+      </a><a href="https://stackoverflow.com/a/55767702">
+        <strong>How to locate leaflet zoom control in a desired position</strong>
+        <br/><span>Change zoom position</span>
+      </a>
+      <a href="https://mrvirk.com/get-url-parameter-values-in-javascript.html">
+      Vanilla Javascript to Get URL Parameter Values / Query String</a>
+    </p>
+  </body>
+</html>
--- 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);
+    }
+  }
+}