HERE Maps API - How to draw a circle
This article explains how to draw a circle on HERE Maps.
Article Metadata
Tested with
Compatibility
Article
See Also
Contents |
Prerequisites
HERE Maps API supported web browser (basically any modern web browser)
Important note about maps credentials
Nokia provides several services options within the Maps API offering. The service is free to use, but you must obtain and use authentication and authorization credentials to use the services. Please read the Terms and Conditions and check the Pricing Plans page to decide which business model best fits your needs. Authentication requires unique Maps API credentials, namely an AppId and a token. You can get these credentials free for free following the instructions here
Implementation
The API definition:
new nokia.maps.map.Circle (center, radius, props)
In the example below, we create a simple circle with coloured fill and outline.
Example code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Circle</title>
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" charset="UTF-8"
src="http://api.maps.nokia.com/2.2.4/jsl.js?with=all">
</script>
</head>
<body>
<div id="mapContainer" style="z-index: -1; left:0px; top:0px; width: 100%; height: 80%; position: absolute;"></div>
<script type="text/javascript">
/*<![CDATA[*/
/////////////////////////////////////////////////////////////////////////////////////
// Don't forget to set your API credentials
//
// Replace with your appId and token which you can obtain when you
// register on http://api.developer.nokia.com/
//
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
//
/////////////////////////////////////////////////////////////////////////////////////
var mapContainer = document.getElementById("mapContainer");
var map = new nokia.maps.map.Display(mapContainer, {
center: [19.119, 72.8957],
zoomLevel: 4,
components:[new nokia.maps.map.component.Behavior()]
});
map.objects.add(new nokia.maps.map.Circle(
// The center or the circle will be on longitude 50.0361, latitude 8.5619
[19.15, 73.91],
// The radius of the circle in meters
450000,
{
pen: {
strokeColor: "#829f",
lineWidth: 2
},
brush: {
color: "#829f"
}
}
));
/*]]>*/
</script>
</body>
</html>
Screenshot
For more on the HERE Maps API
Please check out the HERE Maps API full documentation and API reference here:
You may also access the interactive API explorer
Tested with
- Google Chrome 20.x
- Mozilla Firefox 12.x
Avnee.nathani - Article rename
I've updated the article to Nokia Maps Javascript API v2.0 - updated/ added new code, added screenshot, removed broken links, rebranded to 'Nokia Maps', etc. The article needs to be renamed to Nokia Maps API - How to...
Thanks!avnee.nathani 12:30, 31 December 2011 (EET)
Younesagma - Any property to change the color of the circle on click ?
I draw circles in my map with different radium. But when I zoom in/out, the radius of the circle remains the same, which means that the more I zoom in, the more the circle covers the map. So, I want the circle to keep the same size even if I zoom in.
For that, I tried SVG Markers, which solve this problem, but the thing is I had to program an algorithm that handles the changing colors of the svg marker when I click on it. But it reduces the performance of the web app. Are there any properties ?younesagma 23:22, 28 April 2013 (EEST)
Hamishwillee - You might want to private message the author or ask on discussion boards
... and cross link to this article.
That will get more people looking at your problem.
Regards
Hamishhamishwillee 08:03, 2 May 2013 (EEST)