<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="../assets/xml/rss.xsl" media="all"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>.:: Marcos Dione/StyXman's glob ::. (Posts about trip-planner)</title><link>https://www.grulic.org.ar/~mdione/glob/</link><description></description><atom:link href="https://www.grulic.org.ar/~mdione/glob/categories/trip-planner.xml" rel="self" type="application/rss+xml"></atom:link><language>en</language><copyright>Contents © 2025 &lt;a href="mailto:mdione@grulic.org.ar"&gt;Marcos Dione&lt;/a&gt; </copyright><lastBuildDate>Thu, 29 May 2025 15:41:11 GMT</lastBuildDate><generator>Nikola (getnikola.com)</generator><docs>http://blogs.law.harvard.edu/tech/rss</docs><item><title>Trip planner</title><link>https://www.grulic.org.ar/~mdione/glob/posts/trip-planner/</link><dc:creator>Marcos Dione</dc:creator><description>&lt;p&gt;For a long time I've been searching for a program that would allow me to plan (car) trips with my friends. Yes, I know of the
existence of Google Maps, but the service has several characteristics that doesn't make it appealing to me, and lacks a couple of
features I expect. This is more or less the list of things I want:&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Define the list of points I want to go to. No-brainer.&lt;/li&gt;
&lt;li&gt;Define the specific route I want to take. This is normally implemented by adding more control points, but normally
  they're of the same category as the waypoins of the places you want to visit. I think they shouldn't.&lt;/li&gt;
&lt;li&gt;Define stages; for instance, one stage per day.&lt;/li&gt;
&lt;li&gt;Get the distance and time of each stage; this is important when visiting several cities, for having an idea of how much time
  during the day you'll spend going to the next one.&lt;/li&gt;
&lt;li&gt;Define alternative routes, just in case you don't really have/make the time to visit some points.&lt;/li&gt;
&lt;li&gt;Store the trips in cookies, share them via a URL or central site, but that anybody can easily install in their own server.&lt;/li&gt;
&lt;li&gt;Manage several trips at the same time.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;So I sat down to try and create such a thing. Currently is just a mashup of several things GIS:
&lt;a href="http://www.grulic.org.ar/~mdione/glob/tags/elevation/"&gt;my own OSM data rendering&lt;/a&gt;, my own
&lt;a href="http://www.grulic.org.ar/~mdione/glob/posts/local-markers-in-cookies-with-leaflet/"&gt;waypoints-in-cookies idea&lt;/a&gt; (in fact, this is
the expansion of what fired that post) and &lt;a href="http://project-osrm.org/"&gt;OSRM&lt;/a&gt; for the routing. As for the backend, I decided to try
&lt;a href="http://flask.pocoo.org/"&gt;flask&lt;/a&gt; and &lt;a href="http://flask-restful.readthedocs.org/"&gt;flask-restful&lt;/a&gt; for creating a small REST API for
storing all this. So far some basics work (points #1 and #6, partially), and I had some fun during the last week learning RESTful,
some more Javascript (including &lt;a href="http://leafletjs.com/"&gt;LeafLet&lt;/a&gt; and some &lt;a href="http://jquery.com/"&gt;jQuery&lt;/a&gt;) and putting all this
together. Here are some interesting things I found out:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;RESTful is properly defined, but not for all URL/method pairs. In particular, given that I decided that trip ids are their name,
  I defined a POST to trips/&lt;name&gt; as the
  &lt;a href="https://github.com/StyXman/elevation/blob/166fe89349fce1c3e6dd5a99d3f6d6884fb1811f/Elevation/flask/api.py#L29"&gt;UPSERT&lt;/a&gt; for that
  name. I hope &lt;a href="http://www.sqlalchemy.org/"&gt;SQLAlchemy&lt;/a&gt; &lt;a href="https://bitbucket.org/zzzeek/sqlalchemy/issues?q=upsert"&gt;implements it soon&lt;/a&gt;.&lt;/name&gt;&lt;/li&gt;
&lt;li&gt;Most of the magic of RESTful APIs happen in the model of your service.&lt;/li&gt;
&lt;li&gt;Creating APIs with flask-restful could not be more obvious.&lt;/li&gt;
&lt;li&gt;I still have to get my head around Javascript's &lt;a href="http://www.w3schools.com/js/js_object_prototypes.asp"&gt;prototypes&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Mouse/finger events &lt;a href="https://www.youtube.com/watch?v=wwffqMAS8K8"&gt;are a nightmare in browsers&lt;/a&gt;. In particular, with current
  leafLet, you get &lt;code&gt;clicked&lt;/code&gt; events on double clicks, unless you use the appropriate &lt;code&gt;singleclick&lt;/code&gt; plugin from
  &lt;a href="http://leafletjs.com/plugins.html#events"&gt;here&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Given &lt;a href="https://en.wikipedia.org/wiki/Cross-site_scripting"&gt;XSS&lt;/a&gt; attacks,
  &lt;a href="https://en.wikipedia.org/wiki/Same-origin_policy"&gt;same-origin policy&lt;/a&gt; is enforced for AJAX requests. If you control the
  web service, the easiest way to go around it is &lt;a href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing"&gt;CORS&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;The only way to do such calls with jQuery is using the low level function &lt;a href="http://api.jquery.com/jQuery.ajax/"&gt;&lt;code&gt;$.ajax()&lt;/code&gt;&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;jQuery provides a &lt;a href="http://api.jquery.com/jQuery.parseJSON/"&gt;function to parse JSON&lt;/a&gt; but not to serialize to it; use
  &lt;code&gt;window.JSON.stringify()&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Javascript's &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters"&gt;default parameters&lt;/a&gt;
  were not recognized by my browser :(.&lt;/li&gt;
&lt;li&gt;OSRM's &lt;a href="https://github.com/Project-OSRM/osrm-backend/wiki/Server-api#service-viaroute"&gt;&lt;code&gt;viaroute&lt;/code&gt;&lt;/a&gt; returns the coordinates
  multiplied by 10 for precision reasons, so you have to
  &lt;a href="https://github.com/StyXman/elevation/blob/166fe89349fce1c3e6dd5a99d3f6d6884fb1811f/Elevation/Save.js#L112"&gt;scale it down&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;&lt;a href="http://wiki.openstreetmap.org/wiki/Nominatim"&gt;Nominatim&lt;/a&gt; and OSRM rock!&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;I still have lots of things to learn and finish, so stay tunned for updates. Currently the code resides in
&lt;a href="https://github.com/StyXman/elevation"&gt;Elevation's code&lt;/a&gt;, but I'll split it in the future.&lt;/p&gt;
&lt;h2&gt;Update:&lt;/h2&gt;
&lt;p&gt;I have it running &lt;a href="http://grulicueva.homenet.org/~mdione/Elevation/"&gt;here&lt;/a&gt;. You can add waypoints by clicking in the map, delete
them by doublecliking them, save to cookies or the server (for the moment it overwrites what's there, as you can't name the trips
or manage several yet) and ask for the routing.&lt;/p&gt;</description><category>elevation</category><category>flask</category><category>javascript</category><category>jquery</category><category>leaflet</category><category>openstreetmap</category><category>osrm</category><category>python</category><category>trip-planner</category><guid>https://www.grulic.org.ar/~mdione/glob/posts/trip-planner/</guid><pubDate>Mon, 25 Jan 2016 14:52:06 GMT</pubDate></item></channel></rss>