Show markers on the map for each existing places

[tboychuk]

• create map new layer that will contains all markers.
• load places from the database using new endpoint created in #13.
• create marker for each place and show it on the map.
• configure app to load and show new markers when map position is changed

[tboychuk]

Blocked by back-end, ticket #13

[tboychuk]

You can use some JavaScript mocks to show real places on the map:

const placeList = [{
            "name": "Сивуля Мала",
            "altitude": 1815,
            "location": {"type": "Point", "coordinates": [24.129341868695505, 48.54517608528801]}
        },
            {
                "name": "Сивуля Велика",
                "altitude": 1836,
                "location": {"type": "Point", "coordinates": [24.11940784912607, 48.54923298198662]}
            },
            {
                "name": "Боревка",
                "altitude": 1695,
                "location": {"type": "Point", "coordinates": [24.103815880571133, 48.56281089278543]}
            },
            {
                "name": "Лопушна",
                "altitude": 1722,
                "location": {"type": "Point", "coordinates": [24.11420893925076, 48.55423748094368]}
            }];

[tboychuk]

Having place JSON, you can create a Marker:

var latlng = L.latLng(place.location.coordinates);
var marker = L.marker([latlng.lng, latlng.lat]);

[tboychuk]

We're gonna use a react-map-gl library built by engineers from Uber.