leaflet.list.marker.html

﻿<!doctype html>
<html>

<head>
    <title>Leaflet List Markers GeoJSON</title>
    <link rel="stylesheet" href="assets/leaflet-0.7.3/leaflet.css">
    <link rel="stylesheet" href="assets/leaflet.list-markers/leaflet.list-markers.css">

    <style type="text/css">
        html,
        body,
        #map {
            margin: 0px;
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="map"></div>

    <script src="assets/jquery-1.11.1.min.js"></script>
    <script src="assets/leaflet-0.7.3/leaflet.js"></script>
    <script src="assets/leaflet.list-markers/leaflet.list-markers.js"></script>

    <script>
        var map = L.map('map', {
            center: [50.0669, 35.1638],
            zoom: 15
        });

        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
			attribution: '&copy; Map Data <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
		
		
   var Markerlayer = L.geoJson(null, {
        pointToLayer: function(feature, latlng) {
            marker = L.marker(latlng, {});
            marker.options['title'] = feature.properties['uname']; // ADDED
            return marker;

        },
        onEachFeature: function(feature, layerinfo) {
            if (feature.properties) {
                var content = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Id</th><td>" + feature.properties.gid + "</td></tr>" + "<tr><th>Name</th><td>" + feature.properties.uname + "<table>";

                layerinfo.bindPopup(content, {
                    closeButton: true
                });
            }
        }
    });		
		
        $.getJSON("http://localhost:8080/geoserver/krasnokutsk/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=krasnokutsk:usptemp&maxFeatures=50&outputFormat=application/json", function(data) {
            Markerlayer.addData(data);
        });
        Markerlayer.addTo(map);

        var list = new L.Control.ListMarkers({
            layer: Markerlayer,
            label: 'title',
            itemIcon: L.Icon.Default.imagePath + '/marker-icon.png',
            maxZoom: 18
        });

        list.on('item-mouseover', function(e) {
            e.layer.setIcon(L.icon({
                iconUrl: 'assets/select-marker.png'
            }))
        }).on('item-mouseout', function(e) {
            e.layer.setIcon(L.icon({
                iconUrl: L.Icon.Default.imagePath + '/marker-icon.png'
            }))
        });


        map.addControl(list);
		
		
    </script>

</body>

</html>