title: how to integrate "Search Nominatim control " library and openlayers "measure" example for geocoding and measure area simultaneous
body: <p>I have a code from the openlayers library and example for measuring the length and area on the map.I also have a code from the Nominatim library for &quot;Search Nominatim control&quot; and Geocoding on the map.I put these code together.Each code works fine, but it does not work when it comes together.The bug is here, after two clicks, no longer a point to measure the length or area is selected.Please advise which section to correct or change.
  Is there a simpler way to do this?
  Thanks</p>
  <p><strong>first code for geocoding:</strong></p>
  <pre class="lang-html prettyprint-override"><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;!----------------------------------------------------------
      
          Copyright (c) 2017-2018 Jean-Marc VIGLINO,
          released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
      
      ------------------------------------------------------------&gt;
          &lt;title&gt;ol-ext: Search Nominatim control&lt;/title&gt;
          &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
      
          &lt;meta name=&quot;description&quot; content=&quot;Control to add a grid reference to a map.&quot; /&gt;
          &lt;meta name=&quot;keywords&quot; content=&quot;ol3, control, search, BAN, french, places, autocomplete&quot; /&gt;
      
          &lt;!-- FontAwesome --&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css&quot;&gt;
      
          &lt;!-- jQuery --&gt;
          &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.jquery.com/jquery-1.11.0.min.js&quot;&gt;&lt;/script&gt;
          &lt;!-- IE 9 bug on ajax tranport  --&gt;
          &lt;!--[if lte IE 9]&gt;
          &lt;script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.3/jquery.xdomainrequest.min.js'&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
      
          &lt;!-- Openlayers --&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;https://openlayers.org/en/latest/css/ol.css&quot; /&gt;
          &lt;script type=&quot;text/javascript&quot; src=&quot;https://openlayers.org/en/latest/build/ol.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign&quot;&gt;&lt;/script&gt;
          
          &lt;!-- ol-ext --&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;http://viglino.github.io/ol-ext/dist/ol-ext.css&quot; /&gt;
          &lt;script type=&quot;text/javascript&quot; src=&quot;http://viglino.github.io/ol-ext/dist/ol-ext.js&quot;&gt;&lt;/script&gt;
          
          &lt;link rel=&quot;stylesheet&quot; href=&quot;../style.css&quot;/&gt;
          &lt;style&gt;
              .ol-search ul {
                  color: #333;
                  font-size:0.85em;
                  max-width: 21em;
              }
              .ol-search ul i {
                  display: block;
                  color: #333;
                  font-size:0.85em;
              }
              .info {
                  display: inline-block;
                  width: 100%;
              }
              .info a img {
                  height: 100px;
                  margin-right: .5em;
                  float: left;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body &gt;
          
      
          &lt;!-- DIV pour la carte --&gt;
          &lt;div id=&quot;map&quot; style=&quot;width:50%; height:50%;&quot;&gt;&lt;/div&gt;
      
          &lt;div class=&quot;options&quot;&gt;
              &lt;label&gt;
                  &lt;input id=&quot;polygon&quot; type=&quot;checkbox&quot; onclick=&quot;search.set('polygon', $(this).prop('checked')); search.search();&quot; /&gt; 
                  extract polygons&lt;br/&gt;(may slow down requests)
              &lt;/label&gt;
              &lt;br/&gt;
              &lt;i&gt;Use the search control to start a new search.&lt;/i&gt;
          &lt;/div&gt;
          
          &lt;script type=&quot;text/javascript&quot;&gt;
          // Layers
          var layers = [ new ol.layer.Tile({ source: new ol.source.OSM() }) ];
      
          // The map
          var map = new ol.Map
              ({  target: 'map',
                  view: new ol.View
                  ({  zoom: 5,
                      center: ol.proj.fromLonLat([51.39, 35.70])
                  }),
                  interactions: ol.interaction.defaults({ altShiftDragRotate:false, pinchRotate:false }),
                  layers: layers
              });
      
          // Current selection
          var sLayer = new ol.layer.Vector({
              source: new ol.source.Vector(),
              style: new ol.style.Style({
                  image: new ol.style.Circle({
                      radius: 5,
                      stroke: new ol.style.Stroke ({
                          color: 'rgb(255,165,0)',
                          width: 3
                      }),
                      fill: new ol.style.Fill({
                          color: 'rgba(255,165,0,.3)'
                      })
                  }),
                  stroke: new ol.style.Stroke ({
                      color: 'rgb(255,165,0)',
                      width: 3
                  }),
                  fill: new ol.style.Fill({
                      color: 'rgba(255,165,0,.3)'
                  })
              })
          });
          map.addLayer(sLayer);
      
          // Set the search control 
          var search = new ol.control.SearchNominatim (
              {   //target: $(&quot;.options&quot;).get(0),
                  polygon: $(&quot;#polygon&quot;).prop(&quot;checked&quot;),
                  position: true  // Search, with priority to geo position
              });
          map.addControl (search);
      
          // Select feature when click on the reference index
          search.on('select', function(e)
              {   // console.log(e);
                  sLayer.getSource().clear();
                  // Check if we get a geojson to describe the search
                  if (e.search.geojson) {
                      var format = new ol.format.GeoJSON();
                      var f = format.readFeature(e.search.geojson, { dataProjection: &quot;EPSG:4326&quot;, featureProjection: map.getView().getProjection() });
                      sLayer.getSource().addFeature(f);
                      var view = map.getView();
                      var resolution = view.getResolutionForExtent(f.getGeometry().getExtent(), map.getSize());
                      var zoom = view.getZoomForResolution(resolution);
                      var center = ol.extent.getCenter(f.getGeometry().getExtent());
                      // redraw before zoom
                      setTimeout(function(){
                              view.animate({
                              center: center,
                              zoom: Math.min (zoom, 16)
                          });
                      }, 100);
                  }
                  else {
                      map.getView().animate({
                          center:e.coordinate,
                          zoom: Math.max (map.getView().getZoom(),16)
                      });
                  }
              });
      
          &lt;/script&gt;
          
      &lt;/body&gt;
      &lt;/html&gt;
  
  **second code for measure area:**
  
    see openlayers example &quot;measure&quot;
  
  **Both the code together:**
  
      &lt;!DOCTYPE html&gt;
      &lt;html&gt;
        &lt;head&gt;
          &lt;title&gt;Measure&lt;/title&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;https://openlayers.org/en/v4.6.5/css/ol.css&quot; type=&quot;text/css&quot;&gt;
          &lt;!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --&gt;
          &lt;script src=&quot;https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;https://openlayers.org/en/v4.6.5/build/ol.js&quot;&gt;&lt;/script&gt;
          &lt;!---------------------------------------
          -----------------------------------------
          -----------------------------------------
          --&gt;
          &lt;!-- FontAwesome --&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css&quot;&gt;
      
          &lt;!-- jQuery --&gt;
          &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.jquery.com/jquery-1.11.0.min.js&quot;&gt;&lt;/script&gt;
          &lt;!-- IE 9 bug on ajax tranport  --&gt;
          &lt;!--[if lte IE 9]&gt;
          &lt;script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.3/jquery.xdomainrequest.min.js'&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
      
          &lt;!-- Openlayers --&gt;
           &lt;link rel=&quot;stylesheet&quot; href=&quot;https://openlayers.org/en/latest/css/ol.css&quot; /&gt;   
          &lt;script type=&quot;text/javascript&quot; src=&quot;https://openlayers.org/en/latest/build/ol.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign&quot;&gt;&lt;/script&gt;
          
          &lt;!-- ol-ext --&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;http://viglino.github.io/ol-ext/dist/ol-ext.css&quot; /&gt; 
          &lt;script type=&quot;text/javascript&quot; src=&quot;http://viglino.github.io/ol-ext/dist/ol-ext.js&quot;&gt;&lt;/script&gt;
          &lt;!-- &lt;link rel=&quot;stylesheet&quot; href=&quot;../style.css&quot;/&gt;  --&gt;
          &lt;style&gt;
                  .ol-search ul {
                  color: #333;
                  font-size:0.85em;
                  max-width: 21em;
              }
              .ol-search ul i {
                  display: block;
                  color: #333;
                  font-size:0.85em;
              }
              .info {
                  display: inline-block;
                  width: 100%;
              }
              .info a img {
                  height: 100px;
                  margin-right: .5em;
                  float: left;
              }
              &lt;/style&gt;  
              &lt;!------------------------------
              --------------------------------
              --------------------------------&gt;
          &lt;style&gt;
            .tooltip {
              position: relative;
              background: rgba(0, 0, 0, 0.5);
              border-radius: 4px;
              color: white;
              padding: 4px 8px;
              opacity: 0.7;
              white-space: nowrap;
            }
            .tooltip-measure {
              opacity: 1;
              font-weight: bold;
            }
            .tooltip-static {
              background-color: #ffcc33;
              color: black;
              border: 1px solid white;
            }
            .tooltip-measure:before,
            .tooltip-static:before {
              border-top: 6px solid rgba(0, 0, 0, 0.5);
              border-right: 6px solid transparent;
              border-left: 6px solid transparent;
              content: &quot;&quot;;
              position: absolute;
              bottom: -6px;
              margin-left: -7px;
              left: 50%;
            }
            .tooltip-static:before {
              border-top-color: #ffcc33;
            }  
            .map {
              height: 50%;
              width: 70%;
            }   
      
            &lt;/style&gt;
        &lt;/head&gt;
        &lt;body&gt;
          &lt;div id=&quot;map&quot; class=&quot;map&quot;&gt;&lt;/div&gt;
          &lt;form class=&quot;form-inline&quot;&gt;
            &lt;label&gt;Measure: &amp;nbsp;&lt;/label&gt;
            &lt;select id=&quot;type&quot;&gt;
              &lt;option value=&quot;length&quot;&gt;Length (LineString)&lt;/option&gt;
              &lt;option value=&quot;area&quot;&gt;Area (Polygon)&lt;/option&gt;
            &lt;/select&gt;
          &lt;/form&gt;
          &lt;script&gt;
            var raster = new ol.layer.Tile({
              source: new ol.source.OSM()
            });
      
            var source = new ol.source.Vector();
      
            var vector = new ol.layer.Vector({
              source: source,
              style: new ol.style.Style({
                fill: new ol.style.Fill({
                  color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new ol.style.Stroke({
                  color: '#ffcc33',
                  width: 2
                }),
                image: new ol.style.Circle({
                  radius: 7,
                  fill: new ol.style.Fill({
                    color: '#ffcc33'
                  })
                })
              })
            });
      
      
            /**
             * Currently drawn feature.
             * @type {ol.Feature}
             */
            var sketch;
      
      
            /**
             * The help tooltip element.
             * @type {Element}
             */
            var helpTooltipElement;
      
      
            /**
             * Overlay to show the help messages.
             * @type {ol.Overlay}
             */
            var helpTooltip;
      
      
            /**
             * The measure tooltip element.
             * @type {Element}
             */
            var measureTooltipElement;
      
      
            /**
             * Overlay to show the measurement.
             * @type {ol.Overlay}
             */
            var measureTooltip;
      
      
            /**
             * Message to show when the user is drawing a polygon.
             * @type {string}
             */
            var continuePolygonMsg = 'Click to continue drawing the polygon';
      
      
            /**
             * Message to show when the user is drawing a line.
             * @type {string}
             */
            var continueLineMsg = 'Click to continue drawing the line';
      
      
            /**
             * Handle pointer move.
             * @param {ol.MapBrowserEvent} evt The event.
             */
            var pointerMoveHandler = function(evt) {
              if (evt.dragging) {
                return;
              }
              /** @type {string} */
              var helpMsg = 'برای اندازه گیری کلیک کنید';
      
              if (sketch) {
                var geom = (sketch.getGeometry());
                if (geom instanceof ol.geom.Polygon) {
                  helpMsg = continuePolygonMsg;
                } else if (geom instanceof ol.geom.LineString) {
                  helpMsg = continueLineMsg;
                }
              }
      
              helpTooltipElement.innerHTML = helpMsg;
              helpTooltip.setPosition(evt.coordinate);
      
              helpTooltipElement.classList.remove('hidden');
            };
      
      
            var map = new ol.Map({
              layers: [raster, vector],
              target: 'map',
              view: new ol.View({
                center: ol.proj.fromLonLat([51.39, 35.70]),
                zoom: 15
              }),
              interactions: ol.interaction.defaults({ altShiftDragRotate:false, pinchRotate:false })
            });
      
            map.on('pointermove', pointerMoveHandler);
      
            map.getViewport().addEventListener('mouseout', function() {
              helpTooltipElement.classList.add('hidden');
            });
      
            var typeSelect = document.getElementById('type');
      
            var draw; // global so we can remove it later
      
      
            /**
             * Format length output.
             * @param {ol.geom.LineString} line The line.
             * @return {string} The formatted length.
             */
            var formatLength = function(line) {
              var length = ol.Sphere.getLength(line);
              var output;
              if (length &gt; 100) {
                output = (Math.round(length / 1000 * 100) / 100) +
                    ' ' + 'km';
              } else {
                output = (Math.round(length * 100) / 100) +
                    ' ' + 'm';
              }
              return output;
            };
      
      
            /**
             * Format area output.
             * @param {ol.geom.Polygon} polygon The polygon.
             * @return {string} Formatted area.
             */
            var formatArea = function(polygon) {
              var area = ol.Sphere.getArea(polygon);
              var output;
              if (area &gt; 10000) {
                output = (Math.round(area / 1000000 * 100) / 100) +
                    ' ' + 'km&lt;sup&gt;2&lt;/sup&gt;';
              } else {
                output = (Math.round(area * 100) / 100) +
                    ' ' + 'm&lt;sup&gt;2&lt;/sup&gt;';
              }
              return output;
            };
      
            function addInteraction() {
              var type = (typeSelect.value == 'area' ? 'Polygon' : 'LineString');
              draw = new ol.interaction.Draw({
                source: source,
                type: type,
                style: new ol.style.Style({
                  fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                  }),
                  stroke: new ol.style.Stroke({
                    color: 'rgba(0, 0, 0, 0.5)',
                    lineDash: [10, 10],
                    width: 2
                  }),
                  image: new ol.style.Circle({
                    radius: 5,
                    stroke: new ol.style.Stroke({
                      color: 'rgba(0, 0, 0, 0.7)'
                    }),
                    fill: new ol.style.Fill({
                      color: 'rgba(255, 255, 255, 0.2)'
                    })
                  })
                })
              });
              map.addInteraction(draw);
      
              createMeasureTooltip();
              createHelpTooltip();
      
              var listener;
              draw.on('drawstart',
                  function(evt) {
                    // set sketch
                    sketch = evt.feature;
      
                    /** @type {ol.Coordinate|undefined} */
                    var tooltipCoord = evt.coordinate;
      
                    listener = sketch.getGeometry().on('change', function(evt) {
                      var geom = evt.target;
                      var output;
                      if (geom instanceof ol.geom.Polygon) {
                        output = formatArea(geom);
                        tooltipCoord = geom.getInteriorPoint().getCoordinates();
                      } else if (geom instanceof ol.geom.LineString) {
                        output = formatLength(geom);
                        tooltipCoord = geom.getLastCoordinate();
                      }
                      measureTooltipElement.innerHTML = output;
                      measureTooltip.setPosition(tooltipCoord);
                    });
                  }, this);
      
              draw.on('drawend',
                  function() {
                    measureTooltipElement.className = 'tooltip tooltip-static';
                    measureTooltip.setOffset([0, -7]);
                    // unset sketch
                    sketch = null;
                    // unset tooltip so that a new one can be created
                    measureTooltipElement = null;
                    createMeasureTooltip();
                    ol.Observable.unByKey(listener);
                  }, this);
            }
      
      
            /**
             * Creates a new help tooltip
             */
            function createHelpTooltip() {
              if (helpTooltipElement) {
                helpTooltipElement.parentNode.removeChild(helpTooltipElement);
              }
              helpTooltipElement = document.createElement('div');
              helpTooltipElement.className = 'tooltip hidden';
              helpTooltip = new ol.Overlay({
                element: helpTooltipElement,
                offset: [15, 0],
                positioning: 'center-left'
              });
              map.addOverlay(helpTooltip);
            }
      
      
            /**
             * Creates a new measure tooltip
             */
            function createMeasureTooltip() {
              if (measureTooltipElement) {
                measureTooltipElement.parentNode.removeChild(measureTooltipElement);
              }
              measureTooltipElement = document.createElement('div');
              measureTooltipElement.className = 'tooltip tooltip-measure';
              measureTooltip = new ol.Overlay({
                element: measureTooltipElement,
                offset: [0, -15],
                positioning: 'bottom-center'
              });
              map.addOverlay(measureTooltip);
            }
      
      
            /**
             * Let user change the geometry type.
             */
            typeSelect.onchange = function() {
              map.removeInteraction(draw);
              addInteraction();
            };
      
            addInteraction();
            
            // Current selection
          var sLayer = new ol.layer.Vector({
              source: new ol.source.Vector(),
              style: new ol.style.Style({
                  image: new ol.style.Circle({
                      radius: 5,
                      stroke: new ol.style.Stroke ({
                          color: 'rgb(255,165,0)',
                          width: 3
                      }),
                      fill: new ol.style.Fill({
                          color: 'rgba(255,165,0,.3)'
                      })
                  }),
                  stroke: new ol.style.Stroke ({
                      color: 'rgb(255,165,0)',
                      width: 3
                  }),
                  fill: new ol.style.Fill({
                      color: 'rgba(255,165,0,.3)'
                  })
              })
          });
          map.addLayer(sLayer);
      
          // Set the search control 
          var search = new ol.control.SearchNominatim (
              {   //target: $(&quot;.options&quot;).get(0),
                  polygon: $(&quot;#polygon&quot;).prop(&quot;checked&quot;),
                  position: true  // Search, with priority to geo position
              });
          map.addControl (search);
      
          // Select feature when click on the reference index
          search.on('select', function(e)
              {   // console.log(e);
                  sLayer.getSource().clear();
                  // Check if we get a geojson to describe the search
                  if (e.search.geojson) {
                      var format = new ol.format.GeoJSON();
                      var f = format.readFeature(e.search.geojson, { dataProjection: &quot;EPSG:4326&quot;, featureProjection: map.getView().getProjection() });
                      sLayer.getSource().addFeature(f);
                      var view = map.getView();
                      var resolution = view.getResolutionForExtent(f.getGeometry().getExtent(), map.getSize());
                      var zoom = view.getZoomForResolution(resolution);
                      var center1 = ol.extent.getCenter(f.getGeometry().getExtent());
                      // redraw before zoom
                      setTimeout(function(){
                              view.animate({
                              center: center1,
                              zoom: Math.min (zoom, 16)
                          });
                      }, 100);
                  }
                  else {
                      map.getView().animate({
                          center:e.coordinate,
                          zoom: Math.max (map.getView().getZoom(),16)
                      });
                  }
              });
      
          &lt;/script&gt;
          &lt;div class=&quot;options&quot;&gt;
              &lt;label&gt;
                  &lt;input id=&quot;polygon&quot; type=&quot;checkbox&quot; onclick=&quot;search.set('polygon', $(this).prop('checked')); search.search();&quot; /&gt; 
                  extract polygons&lt;br/&gt;(may slow down requests)
              &lt;/label&gt;
              &lt;br/&gt;
              &lt;i&gt;Use the search control to start a new search.&lt;/i&gt;
          &lt;/div&gt;
        &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>