{"id":26692474,"url":"https://github.com/mikepziegler/tgmap","last_synced_at":"2025-04-12T23:37:59.888Z","repository":{"id":143797134,"uuid":"107246886","full_name":"mikepziegler/tgmap","owner":"mikepziegler","description":"A Javascript Map to show the swiss canton Thurgau with the municipalities.","archived":false,"fork":false,"pushed_at":"2018-04-20T06:15:25.000Z","size":140,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-12T23:37:55.439Z","etag":null,"topics":["d3","d3js","data-visualization","interactive","javascript-map","map","svg","topojson"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mikepziegler.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-17T09:29:02.000Z","updated_at":"2023-06-01T21:21:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"a3032c26-b57d-495d-9629-9e85ad03cf65","html_url":"https://github.com/mikepziegler/tgmap","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikepziegler%2Ftgmap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikepziegler%2Ftgmap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikepziegler%2Ftgmap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mikepziegler%2Ftgmap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mikepziegler","download_url":"https://codeload.github.com/mikepziegler/tgmap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248647255,"owners_count":21139081,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["d3","d3js","data-visualization","interactive","javascript-map","map","svg","topojson"],"created_at":"2025-03-26T17:33:10.156Z","updated_at":"2025-04-12T23:37:59.882Z","avatar_url":"https://github.com/mikepziegler.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TG-Map\nA Javascript map for showing the Swiss canton Thurgau. It shows the municipalities and Lake of Constance or \"Bodensee\" in German.\nDemo will be available soon.\n\n# Documentation\n\n### Get the geodata\nTo get the data about the geographical shapes of Thurgau, I first needed to take steps as explained on the repository \"[swiss maps](https://github.com/interactivethings/swiss-maps)\".\nAfter that, I created the file \"tg-municipalities\" by entering the command\n\n```\nmake topo/tg-municipalities-lakes.json\n```\n\nThanks to [herrstucki](https://github.com/herrstucki) for helping me out.\n\nBoth versions have the same \n\n## Version 2.0\n\nWill be edited in the future...\n\n## Version 1.0\n\n### html file \"index.html\"\nThis is the smallest part of creating a javascript map. I made a link to \"main.js\", which will execute the code and draw the map.\nFurthermore there are links to the d3.js and the topojson.js scripts.\nThe design of the html file will be changed soon, but for this part, the design is unnecessary at the moment.\n\nI will probably change this part of the documentation to make it more appealing to the user, after the website is built.\n\n### The Javascript file \"main.js\"\nThis is the exciting part of creating the map.\n\n#### Initializing variables\nFirst I need the variables for setting the size of the window and initializing centered, which will be used later, with the path:\n```\nvar width = 1500,\n    height = 900,\n    centered;\n```\n\nTo draw the shapes, I have to select the element in the html and make two variables.\nThe variable \"svg\" draws those shapes and \"graph\" will be used when the mouse is hovering on a shape.\n```\nvar svg = d3.select(\"#graph\").append(\"svg\")\n    .attr(\"width\", width)\n    .attr(\"height\", height);\n\nvar graph = d3.select(\"#graph\").append(\"div\")\n    .attr(\"class\", \"tooltip\")\n    .style(\"opacity\", 0);\n```\n\nClass \"tooltop\" in css:\n```\n.tooltip {\n    position: absolute;\n    text-align: center;\n    width: 100px;\n    height: 28px;\n    padding: 2px;\n    font: 12px sans-serif;\n    background: white;\n    border-radius: 8px;\n    pointer-events: none;\n}\n```\n\nFurthermore, I append the shape, the size, the background and a click event at svg.\n```\nsvg.append(\"rect\")\n    .attr(\"class\", \"background\")\n    .attr(\"width\", width)\n    .attr(\"height\", height)\n    .on(\"click\", clicked);\n```\n\nThe class \"Background\" in css file:\n```\n.background {\n    fill: none;\n    pointer-events: all;\n}\n```\n\n#### Drawing Shapes\nThe function for drawing the municipalities and Lake of Constance. All municipalities get the CSS-Id \"municipalities\" and the click and hover event.\n\n```\nd3.json(\"tg-municipalities-lakes.json\", function(error, tg) {\n    g.append(\"g\")\n        .attr(\"id\", \"municipalities\")\n        .selectAll(\"path\")\n        .data(topojson.feature(tg, tg.objects.municipalities).features)\n        .enter().append(\"path\")\n        .attr(\"d\", path)\n        .on(\"click\", clicked)\n        .on(\"mouseover\", mouseover);\n\n    g.append(\"g\")\n        .attr(\"id\", \"lakes\")\n        .selectAll(\"path\")\n        .data(topojson.feature(tg, tg.objects.lakes).features)\n        .enter().append(\"path\")\n        .attr(\"d\", path);\n\n    g.append(\"path\")\n        .datum(topojson.mesh(tg, tg.objects.municipalities, function(a, b) { return a !== b; }))\n        .attr(\"id\", \"border\")\n        .style(\"stroke-width\", \"1px\")\n        .attr(\"d\", path);\n});\n```\n\nAnd those are the CSS-Ids:\n```\n#border {\n    fill: none;\n    stroke: #fff;\n    stroke-linejoin: round;\n    stroke-linecap: round;\n}\n\n#lakes {\n    fill: #b3b3f3;\n}\n\n#municipalities {\n    fill: #e3e3e3;\n}\n\n#municipalities :hover {\n    fill: #c7c7c7;\n}\n\n#municipalities .active {\n    fill: orange;\n}\n```\n\n#### Mouse Events\nTo make the map more interactive, an hover and a click event was given to the shapes.\n\n##### Hover event\nChange the color to orange, when the mouse is hovering on the shape.\n```\n#municipalities .active {\n    fill: orange;\n}\n```\nBy the way, it will be replaced with a javascript function in the future.\n\n\nOutputting the name of the municipality as a popover by hovering on the shape.\n```\nfunction mouseover(d) {\n    graph.style(\"opacity\", .9)\n        .html(getMName(d))\n        .style(\"left\", (d3.event.pageX) + \"px\")\n        .style(\"top\", (d3.event.pageY - 28) + \"px\");\n}\n\nfunction getMName(d) {\n    for (i = 0; i \u003c muniArr.length; i++) {\n        if (d.id === muniArr[i][0]) {\n            return muniArr[i][1];\n            continue;\n        }\n    }\n}\n```\n\nThe function getMName returns the name of the municipality by detecting the associated ID. The names are in an array.\nI had to write every name of the municipalities.\n```\nvar muniArr = [\n    //Bezirk Arbon\n    [4436, \"Romanshorn\"],\n    [4451, \"Uttwil\"],\n    [4426, \"Kesswil\"],\n    [4441, \"Salmsach\"],\n    [4411, \"Egnach\"],\n    [4401, \"Arbon\"],\n    [4421, \"Horn\"],\n    [4431, \"Roggwil (TG)\"],\n    [4461, \"Amriswil\"],\n    [4406, \"Dozwil\"],\n    [4416, \"Hefenhofen\"],\n    [4446, \"Sommeri\"],\n\n    //Bezirk Kreuzlingen\n    [4656, \"Güttingen\"],\n    [4641, \"Altnau\"],\n    [4691, \"Münsterlingen\"],\n    [4643, \"Bottighofen\"],\n    [4671, \"Kreuzlingen\"],\n    [4681, \"Langrickenbach\"],\n    [4683, \"Lengwil\"],\n    [4666, \"Kemmental\"],\n    [4696, \"Tägerwilen\"],\n    [4651, \"Gottlieben\"],\n    [4646, \"Ermatingen\"],\n    [4851, \"Salenstein\"],\n    [4846, \"Raperswilen\"],\n    [4701, \"Wäldi\"],\n\n    //Bezirk Weinfelden\n    [4486, \"Hauptwilen-Gottshaus\"],\n    [4511, \"Zihlschlacht-Sitterdorf\"],\n    [4471, \"Bischofszell\"],\n    [4495, \"Hohen-Tannen\"],\n    [4476, \"Erlen\"],\n    [4501, \"Kradolf-Schönenberg\"],\n    [4506, \"Sulgen\"],\n    [4911, \"Bürglen (TG)\"],\n    [4901, \"Birwinken\"],\n    [4891, \"Berg (TG)\"],\n    [4791, \"Wuppenau\"],\n    [4756, \"Schönholzerswilen\"],\n    [4921, \"Bussnang\"],\n    [4946, \"Weinfelden\"],\n    [4941, \"Märstetten\"],\n    [4711, \"Affeltrangen\"],\n    [4881, \"Amlikon-Bissegg\"],\n    [4951, \"Wigoltingen\"],\n\n    //Bezirk Frauenfeld\n    [4606, \"Stettfurt\"],\n    [4591, \"Matzingen\"],\n    [4611, \"Thundorf\"],\n    [4566, \"Frauenfeld\"],\n    [4571, \"Gachnang\"],\n    [4590, \"Hüttlingen\"],\n    [4561, \"Felben-Wellhausen\"],\n    [4831, \"Müllheim\"],\n    [4841, \"Pfyn\"],\n    [4621, \"Warth-Weiningen\"],\n    [4616, \"Uessingen-Buch\"],\n    [4601, \"Neunforn\"],\n    [4816, \"Homburg\"],\n    [4811, \"Herdern\"],\n    [4821, \"Hüttwilen\"],\n    [4801, \"Berlingen\"],\n    [4864, \"Steckborn\"],\n    [4826, \"Mammern\"],\n    [4806, \"Eschenz\"],\n    [4871, \"Wagenhausen\"],\n    [4545, \"Diessenhofen\"],\n    [4536, \"Basadingen-Schlattingen\"],\n    [4546, \"Schlatt (TG)\"],\n\n    //Bezirk Münchwilen (TG)\n    [4726, \"Fischingen\"],\n    [4751, \"Rickenbach (TG)\"],\n    [4786, \"Wilen (TG)\"],\n    [4761, \"Sirnach\"],\n    [4724, \"Eschlikon\"],\n    [4721, \"Bichelsee-Balterswil (Bi.)\"],\n    [4746, \"Münchwilen (TG)\"],\n    [4781, \"Wängi\"],\n    [4551, \"Aadorf\"],\n    [4723, \"Braunau\"],\n    [4776, \"Tobel-Tägerschen\"],\n    [4716, \"Bettwiesen\"],\n    [4741, \"Lommis\"]\n];\n```\n\nBelieve me, it wasn't pleasant to write all the names. But it won't stay forever, because I'll find a way to output the names from somewhere else.\n\n\n\n\n\n## Sources\n\n* [Swiss-maps](https://github.com/interactivethings/swiss-maps) from InteractiveThings\n* [Canton Zurich](http://bl.ocks.org/herrstucki/10258270), Author: herrstucki\n* [Let's make a map](https://bost.ocks.org/mike/map/) by Mike Bostock\n\n## Author\nMike Zye","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikepziegler%2Ftgmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmikepziegler%2Ftgmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikepziegler%2Ftgmap/lists"}