Any possible width

README.md

@@ -9,6 +9,8 @@ Free, open, interactive, detailed maps of Puerto Rico for your web applications.
 
 Documentation for this project, including basic how tos is in progress. Visit our [homepage](http://miguelrios.github.io/atlaspr) and [examples page](http://miguelrios.github.io/atlaspr/examples.html) in the meantime. 
 
+**This is my fork of Miguel's AtlasPR** It should be mostly the same, but I have ironed it out in some places or just changed it to how I like it.
+
 ### Usage
 1. [Download the library](https://github.com/commonwealth-of-puerto-rico/atlaspr/archive/master.zip).
 2. Unzip it (by default the directory will be called ```atlaspr-master```).
@@ -41,8 +43,70 @@ AtlasPR makes it easy to developers who want to color maps of Puerto Rico by pue
 ### Compatibility
 AtlasPR does not work in old browsers, particularly in Internet Explorer 8 and less. This is because we use SVG to render tiles. SVG is a web standard for scalable web graphics, and it's implemented in every modern browser.
 
-### Acknoledgements
+### Acknowledgements
 This library is just a few lines of code written in the shoulders of an awesome giant called [d3.js](htttp://d3js.org).
 
 ### Contributions
-Feel free to open issues whenever you find a bug or think about that awesome feture you want implemented in this library. Even better, fork the repo, implement them and submit a pull request.
+Feel free to open issues whenever you find a bug or think about that awesome feature you want implemented in this library. Even better, fork the repo, implement them and submit a pull request.
+
+# Documentation [in progress]
+Reading through Miguel source there seem to be about 10 functions:
+
+	draw()
+
+	update()
+
+	add_markers()
+
+	encode_quan()
+
+	encode_qual()
+
+	zoom_to_pueblo()
+
+	_zoom_to_random_pueblo()
+
+	zoom_to_original()
+
+	get_barrios_mapping()
+
+	get_pueblos_mapping()
+
+as well as a bunch of options for labels and mouse events:
+
+	options.events
+
+	options.size
+
+	options.events.on_click
+
+	options.events.on_mouseover
+
+	options.events.on_mouseout
+
+	options.labels
+
+	options.on_ready
+
+With more options possible to add.
+
+Note that AtlasPR draws maps in a 3:1 aspect ratio.
+
+In order to interact with the tiles, we need the `d3.js` projection used by AtlasPR:
+
+    self.svg = d3.select(this.options.node).append("svg")
+      .attr("width", this.width)
+      .attr("height", this.height)
+      .call(d3.behavior.zoom().on("zoom", this.options.zoom && redraw));
+
+    self.projection = d3.geo.mercator()
+      .scale(self.original_scale)
+      .center(self.center_ll)
+      .translate([this.width/2,this.height/2]);
+
+
+    self.translation = self.projection.translate(); // the projection's default translation
+    self.scale = self.projection.scale(); // the projection's default translation
+      // .translate([width / 2, height / 2]);
+    self.path_fn = d3.geo.path()
+        .projection(self.projection);

js/atlaspr.js

@@ -5,7 +5,7 @@ var AtlasPR = klass(function (options) {
   this.options.events = options.events || {};
   //hack to make github pages work
   this.geotiles_path = 
-    (document.URL.indexOf("github") > 0 ? "http://miguelrios.github.io/atlaspr" : "..") + "/geotiles/PATHGEN.json";
+    (document.URL.indexOf("github") > 0 ? "http://miguelrios.github.io/atlaspr" : "atlaspr") + "/geotiles/PATHGEN.json";
   this.center_ll = [-66.251367,18.20033];
   this.colors = d3.scale.category20c();
   this.maps = {};
@@ -25,7 +25,7 @@ var AtlasPR = klass(function (options) {
   };
   this.size_attributes = {
     "small": {
-      width: 480,
+      width: 480
     },
     "medium": {
       width: 960
@@ -37,12 +37,27 @@ var AtlasPR = klass(function (options) {
       width: 2400
     }
   };
-  this.width = this.size_attributes[this.options.size || "medium"].width;
+	this.width = this.options.size;
+  //this.width = this.size_attributes[this.options.size || "medium"].width;
   this.height = this.width/3;
   this.original_scale = this.width*27;
   this.draw();
 })
 .methods({
+	/* methods
+
+	draw()
+	update()
+	add_markers()
+	encode_quan()
+	encode_qual()
+	zoom_to_pueblo()
+	_zoom_to_random_pueblo()
+	zoom_to_original()
+	get_barrios_mapping()
+	get_pueblos_mapping()
+
+	*/
   draw: function () {
     var self = this;
 
@@ -67,26 +82,24 @@ var AtlasPR = klass(function (options) {
       // zoom to island
       self.data = data;
       self.indexed_data = {};
-
       self.tiles.forEach(function(tile){
         var width = self.meta_attributes[tile].width;
         var tiletype = self.meta_attributes[tile].id;
         self.indexed_data[tile] = {};
-
-        self.maps[tile] = self.svg.selectAll("." + tile)
+		self.maps[tile] = self.svg.selectAll("." + tile)
           .data(data[tile].features)
           .enter()
             .append("path")  
               .attr("d", self.path_fn)
               .attr("class", tile)
               .attr("data-tiletype",tiletype)
-              .attr("data-name",function(d){
+              .attr("id",function(d){
                 var id = d.properties[self.meta_attributes[tile].id];
                 self.indexed_data[tile][id] = d;
                 if(d.properties.NAME){
                   self.indexed_data[tile][d.properties.NAME.toLowerCase()] = d;
                 }
-                return d.properties.NAME})
+                return d.properties.NAME.toLowerCase().replace(" ", "")})
               .style("stroke-width", width)
               .style("fill", "rgba(255,255,255,0)")
               .style("stroke", "#333")