====== 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:
{{:personas:brolin:proyectos:agentes_calidad_aire:2018-02-09-202825_1124x164_scrot.png?800 |}}

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

===== Mapas con react =====

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/\\
===== React Leaflet =====

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