OL3 - OSM Reverse

by Jonatas Walker

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/ol3/3.10.1/ol.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ol3/3.10.1/ol.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/reqwest/2.0.5/reqwest.min.js"></script>
<div id="map"></div>
<div id="msg">Click to get an address.</div>

CSS

html,body,#map { width:100%; height:100%; margin:0; }
#map {
    position: absolute;
    z-index: 5;
}
#msg{
    position: absolute;
    z-index: 10;
    left: 50%;
    transform: translate(-50%, 5px);
    background-color: rgba(40,40,40,.8);
    padding: 10px;
    color: #eee;
    width: 350px;
    text-align: center;
}

JavaScript

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector()
});
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    vectorLayer
  ],
  view: new ol.View({
    center: [-5685003.99, -3504484.87],
    zoom: 11
  })
});

var icon = new ol.style.Style({
  image: new ol.style.Icon({
    anchor: [0.5, 1],
    src: '//openlayers.org/en/v3.10.0/examples/data/icon.png'
  })
});
var msg_el = document.getElementById('msg');

map.on('click', function(evt){
	var coord = to4326(evt.coordinate);
	msg_el.innerHTML = 'Searching ...';
  createFeature(evt.coordinate);
  reqwest({
      url: 'https://nominatim.openstreetmap.org/reverse?',
      method: 'get',
      crossOrigin: true,
      type: 'json',
      data: {
          format: 'json',
          lat: coord[1],
          lon: coord[0],
          addressdetails: 1,
          'accept-language': 'pt-BR',
          zoom: 18
      }
  }).then(function (response) {
		console.info(response);
    msg_el.innerHTML = response.display_name;
  }).fail(function (err, msg) {
      console.info(err, msg);
  });
});

var to4326 = function(coord){
  return ol.proj.transform(
    [parseFloat(coord[0]), parseFloat(coord[1])],
    'EPSG:3857', 'EPSG:4326'
  );
};
function createFeature(coord) {
  var feature = new ol.Feature(new ol.geom.Point(coord));
  feature.setStyle(icon);
  vectorLayer.getSource().addFeature(feature);
}