I'm creating an interactive choropleth map of the U.S. using an .svg file. I've been able to implement it fine in native Processing (see http://forum.processing.org/topic/interactive-svg-map-with-processing-js), via color-picking and a PGraphics buffer. It's set up so that when a state is moused-over it turns grey.

 

However, the color-picking doesn't appear to be functioning when I run it in a browser via processing.js. The map displays with the correct data, but it does not respond with the color change when a state is moused over -- nothing happens at all. The Chrome console shows nothing amiss -- assets are loading as they should. I can't tell whether this is an issue with the pjs implementation of PGraphics or what. Has anyone had experience with something similar? My Processing code is below for reference -- thank you!

 

 

PShape USMap;
PShape state;
PGraphics buffer;

boolean flag;

Table data;

float redint;

color c;

color buffercolor, mousecolor;

float dataMin = -7;
float dataMax = 11;

void setup() {
  size(600, 400);
  buffer = createGraphics(width, height, JAVA2D);

  USMap = loadShape("usmap.svg"); 
  data = new Table("random.tsv");
  smooth();
  flag = false;
}

void draw() {
  background(255);
  noStroke();

  USMap.disableStyle();

  int rowCount = data.getRowCount();
  for (int row = 0; row < rowCount; row++) {
    String abbrev = data.getRowName(row);
    state = USMap.getChild(abbrev);
   
    buffer.beginDraw();
    buffer.background(255);
    buffercolor = row;
    buffer.noStroke();
    buffer.fill(buffercolor);
    buffer.shape(state, 0, 0);
    buffer.endDraw();
    mousecolor = buffer.get(mouseX, mouseY);
    redint = red(mousecolor);
   
    if (state == null) {
      println("No state found for" + abbrev);
    }
    else {
      float value = data.getFloat1(row, 1);
      if (value >= 0) {
        float amt = norm(value, 0, dataMax);
        c = lerpColor(#FFFFFF, #221177, amt);
        fill(c);
      }
      else {
        float amt = norm(value, 0, dataMin);
        c = lerpColor(#FFFFFF, #992211, amt);
        fill(c);
      }
     
      stroke(255);
      fill(c);
     if (redint == row) {
    fill(100,100,100);
     }
      shape(state, 0, 0);
    }
  }
//println(mousecolor);
//println(redint);
  noLoop();
}

void mouseMoved() {
  loop();
}