Last active
October 28, 2015 08:30
-
-
Save Kreozot/508b5bf9849dd1709c0e to your computer and use it in GitHub Desktop.
Polymaps / Andrew Mager
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.2/jquery.tipsy.js"></script> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/polymaps/2.2.0/polymaps.js"></script> | |
| <style type="text/css"> | |
| @import url("https://cdnjs.cloudflare.com/ajax/libs/jquery.tipsy/1.0.2/jquery.tipsy.css"); | |
| @import url("http://github.com/simplegeo/polymaps/raw/v2.2.0/examples/example.css"); | |
| .layer circle { | |
| fill: lightcoral; | |
| fill-opacity: .5; | |
| stroke: brown; | |
| stroke-width: 1.5px; | |
| } | |
| .tipsy-inner { | |
| padding: 3px; | |
| line-height: 0; | |
| } | |
| .tipsy-inner img { | |
| -moz-border-radius: 3px; | |
| -webkit-border-radius: 3px; | |
| background: white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| var po = org.polymaps; | |
| var radius = 10, tips = {}; | |
| var map = po.map() | |
| .container(document.body.appendChild(po.svg("svg"))) | |
| .center({lon: -122.20877392578124, lat: 37.65175620758778}) | |
| .zoom(10) | |
| .add(po.interact()) | |
| .on("move", move) | |
| .on("resize", move); | |
| 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.geoJson() | |
| .on("load", load) | |
| .on("show", show) | |
| .features([ | |
| { | |
| "id": "stanford", | |
| "properties": { | |
| "html": "<img src='http://github.com/simplegeo/polymaps/raw/v2.2.0/examples/tipsy/stanford.png' width=200 height=200>" | |
| }, | |
| "geometry": { | |
| "coordinates": [-122.16894848632812, 37.42961865341856], | |
| "type": "Point" | |
| } | |
| }, | |
| { | |
| "id": "berkeley", | |
| "properties": { | |
| "html": "<img src='http://github.com/simplegeo/polymaps/raw/v2.2.0/examples/tipsy/berkeley.png' width=200 height=200>" | |
| }, | |
| "geometry": { | |
| "coordinates": [-122.26358225200948, 37.872092652605886], | |
| "type": "Point" | |
| } | |
| } | |
| ])); | |
| map.add(po.compass() | |
| .pan("none")); | |
| function load(e) { | |
| for (var i = 0; i < e.features.length; i++) { | |
| var f = e.features[i]; | |
| f.element.setAttribute("r", radius); | |
| f.element.addEventListener("mousedown", toggle(f.data), false); | |
| f.element.addEventListener("dblclick", cancel, false); | |
| } | |
| } | |
| function show(e) { | |
| for (var i = 0; i < e.features.length; i++) { | |
| var f = e.features[i], tip = tips[f.data.id]; | |
| tip.feature = f.data; | |
| tip.location = { | |
| lat: f.data.geometry.coordinates[1], | |
| lon: f.data.geometry.coordinates[0] | |
| }; | |
| update(tip); | |
| } | |
| } | |
| function move() { | |
| for (var id in tips) { | |
| update(tips[id]); | |
| } | |
| } | |
| function cancel(e) { | |
| e.stopPropagation(); | |
| e.preventDefault(); | |
| } | |
| function update(tip) { | |
| if (!tip.visible) return; // ignore | |
| var p = map.locationPoint(tip.location); | |
| tip.anchor.style.left = p.x - radius + "px"; | |
| tip.anchor.style.top = p.y - radius + "px"; | |
| $(tip.anchor).tipsy("show"); | |
| } | |
| function toggle(f) { | |
| var tip = tips[f.id]; | |
| if (!tip) { | |
| tip = tips[f.id] = { | |
| anchor: document.body.appendChild(document.createElement("a")), | |
| visible: false, | |
| toggle: function(e) { | |
| tip.visible = !tip.visible; | |
| update(tip); | |
| $(tip.anchor).tipsy(tip.visible ? "show" : "hide"); | |
| cancel(e); | |
| } | |
| }; | |
| tip.anchor.style.position = "absolute"; | |
| tip.anchor.style.visibility = "hidden"; | |
| tip.anchor.style.width = radius * 2 + "px"; | |
| tip.anchor.style.height = radius * 2 + "px"; | |
| $(tip.anchor).tipsy({ | |
| html: true, | |
| fallback: f.properties.html, | |
| gravity: $.fn.tipsy.autoNS, | |
| trigger: "manual" | |
| }); | |
| } | |
| return tip.toggle; | |
| } | |
| </script> | |
| <span id="copy"> | |
| © 2010 | |
| <a href="http://www.cloudmade.com/">CloudMade</a>, | |
| <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors, | |
| <a href="http://creativecommons.org/licenses/by-sa/2.0/">CCBYSA</a>. | |
| </span> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment