-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathjobs.html
154 lines (137 loc) · 6.42 KB
/
jobs.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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Example from Nokia Maps API Playground, for more information visit http://api.maps.nokia.com
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9"/>
<base href="http://developer.here.net/apiexplorer/examples/api-for-js/information-bubbles/marker-with-information-bubble.html" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Nokia Maps API Example: Click to open information bubble</title>
<meta name="description" content="How to trigger showing an information bubble on click or touch of a standard marker"/>
<meta name="keywords" content="infobubblemarker, map component, bubble"/>
<!-- For scaling content for mobile devices, setting the viewport to the width of the device-->
<meta name=viewport content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<!-- Styling for example container (NoteContainer & Logger) -->
<link rel="stylesheet" type="text/css" href="http://developer.here.net/apiexplorer/examples/templates/js/exampleHelpers.css"/>
<!-- By default we add ?with=all to load every package available, it's better to change this parameter to your use case. Options ?with=maps|positioning|places|placesdata|directions|datarendering|all -->
<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.3/jsl.js?with=all"></script>
<!-- JavaScript for example container (NoteContainer & Logger) -->
<script type="text/javascript" charset="UTF-8" src="http://developer.here.net/apiexplorer/examples/templates/js/exampleHelpers.js"></script>
<style type="text/css">
html {
overflow:hidden;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
position: absolute;
}
#mapContainer {
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<div id="uiContainer"></div>
<script type="text/javascript" id="exampleJsSource">
/* Set authentication token and appid
* WARNING: this is a demo-only key
* please register on http://api.developer.nokia.com/
* and obtain your own developer's API key
*/
// DGB These are out own APPID and APPToken
// App id HLnpOLnssqeyh0Rtzn1g
// App token n9JF4770E6AOiEJstaGitw
// DGB These are the default ID / Token in the nokia developers site
// App name: Hackaton2013Berlin
// App url: http://developer.here.net/web/guest/myapps?p_p_id=MyAppsPortlet_WAR_myappsportlet&p_p_lifecycle=0&p_p_state=normal&p_p_mode=view&p_p_col_id=column-1&p_p_col_count=1&_MyAppsPortlet_WAR_myappsportlet_myaction=appInfo&app_id=HLnpOLnssqeyh0Rtzn1g
nokia.Settings.set("appId", "_peU-uCkp-j8ovkzFGNU");
nokia.Settings.set("authenticationToken", "gBoUkAMoxoqIWfxWA5DuMQ");
// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapContainer");
// We create a new instance of InfoBubbles bound to a variable so we can call it later on
var infoBubbles = new nokia.maps.map.component.InfoBubbles();
// Create a map inside the map container DOM node
var map = new nokia.maps.map.Display(mapContainer, {
// initial center and zoom level of the map
center: [32, 9.4],
zoomLevel: 10,
components:
[
infoBubbles,
// ZoomBar provides a UI to zoom the map in & out
new nokia.maps.map.component.ZoomBar(),
// We add the behavior component to allow panning / zooming of the map
new nokia.maps.map.component.Behavior(),
// Creates UI to easily switch between street map satellite and terrain mapview modes
new nokia.maps.map.component.TypeSelector(),
// Creates a toggle button to show/hide traffic information on the map
new nokia.maps.map.component.Traffic(),
// Creates a toggle button to show/hide public transport lines on the map
new nokia.maps.map.component.PublicTransport(),
// Creates a toggle button to enable the distance measurement tool
new nokia.maps.map.component.DistanceMeasurement(),
// Shows a min-map in the bottom right corner of the map
new nokia.maps.map.component.Overview(),
/* Shows a scale bar in the bottom right corner of the map depicting
* ratio of a distance on the map to the corresponding distance in the real world
* in either kilometers or miles
*/
new nokia.maps.map.component.ScaleBar(),
/* Positioning will show a set "map to my GPS position" UI button
* Note: this component will only be visible if W3C geolocation API
* is supported by the browser and if you agree to share your location.
* If you location can not be found the positioning button will reset
* itself to its initial state
*/
new nokia.maps.positioning.component.Positioning(),
// Add ContextMenu component so we get context menu on right mouse click / long press tap
new nokia.maps.map.component.ContextMenu()
]
});
/* Create a marker on a specified geo coordinate
* (in this example we use the map's center as our coordinate)
*/
var standardMarker = new nokia.maps.map.StandardMarker(map.center);
/* We would like to add event listener on mouse click or finger tap so we check
* nokia.maps.dom.Page.browser.touch which indicates whether the used browser has a touch interface.
*/
var TOUCH = nokia.maps.dom.Page.browser.touch,
CLICK = TOUCH ? "tap" : "click";
/* Attach an event listener to the newly created marker
* to show info bubble on click of the marker
*/
standardMarker.addListener(
CLICK,
function (evt) {
// Set the tail of the bubble to the coordinate of the marker
infoBubbles.openBubble("<h1>Super Job</h1><br>Click here to visit this <a href='www.google.com'>Super Job</a>", standardMarker.coordinate);
}
);
// Next we add the standard marker to the map's object collection so it will be rendered onto the map.
map.objects.add(standardMarker);
/* We create a UI notecontainer for example description and controls
* NoteContainer is a UI helper function and not part of the Nokia Maps API
* See exampleHelpers.js for implementation details
*/
var noteContainer = new NoteContainer({
id: "infoBubbleStandardMarkerUi",
parent: document.getElementById("uiContainer"),
title: "Berlin HERE Hackathon 2013.",
content:
'<p>Job location visualization.'
+ '<p>Select your location. ' +
'<form><input id="userLocation" type="text"></input></form>'
});
</script>
</body>
</html>