webdev/here.html at master · CodeForCary/webdev · GitHub

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
<!DOCTYPE html>
<html>
<head>
<metahttp-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />
<basehref="http://developer.here.com/apiexplorer/examples/api-for-js/map/zooming-the-map.html" />
<metahttp-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Nokia Maps API for JavaScript Example: Zooming the map in & out</title>
<metaname="description" content="Changing the zoomlevel of the map view i.e. to city or street"/>
<metaname="keywords" content="zooming, map essentials, zoom"/>
<!-- For scaling content for mobile devices, setting the viewport to the width of the device-->
<metaname=viewportcontent="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<!-- Styling for example container (NoteContainer & Logger) -->
<linkrel="stylesheet" type="text/css" href="http://developer.here.com/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 -->
<scripttype="text/javascript" charset="UTF-8" src="http://js.cit.api.here.com/se/2.5.3/jsl.js?with=all"></script>
<!-- JavaScript for example container (NoteContainer & Logger) -->
<scripttype="text/javascript" charset="UTF-8" src="http://developer.here.com/apiexplorer/examples/templates/js/exampleHelpers.js"></script>
<styletype="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>
<divid="mapContainer"></div>
<divid="uiContainer"></div>
<scripttype="text/javascript">
/*	Setup authentication app_id and app_code
 *	WARNING: this is a demo-only key
 *	please register for an Evaluation, Base or Commercial key for use in your app.
 *	Just visit http://developer.here.com/get-started for more details. Thank you!
 */
nokia.Settings.set("app_id","DemoAppId01082013GAL");
nokia.Settings.set("app_code","AJKnXv84fjrb0KIHawS0Tg");
// Use staging environment (remove the line for production environment)
nokia.Settings.set("serviceMode","cit");

// Get the DOM node to which we will append the map
varmapContainer=document.getElementById("mapContainer");
// Create a map inside the map container DOM node
varmap=newnokia.maps.map.Display(mapContainer,{
// Initial center and zoom level of the map
center: [35.7621664,-78.8176472],
zoomLevel: 12,
components: [
// ZoomBar provides a UI to zoom the map in & out
newnokia.maps.map.component.Behavior()
]
});

if(nokia.maps.positioning.Manager){
varpositioning=newnokia.maps.positioning.Manager();
// Trigger the load of data, after the map emmits the "displayready" event
map.addListener("displayready",function(){
// Gets the current position, if available the first given callback function is executed else the second
positioning.getCurrentPosition(
// If a position is provided by W3C geolocation API of the browser
function(position){
varcoords=position.coords,// we retrieve the longitude/latitude from position
marker=newnokia.maps.map.StandardMarker(coords),// creates a marker
/* Create a circle map object on the geographical coordinates of
 * provided position with a radius in meters of the accuracy of the position
 */
accuracyCircle=newnokia.maps.map.Circle(coords,coords.accuracy);

// Add the circle and marker to the map's object collection so they will be rendered onto the map.
map.objects.addAll([accuracyCircle,marker]);
/* This method zooms the map to ensure that the bounding box calculated from the size of the circle
 * shape is visible in its entirety in map's viewport.
 */

//map.zoomTo(accuracyCircle.getBoundingBox(), false, "default");
},
// Something went wrong we wee unable to retrieve the GPS location
function(error){
varerrorMsg="Location could not be determined: ";

// We determine what caused the error and generate error message
if(error.code==1)errorMsg+="PERMISSION_DENIED";
elseif(error.code==2)errorMsg+="POSITION_UNAVAILABLE";
elseif(error.code==3)errorMsg+="TIMEOUT";
elseerrorMsg+="UNKNOWN_ERROR";

// Throw an alert with error message
alert(errorMsg);
}
);
});
}

// translates from leaflet objects to nokia.map.polygons
varL={};
;!(function(l,map){
l.polygon=function(coords,args){

varPolygon=function(coords,args){
this.coords=coords;
this.args=args;
this.link="";
};

varObj=function(p){
this.polygon=p;
};

Obj.prototype.bindPopup=function(link){
this.polygon.link=link;

vardimensions=this.polygon.coords.map(function(c){
returnnewnokia.maps.geo.Coordinate(c[0],c[1])
});

map.objects.add(newnokia.maps.map.Polygon(dimensions,
{
pen: {strokeColor: this.polygon.args.color,lineWidth: 1},
brush: {color: '#f03a',opacity: this.polygon.args.fillColor}
}));
};

Polygon.prototype.addTo=function(){
returnnewObj(this);
};

returnnewPolygon(coords,args);
}
})(L,map);

</script>
<scripttype="text/javascript" charset="UTF-8" src="http://met.citrinecourt.com/js/polyCoords.js"></script>
</body>
</html>