Drawing Shapes Sample

A sample about ASP.NET Google Map Control shapes draw, persist and load.

The map will load from the database and show last 100 polygons persisted.
The shapes will be saved automatically. When you complete a polygon draw a server-side OnPolygonComplete will be fired and polygon is going to be saved in a database. Check out the source code bellow.

Thank you for using the Development Build of ASP.NET Google Map Control to build Google Maps faster.
Purchase the Commercial Build now to get access to all product updates and the ASP.NET Google Map Control expert support.

Source

Markup

<%@ Page Language="C#" MasterPageFile="../../Maps.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="GoogleMaps.Samples.Maps.Drawing.Shapes.Default" %>

<asp:Content ContentPlaceHolderID="MainContent" runat="server">
    <div class="jumbotron">
        <h2>Drawing Shapes Sample</h2>
        <p>A sample about ASP.NET Google Map Control shapes draw, persist and load.</p>
    </div>
    <p>
        The map will load from the database and show last 100 polygons persisted.<br />
        The shapes will be saved automatically. When you complete a polygon draw a server-side <b>OnPolygonComplete</b>
        will be fired and polygon is going to be saved in a database. Check out the source code bellow.
    </p>
    <div class="map-wrap">
        <map:GoogleMap ID="GoogleMap1" runat="server" MapType="HYBRID" Zoom="8" Latitude="42.1229" Longitude="24.7879" CssClass="map" DefaultAddress="sofia"
            Width="100%" Height="600px" FullscreenControl="true">
        </map:GoogleMap>
        <map:DrawingManager ID="GoogleManager1" TargetControlID="GoogleMap1" runat="server" DrawingMode="Polygon" OnPolygonComplete="HandlePolygonComplete">
            <DrawingControlOptions DrawingModes="polygon" Position="TopLeft" />
        </map:DrawingManager>
    </div>
    
</asp:Content>

Code Behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.UI.WebControls;
using GoogleMaps.Drawing;
using GoogleMaps.Overlays;
using GoogleMaps.Samples.Data;

namespace GoogleMaps.Samples.Maps.Drawing.Shapes
{
    public partial class Default : System.Web.UI.Page
    {
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);

            // use entity framework context to load the data from a database
            using (var context = new DataContext())
            {
                var shapes = context.Shapes.Include("Path")
                    .OrderByDescending(x => x.ID)
                    .Take(100)
                    .ToList();
                foreach (var shape in shapes)
                {
                    GoogleMap1.Overlays.Add(new GooglePolygon
                    {
                        Paths = shape.Path.Select(x => new LatLng(x.Latitude, x.Longitute)).ToList()
                    });
                }
            }
        }

        protected void HandlePolygonComplete(object sender, DrawingPolygonEventArgs e)
        {
            // use entity framework context to persist the polygon data into a database
            using (var context = new DataContext())
            {
                var shape = new Shape { ID = Guid.NewGuid() };
                var path = new List();
                var index = 0;

                foreach (var x in e.Path)
                {
                    path.Add(new ShapePoint { Index = index++, Latitude = x.Latitude, Longitute = x.Longitude });
                }
                shape.Path = path;

                context.Shapes.Add(shape);

                context.SaveChanges();
            }
        }
    }
}

Data Context

using System;
using System.Data.Entity;

namespace GoogleMaps.Samples.Data
{
    public class DataContext : DbContext
    {
        public DataContext() : base("Samples") { }

        public DbSet Shapes { get; set; }
        public DbSet States { get; set; }

        protected override void OnModelCreating(DbModelBuilder builder)
        {
            base.OnModelCreating(builder);

            builder.Entity().HasKey(x => new { x.ShapeID, x.Index });
        }
    }
}

Shape Point Entity

using System;
using System.ComponentModel.DataAnnotations;

namespace GoogleMaps.Samples.Data
{
    public class ShapePoint
    {
        public Guid ShapeID { get; set; }

        public int Index { get; set; }

        public double Latitude { get; set; }

        public double Longitute { get; set; }
    }
}

Shape Entity

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;

namespace GoogleMaps.Samples.Data
{
    public class Shape
    {
        [Key]
        public Guid ID { get; set; }

        public ICollection Path { get; set; }
    }
}