Oftentimes markers on maps have a custom symbol and show now information on the label itself. It is hard to click and often an dditional information about the places on the side of the webpage is needed. With minimum-displacement overlap removal, the information is put on a rectangle, which is closest to the marker without overlaps.
start the visual2.exe file. It contains python2.7 with flask. Visit http://127.0.0.1:5000 (localhost:5000) to start the application. .
Below the map, 3 forms are given. Location, Purpose, and Count. Only Location is mandatory.
| Name of the feature | Example | Default |
| Location | Wien | |
| Purpose | bester Kaffee | |
| Count | 15 | 15 |
With the given userinput, Foursquare is queried and a result is returned. Positions of the returned venues are converted from latitude and longitude to map positions with leaflet. Custom div markers are than created with a fixed width and height. Now all markers are checked for overlaps. If an overlap occurs, the markers are moved away from each other at the minimum displacement possible. New overlaps can occur and the orhogonal order of the markers can be wrong. Therefore a repairing order algorithm is applied. If 2 markers have the wrong order, the are positioned at the same x or y dimension, therefore creating a new overlap. The overlap is removed again until no more overlaps occur. Finally all overlaps are removed and the divs can be drawn on the map. Available information about the adress is queried from Foursquare.
The main part of the programm lies in the code.js . The python file is only used to query Foursquare and process the user input.
link to doc code.js
link to code.js
link to visual2.exe
link to localhost:5000