De data in de kaart
Het eerste wat ik probeerde was het toevoegen van een popup, aangezien dit in de tutorial stond.
Dit was niet lastig, het kon namelijk met de volgende code:
let popup = L.popup() .setLatLng([9.005401, 38.763611]) .setContent("The Abyssinian, Ethiopia") .openOn(map);
Toch vond ik dit niet helemaal handig, aangezien je op deze manier al je data handmatig in je JS bestand moet zetten. Ook weet ik niet hoeveel je kan met Leaflet. Misschien kun je er niet genoeg mee..
Het volgende wat ik heb geprobeerd was het toevoegen van een custom icon en daarop weer een popup, maar de positioning is heel vreemd en ik heb geen idee hoe ik dat moet fixen.
Ik heb er nog meer toegevoegd, maar ik ben er niet super enthousiast over.
Op de site van Leaflet vond ik een tutorial over geoJSON, dus besloot ik dat te proberen. Ik heb het op meerdere manieren geprobeerd, maar voor nu leek dit mij het snelste:
Een object met daarin arrays van de data. Ik wist nog niet hoe ik hier een naam aan toe kon voegen, maar er staan in ieder geval markers op de plekken waar ze moeten staan.
Ik heb de manier wat omgegooid, en daar feedback op gekregen. Volgens mijn docent kon je het json bestand ook via d3 inladen, in plaats van de code die ik gebruikt had. Toch wilde dit niet helemaal lukken. Wel is het met de oude manier gelukt om de coördinaten in te laden met de volgende code:
L.marker(myJson[0], {icon:abyssinianIcon}).addTo(map).bindPopup("The Abyssinian, from Ethiopia");
Dit was al een hele stap!
Van mijn docent kreeg ik te horen dat het mogelijk was om je JSON bestand in te laden via D3. Dit wilde ik graag proberen, maar wat ik ook deed, het werkte niet. In de volgende les vroeg ik het nogmaals en uiteindelijk zijn we op de volgende code gekomen:
d3.json("../coordinates.json").then(d => console.log(d[0])) .catch(e => console.log("Laden niet gelukt"));
Ondanks dat ik het bestand kon console-loggen, wilde het me toch niet lukken. De coördinaten deden het namelijk niet in de kaart. Dus besloot ik om nogmaals naar de docent te gaan, die uitlegde dat ik er een function van moest maken aangezien hij dan pas begon met het inladen van de data in de kaart, wanneer de data ook echt was ingeladen. Dit hebben we op deze manier gedaan:
d3.json("../coordinates.json").then(d => {
makeMap(d)
console.log(d)
})
Vervolgens hebben we alle code voor mijn kaart in een functie gezet, namelijk makeMap(). Toen werkte het!
Ik heb het formaat van mijn JSON nogmaals verandert, dit keer heb ik het op deze manier gedaan:
Dit is namelijk hoe ik het online overal zag staan en dit werkte prima. name is hetgene wat in de popup komt.
Vervolgens heb ik ervoor gezorgd dat alle katten met de juiste coördinaten in dit bestand kwamen te staan. Dit moest handmatig, aangezien ik de exacte coördinaten niet heb.
Nog iets wat belangrijk was, is een loop die ervoor zorgt dat er voor alle verschillende katten een marker aangemaakt wordt. Ik heb hiervoor even met m'n docent gezeten, en uiteindelijk is dit er van gemaakt:
JavaScript loops zijn een beetje een mysterie voor mij, maar het wordt me al iets duidelijker. Het toegevoegde icoontje is een custom icon die ik heb aangemaakt. Hier heb ik eerder natuurlijk al mee gekloot, maar het leek me nog even niet mogelijk om voor iedere kat een eigen icoon toe te voegen. Daarom heb ik een algemene. Het ziet er beter uit dan de standaard marker en ook voorkomt het de chaos die zou ontstaan als ze allemaal hun eigen icoontjes zouden hebben. Op deze manier kun je ook goed zien waar de meeste katten vandaan komen: namelijk de Verenigde Staten, Thailand en het Verenigd Koninkrijk.
Ondanks dat ik het niet prachtig vind, ben ik er best blij mee. Wanneer je inzoomd, kun je in alle rust kijken naar de verschillende landen.