Exibindo propriedades de GeoJSON em popup no Leaflet?

9

Este é o meu GeoJSON simples com mapa de folhetos. Quero exibir propriedades como pop-up, mas não sei por que está vazio.

Você pode me dizer meu erro?

<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<style>
#map {
width: 960px;
height: 500px;
}
</style>
</head>

<body>
<div id="map"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
    var map = L.map('map',{
    center: [49.833352, 18.163662],
    zoom: 10
    });
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var data ={
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [
              23.4850463378073,
              46.7440954850672
            ]
          },
          "properties": {
            "f1": 11793,
            "f2": "BT"
          }
        }
      ]
    };

var layer = L.geoJson(data, {
}).addTo(map);
layer.bindPopup('<h1>'+feature.properties.f1+'</h1><p>name: '+feature.properties.f2+'</p>');
</script>
</body>
</html>

— Alex
fonte

18

A linha em que você cria e vincula seu pop-up deve ter sido incluída na onEachFeatureopção da sua L.geoJSONfábrica.

var layerGroup = L.geoJSON(data, {
  onEachFeature: function (feature, layer) {
    layer.bindPopup('<h1>'+feature.properties.f1+'</h1><p>name: '+feature.properties.f2+'</p>');
  }
}).addTo(map);

Demonstração: http://playground-leaflet.rhcloud.com/wuseg/1/edit?html,output

Ter essa linha fora da fábrica permite acessar sua layervariável de escopo externo , que na verdade é o GeoJSON Layer Group que contém todos os recursos dos seus dados GeoJSON; portanto, ele tenta vincular um pop-up em cada um desses recursos (no seu caso, há apenas 1 marcador, mas poderia ser mais).

Acima de tudo, ele não conhece nenhuma featurevariável, o que cria um erro.

— ghybs
fonte

3

Crie um conteúdo pop-up simples para todas as propriedades de uma maneira simples, em uma linha:

var layer = L.geoJSON(data, {
 onEachFeature: function (f, l) {
   l.bindPopup('<pre>'+JSON.stringify(f.properties,null,' ').replace(/[\{\}"]/g,'')+'</pre>');
 }
}).addTo(map);

— stefcud
fonte

0

Você pode usar os códigos abaixo:

function onEachFeature(feature, layer) {
    // does this feature have a property named popupContent?
    if (feature.properties && feature.properties.Name && feature.properties.Lat && feature.properties.Lon) {
        layer.bindPopup(feature.properties.Name+"("+feature.properties.Lat+","+feature.properties.Lon+")",);
    }
}
/// for Show in map marker style and popup
    L.geoJSON(geojsonFeature, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions);
    }, 
    onEachFeature: onEachFeature

}).addTo(map);

— Abrar Rubaiyat Islam
fonte

Como essa resposta também é publicada como uma pergunta: gis.stackexchange.com/questions/354704/… ?

— TomazicM 21/03

Eu fiz essa parte. meu valor de atributo agora está sendo exibido com base no clique. Mas agora eu quero usar isso como etiqueta. É por isso que eu fiz a pergunta. Estou achando difícil criar rótulo de dados geojson no folheto.

— M. Abrar Rubaiyat Islam