hey guys,
i'm kinda new to the processing scene but wanted to do an interactive map by using the unfolding lib by till nagel. so far, i got this stuff seen in the code below. there's a lot of stuff to fix but the most urgent question is: how can i make markers visible by pressing the button created with control.p5? i looked up in the examples of the p5-lib and found a hint with a booelan, implemented it but it's not working when i set th boolean to true. to make the whole whole sketch working, i set the boolean to false for now. when checking the code please consider setting the boolean to true.
is there somebody out there who could have a glance at this? pretty sure it's a little mistake done by a rookie ;)
my code:
// unfolding libraries
import de.fhpotsdam.unfolding.utils.*; import de.fhpotsdam.unfolding.marker.*; import de.fhpotsdam.unfolding.tiles.*; import de.fhpotsdam.unfolding.interactions.*; import de.fhpotsdam.unfolding.ui.*; import de.fhpotsdam.unfolding.*; import de.fhpotsdam.unfolding.data.*; import de.fhpotsdam.unfolding.providers.*; import java.util.List; import de.fhpotsdam.unfolding.geo.Location;
// controlp5 library
import controlP5.*;
ControlP5 cp5; ColorPicker cp;
// initialize map, set start location
UnfoldingMap map; Location mannheimLocation = new Location(49.4721f, 8.5116f);
List citizenservicesMarker, stadtbezirkeMarker; SimplePointMarker wasserturmMarker, schlossMarker, paradeplatzMarker, ntmMarker, fernmeldeturmMarker, moscheeMarker, luisenparkMarker, technoseumMarker; ;
boolean citizen = true;
public void setup() { size(1100, 900); cp5 = new ControlP5(this);
//cp5-controls
cp5.addToggle("citizen") .setColorActive(color(255, 48, 48)) .setColorForeground(color(125)) .setColorBackground(color(80)) .setPosition(30, 30) .setSize(60, 20) .setColorLabel(0) .setLabelVisible(true);
cp5.addToggle("sights") .setColorActive(color(0, 0, 255)) .setColorForeground(color(125)) .setColorBackground(color(80)) .setPosition(30, 80) .setSize(60, 20) .setColorLabel(0) .setLabelVisible(true);map = new UnfoldingMap(this, "Mannheim", new StamenMapProvider.TonerBackground()); map.zoomToLevel(13); map.panTo(new Location(mannheimLocation)); map.setZoomRange(9, 15); // prevent zooming too far out MapUtils.createDefaultEventDispatcher(this, map);
// create citizen markers via loading geojosn-file and style them with markerfactory
List citizenservices = GeoJSONReader.loadData(this, "buergerservice.geojson");
MarkerFactory citizenFactory = new MarkerFactory(); citizenFactory.setPointClass(LabeledMarker.class); List citizenservicesMarker = citizenFactory.createMarkers(citizenservices);// create district markers via loading geojosn-file and style them with markerfactory
List stadtbezirke = GeoJSONReader.loadData(this, "stadtbezirke.geojson"); MarkerFactory stadtbezirkeFactory = new MarkerFactory(); stadtbezirkeFactory.setPolygonClass(SimplePolygonMarker.class); List stadtbezirkeMarker = stadtbezirkeFactory.createMarkers(stadtbezirke); //map.addMarkers(stadtbezirkeMarker);
// question for toggling markers: not working at the moment!
if (citizen==true) { map.addMarkers(citizenservicesMarker); }
// initialize locations and define markers for sights
Location wasserturmLocation = new Location(49.484097, 8.475568); wasserturmMarker = new SimplePointMarker(wasserturmLocation);
Location schlossLocation = new Location(49.482986, 8.461783); schlossMarker = new SimplePointMarker(schlossLocation);
Location paradeplatzLocation = new Location(49.487162, 8.466250); paradeplatzMarker = new SimplePointMarker(paradeplatzLocation);
Location ntmLocation = new Location(49.488344, 8.477535); ntmMarker = new SimplePointMarker(ntmLocation);
Location fernmeldeturmLocation = new Location(49.487067, 8.492178); fernmeldeturmMarker = new SimplePointMarker(fernmeldeturmLocation);
Location moscheeLocation = new Location(49.493919, 8.461333); moscheeMarker = new SimplePointMarker(moscheeLocation);
Location luisenparkLocation = new Location(49.479997, 8.495569); luisenparkMarker = new SimplePointMarker(luisenparkLocation);
Location technoseumLocation = new Location(49.476812, 8.496570); technoseumMarker = new SimplePointMarker(technoseumLocation); }
public void draw() { map.draw();
//cp5-stylingfill(255, 240); rect(20, 20, 150, 140);
// draw sight-markers and set visualize labelsScreenPosition wasserturmLocation = wasserturmMarker.getScreenPosition(map); fill(255, 255, 255); noStroke(); rect(wasserturmLocation.x+6, wasserturmLocation.y-7, 73, 15); fill(0, 0, 255); ellipse(wasserturmLocation.x, wasserturmLocation.y, 10, 10); text("Wasserturm", wasserturmLocation.x + 8, wasserturmLocation.y + 5);
ScreenPosition schlossLocation = schlossMarker.getScreenPosition(map); fill(255, 255, 255); noStroke(); rect(schlossLocation.x+6, schlossLocation.y-7, 47, 15); fill(0, 0, 255); ellipse(schlossLocation.x, schlossLocation.y, 10, 10); text("Schloss", schlossLocation.x + 8, schlossLocation.y + 5);
ScreenPosition paradeplatzLocation = paradeplatzMarker.getScreenPosition(map); fill(255, 255, 255); noStroke(); rect(paradeplatzLocation.x+6, paradeplatzLocation.y-7, 73, 15); fill(0, 0, 255); ellipse(paradeplatzLocation.x, paradeplatzLocation.y, 10, 10); text("Paradeplatz", paradeplatzLocation.x + 8, paradeplatzLocation.y + 5);
ScreenPosition ntmLocation = ntmMarker.getScreenPosition(map); fill(255, 255, 255); noStroke(); rect(ntmLocation.x+6, ntmLocation.y-7, 93, 15); fill(0, 0, 255); ellipse(ntmLocation.x, ntmLocation.y, 10, 10); text("Nationaltheater", ntmLocation.x + 8, ntmLocation.y + 5);
ScreenPosition fernmeldeturmLocation = fernmeldeturmMarker.getScreenPosition(map); fill(255, 255, 255); noStroke(); rect(fernmeldeturmLocation.x+6, fernmeldeturmLocation.y-7, 93, 15); fill(0, 0, 255); ellipse(fernmeldeturmLocation.x, fernmeldeturmLocation.y, 10, 10); text("Fernmeldeturm", fernmeldeturmLocation.x + 8, fernmeldeturmLocation.y + 5);
ScreenPosition moscheeLocation = moscheeMarker.getScreenPosition(map); fill(255, 255, 255); noStroke(); rect(moscheeLocation.x+6, moscheeLocation.y-7, 178, 15); fill(0, 0, 255); ellipse(moscheeLocation.x, moscheeLocation.y, 10, 10); text("Yavuz-Sultan-Selim-Moschee", moscheeLocation.x + 8, moscheeLocation.y + 5);
ScreenPosition luisenparkLocation = luisenparkMarker.getScreenPosition(map); fill(255, 255, 255); noStroke(); rect(luisenparkLocation.x+6, luisenparkLocation.y-7, 68, 15); fill(0, 0, 255); ellipse(luisenparkLocation.x, luisenparkLocation.y, 10, 10); text("Luisenpark", luisenparkLocation.x + 8, luisenparkLocation.y + 5);
ScreenPosition technoseumLocation = technoseumMarker.getScreenPosition(map); fill(255, 255, 255); noStroke(); rect(technoseumLocation.x+6, technoseumLocation.y-7, 70, 15); fill(0, 0, 255); ellipse(technoseumLocation.x, technoseumLocation.y, 10, 10); text("Technoseum", technoseumLocation.x + 8, technoseumLocation.y + 5);
// call the function for highlighting the labels of the citizen-markers
citizen(); }
// function for highlighting the labels of the citizen-markers
void citizen() { // Deselect all marker for (Marker citizenservices : map.getMarkers ()) { citizenservices.setSelected(false); }
// Select hit marker // Note: Use getHitMarkers(x, y) if you want to allow multiple selection. Marker citizenservices = map.getFirstHitMarker(mouseX, mouseY); if (citizenservices != null) { citizenservices.setSelected(true); } }
this piece is used for highlighting the labels of the red markers:
import de.fhpotsdam.unfolding.marker.*; import de.fhpotsdam.unfolding.geo.*; import processing.core.*; import java.util.HashMap;
/** * A point marker which can show a label containing the marker's name. */ public class LabeledMarker extends SimplePointMarker {
protected String name; protected float size = 15; protected int space = 10;
private PFont font; private float fontSize = 12;
public LabeledMarker(Location location, HashMap properties) { this.location = location;
// Use property 'title' as label Object titleProp = properties.get("title"); if (titleProp != null && titleProp instanceof String) { name = (String) titleProp; }}
/** * Displays this marker's name in a box. */ public void draw(PGraphics pg, float x, float y) { pg.pushStyle(); pg.pushMatrix(); if (selected) { pg.translate(0, 0); } pg.strokeWeight(strokeWeight); if (selected) { pg.fill(255, 48, 48); pg.stroke(1); } else { pg.fill(255, 48, 48); pg.noStroke(); } pg.ellipse(x, y, size, size);// TODO use radius in km and convert to px
// label if (selected && name != null) { if (font != null) { pg.textFont(font); } pg.fill(255, 255, 255); pg.noStroke(); pg.rect(x + strokeWeight / 2, y - fontSize + strokeWeight / 2 - space, pg.textWidth(name) + space * 1.5f, fontSize + space); pg.fill(255, 48, 48); pg.text(name, Math.round(x + space * 0.75f + strokeWeight / 2), Math.round(y + strokeWeight / 2 - space * 0.75f)); } pg.popMatrix(); pg.popStyle();}
public String getName() { return name; } }