Plot icon on map, based on user's input in Openlayers 3

Question

We upgrading our app with the recent Openlayers 3 maps. And it seems OL 3 use completely different approach in comparisons what they've used in OL 2. Not very good in JS.

We want that user be able to input coordinates (lon, lat) into text fields, press the button and the icon appear on the map. And vice versa - when user click (single click) on the map, these coordinates (lon, lat) should popup on these text fields, to be able save and update it into the DB in the future.

So far I was able to display the map, icon appear on user's click, and completely stuck on how to get coordinates and display them into the text fields. And can't figure out how to make user type in coordinates and get the icon on that location. Here is my code so far:

html

  <div id="map" tabindex="0"></div>
<div id="txt">Click to add a marker!</div>
 <form>Lon:<input type="text" id="lon" name="lon">
  <br>Lat:<input type="text" id="lat" name="lat">
  <input type="button" id="get" onlclick = "getLocation" value="plot icon"></form>

And here is JS:

    var vectorSource = new ol.source.Vector(),
    vectorLayer = new ol.layer.Vector({
      source: vectorSource
    }),
    olview = new ol.View({
        center: [0, 0],
        zoom: 4,
        minZoom: 2,
        maxZoom: 20
    }),
    map = new ol.Map({
        target: document.getElementById('map'),
        view: olview,
        layers: [
            new ol.layer.Tile({
                style: 'Aerial',
                source: new ol.source.MapQuest({ layer: 'osm' })
            }),
            vectorLayer
        ]
    });


var iconStyle = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        src: '//openlayers.org/en/v3.8.2/examples/data/icon.png'
    }),
    text: new ol.style.Text({
        font: '12px Calibri,sans-serif',
        fill: new ol.style.Fill({ color: '#000' }),
        stroke: new ol.style.Stroke({
            color: '#fff', width: 2
        }),
        text: 'lon and lat'
    })
});


map.on('click', function(evt){
    var feature = new ol.Feature(
        new ol.geom.Point(evt.coordinate)
    );
    feature.setStyle(iconStyle);
    vectorSource.clear();
    vectorSource.addFeature(feature);
    getLocation();
});
function getLocation() {
alert('how to get lon and lat ?!?'); }

score 2 · Accepted Answer · edited May 23 '17 at 11:44

You can get the coordinates from a click by calling

evt.coordinate

or

map.getEventCoordinate(evt.originalEvent);

So in your case it would look like:

map.on('click', function(evt) {
  var coordinate1 = evt.coordinate;
  var coordinate2 = map.getEventCoordinate(evt.originalEvent);
  getLocation(coordinate1);
  getLocation(coordinate2);
});

function getLocation(coordinate) {
alert(coordinate);
}

To add a marker to a certain point you can follow this example: how to add markers with OpenLayers 3 (jsfiddle)

Where

ol.geom.Point(ol.proj.transform([Math.random()*360-180, Math.random()*180-90], 'EPSG:4326',   'EPSG:3857')),

would be your desired coordinates e.g.

ol.geom.Point(ol.proj.transform([0.5, 46], 'EPSG:4326',   'EPSG:3857')),

score 0 · Answer 2 · answered Mar 26 '18 at 04:07

0

 map.on('click', function (evt) {


    var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:4326', 'EPSG:3857');
    var lon = lonlat[0];
    var lat = lonlat[1];}

for getting long and lat you can change EPSG according to your need

answered Mar 26 '18 at 04:07

Danish Shaikh

161
1
5

Plot icon on map, based on user's input in Openlayers 3

2 Answers2