Ignite UI Map (igMap) is one of the most exciting features of the new Infragistics Ignite UI Vol. 2.12 . This blog is the first of a series of articles dedicated to new opportunities of Ignite UI Geospatial Map
Ignite UI Geospatial Map
Released as CTP in 12.1, the Geospatial Map is now RTM. Create highly detailed, thematic geographical maps using an innovative feature set that includes custom shape templates, the ability to render polyline and polyshapes, Map Progression, Scatter Area Plots, and intuitive Overview Pane and much more.
The underlying rendering engine of the Geospatial Map (igMap) is the same as the Data Chart, so in addition to a wide variety of tile sources, you can also bind & render thousands to millions of data points on the map. Bing, CloudMade, OpenStreet, ESRI Shape Files and custom tiles are supported, as well as the following series types:
- Contour Line
- Scatter Area
- Geographic Shape
- Geographic Symbol
The code above should work for either shape or polyline series. Basically the member path should point at an array of arrays of points. Its an array of arrays so that you can define multiple shapes to be part of the same “item”.
Spatial Data in the Entity Framework
For developers, it would be useful to see how to apply these new features in practice. In this article we will create an example where using Ignite UI Map, Microsoft SQL Server 2012 Spatial Data and Entity Framework 5.
Many developers have been asking for support of Spatial data types in the Entity Framework. It was a dream for the Microsoft ORM users to create .NET business applications quickly, using spatial data. Entity Framework 5 has support for spatial types. The Spatial functionality in EF5 requires .NET 4.5.
The Spatial functionality in EF5 requires .NET 4.5. This means you will need Visual Studios 2012 installed. You can download the release candidate for VS 2012 here: http://www.microsoft.com/visualstudio/eng/downloads
Prior to Entity Framework 5.0 on .NET 4.5 consuming of the data above required using stored procedures or raw SQL commands to access the spatial data. In Entity Framework 5 however, Microsoft introduced the new DbGeometryandDbGeography types. These immutable location types provide a bunch of functionality for manipulating spatial points using geometry functions which in turn can be used to do common spatial queries like I described in the SQL syntax above.
The DbGeography/DbGeometry types are immutable, meaning that you can’t write to them once they’ve been created. They are a bit odd in that you need to use factory methods in order to instantiate them – they have no constructor() and you can’t assign to properties like Latitude and Longitude.
It is important to mention that these types are defined in System.Data.Entity assembly in System.Data.Spatialnamespace. By now you have probably used types SqlGeometry and SqlGeography types, defined inMicrosoft.SqlServer.Types namespace.
Entity Model with Spatial Data
SqlSpatialDemo database contains table world. This table contains filed “geom” from type “geometry”.
Spatial Data Types Overview
There are two types of spatial data. The geometry data type supports planar, or Euclidean (flat-earth), data. The geometry data type both conforms to the Open Geospatial Consortium (OGC) Simple Features for SQL Specification version 1.1.0 and is compliant with SQL MM (ISO standard).
In addition, SQL Server supports the geography data type, which stores ellipsoidal (round-earth) data, such as GPS latitude and longitude coordinates.
Spatial Data Objects
The geometry and geography data types support sixteen spatial data objects, or instance types. However, only eleven of these instance types are instantiable; you can create and work with these instances (or instantiate them) in a database. These instances derive certain properties from their parent data types that distinguish them as Points, LineStrings, CircularStrings, CompoundCurves, Polygons, CurvePolygons or as multiple geometry or geography instances in a GeometryCollection. Geography type has an additional instance type, FullGlobe.
Overview of Geometric “Set Theory” Methods
These Methods help to understand the relationship between spatial objects & also to create new objects that show that relationship.
In this example we will use methods STBoundaty, STEnvelope and STCentroid.
Let’s create a query that returns an object from geometry type:
- Returns :
– Perimeter of a polygon, as a Linestring
– Start/End Points of a Line. As a MultiPoint( (End X,Y), (Start X,Y) )
NB: If the line is closed ie: Start & End are the same, then returns Empty
- Works with Geometry objects only. It is not a method of Geography Objects.
- Returns the minimum axis-aligned bounding rectangle of the instance.
- Geometric centre of a (multi)Polygon. Null for Points & Lines.
- Works with Geometry objects only. It is not a method of Geography Objects.
- Similar to geography method STEnvelopeCentre()
POINT (16.741489174464782 62.787187265501657)
You can use these methods with geometry objects from Entity Framework using Geometry.Envelope, Geometry.Centroid and some additional logic to create geometry boundary.
ASP.Net MVC 4 Application with Entity Framework 5 and Ignite UI Components
- Spatial Data Maintenance
When you have a data from DbGeometry / DbGeography type you can’t serialize it.
We will create own classes that could be serialized
ContryInfo is a helper class used to serialize data
SpatialPoint is a helper class to keep a point data.
SpatialRect is a helper class to keep an extend of the country
CountryByName method serializes results to JSON to be possible to use it in the view
GetGeometryBoundary is a helper method used to get a list of points, representing an envelope of a DbGeometry instance. Don’t forget that DbGeometry/DbGeography point indexes start from 1 !.
GetBounds is an extension method used to get a boundary of the list of points.
GetGeometryCentroid is a helper method used to get point representing geometric center of a DbGeometry instance.
GetGeometryPoints is a helper method used to get a nested list of point representing nodes of a DbGeometry instance.
The view presents a dashboard from Infragistics jQuery Grid, Chart and Map.
Infragistics Ignite UI Map instance definition.
Set the igMap extend
Create Geographic Symbol Series that use markers with position, specified as a geometry centroid.
Let’s put it all together
The most important part in the sample is how to query the controller’s method that returns spatial data (the country extend in this case). The code below shows how jQuery code calls the controller, when the grid row selection is changed.
Run the application
For this sample is used Really Simple Color Picker in jQuery.
Usage of color picker is very straightforward. Users can either pick a color from the predefined color palette or enter hexadecimal value for a custom color.
The code below shows how to change the Geographic Shape Series color.
You can navigate around the map with both Geographic Shape Series and Geographic Symbol Series
You are probably thinking, how do I get my hands on Ignite UI Map? It’s easy.
Click on this image to get a fully support trial version of Infragistics Ignite UI controls:
To view all the samples and code for HTML, MVC & ASP.NET, click there:
Follow news from Infragistics for more information about new Infragistics products.
Source code is available here. Sample project is created with Visual Studio 2012, but you can use NetAdvantage 12.2 controls with both: Visual Studio 2012 and Visual Studio 2012. As always, you can follow us on Twitter @mihailmateev and @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!