Dynamic pins on a map

Objectives

You want generate a presentation with the following features:

• Move a pin dynamically on a map. Convertir une latitude longitude en coordonéer X/Y sur une image

Solution

Here’s how you can achieve this using Carbone:

1. Consider two fixed reference points

   Store longitude and latitude based on positions on the X and Y axes of the map in your data

    "markers": [
      {
        "name": "Darwin",
        "posX": 8.05,
        "posY": 0.32,
        "latitude": -12.455,
        "longitude": 130.839
      }
    ]

2. Formule pour Convertir une latitute / longiture en X / Y

   Pour les besoin de cet exemple, nous faisons une grosse approximation mathmétique en faisait ubn calcul simple. On repèred deux point de référence sur l'image pour lesquel on connauit la lat/long :

   • Le point 1 : X = 12cm, Y = 12cm correpond à une lat/long : 12.12, 13.11

   • el point 2:

     Grace à ces deux point, en faisant un produit en croix (hypotèse) : on peut convertir une nouvelel long/lat avce la formule suivante : coef = 12.12

3. Appliquer le coef dans les tag Carbone pour transformer. Compute coefficients for transformation

   Calculate coefficients for transformation using the following formulas: Subtract the positions X and store the delta in a variable c.numX as a numerator. {d.repere[0].posX:sub(d.repere[1].posX):set(c.numX)}

   Subtract the longitudes and store the delta in a variable c.denX as a numerator. {d.repere[0].longitude:sub(d.repere[1].longitude):set(c.denX)}

   Divide the numerator by the denominator and store the result in a variable c.coeffX. {c.numX:div(c.denX):set(c.coeffX)}

   Do the same for the values on the Y-axis and latitudes. {d.repere[0].posY:sub(d.repere[1].posY):set(c.numY)} {d.repere[0].latitude:sub(d.repere[1].latitude):set(c.denY)} {c.numY:div(c.denY):set(c.coeffY)}

4. Insert a shape on the map and define its transformation in the alt text

   Note: Use a shape, not an image.

   Right-click on the shape, and navigate to the "View Alt Text" menu to set the transformation on X-axis with the following formula : {d.location[i].longitude:sub(d.repere[1].longitude):mul(c.coeffX):sub(d.repere[0].posX):add(d.repere[1].posX):transform(x,cm)}

   and the transformation on Y-axis : {d.location[i].latitude:sub(d.repere[1].latitude):mul(c.coeffY):add(d.repere[1].posY):transform(y,cm)}

And there you go!

You might also like