leaflet-extras / leaflet-map

Leaflet map as web component
https://leaflet-extras.github.io/leaflet-map
116 stars 72 forks source link

Popups when using GeoJSON #71

Open fils opened 8 years ago

fils commented 8 years ago

I am working with GeoJSON fine via the component

   <leaflet-map latitude="16.5" longitude="-80" zoom="5">    
        <leaflet-tilelayer url="https://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}" max-zoom="13">
           Tiles &copy; Esri &mdash; Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri
        </leaflet-tilelayer>

        <template is="dom-bind">
            <iron-ajax url="http://localhost:6789/api/v1/spatial/expedition/165" auto last-response="{{data}}"></iron-ajax>
            <leaflet-geojson color="#FF0000" data="[[data]]"></leaflet-geojson>
        </template>
    </leaflet-map>

Is there some property I can put into the GeoJSON that will form a popup when the marker is selected in the map?

The GeoJSON is

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "MultiPoint",
        "coordinates": [
          [
            -79.8674,
            16.5537
          ],
          [
            -79.8674,
            16.5536
          ],
          [
            -74.9105,
            15.7571
          ],
          [
            -74.9104,
            15.757
          ],
          [
            -65.1696,
            10.7061
          ],
          [
            -65.1696,
            10.7061
          ],
          [
            -65.1694,
            10.7061
          ],
          [
            -65.1693,
            10.7061
          ],
          [
            -65.1693,
            10.7061
          ],
          [
            -82.9361,
            19.4896
          ],
          [
            -82.936,
            19.4898
          ],
          [
            -78.7393,
            12.744
          ],
          [
            -78.7403,
            12.7433
          ]
        ]
      },
      "properties": {
        "Site": "ODP expedition 165",
        "URL": "http://opencoredata.org/id/expedition/165",
        "popupContent": "http://opencoredata.org/id/expedition/165"
      }
    }
  ]
}
rbandegibksv commented 8 years ago

this.getElementById(<ID of your GEOJSON Layer>).feature.on("click",eventHandler);