-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (118 loc) · 5.31 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1549984893" />
<link href="https://fonts.googleapis.com/css2?family=Economica&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
<!-- CSS-->
</head>
<body>
<nav class="navbar navbar-light bg-light " style="position:fixed; z-index: 100; width: 100vw;">
<div class="form-inline ml-auto" onsubmit="getInpuValue()">
<div class="col-xm-11">
<input id="myInput" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</div>
<div class="col-xm-1">
<button id="myButton" class="btn btn-outline-success my-2 my-sm-0" style="border-color: rgb(106, 168, 79)!important" type="button" onsubmit="getInpuValue()" onclick="getInputValue()"><i class="fas fa-search"></i></button>
</div>
</div>
</nav>
<div id="map" style="width: 100vw; height: 100vh; background: grey" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script src="https://kit.fontawesome.com/f501b3c415.js" crossorigin="anonymous"></script>
<script type="text/javascript" charset="UTF-8" >
var locations, shape;
var coord;
// Collapse buttons in left navbar.
var check = false;
// step 1: initialize communication with the platform
var platform = new H.service.Platform({
apikey: 'P6tjvOS10GBZB4HFLoYvCz5W8ntwEAQEwSgSV6mNWSc'
});
var defaultLayers = platform.createDefaultLayers();
var service = platform.getSearchService();
var input = document.getElementById("myInput");
var query = 'madrid';
var marker;
var circle;
// step 2: initialize a map - this map is centered over Santa Cruz de la Zarza
var map = new H.Map(
document.getElementById('map'),
defaultLayers.vector.normal.map,
{
zoom: 7,
center: { lat: 40.416775, lng: -3.703790 }
});
// step 3: make the map interactive
// var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13)
{
event.preventDefault();
document.getElementById("myButton").click();
document.getElementById("myInput").blur();
}
})
function getInputValue()
{
query = document.getElementById("myInput").value;
document.getElementById("myInput").value = "";
document.getElementById("myInput").blur();
setLocation(query);
}
function setLocation(query)
{
service.geocode({
q: query
}, (result) => {
for (let i = 0; i < 1; i++)
{
if (check)
{
map.removeObject(marker);
map.removeObject(circle);
}
coord = { lat: result.items[i].position.lat, lng: result.items[i].position.lng };
marker = new H.map.Marker(result.items[i].position);
map.addObject(marker);
map.setCenter({
lat: coord.lat,
lng: coord.lng
})
map.setZoom(15.8);
circle = new H.map.Circle(
// The central point of the circle
{lat: coord.lat, lng: coord.lng},
// The radius of the circle in meters
1000,
{
style: {
strokeColor: 'rgba(55, 85, 170, 1)', // Color of the perimeter
lineWidth: 3,
fillColor: 'rgba(0, 128, 0, 0.3)' // Color of the circle
}
}
)
map.addObject(circle);
check = true;
}
}, alert);
}
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// step 4: create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);
window.addEventListener('resize', function () {
map.getViewPort().resize();
});
</script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>