CODEWITHSUNDEEP
angulartypescriptopenstreetmapnominatim
Lahiru Mirihagoda
Lahiru Mirihagoda

Reputation: 1163

Using Nominatim with angular

I'm trying use OSM in my angular app. I have included the OSM into the app, but in my case I need the functionality of Nominatim. When a user input a place it should return Latitude and Longitude of the place and map should focus to that place.
In Nominatim website, place name entered to the URL

https://nominatim.openstreetmap.org/search?query=colombo

It returns the Longitude and Latitude.

https://nominatim.openstreetmap.org/search?query=colombo#map=12/6.9220/79.8562

If any one know How to do this with Angular Your answer will greatly appreciated.

This is my .ts file

import { Component, OnInit } from '@angular/core';
declare var ol: any;

@Component({
  selector: 'app-location',
  templateUrl: './location.component.html',
  styleUrls: ['./location.component.css']
})
export class LocationComponent implements OnInit {
  map: any;

  constructor() { }

  ngOnInit() {

    var mousePositionControl = new ol.control.MousePosition({
      coordinateFormat: ol.coordinate.createStringXY(4),
      projection: 'EPSG:4326',
      undefinedHTML: ' '
    });


    this.map = new ol.Map({
      target: 'map',
      controls: ol.control.defaults({
        attributionOptions: {
          collapsible: false
        }
      }).extend([mousePositionControl]),
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({
        center: ol.proj.fromLonLat([79.859619140625, 6.930062160235181]),
        zoom: 8
      })
    });


    this.map.on('click', function (args) {
      var lonlat = ol.proj.transform(args.coordinate, 'EPSG:3857', 'EPSG:4326');

      var lon = lonlat[0];
      var lat = lonlat[1];

      localStorage.setItem('lat', JSON.stringify(lat));
      localStorage.setItem('long', JSON.stringify(lon));
    });

  }

}

HTML file

<input type="text" placeholder="place name"  name="place name">
<div id="map" class="map"></div>
<div id="mouse-position"></div>

Upvotes: 3

Views: 3291

Answers (1)

Sunil Kashyap
Sunil Kashyap

Reputation: 2984

This might help you - https://developer.mapquest.com/documentation/open/nominatim-search/search/

Create an angular service where you can hit the nominatim search and set new lat lon to the map object.

eg. 

  setCenter() {
    var view = this.map.getView();
    view.setCenter(ol.proj.fromLonLat([this.longitude, this.latitude]));
    view.setZoom(8);
  }

Upvotes: 3

Related Questions