Skip to content

Map

Jump to bottom
Gustav Ekner edited this page Dec 7, 2022 · 4 revisions

The map is a react (+redux) app for displaying all companies on the fair and descriptions of them. The purpose is to make them easier to find for visitors. It is located in /map.

Develop

How do I use the map for my D-Dagen iteration? The minimum required steps are the following.

Add the new information, such as logos and descriptions. This is done in /map/src/store/reducers/companies.js. The file should have the following structure:

const companies = [
  {
    "name": "SAAB",
    "description": "Airplanes and stuff",
    "img": {
      "default": "saab.png",
      "placeholder": "saab.png"},
    "position": 15,
    "website": "https://saab.se/"
  },
  ...
];
export default companies;

How is the data generated? I suggest that you ask the Sales group for the excel file with all the data. Export it to a csv-file. Then write a python script that reads this file (easily done with a csv library), and output the relevant data with the above format. Also, specify where the images are located, in the file /map/src/components/CompanyDisplay/CompanyDisplay.js.

Now, a new map has to be uploaded in https://github.com/datasektionen/ddagen/tree/develop/map/src/assets. This is an svg-file which contains all the ID's, so that they can be connected to the corresponding "position" in companies.js. Have a look at the source code for last year's svg, and I suggest to start from that one when making a new map. If you want to use an open source program for this, Inkscape can be used. Note: See these instructions for how to export the svg correctly from Inkscape.

During development, use yarn start in /map. Changes you make will automatically be visible.

When you're done, the app must be built. This process is unfortunately not automated, and it could definitely be a project in the future to fix this. To build, run yarn build in /map. Then, copy all the files in /map/build to /static/map. To test the build, go to the root folder and run flask start, and go to localhost/map in your browser.

History

  • The map was originally written for D-Dagen 2019.
  • D-Dagen 2022 it was resurrected, this time modified to handle two floors.

Inkscape

In order to not get errors when loading the svg files and using them in the map, the following has to be done when exporting svg:s from Inkscape: First, select Save as, then save as "Plain SVG" (not "Inkscape SVG"). Now, edit the svg file with a text editor. At the top of the file, remove all attributes to the svg-element except these three:

viewBox="0 0 870.16 747.86"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"

Don't forget the ending > tag at the last line.

Next, scroll to the bottom of the file and remove the whole metadata tag and its contents. Example of how it could look (this should be removed):

  <metadata
     id="metadata5171">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:title>Karta</dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>

Save the file, and you're done!

Clone this wiki locally