Extracting Coordinates by clicking on an OpenStreetMap

Question

Hi, As per subject, is it possible to learn how to get custom development for a map application I need? The functionality I need is as follows; 1. Point Digitizing - when a user clicks on the map two form fields are updated with the Latitude-Longitude. 2. Lines/Polygon Digitizing - when a user clicks multiple times on the maps a TextArea form field is updated with the coordinates. The list grows the more the map is clicked. Also need some simple buttons to react to the map, eg: Delete Last Point, Clear Map, Edit lines. Once these features are used the coordinates will be updated in the form field. 3. Finally I will need a simple Geocoder even over the map or as part of the map for the user to quickly find their location.

I want to do this with OSM in a web browser... the coverage for my area is far better than Google or Bing. If anyone has any examples of this type of app I'd be very grateful. Looking to hire a developer to help out here too so please get in touch.

Thanks,

Brendan

Answer 1

USE THIS CODE.....

<!DOCTYPE HTML>

<html>

<head>
    <title>CLICK HANDLER</title>
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script>
        var map,vectorLayer,selectMarkerControl,selectedFeature;
        var lat             =   21.7679;
            var lon            =    78.8718;
            var zoom        =   5;
        var curpos = new Array();
        var position;

            var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
            var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection

            var cntrposition       = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);

        function init()
        {
                map = new OpenLayers.Map("Map",{
                            controls: 
                            [
                                        new OpenLayers.Control.PanZoomBar(),                        
                            new OpenLayers.Control.LayerSwitcher({}),
                            new OpenLayers.Control.Permalink(),
                            new OpenLayers.Control.MousePosition({}),
                            new OpenLayers.Control.ScaleLine(),
                            new OpenLayers.Control.OverviewMap(),
                                    ]
                              }
                                );
                var mapnik      = new OpenLayers.Layer.OSM("MAP"); 
                var markers     = new OpenLayers.Layer.Markers( "Markers" );

            map.addLayers([mapnik,markers]);
            map.addLayer(mapnik);
            map.setCenter(cntrposition, zoom);

            markers.addMarker(new OpenLayers.Marker(cntrposition));

            var click = new OpenLayers.Control.Click();
            map.addControl(click);

            click.activate();
};

OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {               
 defaultHandlerOptions: {
  'single': true,
  'double': false,
  'pixelTolerance': 0,
  'stopSingle': false,
  'stopDouble': false
 },

 initialize: function(options) {
  this.handlerOptions = OpenLayers.Util.extend(
   {}, this.defaultHandlerOptions
  );
  OpenLayers.Control.prototype.initialize.apply(
   this, arguments
  );
  this.handler = new OpenLayers.Handler.Click(
   this, {
    'click': this.trigger
   }, this.handlerOptions
  );
 },

 trigger: function(e) {
  var lonlat = map.getLonLatFromPixel(e.xy);
  lonlat1= new OpenLayers.LonLat(lonlat.lon,lonlat.lat).transform(toProjection,fromProjection);
  alert("Hello..."+lonlat1.lon + "  " +lonlat1.lat);

 }

});
</script>
</head>

<body onload='init();'>
    <div id="Map" style="height: 650px" ></div>

</body>

</html>

Answer 2

Your question is not OSM specific, but a generic OpenLayers question (or even more generic - since you could also use a different Javascript mapping framework and have OSM tiles display there). An example application that does something like you describe is this Cycle Route Planner; while the list of coordinates is not visible in a text area, it is stored invisibly for later saving and the application would probably require a lot of modification to cater to your needs.

Note that by using OSM to generate a route you are likely creating a "derived work" in terms of the CC-BY-SA license we're currently using, and if you publish that route it will have to be published under that license as well.

Answer 3

You might want too look at OpenLayers. It is the slippy map plugin used for the main page of OpenStreetMap and have support for most of the features you specified.

Extracting Coordinates by clicking on an OpenStreetMap

Related questions