Initial Commit. Created openlayers map and click event handled

.gitignore

@@ -0,0 +1,3 @@
+*.pyc
+*~
+configuration.py

configuration.sample.py

@@ -0,0 +1,12 @@
+# Copy this file to configuration.py and enter the real configuration values
+
+CONNECTION_SETTINGS = {
+  "host"     : "localhost",      # host where database server is located
+  "port"     : "",               # if postgreSQL runs on a TCP port
+  "dbname"   : "dotpath",
+  "user"     : "test",
+  "password" : "test"            # if using md5 or password authentication
+}
+
+DEBUG = False # Set to True on development systems; False on production systems
+

dbhelper.py

@@ -0,0 +1,14 @@
+import psycopg2
+
+def connect_to_DB(connection_settings):
+    connstr = "host=" + connection_settings["host"] + " "
+    if connection_settings["port"] != "":
+        connstr += "port=" + connection_settings["port"] + " "
+    connstr += "dbname=" + connection_settings["dbname"] + " "
+    connstr += "user=" + connection_settings["user"] + " "
+    connstr += "password=" + connection_settings["password"]
+
+    conn = psycopg2.connect(connstr)
+    conn.set_isolation_level(0)
+    return conn
+

run.py

@@ -0,0 +1,35 @@
+#!/usr/bin/env python
+
+from flask import Flask, render_template, g, request, abort, make_response
+
+from dbhelper import connect_to_DB
+
+app = Flask(__name__)
+app.config.from_object('configuration')
+
+db = connect_to_DB(app.config['CONNECTION_SETTINGS'])
+
+@app.before_request
+def before_request():
+    g.cur = db.cursor()
+
+@app.after_request
+def after_request(response):
+    g.cur.close()
+    return response
+
+@app.route("/routing.js", methods=["GET"])
+def routing_js():
+    if not "start_location" in request.args or not "finish_location" in request.args:
+        abort(404)
+    data = request.args
+    response = make_response(render_template('routing.js', data=data), 200)
+    response.headers["Content-Type"] = "text/javascript; charset=utf-8"
+    return response
+
+@app.route("/")
+def index():
+    return render_template('index.html')
+
+if __name__ == "__main__":
+    app.run()

static/css/styles.css

@@ -0,0 +1,13 @@
+body {
+    margin: 50px 0;
+}
+
+#map-container {
+    width: 600px;
+    margin: 0px auto;
+}
+
+#map {
+    width: 600px;
+    height: 480px;
+}

static/js/scripts.js

@@ -0,0 +1,124 @@
+function CreateMap() {
+
+    // Create Openlayers Map object
+    map = new OpenLayers.Map({
+        div: "map",
+        controls:[
+            new OpenLayers.Control.Navigation(),
+            new OpenLayers.Control.PanZoomBar(),
+            new OpenLayers.Control.Attribution(),
+            new OpenLayers.Control.LayerSwitcher()
+        ],
+        allOverlays: true,
+    });
+
+    // Create Icons for markers
+    var iconSize = new OpenLayers.Size(32,32);
+    var iconOffset = new OpenLayers.Pixel(-4,-32);
+    var start_icon = new OpenLayers.Icon("/static/img/start_flag.png", iconSize, iconOffset);
+    var finish_icon = new OpenLayers.Icon("/static/img/checkered_flag.png", iconSize, iconOffset);
+
+    // Add OSM Baselayer
+    var osm = new OpenLayers.Layer.OSM();
+    map.addLayer(osm);
+
+    // Position map zoomed on Chennai
+    map.setCenter(
+        new OpenLayers.LonLat(80.2, 13.02).transform(
+            new OpenLayers.Projection("EPSG:4326"),
+            map.getProjectionObject()
+        ),
+        11 // <- default zoom level
+    );
+
+    // Create pointsLayer which contains start and stop markers
+    var pointsLayer = new OpenLayers.Layer.Markers("Points");
+    map.addLayer(pointsLayer);
+
+    // Initialize markers
+    start_marker = null;
+    finish_marker = null;
+
+    // Create Click class to handle clicking on Map
+    OpenLayers.Control.Click = OpenLayers.Class(
+        OpenLayers.Control,
+        {
+            defaultHandlerOptions: {
+                'single': true,
+                'double': false,
+                'pixelTolerance': 0,
+                'stopSingle': false,
+                'stopDouble': false
+            },
+
+            initialize: function(options) {
+                OpenLayers.Control.prototype.initialize.apply(
+                    this, arguments
+                );
+                this.handler = new OpenLayers.Handler.Click(
+                    this,
+                    {
+                        'click': this.trigger
+                    }
+                );
+            },
+
+            // Event Handler for click
+            trigger: function(e) {
+                if(start_marker == null) // First click sets Start marker
+                {
+                    if(finish_marker != null)
+                        pointsLayer.removeMarker(finish_marker);
+                    start_marker = new OpenLayers.Marker(
+                        map.getLonLatFromViewPortPx(e.xy),
+                        start_icon.clone()
+                    );
+                    pointsLayer.addMarker(start_marker);
+                }
+                else if(finish_marker == null) // Second click sets Finish
+                  // marker and draws route
+                {
+                    finish_marker = new OpenLayers.Marker(
+                        map.getLonLatFromViewPortPx(e.xy),
+                        finish_icon.clone()
+                    );
+                    pointsLayer.addMarker(finish_marker);
+
+                    // Convert coordinates to 4326 projection
+                    var start_lonlat = start_marker.lonlat.clone().transform(
+                        map.getProjectionObject(),
+                        new OpenLayers.Projection("EPSG:4326")
+                    );
+                    var finish_lonlat = finish_marker.lonlat.clone().transform(
+                        map.getProjectionObject(),
+                        new OpenLayers.Projection("EPSG:4326")
+                    );
+
+                    // Make AJAX request to fetch routing data
+                    $.ajax('/routing.js?start_location=' + start_lonlat +
+                        '&finish_location=' + finish_lonlat);
+                }
+                else // Third click resets the map
+                {
+                    if(start_marker != null)
+                    {
+                        pointsLayer.removeMarker(start_marker);
+                        start_marker.destroy();
+                        start_marker = null;
+                    }
+                    if(finish_marker != null)
+                    {
+                        pointsLayer.removeMarker(finish_marker);
+                        finish_marker.destroy();
+                        finish_marker = null;
+                    }
+                }
+            }
+        }
+    );
+
+    // Bind click event handler to map
+    var click = new OpenLayers.Control.Click();
+    map.addControl(click);
+    click.activate()
+}

static/js/theme/default/google.css

@@ -0,0 +1,10 @@
+.olLayerGoogleCopyright {
+    right: 3px;
+    bottom: 2px;
+    left: auto;  
+}
+.olLayerGooglePoweredBy {
+    left: 2px;
+    bottom: 2px;   
+}
+

static/js/theme/default/ie6-style.css

@@ -0,0 +1,7 @@
+.olControlZoomPanel div {
+    background-image: url(img/zoom-panel-NOALPHA.png);
+}
+.olControlPanPanel div {
+    background-image: url(img/pan-panel-NOALPHA.png);
+}
+