×
Namespaces

Variants
Actions
(Difference between revisions)

How to display a map using Polymaps JS library

From Nokia Developer Wiki
Jump to: navigation, search
jimgilmour1 (Talk | contribs)
m (category added)
hamishwillee (Talk | contribs)
m (Hamishwillee - Fix categories)
 
(5 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:Java ME]][[Category:Web Runtime (WRT)]]
+
[[Category:Symbian Web Runtime]][[Category:Location]][[Category:JavaScript]]
 +
{{ArticleMetaData <!-- v1.2 -->
 +
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 +
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20101101
 +
|author= [[User:Maveric]]
 +
}}
 +
 
 
==Introduction==
 
==Introduction==
  
Line 20: Line 43:
 
==Prerequisites==
 
==Prerequisites==
  
You will need the Polymaps JavaScript library for the example and it can be downloaded from the
+
# You will need the Polymaps JavaScript library for the example and it can be downloaded from the main site http://polymaps.org/
main site http://polymaps.org/
+
# Full documentation for this library is at the Polymaps.org main site.
 
+
# A phone device supporting with Web Runtime support installed.
Full documentation for this library is at the Polymaps.org main site.
+
# You can use a code editor of your choice, but this example is build with Aptana Studio and the WRT S60 plugin.  
 
+
You can use a code editor of your choise, but this example is build with Aptana Studio and the
+
WRT S60 plugin.
+
 
+
A phone device supporting with Web Runtime support installed.
+
  
 +
{{Note|Aptana has been superseded by the [http://www.developer.nokia.com/Develop/Web/Tools/Nokia_Web_Tools/ Nokia Web Tools], an IDE and Simulator based on Aptana and Eclipse.}}
  
 
==Example code==
 
==Example code==
Line 92: Line 111:
  
 
</code>
 
</code>
 
[[Category:Draft]]
 

Latest revision as of 08:17, 10 October 2012

Article Metadata
Article
Created: Maveric (01 Nov 2010)
Last edited: hamishwillee (10 Oct 2012)

Contents

[edit] Introduction

Polymaps is a JavaScript library for generating “slippy” maps in the style of Google Maps, Modest Maps, CloudMade and OpenLayers.

Most mapping libraries focus on 256×256-pixel image tiles, with only limited support for dynamic overlays such as county boundaries and point clouds. These libraries assume that data needed to produce the desired overlay can be loaded into memory all-at-once, making it difficult to visualize large datasets. Furthermore, while image tiles automatically adjust in resolution as the map zooms in or out, the overlay resolution remains constant; this greatly limits multi-scale exploration of data, as the resolution must be fixed either for macro- (e.g., state-level) or micro- (e.g., block-level) observation.

The goal of Polymaps is to better support rich, large-scale data overlays on interactive maps by extending the tile metaphor to vector graphics: in addition to standard image tiles, Polymaps supports vector tiles that are rendered with SVG. The vector geometry is loaded as GeoJSON via asynchronous XMLHttpRequest; Point geometry objects are rendered as SVG circle elements, Polygons as paths, and so on. By loading geometry at known tile boundaries, requests can be issued efficiently on-demand by the client, and responses trivially cached on the server. When the user zooms in, geometry can be seamlessly refined to show greater detail, while on zoom out, geometry can be simplified to improve performance.


[edit] Prerequisites

  1. You will need the Polymaps JavaScript library for the example and it can be downloaded from the main site http://polymaps.org/
  2. Full documentation for this library is at the Polymaps.org main site.
  3. A phone device supporting with Web Runtime support installed.
  4. You can use a code editor of your choice, but this example is build with Aptana Studio and the WRT S60 plugin.

Note.pngNote: Aptana has been superseded by the Nokia Web Tools, an IDE and Simulator based on Aptana and Eclipse.

[edit] Example code

For this example we will create a default WRT S60 widget, with the following files

index.html basic.css basic.js


[edit] index.html

<!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> Sample web app</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript" src="basic.js"></script>
<script language="javascript" type="text/javascript" src="simplegeo-polymaps-4f09be6/polymaps.js"></script>
<link rel="stylesheet" href="basic.css" type="text/css" />
<meta name="Generator" content="Nokia WDE 3.0.0" />
</head>
<body onload="init();">
<div id="map"></div>
</body>
</html>


[edit] basic.css

//The stylesheet is not implemented for this example.

[edit] basic.js

function init()
{
 
var po = org.polymaps;
 
var map = po.map()
.container(document.getElementById("map").appendChild(po.svg("svg")))
.add(po.interact())
.add(po.hash());
 
map.add(po.image()
.url(po.url("http://{S}tile.cloudmade.com"
+ "/1a1b06b230af4efdbb989ea99e9841af" // http://cloudmade.com/register
+ "/999/256/{Z}/{X}/{Y}.png")
.hosts(["a.", "b.", "c.", ""])));
 
map.add(po.compass().pan("none"));
map.add(po.arrow());
map.add(po.drag());
map.add(po.dblclick());
map.add(po.wheel());
}
This page was last modified on 10 October 2012, at 08:17.
90 page views in the last 30 days.
×