Creating a polygon on googlemap and save the result to database using MVC

I want to write an application that let the user draw a polygon on GoogleMap and then let him to save it to database.

Later when we wants, he should be able to draw the polygon on the map from the database.

What is the best approach to do this?

My suggest is to save polygon data in a js array and send it to mvc using JSON. Is it a good approach?

How to draw polygons on GoogleMap?

How to call a controller on MVC from client using JS?

Do I need a special controller for this (receiving JSON data)

Is there any sample code for this?

Answers


Here is an extremely crude example of how to allow the user to draw a polygon.

  // declare map outside of initialize function so that drawPoints() can use it
  var map;

  // called when page is loaded
  function initialize() {

    // arbitrary point
    var myLatLng = new google.maps.LatLng(24.88484848484, -70.268858484);

    // options to init map with, again arbitrary
    var myOptions = {
      zoom: 5,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // get our map object
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    // array to store markers that user has drawn
    var markers = [];

    // add event listener to the map to get the click events and draw a marker
    google.maps.event.addListener(map, 'click', function(e) {

      var marker = new google.maps.Marker();

      marker.setPosition(e.latLng);
      marker.setMap(map);
      marker.setVisible(true);

      // push it to the markers array
      markers.push(marker);

      // add an event listener to each marker so that we can draw a polygon
      // once user clicks on on of the markers in the markers array, assuming
      // that they are ready to join up the polygon and have it drawn
      google.maps.event.addListener(marker, 'click', function(e) {
        drawPoints(markers);

        // empty the markers array so that the user can draw a new one, without
        // them all joining up. this is perphaps where you would want to push
        // the markers array to a database, storing the points as latitude/longitude
        // values so that they can be retrieved, put into an array, and drawn
        // as a polygon again. 
        markers = [];
      });

    });

  }

  function drawPoints(markers) {
    var poly = new google.maps.Polygon;

    var points = [];

    for (var i = 0; i < markers.length; i++) {
      points.push(markers[i].getPosition());
    }
    poly.setMap(map);
    poly.setPath(points);
    poly.setVisible(true);
  }‚Äč

Try it out here

Also this will be very useful.

Edit: I should probably explain how to draw the polygon...

Clicking on the map creates a marker. You can create as many as you want. Once you click on one of the markers that has already been placed, a polygon is drawn between the points of the markers. Once a polygon is drawn, those markers are no longer counted for the next set that a polygon is drawn from.


Need Your Help

Scanning big binary with Erlang

file-io erlang pattern-matching binaryfiles

I like to scan larger(>500M) binary files for structs/patterns. I am new to the language an hope that someone can give me start. Actually the files are a database containing Segments. A Segment sta...

Determine if an element was clicked?

javascript jquery modal-dialog

How can I determine if an element was clicked with jQuery?