Origin: Show map of listing location

Created on 7 Jan 2018  路  13Comments  路  Source: OriginProtocol/origin

Add map to listing-detail showing listing location. Probably using openstreetmaps

P4 feature good first issue uux

Most helpful comment

@ambertch nice research on this one - thanks! Cool if I run with it from here for a bit or would you like to take it on?

All 13 comments

(Responding to PM)

The address field of a listing is almost certainly going to be derived from the PostalAddress standard or GeoCoordinates.

GeoCoordinates looks like the simpler one to start with.

At this early stage we're so concerned with quality of the mapping data or whatnot. It will take us some time just to settle on the data schema design and the UI design. Swapping between OSM, Google, Bing, etc... should be straightforward. And in the end, Origin DApp creators are free to use any solution they like.

Some research...

OpenStreetMap has an API, but it is for platform related calls, rather than address/map queries it seems (https://wiki.openstreetmap.org/wiki/API_v0.6).

One way this might be implemented:

  1. obtain address from user
  2. look up geo coordinates (lat/long)
  3. store coordinates
  4. display map

With the address, this is currently a string field in the form to create a listing. Using the http://schema.org/GeoCoordinates format, a user can be asked to specify the postal code + country. Having that data will result in better resolution if OpenSteetMap is used.

With looking up coordinates, OpenStreetMap doesn't have as complete of a dataset as the other providers; doing some queries I saw that zipcodes generally resolve in OSM but sometimes specific addresses do not.

With storing the coordinates, one option is to extend the listing schemas with field(s) for coordinates and write it to IPFS.

For displaying the map, both OpenStreetMap and Leaflet (which wraps OSM) take lat/long coordinates. Using a wrapper library (Leaflet) enables annotations to be easily added (such as the red pointer dot in Google Maps). Using Leaflet.js might also work better on mobile (since it can resize to fill the screen http://leafletjs.com/examples/mobile/example.html)

The map corresponding to an address lookup in OpenStreetMap can be exported as an iframe, but I don't think this can be obtained programmatically. I looked at using the browser query as an API request (openstreetmap.org/search?query=94107), but getting the coordinates involves a redirect which is done in javascript (had tried following HTTP redirect openstreetmap.org/search?query=94107#map=19/37.79530/-122.40939)

Here is an example of what the UI might look like, displaying the map below main listing information, above ancillary information. This example uses OpenStreetMap, so there is no annotation for the specific location (520 20th St, Oakland, CA 94612):

screenshot 2018-04-17 19 05 10

If using the Google Maps API, geocoding + map display can be done in-browser https://developers.google.com/maps/documentation/javascript/geocoding

With Geocoding using OpenStreetMap, the site actually runs on a service called Nominatim (https://nominatim.openstreetmap.org/), which is open source (https://github.com/openstreetmap/Nominatim)

I tried issuing a POST request to nominatim.openstreetmap.org/search.php to see if geocoding could be done programmatically, but the service returns HTML with a list of results. Since the server itself is PHP on top of PostGIS/Postgres, an option there would be to set up an instance and implement an API.

@ambertch nice research on this one - thanks! Cool if I run with it from here for a bit or would you like to take it on?

@jordajm go for it!

@wanderingstan we're currently not even showing the plain-text location value anywhere in the DApp, are we?

we were contacted by https://what3words.com/ as we are presenting at the same conference in London in November.
I just talked to them.
They usually charge companies for access to APIs and KPIs but would be happy to give us (meaning Origin) free access.
It's a for profit company so we can't be sure they won't change their model or disappear (they exist since 2013 though) but if used alongside other integrations it could be a nice to have.
You may want to check it out.

Screenshot 2019-08-16 at 12 35 11

first in App Store. They may becoming a thing. Let's keep an eye on them.

Fascinating 馃 Thx Luca!

a less flattering take of the What3Words solution:
https://news.ycombinator.com/item?id=21184505

Resolved (for Housing listings) by https://github.com/OriginProtocol/origin/pull/3797 馃椇

Was this page helpful?
0 / 5 - 0 ratings

Related issues

micahalcorn picture micahalcorn  路  7Comments

micahalcorn picture micahalcorn  路  8Comments

micahalcorn picture micahalcorn  路  8Comments

wanderingstan picture wanderingstan  路  9Comments

mikeshultz picture mikeshultz  路  4Comments