[GIS] Showing KML data point info as popup in Leaflet

kmlleaflet

I'm new in Leaflet.

I'm using Leaflet as my base map. I have a lot of points as a KML file. I used GeoJSON & omnivore.kml(…) to load my KML file. Every thing is ok and it loads perfectly.

My Script to load KML file is: 

var map = L.cedarmaps.map('map', tileJSONUrl, {
        scrollWheelZoom: true,
        zoomControl: false,
        minZoom: 7,
        maxZoom: 17,
        contextmenu: true,
        contextmenuWidth: 230,
        locateControl: true,
        contextmenuItems: [
            {
                text: 'KML Loaded Map',
                callback: function(latlngObj, layerPoint, containerPoint) {
                    alert('You have clicked on: '+ latlngObj.latlng);
                }.bind(this)
            }
        ]
    }).setView([39.944893, 32.857753], 7);

 trackfilename_old="http://mydomain.com/attach_files/kml/my_test.kml";

 var oldIcon = L.icon({
     iconUrl: 'http://mydomain.com/icn/location_blue_icon.png',
     iconSize:     [30, 48],
     iconAnchor:   [12, 55], 
     popupAnchor:  [-3, -76] 

 });

var customLayerOld = L.geoJson(null, {

   pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: oldIcon});
    }
});

var runLayerOld = omnivore.kml(trackfilename_old, null, customLayerOld)
    .on('ready', function() {
     map.fitBounds(runLayerOld.getBounds());
        if (layer instanceof L.Marker) {
        layer.setIcon(oldIcon);
    }
    })
    .addTo(map);

Now, I want to show a popup when user clicks on each data point and read some info (Lat, Long, Alt, Name) from KML file and show to user.

I use KML file add below:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
    <name>ANK.kml</name>
    <Style id="s_ylw-pushpin">
        <IconStyle>
            <scale>1.1</scale>
            <Icon>
                <href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
            </Icon>
            <hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
        </IconStyle>
    </Style>
    <StyleMap id="m_ylw-pushpin">
        <Pair>
            <key>normal</key>
            <styleUrl>#s_ylw-pushpin</styleUrl>
        </Pair>
        <Pair>
            <key>highlight</key>
            <styleUrl>#s_ylw-pushpin_hl</styleUrl>
        </Pair>
    </StyleMap>
    <Style id="s_ylw-pushpin_hl">
        <IconStyle>
            <scale>1.3</scale>
            <Icon>
                <href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
            </Icon>
            <hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
        </IconStyle>
    </Style>
    <Folder>
        <name>ANK</name>
        <open>1</open>
        <Placemark>
            <name>Ank_1</name>
            <LookAt>
                <longitude>32.86942647853363</longitude>
                <latitude>39.92630256734498</latitude>
                <altitude>0</altitude>
                <heading>-4.479240497639318</heading>
                <tilt>4.232329499114298</tilt>
                <range>11792.58028663931</range>
                <gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode>
            </LookAt>
            <styleUrl>#m_ylw-pushpin</styleUrl>
            <Point>
                <gx:drawOrder>1</gx:drawOrder>
                <coordinates>32.86798741024662,39.94797667773256,0</coordinates>
            </Point>
        </Placemark>
        <Placemark>
            <name>Ank_2</name>
            <LookAt>
                <longitude>32.8694203274871</longitude>
                <latitude>39.92636237233789</latitude>
                <altitude>0</altitude>
                <heading>-4.479244877828945</heading>
                <tilt>4.232389489836512</tilt>
                <range>11883.01875115117</range>
                <gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode>
            </LookAt>
            <styleUrl>#m_ylw-pushpin</styleUrl>
            <Point>
                <gx:drawOrder>1</gx:drawOrder>
                <coordinates>32.87469557980627,39.93699423873866,0</coordinates>
            </Point>
        </Placemark>
        <Placemark>
            <name>Ank_3</name>
            <LookAt>
                <longitude>32.8694203274871</longitude>
                <latitude>39.92636237233789</latitude>
                <altitude>0</altitude>
                <heading>-4.479244877828945</heading>
                <tilt>4.232389489836512</tilt>
                <range>11883.01875115117</range>
                <gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode>
            </LookAt>
            <styleUrl>#m_ylw-pushpin</styleUrl>
            <Point>
                <gx:drawOrder>1</gx:drawOrder>
                <coordinates>32.86337727731056,39.93707957846002,0</coordinates>
            </Point>
        </Placemark>
    </Folder>
</Document>
</kml>

How can I solve the issue?

Best Answer

Just bind popup to marker in pointToLayer method of customLayerOld layer:

var customLayerOld = L.geoJson(null, {
   pointToLayer: function (feature, latlng) {
     return L.marker(latlng, {icon: oldIcon}).bindPopup(feature.properties.name + '<br>lon: ' + feature.geometry.coordinates[0] + '<br>lat: ' + feature.geometry.coordinates[1]);
   }
});
Related Question