Salaam Alike dear Don,
I went through your guide and chose the first option. I can render map with shape file in view but how to re-render the map through Jquery/Javascript to query data from database. My code samples are as below. Please guide me through the scenario.
// Controller Start
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ThinkGeo.MapSuite;
using ThinkGeo.MapSuite.Drawing;
using ThinkGeo.MapSuite.Layers;
using ThinkGeo.MapSuite.Mvc;
using ThinkGeo.MapSuite.Styles;
using ThinkGeo.MapSuite.Portable;
using ThinkGeo.MapSuite.Serialize;
using ThinkGeo.MapSuite.Shapes;
using GIS_Test.Models;
namespace GIS_Test.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public Map LoadMap(FormCollection formdata)
{
// variable (formdata) will used later as database query condition
WashDb_Entities db = new WashDb_Entities();
// The variable (data) retrieves data from database and has three columns (ProvinceID, Province, Budget)
// The column (ProvinceId) could be used to join database data with shape file.
var data = db.GetProvinceBudget().ToList();
Map map = new Map(“Map1”,
new System.Web.UI.WebControls.Unit(100, System.Web.UI.WebControls.UnitType.Percentage),
new System.Web.UI.WebControls.Unit(100, System.Web.UI.WebControls.UnitType.Percentage));
map.MapBackground = new GeoSolidBrush(GeoColor.StandardColors.LightBlue);
map.CurrentExtent = new RectangleShape(6643042.96358, 4644924.705353, 8355232.396930, 3421932.252960);
map.MapUnit = GeographyUnit.DecimalDegree;
GoogleOverlay googleoverlay = new GoogleOverlay();
googleoverlay.JavaScriptLibraryUri = new Uri("https://maps.googleapis.com/maps/api/js?key=AIzaSyCmUdrvN5g-MInWQHMBP9nloldwCvjrs1Y&callback=myMap");
googleoverlay.GoogleMapType = GoogleMapType.Hybrid;
googleoverlay.IsBaseOverlay = true;
map.CustomOverlays.Add(googleoverlay);
InMemoryFeatureLayer provincelayer = new InMemoryFeatureLayer();
// The shape file has the columns ProvinceID, and Prov_Name. The data could be join based on the column ProvinceID
provincelayer.InternalFeatures.Add("Province", new Feature(Server.MapPath("~/Layer/Province635563247814151837.SHP")));
provincelayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.CreateSimpleAreaStyle(GeoColor.FromArgb(100, 212, 220, 184), GeoColor.FromArgb(255, 132, 132, 154), 1);
provincelayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
LayerOverlay MappedData = new LayerOverlay();
MappedData.Layers.Clear();
ClassBreakStyle classBreakStyle = new ClassBreakStyle();
provincelayer.ZoomLevelSet.ZoomLevel01.CustomStyles.Add(classBreakStyle);
Proj4Projection proj4 = new Proj4Projection();
proj4.InternalProjectionParametersString = Proj4Projection.GetEpsgParametersString(4326);
proj4.ExternalProjectionParametersString = Proj4Projection.GetGoogleMapParametersString();
provincelayer.FeatureSource.Projection = proj4;
MappedData.Layers.Add(provincelayer);
map.CustomOverlays.Add(MappedData);
return map;
}
}
}
// Controller End
// View Start
@{
ViewBag.Title = “Home Page”;
}
@using ThinkGeo.MapSuite;
@using ThinkGeo.MapSuite.Drawing;
@using ThinkGeo.MapSuite.Layers;
@using ThinkGeo.MapSuite.Mvc;
@using ThinkGeo.MapSuite.Styles;
@using ThinkGeo.MapSuite.Shapes;
@using System.Configuration;
@{
Html.ThinkGeo().Map(“Map1”, new System.Web.UI.WebControls.Unit(100, System.Web.UI.WebControls.UnitType.Percentage), 510)
.MapBackground(new GeoSolidBrush(GeoColor.FromHtml("
#E5E3DF")))
.CurrentExtent(6643042.96358, 4644924.705353, 8355232.396930, 3421932.252960)
.MapUnit(GeographyUnit.Meter)
.MapTools(tools =>
{
tools.OverlaySwitcherMapTool().Enabled(true);
tools.MouseCoordinateMapTool().Enabled(true);
})
.CustomOverlays(overlays =>
{
overlays.GoogleOverlay(“Google Map”)
.JavaScriptLibraryUri(new Uri(“
https://maps.googleapis.com/maps/api/js?key=AIzaSyCmUdrvN5g-MInWQHMBP9nloldwCvjrs1Y&callback=myMap”))
.GoogleMapType(GoogleMapType.Normal);
FeatureLayer layer = new ShapeFileFeatureLayer(Server.MapPath("~/Layer/Province635563247814151837.SHP"));
layer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.CreateSimpleAreaStyle(GeoColor.FromArgb(100, 212, 220, 184), GeoColor.FromArgb(255, 132, 132, 154), 1);
layer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
Proj4Projection proj4 = new Proj4Projection();
proj4.InternalProjectionParametersString = Proj4Projection.GetEpsgParametersString(4326);
proj4.ExternalProjectionParametersString = Proj4Projection.GetGoogleMapParametersString();
layer.FeatureSource.Projection = proj4;
overlays.LayerOverlay("Shape Overlay", false, TileType.SingleTile)
.Layer(layer);
})
.Render();
}
@section Scripts{
<script type="text/javascript">
$("body").on("submit", "#GISSearch", function () {
$.ajax({
type: 'POST',
url: '/@ViewContext.RouteData.Values["Controller"].ToString()/GetGISMap',
data: $("#GISSearch").serialize()
})
.done(function (data) {
// Code to redraw map
})
.fail(function () {
alert("Error");
});
return false;
});
}
// I removed some HTML codes since they were rendered by browser and were not readable.
// View End
