×
Namespaces

Variants
Actions

Locate Map Center Via Inputting Latitude and Longtitude

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Dependencies: Maps API 2.2.4
Article
Created: r60600 (03 Apr 2013)
Last edited: hamishwillee (16 May 2013)

Needs-update.pngThis article needs to be updated: If you found this article useful, please fix the problems below then delete the {{ArticleNeedsUpdate}} template from the article to remove this warning.

Reasons: hamishwillee (09 Apr 2013)
Content in this article is already covered in HERE Maps API - Add Maps To Any Web Page and HERE Maps API - How to pan the map. It is also documented on the JavaScript Explorer at: http://developer.here.com/apiexplorer/examples/api-for-js/map/panning-the-map.html. Strongly recommend deletion unless material can be updated and made in some way "unique". Pending response from developer

The center of Nokia map can be set by javascript embedded in HTML file like below.

<script language="javascript">
var mapContainer = document.getElementById("mapContainer");
 
var map = new nokia.maps.map.Display(mapContainer, {
center: [50, 0],
zoomLevel: 5
});
</script>

But code above only can set the center once when page loaded or refresh,at the same time the latitude and longtitude is fixed.

In fact,there's another javascripe statement can set the map center. It is.

map.set("center", {lat: 0, lng: -90})

So developers may provide users 2 textfields to input latitude and longtitude and locate the place they want.

Now, rewrites the basic example of HERE. Developer Site to demostrate it.

First is reducing the height and top of map container by altering the style,

#mapContainer {
width: 100%;
height: 95%;
left: 0;
top: 5%;
position: absolute;
}

Second is constructting a locate function which will re-locate the map center after converted the texts of inputs to

valueable latitude and longtitude,

function locate(){
LatitudeText = document.getElementById("LatitudeInput");
Latitude = Number(LatitudeText.value);
if (Latitude < -90) {Latitude = -90}
if (Latitude > 90) {Latitude = 90}
 
LongtitudeText = document.getElementById("LongtitudeInput");
Longtitude = Number(LongtitudeText.value);
if (Longtitude < -180) {Longtitude = -180}
if (Longtitude > 180) {Longtitude = 180}
 
map.set("center", {lat: Latitude, lng: Longtitude})
}

Last is adding 2 input field and a location button with locate function.

Latitude: <input name="LatitudeInput" value="">
Longtitude:<input name="LongtitudeInput" value="">
<input type="button" value="Locate" onclick="javascript:locate()">

This is the whole codes in HTML file.

<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
 
<title>Locate Map Center Via Inputting Latitude and Longtitude</title>
 
<script type="text/javascript"
src="http://api.maps.nokia.com/2.2.4/jsl.js?with=maps,places,directions,positioning">
</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: 95%;
left: 0;
top: 5%;
position: absolute;
}
</style>
 
<script language="javascript">
function locate(){
LatitudeText = document.getElementById("LatitudeInput");
Latitude = Number(LatitudeText.value);
if (Latitude < -90) {Latitude = -90}
if (Latitude > 90) {Latitude = 90}
 
LongtitudeText = document.getElementById("LongtitudeInput");
Longtitude = Number(LongtitudeText.value);
if (Longtitude < -180) {Longtitude = -180}
if (Longtitude > 180) {Longtitude = 180}
 
map.set("center", {lat: Latitude, lng: Longtitude})
}
</script>
 
</head>
 
<body>
 
Latitude: <input name="LatitudeInput" value="">
Longtitude:<input name="LongtitudeInput" value="">
<input type="button" value="Locate" onclick="javascript:locate()">
 
<div id="mapContainer"></div>
<div id="uiContainer"></div>
 
<script language="javascript">
var mapContainer = document.getElementById("mapContainer");
 
var map = new nokia.maps.map.Display(mapContainer, {
center: [50, 0],
zoomLevel: 5
});
</script>
 
</body>
 
</html>

After it is loaded.

LocateMapCenterN50.JPG

Re-locates after inputted and clicked button.

LocateMapCenterW90.JPG

This page was last modified on 16 May 2013, at 04:59.
50 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×