polymaps
Polymaps is a free JavaScript library for making dynamic, interactive maps in modern web browsers.
Polymaps
Can anyone tell me why my circles transition to green but then do not transition to blue? I don't know if it's relevant but this is D3 on top of polymaps.
marker.append("svg:circle")
.attr("r", 4.5)
.transition()
.delay(2000)
.style("fill", "green")
.transition()
.delay(2000)
.style("fill", "blue")
;
Source: (StackOverflow)
I have a map using Polymaps (http://polymaps.org/) and am able to draw polygons based on a geoJSON file. How can I add the name to the polygon.
For example: Here is a bit of my geoJSON
"properties": {
"name": "NH",
I want to draw the polygon with the text NH inside of it.
Source: (StackOverflow)
I am still pretty new to working with D3, Polymaps, and with data overall. I have been working on using d3 and polymaps to display location and size of solar power stations across the country. Each circle on the map corresponds to a specific long/lat, and the size in acres of each power plant (pulled from the json file).
I have two problems (also, I have looked at documentation and tutorials for creating tooltips, and for setting the scale of the circles).
- The size of the circles remains the same despite the zoom level
- I would like the text labels to show up as a tooltip when each circle is hovered over or clicked. (currently hovering over any circle reveals ALL the text for each location)
Here is a link to the visualization in its current state
http://www.tijaniogunlende.com/dataviz/index.html
These are the tutorials/code I attempted to incorporate (with little success)
Simple Tooltip,Tooltip with Jquery Tipsy, SVG Geometric Zooming, and K-means Clustering
They all seem fairly straightforward until I try to implement them in my code. I have a basic understanding of D3 and polymaps but I have to admit I've hit a wall with this one.
Any HELP/GUIDANCE would greatly be appreciated.
HERE'S MY CODE:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<link rel="stylesheet" rel='nofollow' href="css/normalize.css">
<link rel="stylesheet" rel='nofollow' href="css/main.css">
<script type="text/javascript" src="d3-master/d3.js"></script>
<script type="text/javascript" src="polymaps/polymaps.js"></script>
<script type="text/javascript" src="js/kmeans.js"></script>
<script type="text/javascript" src="js/jquery.tipsy.js"></script>
<style type="text/css">@import url("http://polymaps.org/style.css");</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a rel='nofollow' href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!--Content here -->
<section id="all-content">
<h1>US Solar Power Plant Locations</h1>
<p>How are US companies taking advantage of solar Resources? - By building Larger Solar Plants in areas that recieve the most Energy from the sun.<br /> Starting from 1990 to 2025 there has been an increase in the number both planned and completed of solar power plants and their relative size to one another.<br />
Typically the more sun an area gets there is a tendency for Larger Solar Power Plants</p>
<span class="future">*To be displayed on a time-scale. Also names of each power plant will be added later.</span>
<article id="map-instructions">Zoom into the map to get an idea of each solar power plants relative size in Acres</article>
<div id="map"></div>
</section>
<!--Polymaps Build-->
<script type="text/javascript">
var po = org.polymaps;
//Create map object and add to #map
var map = po.map()
.container(d3.select("#map").append("svg:svg").node())
.zoom(4)
.zoomRange([4, 8])
.center({lon: -98.5795, lat: 39.828175})
.add(po.interact());
//Add Image tiles as base
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.", ""])));
//Adding NREL Solar Resource Data as an Overlay
//For adding geoJson files
// Add the compass control on top.
map.add(po.compass()
.pan("none"));
//Load solaruse.json file
d3.json("solaruse.json", function(data){
//Beneath the compas layer
var layer = d3.select("#map svg").insert("svg:g", ".compass");
//insert an svg element for each Solar Array Station
var marker = layer.selectAll("g")
.data(d3.entries(data))
.enter().append("svg:g")
.attr("transform", transform);
var radius = d3.scale.sqrt()
.domain([0, 70])
.range([7, 13]);
//Circle
var circle = marker.append("svg:circle")
//Set attribute value based on Size of each solar plant (Works FIne, Need to fix the scale.)
.attr("r", function(d) { return radius(d.value[4]); });
//Label each on hover (double check)
marker.append("svg:text")
.attr("x", 20)
.attr("dy", ".3em")
.attr("visibility", "hidden")
.text(function(d) { return d.value[1]; }); //*Problems loading the text here, fix the function*
//update marker positions when the map is moved
marker.on("mouseover", function() { layer.selectAll("text").attr("visibility", "visible");
});
map.on("move", function() {
layer.selectAll("g").attr("transform", transform);
});
function transform(d) {
d = map.locationPoint({lon: d.value[5], lat: d.value[6]});
return "translate(" + d.x + "," + d.y + ")";
}
});
</script>
<!--Graphs-->
<div class="chart"></div>
<!--End Graphs-->
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>-->
<!-- D3 -->
</body>
Source: (StackOverflow)
I'm using Polymaps.js library for making maps.
It would be very useful to be able to observe zoom level changes on layers. I'm trying to keep a layer of points scaled by values in meters, so I need to recalculate the radii whenever the zoom level changes.
Source: (StackOverflow)
I have a kml file I want to display using polymaps. The data is from NREL Solar Resource Map.
As a kmz file it shows up quite nicely in google maps and earth respectively, however I am having trouble loading it into my polymaps/d3 environment. Does anyone know how exactly to go about this?
I can post more details if necessary
Source: (StackOverflow)
My dataset is hosted on my dropbox account but not the Javascript files calling it.
I am working with D3 and Polymaps to visualize the data, however I get an error saying - "XMLHttpRequest cannot load https://www.dropbox.com/s/89adzt973quosda/solaruse.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access."
(the link to the dropbox file works so you can have a look see)
Here is the code I used to load the JSON file (I am developing the site locally)
I'm not exactly sure what to do from this point.
var po = org.polymaps;
//Create map object, append to #map
var map = po.map()
.container(d3.select("#map").append("svg").node())
.zoom(4)
.add(po.interact());
// Add the CloudMade image tiles as a base layer…
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.", ""])));
// Add the compass control on top.
map.add(po.compass()
.pan("none"));
// Add the custom locations/acres
d3.json("https://www.dropbox.com/s/89adzt973quosda/solaruse.json", function(data){
// Insert layer beneath the compass.
var layer = d3.select("#map svg").insert("svg:g", ".compass");
// Add an svg:g for each Name.
var marker = layer.selectAll("g")
.data(d3.entries(data))
.enter().append("svg:g")
.attr("transform", transform);
// Adding the circles
marker.append("svg:circle")
//function scraping the acres from the dataset
.attr()
});
Source: (StackOverflow)
I'm trying to add a polymaps map inside an angularjs app.
TypeError: Object [object Object] has no method 'setAttribute'
at Object.a.container (http://localhost:8000/lib/polymaps.min.js:15:341)
at new <anonymous> (http://localhost:8000/js/controllers.js:22:4)
at d (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:33:335)
at Object.instantiate
(http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:33:464)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:65:486
at link (http://localhost:8000/lib/angular-route.min.js:7:248)
at J (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:52:492)
at h (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:46:28)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:45:200
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:46:431 <div ng-view="" class="ng-scope">
Javascript is not able to setAttribute on an element inside my angular view?
My html looks like this:
<article class="dashboard container">
<div id="map"></div>
</article>
And the basic polymaps code is:
var po = org.polymaps;
var map = po.map()
.container(document.getElementById("map").appendChild(po.svg("svg")))
.add(po.interact())
.add(po.hash());
.add(po.image().url(
po.url("http://{S}tile.openstreetmap.org" + "/{Z}/{X}/{Y}.png")
.hosts(["a.","b.","c.",""])))
.center({lat: -33.882957, lon: 151.073685})
.zoom(11);
I'm assuming this is angular. Is there any work around?
Source: (StackOverflow)
I am using Polymaps and I see that this is the way it works:
zoom level 1: gets new tiles
zoom level 2: scales the existing ones
zoom level 3: gets new tiles
zoom level 4: scales the existing ones
The problem is that when this happens, all the svg text becomes bigger on level 2, smaller on level 3, bigger on level 4, smaller on level 5.
To see this occurring: JS Fiddle
My question is:
How can I permanently disable the scaling zoom and just keep the other one?
I know there are much newer and better alternatives for Polymaps, but I need to stick with it for now.
My 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
+ "/999/256/{Z}/{X}/{Y}.png")
.hosts(["a.", "b.", "c.", ""])));
map.add(po.compass()
.pan("none"));
Source: (StackOverflow)
I found a bug in Polymaps but haven't found the exact cause yet. Sometime recently, my local copy of Polymaps.js (2.5.1)) stopped displaying the map as the full size of the container, but instead only displayed a 300px x 150px view. I also see this behavior on the Polymaps.org website.
CSS style sheet has:
div#map {
position: relative;
border: solid 4px #ccc;
background: #eee;
width: 1800px;
height: 800px;
}
HTML page has:
<div id="map"></div>
JavaScript map code has:
var map = po.map()
.container(document.getElementById("map").appendChild(po.svg("svg")))
.add(po.image().url("grid.png"))
.zoomRange([1, 12])
.zoom(11)
.add(po.image().url("http://192.168.1.1:4444/tiles/{Z}/{X}/{Y}.png"))
.add(po.interact())
.add(po.compass()); // zoom and pan compass control
RESULTS 0:
<svg class="map">
<rect visibility="hidden" pointer-events="all" width="300" height="150"></rect>
However, svg.map has an actual size of 300px x 150px. The map div in CSS is not being used to size the map. I thought the point of selecting the container (document.getElementById("map")) would be to transfer across the container size...
EXPERIMENT 1:
Add this line to the JavaScript map code above (after .container):
.size({"x": 1600, "y": 1000})
RESULTS 1:
<svg class="map">
<rect visibility="hidden" pointer-events="all" width="1600" height="1000"></rect>
Which changes the rect size, however if you check the svg.map size, it is still 300px x 150px.
EXPERIMENT 2:
With the following element selected in the browser debug console Elements list:
<svg class="map">
Change the size of the element under the Styles tab, currently reads 300 x 150. Modify to 1100 x 700.
RESULTS 2:
<svg class="map" style="
width: 1100px;
height: 700px;
">
<rect visibility="hidden" pointer-events="all" width="1600" height="1000"></rect>
And now the viewable map area is 1100px x 700px.
Debugging in Chrome, I put a breakpoint at line 491 of polymaps.js?2.5.1:
return map.resize(); // infer size
Then checked the local variables at that point.
x: svg
attributes: NamedNodeMap
.
.
.
height: SVGAnimatedLength
animVal: SVGLength
baseVal: SVGLength
unitType: 2
value: 150
valueAsString: "100%"
valueInSpecifiedUnits: 100
__proto__: SVGLength
__proto__: SVGAnimatedLength
.
.
.
width: SVGAnimatedLength
animVal: SVGLength
unitType: 2
value: 300
valueAsString: "100%"
valueInSpecifiedUnits: 100
__proto__: SVGLength
baseVal: SVGLength
__proto__: SVGAnimatedLength
It seems that Polymaps is getting the map size by inference to some default value of SVGAnimatedLength, rather than picking up the container size OR properly using the map.size() function. My guess is that the SVG standard or implementation somehow changed and Polymaps doesn't handle it (being 2011 code now).
Can anyone help find where the problem lies? And preferably fix it! It would be much appreciated.
Thanks.
Jamie
Source: (StackOverflow)