I am new in OpenLayers. I am trying to map my address location on map by pointing. So I have one input field on change of input field I will get latitude and longitude value and then I will store that value in two global variables that are globalvar(longitude), globalvar1(latitude) and access it in my OpenLayers JS file to point location on map.

I am getting value and it also changing on change my input field(suggestion box where I select address and selected address give me lat and log values).

But it is not reflecting on map. not sure but when I enter value in it works

geometry: new ol.geom.Point(ol.proj.fromLonLat([4.637777, 50.68728])),

When I enter variables it won't

geometry: new ol.geom.Point(ol.proj.fromLonLat([globalvar, globalvar1])),

This is my JavaScript code:

window.abc.prototype.geolocateMap = function(e) {
    ar map = new ol.Map({
        layers: [rasterLayer, vectorLayer],
        target: document.getElementById('map'),
        view: new ol.View({
          center: ol.proj.fromLonLat([2.896372, 44.60240]),
          zoom: 3
    var view = new ol.View({
        center: ol.proj.fromLonLat([0, 0]),
        maxZoom: 16,
        minZoom: 7,
        zoom: 7

    var geolocation = new ol.Geolocation({
        projection: view.getProjection()

    var city= new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([4.637777, 50.68728])),
        name: 'city'
    city.setStyle(new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
            crossOrigin: 'anonymous',
            src: '../../img/abc.png'

    var element = document.getElementById('popup');

    var popup = new ol.Overlay({
        element: element,
        positioning: 'bottom-center',
        stopEvent: false,
        offset: [0, 0]

    // display popup on click
    map.on('click', function(evt) {
        var feature = map.forEachFeatureAtPixel(evt.pixel,
            function(feature) {
            return feature;
        if (feature) {
            var coordinates = feature.getGeometry().getCoordinates();
                'placement': 'top',
                'html': true,
                'content': feature.get('name')
        } else {

    new ol.layer.Vector({
        map: map,
        source: new ol.source.Vector({
            features: [city]

What I found id values are coming but when input get changed the map geom.point method is not loading again.

I am loading my map in idex file like this:

<script>new abc('map',{})</script>

Your Answer

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

Browse other questions tagged or ask your own question.