Mi primer mapa

Tomar datos de la base de datos

Interfaz gráfica para tomar datos: http://aqa.unloquer.org:8888/sources/1/chronograf/data-explorer?query=SELECT%20mean%28%22pm25%22%29%20AS%20%22mean_pm25%22%2C%20mean%28%22lat%22%29%20AS%20%22mean_lat%22%2C%20mean%28%22lng%22%29%20AS%20%22mean_lng%22%20FROM%20%22aqa%22.%22autogen%22.%22volker0003%22%20WHERE%20time%20%3E%20now%28%29%20-%202d%20AND%20%22id%22%3D%27volker0003%27%20GROUP%20BY%20time%281h%29%20FILL%28none%29

Resultado:

Desde la consola: curl -G 'http://aqa.unloquer.org:8086/query?pretty=true' –data-urlencode “db=aqa” –data-urlencode “q=SELECT mean(\”pm25\“) AS \”mean_pm25\“, mean(\”lat\“) AS \”mean_lat\“, mean(\”lng\“) AS \”mean_lng\“ FROM \”aqa\“.\”autogen\“.\”volker0003\“ WHERE time > now() - 2d AND \”id\“='volker0003' GROUP BY time(1h) FILL(none)”

Resultado:

{

  "results": [
      {
          "statement_id": 0,
          "series": [
              {
                  "name": "volker0003",
                  "columns": [
                      "time",
                      "mean_pm25",
                      "mean_lat",
                      "mean_lng"
                  ],
                  "values": [
                      [
                          "2018-02-08T01:00:00Z",
                          32.810810810810814,
                          6.23003500000003,
                          -75.59372200000033
                      ],
                      [
                          "2018-02-08T02:00:00Z",
                          39.39138240574506,
                          6.2300350000000355,
                          -75.59372199999997
                      ],
                      [
                          "2018-02-08T03:00:00Z",
                          44.475,
                          6.230035000000006,
                          -75.59372199999981
                      ],
                      [
                          "2018-02-08T12:00:00Z",
                          44.63776493256262,
                          6.229973177263945,
                          -75.59365955298587
                      ],
                      [
                          "2018-02-08T13:00:00Z",
                          40.78803418803419,
                          6.229972999999975,
                          -75.59365999999928
                      ],
                      [
                          "2018-02-08T14:00:00Z",
                          35.65263157894737,
                          6.229972999999975,
                          -75.59365999999929
                      ],
                      [
                          "2018-02-08T15:00:00Z",
                          37.39378238341969,
                          6.229972999999975,
                          -75.59365999999928
                      ],
                      [
                          "2018-02-08T16:00:00Z",
                          36.037996545768564,
                          6.229972999999975,
                          -75.59365999999928
                      ],
                      [
                          "2018-02-08T17:00:00Z",
                          34.48913043478261,
                          6.229972999999977,
                          -75.59365999999997
                      ],
                      [
                          "2018-02-09T01:00:00Z",
                          31.5,
                          6.235277875,
                          -75.59620662500001
                      ],
                      [
                          "2018-02-09T02:00:00Z",
                          33.726027397260275,
                          6.231224999999997,
                          -75.59451999999997
                      ],
                      [
                          "2018-02-09T05:00:00Z",
                          40.661904761904765,
                          6.231224999999996,
                          -75.5945200000002
                      ],
                      [
                          "2018-02-09T06:00:00Z",
                          43.7677304964539,
                          6.231224999999996,
                          -75.5945199999993
                      ],
                      [
                          "2018-02-09T07:00:00Z",
                          48.33516483516483,
                          6.231224999999996,
                          -75.59451999999932
                      ],
                      [
                          "2018-02-09T08:00:00Z",
                          47.556,
                          6.231224999999996,
                          -75.59452000000002
                      ],
                      [
                          "2018-02-09T12:00:00Z",
                          47.758389261744966,
                          6.2340287919462725,
                          -75.5977085536911
                      ],
                      [
                          "2018-02-09T13:00:00Z",
                          41.83815028901734,
                          6.231248396917137,
                          -75.59438644123256
                      ],
                      [
                          "2018-02-09T14:00:00Z",
                          36.49906890130354,
                          6.230007999999999,
                          -75.59363199999936
                      ],
                      [
                          "2018-02-09T15:00:00Z",
                          32.43396226415094,
                          6.230007999999999,
                          -75.5936319999994
                      ],
                      [
                          "2018-02-09T16:00:00Z",
                          29.077199281867145,
                          6.230007985637342,
                          -75.32220064631883
                      ],
                      [
                          "2018-02-09T17:00:00Z",
                          29.201149425287355,
                          6.230007999999999,
                          -75.59363200000006
                      ],
                      [
                          "2018-02-09T18:00:00Z",
                          31.894736842105264,
                          6.229805087719302,
                          -75.59358684210534
                      ],
                      [
                          "2018-02-09T21:00:00Z",
                          24.599348534201955,
                          6.230768218241036,
                          -75.59474654071653
                      ],
                      [
                          "2018-02-09T22:00:00Z",
                          26.60299625468165,
                          6.232801999999993,
                          -75.59700199999999
                      ],
                      [
                          "2018-02-09T23:00:00Z",
                          29.495049504950494,
                          6.232801999999995,
                          -75.59700200000019
                      ],
                      [
                          "2018-02-10T00:00:00Z",
                          31.612068965517242,
                          6.232801999999993,
                          -75.59700200000019
                      ]
                  ]
              }
          ]
      }
  ]

}

npm install -g create-react-app

create-react-app primermapa

cd primermapa

npm install

npm start

Comparación librerías de mapas en react → https://gist.github.com/stereobooster/13a26188d4ad5382bc6da9ffe76ce3e1

https://github.com/mariusandra/pigeon-maps
https://github.com/PaulLeCam/react-leaflet
https://github.com/tomchentw/react-google-maps
https://www.react-simple-maps.io/
http://map.reactd3.org/gallery/
https://uber.github.io/react-map-gl/#/
http://maptalks.org/examples/en/style/image-marker/#style_image-marker
http://map.reactd3.org/gallery/

npm install leaflet prop-types react react-dom react-leaflet

https://react-leaflet.js.org/docs/en/plugins.html
sidebar → https://github.com/Turbo87/sidebar-v2

Repositorio → https://github.com/unloquer/primermapa