1

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?

  • Welcome to gis.SE! If you haven't taken the tour, please do so. Please share your Javascript code and what you have tried so far to solve this yourself. – Stefan Dec 22 '18 at 11:06
  • Please be sure to format code so it is legible by indenting the entire code segment with four leading spaces. You can highlight and press the {} button for this. Please be sure to state the problem you are encountering. – Vince Dec 22 '18 at 12:40
1

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]);
   }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.