ThinkGeo.com    |     Documentation    |     Premium Support

Is it possible to project point on client side using Java Script

#1

I’m looking for possibility to re-project point from EPSG:4326 (Decimal Degree) to EPSG:3395 (Mercator) using Java Script in order to avoid server call.

I checked ThinkGeo MVC Java Script reference and could not find info regarding re-projection.



Thanks.

#2

Hi Sergei,



Yes, we can do this. Mvc Edition is using Openlayer(v 2.13) as its client engine to render map, so, we can use any openlayers APIs to to this.



Another thing is since the epsg 3395 is not included in openlayer library by default, we need to do this with the help of proj4js. More details on it, please refer to dev.openlayers.org/releases/…Projection



The below is the answer for your question:


    <scrip type=“text/javascript” src="<a href=“svn.osgeo.org/metacrs/proj4js/trunk/lib/proj4js-compressed.js">svn.osgeo.org/metacrs/proj4j...pressed.js</a>"></cript>
    <scrip type=“text/javascript” src=”<a href="spatialreference.org/ref/epsg/3395/proj4js/">spatialreference.org/ref/epsg/3395/proj4js/</a>"></cript>
<scrip type=“text/javascript”>
        var lon = 5;
        var lat = 40;
     var geometry = new OpenLayers.Geometry.Point(lon, lat);
     geometry.transform(
        new OpenLayers.Projection(‘EPSG:4326’),
        new OpenLayers.Projection(‘EPSG:3395’)
    );
            alert(geometry.toString());
        }
    </cript>

It works in my end.

Any questions, please feel free to let us know.

Thanks,

Troy

#3

Thank you for your help.

Another question: how to get features count in the layer?

                                how to add new features to the layer?


'initialize layer
Dim areaLayer As New InMemoryFeatureLayer
With areaLayer
  .ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.Country1
  .ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20
End With
Dim areaShape As New RectangleShape(New PointShape(-90, 90), New PointShape(-80, 80))
areaLayer.InternalFeatures.Add(New Feature(areaShape))
 
'add layer to the map in view
With Html.ThinkGeo().Map(“AreaMap”, New System.Web.UI.WebControls.Unit(500, System.Web.UI.WebControls.UnitType.Pixel),
                             New System.Web.UI.WebControls.Unit(300, System.Web.UI.WebControls.UnitType.Pixel))
  .MapBackground(New BackgroundLayer(New GeoSolidBrush(GeoColor.FromArgb(255, 214, 199, 173))))
 
  .MapUnit(GeographyUnit.DecimalDegree)
 
  .CustomOverlays(Sub(overlays)
          overlays.LayerOverlay(“areaOverlay”).TileType(TileType.SingleTile).IsBaseOverlay(False).Layer(“areaLayer”, areaLayer)
           End Sub)
 
      .CurrentExtent(areaShape.UpperLeftPoint.X, areaShape.UpperLeftPoint.Y, areaShape.LowerRightPoint.X, areaShape.LowerRightPoint.Y)
 
      .Render()
    End With

in view i get layer by name
var layer = AreaMap.getLayer(“areaOverlay”);
I need to get features count in this layer

I would like to add new features to this layer using Java Script on client side

Is this possible?



#4

Hi Sergei,



Do you mean getting/adding the feature is in server side or client side?

If you mean server side, it would be easy with the below codes:

 

areaLayer.InternalFeatures.Count 
//add new feature to a InMemoryFeatureLayer
areaLayer.InternalFeatures.Add(New Feature(0, 0))


If you mean client side, then we have to add or get the result by ajax call, the codes would be like the below:


    <MapActionFilter()> _
    Public Sub AddFeature(map As Map, args As GeoCollection(Of Object))
        Dim position As New PointShape(Convert.ToDouble(args(0)), Convert.ToDouble(args(1)))
 
        Dim areaLayer As InMemoryFeatureLayer = DirectCast(map.CustomOverlays(“MarkerOverlay”), LayerOverlay).Layers(0)
        areaLayer.FeatureSource.InternalFeatures.Add(“marker” + Guid.NewGuid().ToString(), New Feature(position))
    End Sub
 
function mapClick(e) {
    var params = { x: e.worldXY.lon, y: e.worldXY.lat };
    Map1.ajaxCallAction(’@ViewContext.RouteData.Values(“Controller”).ToString()’, ‘AddFeature’, params, function () {
        Map1.redrawLayer(‘MarkerOverlay’);
    });
}

If any questions, please feel free to let us know.

Thanks,

Troy

#5

Troy,

thanks for your help.

Utilizing server side is easy for sure and I’m using it.



I mean getting/adding the feature in client side to avoid server trips especially when too many features have to be added.

I get GPS points from navigator.geolocation.getCurrentPosition call and would like to create a polygon each time different point is available.

#6

Hi Sergei,



The above way I provided before needs to communicate with server side. This is because the InMemoryFeatureLayer is an tile image layer rather than a vector layer in client side, so we need to add features in server side and redraw the layer in client side.



But if you don’t want to decrease the interactive times with server, we can create an openlayers vector layer and then add the features into this layer without calling to server. Then, once we submit those inserted features to the server side, we read out those feature from the vector layer and then submit them with ajax call. 

The openlayer vector layer provides many good api and styles for us to manager the layer flexibly in client side. More details about this layer please refer to dev.openlayers.org/releases/…or-js.html



Both of the two ways should be fit for you except the second way needs more client codes. If any questions on them, please feel free to let us know.

Thanks,

Troy