Блог

Я изучаю mapbox js api / sdk.

Я создал карту с изохромным слоем, следуя руководству на сайте mapbox.

Я пытаюсь добавить слой для маркеров. Слой изохром появляется, но маркеры нет. Есть идеи, если что-то не так с моим addlayer ()?

 map.addLayer({
        'id:': 'hospitals',
        'type': 'symbol',
        'source': {
          'type': 'geojson',
          'data': hospitals
        },
        layout: {
          'icon-image': 'hospital-15',
          'icon-allow-overlap': true
        },
        paint: { }
      });
  

Вот мой json для больниц

     var hospitals = {
      type: 'FeatureCollection',
      features: [
    { type: 'Feature', properties: { Name: 'VA Medical Center -- Leestown Division', Address: '2250 Leestown Rd' }, geometry: { type: 'Point', coordinates: [-84.539487, 38.072916] } },
    { type: 'Feature', properties: { Name: 'St. Joseph East', Address: '150 N Eagle Creek Dr' }, geometry: { type: 'Point', coordinates: [-84.440434, 37.998757] } },
    { type: 'Feature', properties: { Name: 'Central Baptist Hospital', Address: '1740 Nicholasville Rd' }, geometry: { type: 'Point', coordinates: [-84.512283, 38.018918] } },
    { type: 'Feature', properties: { Name: 'VA Medical Center -- Cooper Dr Division', Address: '1101 Veterans Dr' }, geometry: { type: 'Point', coordinates: [-84.506483, 38.02972] } },
     ]
  };
  

Я добавляю слои в функцию загрузки карты.

     map.on('load', function() {
 
 
      // When the map loads, add the source and layer
     map.addSource('iso', {
        type: 'geojson',
        data: {
          "type": 'FeatureCollection',
          "features": []
        }
      });
     
    map.addLayer({
        'id': 'isoLayer',
        'type': 'fill',
        // Use "iso" as the data source for this layer
        'source': 'iso',
        'layout': {},
        'paint': {
          // The fill color for the layer is set to a light purple
          'fill-color': '#5a3fc0',
          'fill-opacity': 0.3
        }
      }, "poi-label");

   map.addLayer({
    'id:': 'hospitals',
    'type': 'symbol',
    'source': {
      'type': 'geojson',
      'data': hospitals
    },
    layout: {
      'icon-image': 'hospital-15',
      'icon-allow-overlap': true
    },
    paint: { }
  });

     // Make the API call
      getIso();
    });
  

icon-image Проблема может быть в вашем. Получил маркеры для отображения после этого примера.

 map.on('load', function(){
    map.loadImage(
      'https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png',
      function(error, image) {
      if (error) throw error;
      map.addImage('cat', image);
    });

    map.addLayer({
      'id': 'hospitals',
      'type': 'symbol',
      'source': {
        'type': 'geojson',
        'data': hospitals
      },
      'layout': {
        'icon-image': 'cat',
        'icon-size': 0.2,
      },
    });
  });