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 ;)
// 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-styling
fill(255, 240);
rect(20, 20, 150, 140);
// draw sight-markers and set visualize labels
ScreenPosition 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);
}
}