CODEWITHSUNDEEP
javascriptopenlayers
Axarow
Axarow

Reputation: 11

OpenLayers recentred javascript

I have a problem using the OpenLayers map API, I would like to change the location where the map is centered when the user enters a given the problem is that I don't know how to do this. I would need what allows to change the position on which the card is placed My code:

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
        source: new ol.source.OSM()
        })
    ],
    view: new ol.View({

    center: ol.proj.fromLonLat([0, 50]),
    zoom: 0
     })
    
});

  
function getIp() 
{
    ip_adress_write = document.getElementById("ip_result");
    location_write = document.getElementById("location_result");
    timezone_write = document.getElementById("timezone_result");
    isp_write = document.getElementById("isp_result");
    IpValue = document.getElementById("ip_get").value;
    

    
    //Pour faire une requette et récupérer les données (en json)
    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {
    if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
        var response = JSON.parse(this.responseText);
        console.log(response);
        //ecrire dans le documenent les données 
        location_write.innerHTML = (response.country + "<br>" + response.city);
        ip_adress_write.innerHTML = (response.query); 
        timezone_write.innerHTML = (response.timezone);
        isp_write.innerHTML = (response.as);
        var longitude = (response.lon);
        var latitude = (response.lat);
        

    }
    };
    request.open('GET', 'http://ip-api.com/json/' + IpValue, true);
    request.send();    
}


console.log(longitude, latitude);

Upvotes: 0

Views: 37

Answers (1)

Mike
Mike

Reputation: 17962

You should set the center when the response is received. You may also want to zoom in:

if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
    var response = JSON.parse(this.responseText);
    console.log(response);
    //ecrire dans le documenent les données 
    location_write.innerHTML = (response.country + "<br>" + response.city);
    ip_adress_write.innerHTML = (response.query); 
    timezone_write.innerHTML = (response.timezone);
    isp_write.innerHTML = (response.as);
    var longitude = (response.lon);
    var latitude = (response.lat);
    map.getView().setCenter(ol.proj.fromLonLat([longitude, latitude]));
    map.getView().setZoom(10);
}

Upvotes: 1

Related Questions