CrowlKit - Maps

Heb je coördinaten verzameld via een geolocatiesensor, dan kan je die visualiseren op een kaart. 

Libaries toevoegen

Zorg dat de volgende libraries aanwezig zijn in de head van de pagina:

<script src="https://cdn.publihub.media/lib/app.js">
</script>
<link rel="stylesheet" href="https://cdn.publihub.media/css/app.css">
<script src="https://cdn.publihub.media/lib/crowl.maps.js?v29">
</script>

<!--De libraries hieronder moeten in deze volgorde geladen worden-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js">
</script>

Een kaart toevoegen

Vervolgens voeg je de kaart toe aan je pagina: 

<app-map id="mymap" width="100vw" height="100vh" drawpath="" tiles="map">
</app-map>

Een app-map-element aanvaardt de volgende attributen:

• id: een uniek id voor het element.
• width: de breedte van de kaart
• height: de hoogte van de kaart
• latitude: de breedtegraad
• longitude: de lengteligging
• drawpath: heeft geen "waarde" nodig. Als het attribuut aanwezig is, dan wordt er een pad getekend tussen de verschillende markers. 
• zoom:: het niveau van inzoomen op de kaart. De maximumwaarde is 20 tenzij je het attribuut tilesop "none" zet. 
• tiles: De waarde "map" tekent een kaart met gebouwen en huizen. De maximumzoomwaarde is dan 20. Zet je het attribuut tiles op "none" dan verschijnt er geen kaart, maar kan je wel markeerpunten en vormen laten verschijnen.. In dat geval is er geen grens op het inzoomen.

Markeerpunten

Vervolgens kan je markeerpunten weergeven op de kaart. Dat doe je in KitCode. Bekijk het onderstaande voorbeeld:

const records = [
 { id: 1, loclatitude: 50.8680047, loclongitude: 4.7065446, timestamp: "2024-11-05T21:50:02.826Z" },
 { id: 2, loclatitude: 50.8680150, loclongitude: 4.7065520, timestamp: "2024-11-05T21:51:10.826Z" },
 { id: 3, loclatitude: 50.8680200, loclongitude: 4.7065680, timestamp: "2024-11-05T21:52:15.826Z" },
 { id: 4, loclatitude: 50.8680100, loclongitude: 4.7065800, timestamp: "2024-11-05T21:53:20.826Z" },
 { id: 5, loclatitude: 50.8680300, loclongitude: 4.7065900, timestamp: "2024-11-05T21:54:25.826Z" }
];

Elke "rij" moet een loclatitude- en loclongitude-waarde bevatten. Een id of timestamp is niet noodzakelijk; In plaats van het woord "timestamp" kan je ook het woord "content" gebruiken.

Markeerpunten toevoegen aan de kaart

Voeg de volgende code toe aan de app-ready-functie:

app.ready(function(){
  id("mymap").after("data").send({detail: {records}});
});

Vormen

Je kan vormen zoals cirkels en rechthoeken toevoegen aan je kaart om gebouwen of meubels in je kaart op te nemen. 

const shapes = [
   {
      shapeType: "rectangle",
      latitude: 50.8680047,
      longitude: 4.7065446,
      rotation: -98,
      width: 12, // in meters
      height: 30, // in meters
      color: "#00FF00", // kleur voor de rechthoek
      topmargin: 4.3, // verschuiving in meters
      leftmargin: -0.6, // verschuiving in meters
      name: "Gebouw A"
   },
   {
      shapeType: "circle",
      latitude: 50.8680048,
      longitude: 4.7065451,
      radius: 10, // straal in meters
      color: "blue", // kleur voor de cirkel
      topmargin: -20, // verschuiving in meters
      leftmargin: 2.5, // verschuiving in meters
      name: "Parkeerplaats B"
   }
];

Vormen en markeerpunten toevoegen

Je moet er sowieso voor zorgen dat er markeerpunten aanwezig zijn om de kaart correct te laten werken. Immers, de kaart wordt gepositioneerd om het eerst toegevoegde markeerpunt. Je kan dus enkel "shapes" toevoegen indien er ook markeerpunten aanwezig zijn.

Je voegt ze toe op de volgende manier:

app.ready(function(){
  id("mymap").after("data").send({detail: {records,shapes}});
});

Markeerpunen en/of vormen vervangen

Stel dat je een knop toevoegt met id "replacemarkers", dan kan je een andere lijst van markeerpunten en/of shapes toevoegen. De lijst van vormen en shapes geef je dan een andere naam:

const records2 = [
    { id: 21, loclatitude: 50.86684953828539, loclongitude: 4.705497768251816, content: "Deze tekst" } 
];

app.ready(function(){
  id("replacerecords").after("click").do(function(){
      id("mymap").after("data").send({detail:{records2}});
  });
});

Markeerpunten toevoegen

In plaats van alle markeerpunten te vervangen, kan je ook één markeerpunt toevoegen met de volgende regel code:

id("mymap").addPlace(50.8680500, 4.7066050, "2024-11-05T22:10:00.826Z");

Markeerpunten verwijderen

Je kan markeerpunten ook met één regel code verwijderen. Dat doe je door de index van het markeerpunt door te geven. Het eerste markeerpunt heeft index 0 enz. 

id("mymap").removePlace(0);

Demo's

Open een demo met markeerpunten, vormen en kaartweergave:  https://cdn.publihub.media/demos/app/map.html
Open een demo met markeerpunten, vormen zonder kaart:  https://cdn.publihub.media/demos/app/mapnotiles2.html