0

Everything seems to be working good until I select from the list of names. The map isn't centering on the proper coordinates. I'm using JQuery UI and and OpenLayers 3. here's my code:

$(function () {
    function log(message) {
        $("<div/>").text(message).prependTo("#log");
        $("#log").scrollTop(0);
    }
    var centerCoords;
    $("#city").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "http://ws.geonames.org/searchJSON?username=XXXX",
                dataType: "jsonp",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: request.term
                },
                beforeSend: function () {
                    $('.input-group-addon').html("<i class='fa fa-spinner'></i>");
                },
                success: function (data) {
                    response($.map(data.geonames, function (item) {
                        return {
                            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryCode,
                            value: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryCode,
                            lat: item.lat,
                            lng: item.lng
                        };
                    }));
                    $('.input-group-addon').html("<i class='fa fa-search'></i>");
                }
            });
        },
        minLength: 2,
        select: function (event, ui) {
            log(ui.item ?
                    "Selected: " + ui.item.label :
                    "Nothing selected, input was " + this.value);
            var location = ol.proj.transform([ui.item.lng, ui.item.lat], 'EPSG:4326', 'EPSG:3857');
            console.log(location);

            var a = map.getView();
            a.setCenter(location);
            a.setZoom(14);

            var marker = new ol.Feature({
                geometry: new ol.geom.Point(location)
            });
            var vectorSource3 = new ol.source.Vector({
                features: [marker]
            });
            vectorSource3.addFeature(marker);

            var vectorlayer3 = new ol.layer.Vector({
                source: vectorSource3
            });

            var iconStyle = new ol.style.Style({
                image: new ol.style.Icon({
                    anchor: [0.5, 46],
                    opacity: 0.75,
                    scale: 0.10,
                    anchorXUnits: 'fraction', 
                    anchorYUnits: 'pixels',
                    src: "../images/flag.png"
                })
            });
            marker.setStyle(iconStyle);
            map.addLayer(vectorlayer3);

        },
        open: function () {
            $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            $(".ui-autocomplete").css("z-index", 1000);
        },
        close: function () {
            $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
        }

    });
});
1

Got it:

var vectorSource3;
   $("#city").keypress(function (e) {
       var code = (e.keyCode ? e.keyCode : e.which);
       if (code == 13) { //Enter keycode
          return false;
    }
});

$(function () {
    function log(message) {
        $("<div/>").text(message).prependTo("#log");
        $("#log").scrollTop(0);
    }
    $("#city").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "http://ws.geonames.org/searchJSON?username=XXXX",
                dataType: "jsonp",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: request.term
                },
                beforeSend: function () {
                    $('.input-group-addon').html("<i class='fa fa-spinner'></i>");
                },
                success: function (data) {
                    response($.map(data.geonames, function (item) {
                        return {
                            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryCode,
                            value: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryCode,
                            lat: item.lat,
                            lng: item.lng
                        };
                    }));
                    $('.input-group-addon').html("<i class='fa fa-search'></i>");
                }
            });
        },
        minLength: 2,
        open: function (event) {
            $(".input-group").css("z-index", 1000);

        },
        close: function () {
            $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            $("#city").val('');
            $("#city").html('');
        },
        select: function (event, ui) {
           map.removeLayer(vectorlayer3);
            log(ui.item ?
                    "Selected: " + ui.item.label :
                    "Nothing selected, input was " + this.value);
            var lat = parseFloat(ui.item.lat);
            var lng = parseFloat(ui.item.lng);
            var booH = ol.proj.fromLonLat([lng, lat]);
            var a = map.getView();
            a.setCenter(booH);
            a.setZoom(11);
            var flag = new ol.Feature({
                geometry: new ol.geom.Point(booH)
            });
            vectorSource3 = new ol.source.Vector({
                features: flag
            });
            var vectorlayer3 = new ol.layer.Vector({
                source: vectorSource3,
                style: iconStyle
            });
            var iconStyle = new ol.style.Style({
                image: new ol.style.Icon({
                    anchor: [0.5, 20],
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'pixels',
                    opacity: 0.75,
                    src: "../images/geolocation_marker.png"
                })
            });
            flag.setStyle(iconStyle);
            vectorSource3.addFeature(flag);
            map.addLayer(vectorlayer3);
        }
    });
});

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.