+4 votes
229 views
JavaScript Tutorial - Google Maps

in JavaScript by (552k points)
reopened | 229 views

1 Answer

+5 votes
Best answer

Tile Grid

There are some occasions where the page or website needs to extend this functionality and Google maps does not provide it. On these occasions we can use Polymaps , a free and open source Javascript library with which we can implement maps of any type and functionality on our website.

Polymaps is ideal for displaying information in different levels of countries, cities and even individual streets, this thanks to its SVG ( Scalable Vector Graphic s) technology, which is nothing more than an XML- based vectorized image format which provides the support for the interaction and animation of graphics in two dimensions, and seeing that Polymaps goes a little bit, let's see its methods, controls and some examples of the implementation of it.

Instantiating Polymaps

Each Polymap starts with an instance of the map () method, but before we build a map we import the namespace into a local variable:
var po = org.polymaps;

Polymaps does not use the traditional Javascript constructors, in that case Polymaps provides us with methods that instantiate the methods internally. Additionally, it uses the chain of methods, all methods return the instance of map (). We can also insert in a new SVG document and then add a tag to the image:

 var map = po.map () .container (document.body.appendChild (po.svg ("svg"))) .add (po.image (). url (...)) 
We can also not send anything in the container method and the map instance will return the value associated with the field and will serve as both setter and getter:
 map.container (); 
Layers

In the simplest cases, the maps have a single layer but they can consist of multiple layers that are on top of each other, the accepted parameters are the following:
  • {X} - Coordinate of the Column.
  • {Y} - Coordinate Row.
  • {B} - Table delimiter.
  • {Z} - Zoom level.
  • {S} - Host.
Having seen the general concept, let's see the examples with their complete implementation code:
Pale Dawn

This map has a restricted design that works well with tons of information points, it is more focused on highlighting the foreground information. This map is built with a single layer, coordinates and has some basic interactive controls, it is a good starting point to start customizing it:

image

Here the complete source code:

 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 + "/998/256/{Z}/{X}/{Y}.png") .hosts (["a.", "b.", "c.", ""]))); map.add (po.compass () .pan ("none")); 
Now let's see a much more complete example

Tile Grid


In this example we have different zoom types, as well as the management of different layers, additionally we can rotate the area of ​​the map and thus be able to see other areas in it, let's see some captures of it:

image

image

And finally the source code so you can try it for yourselves:

 var po = org.polymaps; var div = document.getElementById ("map"), svg = div.appendChild (po.svg ("svg")), g = svg.appendChild (po.svg ("g")); var map = po.map () .container (g) .tileSize ({x: 128, y: 128}) .angle (.3) .add (po.interact ()) .on ("resize", resize); resize (); map.add (po.layer (grid)); var rect = g.appendChild (po.svg ("rect")); rect.setAttribute ("width", "50%"); rect.setAttribute ("height", "50%"); function resize () { if (resize.ignore) return; var x = div.clientWidth / 2, y = div.clientHeight / 2; g.setAttribute ("transform", "translate (" + (x / 2) + "," + (y / 2) + ")"); resize.ignore = true; map.size ({x: x, y: y}); resize.ignore = false; } function grid (tile) { var g = tile.element = po.svg ("g"); var rect = g.appendChild (po.svg ("rect")), size = map.tileSize (); rect.setAttribute ("width", size.x); rect.setAttribute ("height", size.y); var text = g.appendChild (po.svg ("text")); text.setAttribute ("x", 6); text.setAttribute ("y", 6); text.setAttribute ("dy", ".71em"); text.appendChild (document.createTextNode (tile.key)); } var spin = 0; setInterval (function () { if (spin) map.angle (map.angle () + spin); }, 30); function key (e) { switch (e.keyCode) { case 65: spin = e.type == "keydown"? -.004: 0; break; case 68: spin = e.type == "keydown"? .004: 0; break; } } window.addEventListener ("keydown", key, true); window.addEventListener ("keyup", key, true); window.addEventListener ("resize", resize, false); 

by (3.5m points)
edited

Related questions

+5 votes
1 answer
asked Jun 24, 2019 in JavaScript by backtothefuture (552k points) | 259 views
+3 votes
1 answer
asked Jun 24, 2019 in JavaScript by backtothefuture (552k points) | 240 views
+4 votes
1 answer
asked Jun 23, 2019 in JavaScript by backtothefuture (552k points) | 300 views
+5 votes
1 answer
asked Apr 18, 2023 in Guides by backtothefuture (552k points) | 71 views
+4 votes
1 answer
asked Apr 18, 2023 in Guides by backtothefuture (552k points) | 56 views
Sponsored articles cost $40 per post. You can contact us via Feedback

Most popular questions within the last 30 days

10,659 questions
10,791 answers
510 comments
3 users