Как создать маркеры для моих точек в mapbox? - PullRequest
Новая
       37

Как создать маркеры для моих точек в mapbox?

0 голосов
/ 04 апреля 2020

У меня есть набор данных с разными точками на карте, который хранится на GitHub как Geo JSON. Я хотел бы назначить всплывающие окна для каждой точки этого набора данных, которые будут отображать некоторые из его атрибутов данных при нажатии. Мне удалось скопировать код из учебников Mapbox, но я не знаю, как связать мои точки из файла Geo JSON с маркерами.

Вот мой код: 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
      .marker {
  background-image: url(https://placekitten.com/g/);
  background-size: cover;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}

.mapboxgl-popup {
  max-width: 200px;
}

.mapboxgl-popup-content {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}
    </style>
</head>
<body>

<div id='map'></div>

<script>

mapboxgl.accessToken = 'pk.eyJ1IjoiamFua29tYWciLCJhIjoiY2ozNmNhMXQyMDQ4czMybzl6YTN2cDM0ciJ9.naD_i9iNOl_CEZ3WkY8Nvg';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v10',
  center: [-96, 37.8],
  zoom: 3
});

map.addSource('worldcities_points', {
  type: 'geojson',
  data: 'https://github.com/jankomag/worldcitiespopchange/blob/master/readycities_geojson.geojson'
});

// add markers to map
geojson.features.forEach(function(marker) {

  // create a HTML element for each feature
  var el = document.createElement('div');
    el.className = 'marker';
    el.style.backgroundImage = 'url(https://placekitten.com/g/' + marker.properties.iconSize.join('/') + '/)';
    el.style.width = marker.properties.iconSize[0] + 'px';
    el.style.height = marker.properties.iconSize[1] + 'px';

    el.addEventListener('click', function() {
        window.alert(marker.properties.message);
    });
  // make a marker for each feature and add to the map
  new mapboxgl.Marker(el)
    .setLngLat(marker.geometry.coordinates)
    .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
      .setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
    .addTo(map);
});

</script>

</body>
</html>

1 Ответ

0 голосов
/ 06 апреля 2020

Прежде всего, я бы порекомендовал вам не передавать свой токен доступа. Другие могут использовать его, и вам будет выставлен счет. Поскольку вы уже поделились им, вероятно, неплохо бы отключить его.

У меня есть несколько комментариев к вашему коду:

  • Вы добавляете источник. Чтобы отобразить его на карте, вам необходимо создать для него слой и добавить его на карту.

map.addSource ('worldcities_points', {type: 'geo json ', данные:' https://github.com/jankomag/worldcitiespopchange/blob/master/readycities_geojson.geojson '});

-> Чтобы добавить его в качестве слоя: 

        // Add a layer showing the places.
        map.addLayer({
            'id': 'worldcities_points',
            'type': 'symbol',
            'source': 'worldcities_points',
            'layout': {
                'icon-image': '{icon}-15',
                'icon-allow-overlap': true
            }
        });

Вы можете попытаться добавить всплывающие окна на карту после того, как вы создали их для своих объектов: 

        // Create a popup, but don't add it to the map yet.
        var popup = new mapboxgl.Popup({
            closeButton: false,
            closeOnClick: false
        });

        // Open the popup when mouse hover over the position of the object
        map.on('mouseenter', 'places', function(e) {
            // Change the cursor style as a UI indicator.
            map.getCanvas().style.cursor = 'pointer';

            var coordinates = e.features[0].geometry.coordinates.slice();
            var description = e.features[0].properties.description;// assuming your source geoJSON  contains properties.descriptions

            // Ensure that if the map is zoomed out such that multiple
            // copies of the feature are visible, the popup appears
            // over the copy being pointed to.
            while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
                coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
            }

            // Populate the popup and set its coordinates
            // based on the feature found.
            popup
                .setLngLat(coordinates)
                .setHTML(description)
                .addTo(map);
        });

        // remove the popup when the mouse leaves the position of the object
        map.on('mouseleave', 'places', function() {
            map.getCanvas().style.cursor = '';
            popup.remove();
        });

Это должно заставить вас всплывающие окна! Дайте мне знать, если у вас есть вопросы!

...