parent
8637577466
commit
14636a1f50
@ -0,0 +1,5 @@
|
|||||||
|
|
||||||
|
## build css :
|
||||||
|
```
|
||||||
|
sass --watch scss/main.scss: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 */
|
||||||
@ -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"
|
||||||
|
}
|
||||||
@ -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>
|
||||||
@ -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);
|
||||||
@ -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>
|
||||||
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue