Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Return lat.long #75

Closed
marcoamadori opened this issue Nov 21, 2015 · 5 comments
Closed

Return lat.long #75

marcoamadori opened this issue Nov 21, 2015 · 5 comments

Comments

@marcoamadori
Copy link

How can I get latitude and longitude from the Geocoder?
I want to pass them as var.
@louh
Copy link
Contributor

louh commented Nov 24, 2015

Hi @marcoamadori,
Can you tell us a little more about what you are trying to do?

One way to get latitude and longitude is to read them off the results list. Each DOM element in the list have latitude and longitude properties attached to them, which we use internally to know what to do with a selected result. But I realize that this is not ideal (and it's not documented) and we need to expose a much better way of working with the results that come back. If you let us know what you need we can start to form a solution.

Thanks for raising the question!

@marcoamadori
Copy link
Author

Hi @louh thanks for your answer.
I've created this html page :

<!DOCTYPE html>
<html>
<head>
  <title>Adding Pelias geocoding to a basic Leaflet map.</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.js"></script>

  <!-- Load Pelias geocoding plugin after Leaflet -->
  <link rel="stylesheet" href="dist/pelias-leaflet-geocoder.css">
  <script src="dist/pelias-leaflet-geocoder.js"></script>

  <!--<link rel="stylesheet" href="leaflet/leaflet.css">-->
  <link rel="stylesheet" href="lrm-valhalla/leaflet.routing.valhalla.css">

  <link rel="stylesheet" href="examples.css">
</head>
<body>
  <input type="button" value="Create Route" onClick="calcolapercorso()"><br>
  <div id="map"></div>
  <script src="leaflet-routing-machine/leaflet-routing-machine.js"></script>
  <script src="lrm-valhalla/lrm-valhalla.js"></script>

  <script>
    // Create a basic Leaflet map
    var map = L.map('map').setView([44.5,11.4], 12);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
    }).addTo(map);



    // Add Pelias geocoding plugin
    var options1 = {
      pointIcon: 'dist/images/point_icon.png',
      polygonIcon: 'dist/images/polygon_icon.png',
    }
    var geocoder1 = L.control.geocoder('search-MKZrG6M', options1).addTo(map);

    // Add Pelias geocoding plugin2
    var options2 = {
      pointIcon: 'dist/images/point_icon.png',
      polygonIcon: 'dist/images/polygon_icon.png',
    }
    var geocoder2 = L.control.geocoder('search-MKZrG6M', options2).addTo(map);

   map.on('geosearch_showlocation', function (result) {
        //console.log('zoom to: ' + result.Location.Label);
        thisLatLon = result.Location.X + " " + result.Location.Y;

    });

   function calcolapercorso()
   {
   // Add Valhalla per creazione del percorso
    L.Routing.control({
      waypoints: [
        //L.latLng(lat,lng),
        L.latLng(44.5,11.4),
        L.latLng(44.5,11.)
      ],

      router: L.Routing.valhalla('valhalla-myapikey', 'bicycle'),
      formatter: new L.Routing.Valhalla.Formatter(),
      summaryTemplate:'<div class="start">{name}</div><div class="info {transitmode}">{distance},{time}</div>',
      routeWhileDragging: false
    }).addTo(map);
    };

  </script>
</body>
</html>

What I'd like to do is a biketrip-planner that integrate the Valhalla algorithm for route creation with the Geocoder address search. I've added two Geocoder and a "Create Route" Button that launches the function of route creation. My idea is to find the starting and arrival point with the two geocoders controls, and pass the coordinates to the Valhalla script in order to create the route.
I don't understand how I can get the lat and long from the two geocoder. Is ther a way to get them?
Can the two variable "geocoder1" and "geocoder2" be used for this or is there another way?
Thank you very much for the help :)

@louh
Copy link
Contributor

louh commented Nov 27, 2015

The geocoder controls do store selected results coordinates internally, so one way of getting that out is like so:

var selectedResult1 = geocoder1._results.querySelector('.leaflet-pelias-selected').coords;
var selectedResult2 = geocoder2._results.querySelector('.leaflet-pelias-selected').coords;

Let me know if that helps. By the way, the last couple of days I am proposing an event-based way of getting information out of certain actions. (See this branch here.) In this proposal, you can do something like this:

var latlng1, latlng2;
geocoder1.on('select', function (event) {
    latlng1 = event.latlng;
});
geocoder2.on('select', function (event) {
    latlng2 = event.latlng;
});

@louh
Copy link
Contributor

louh commented Dec 1, 2015

Hi @marcoamadori,
I've just published version 1.2.0 which now uses events which you can hook into the get the lag/lng of a result.

The coords property of the selected DOM element will still work, but it's now officially deprecated and may be removed in a future version.

Let me know if this helps!

@louh louh closed this as completed Dec 1, 2015
@marcoamadori
Copy link
Author

Great! it works! Thank you very much :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@louh @marcoamadori