leaflet-map
leaflet-map copied to clipboard
Popups when using GeoJSON
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 © Esri — 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"
}
}
]
}
this.getElementById(<ID of your GEOJSON Layer>).feature.on("click",eventHandler);