How add WMS layers with gwt-openlayers? - google-maps

I'm trying to add WMS layer from remote ArcGIS server to my GWT web app. I'm using gwt-openlayers library.
My code:
MapOptions defaultMapOptions = new MapOptions();
mapWidget = new MapWidget("100%", "100%", defaultMapOptions);
Map map = mapWidget.getMap();
//gNormal = new GoogleV3("Google Normal", gOptions);
//map.addLayer(gNormal);
WMSParams wmsParams = new WMSParams();
wmsParams.setFormat("image/png");
wmsParams.setLayers("1");
wmsParams.setStyles("");
WMSOptions wmsLayerParams = new WMSOptions();
wmsLayerParams.setUntiled();
wmsLayerParams.setProjection("EPSG:3857"); // is it correct setting for WMS layer?
// wmsLayerParams.setProjection("EPSG:102113");
// wmsLayerParams.setProjection("EPSG:4326");
wmsLayerParams.setTransitionEffect(TransitionEffect.RESIZE);
String wmsUrl = "sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer";
arcGis = new WMS("ArcGis", wmsUrl, wmsParams);
map.addLayer(arcGis);
map.setBaseLayer(arcGis);
LonLat lonLat = new LonLat(-84.1,36.4); //USA
lonLat.transform("EPSG:4326", map.getProjection());
//System.out.println("map projection "+map.getProjection());
map.setCenter(lonLat, 3);
add(mapWidget);
I read many articles and SO questions but I still can't solve the problem. My problem is rendering pink tiles on the map instead of normal image. I copied image url as many stackoverflow answers suggested and saw the following:
http://localhost:8084/sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer?FORMAT=image%2Fpng&LAYERS=1&STYLES=&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&SRS=EPSG%3A4326&BBOX=-135,45,-90,90&WIDTH=256&HEIGHT=256
Without localhost:8084 prefix url works fine and shows me small piece of map.
Questions:
1) How get rid from localhost prefix in WMS url? In my code wmsUrl look like sampleserver1... so it's correct. It seems my application adds it's root path to remote url.
2) I read that WMS layers should have the following projection - "EPSG:3857". Is it true? As i mentioned above when I manually put in the browser correct url without "localhost" prefix I saw some image but I'm not sure it's correct. Probably image is shifted.
3) My final goal is adding 2 layers to the map - Google Map layer and WMS layer. Google Map uses "EPSG:900913" as default projection. Could somebody give common tips to place google layer and WMS layer in one map. May be there are some tricks, common mistakes related to projections an so on.

In the wmsUrl variable, you are missing the "http://", that may help.
Pink tiles generally mean that the data source was not found, so this is where you should look for the problem. Try checking the wms URL you are supplying in a wms viewer (e.g. ArcGIS Explorer ).
To your questions:
1)try just adding the http:// to your url, without the localhost
2)A WMS layer can have any projection, it depends solely on the projection in which it was published. Information about a specific WMS's projection should be found in metadata.
3)If the two layers have the same projection, you do not need to do anything. If you want to use two layers in different projections in one map, one of the layers must be reprojected. In pure OpenLayers, this is done by specifying the projection parameter for each layer and then specifying the displayProjection parameter for the map. The layers will automatically be reprojected. However, reprojection takes some time and it increases the load time VERY significantly. It is better to avoid reprojection on-the-fly, if possible. You can either reproject the source data of one of the layers and use reprojected data. Of course, this is not possible for a WMS, so you should consider using a different data source. If you want a background map, you can donwload OpenStreetMap data, reproject them to your desired projection, and then use them with the other WMS you want to use.
Hope at least some of this helps :-)

Related

JavaScript/Google Maps - Draw a path using multiple lat,long

I am tracking drivers by the end of the trip an array containing all the coordinates (lat, long) routes taken is generated. Using that array of lat, long coords I want to draw a path using Google Maps, more specifically its directionService. So far, I didn't succeed as the way I found is to use waypoints, but way points are by default limited to 15; however, I have much more than that.
I am looking for a way on how to draw that path using multiple coords, there exists several apps doing it, such as UBER, Lyft, etc...
Here is the array of coords:
[35.77204705542798,-5.815865197320899,35.77205120747819,-5.815754188240848,35.77197468036722,-5.815810097181759,35.77201185726312,-5.816182008817898,35.77188028308802,-5.816782866625928,35.77144809183601,-5.817054836919457,35.77130127311978,-5.817231221149015,35.77121654704168,-5.817323279458099,35.77197602552531,-5.818491135420929,35.77211527443405,-5.818831898394636,35.77220613582161,-5.819054426882189,35.77225761824354,-5.819182167400329,35.77557809840525,-5.819685065789988,35.77522352494348,-5.821346612263469,35.77815743782872,-5.822735160242799,35.77863231735067,-5.822959942846667,35.77915215012052,-5.823206036666789,35.77917987363854,-5.82321907562955,35.77913908191616,-5.825751400638378,35.77947725976961,-5.826044519616627,35.77923063670355,-5.82893344672563,35.77920722271806,-5.829544463218058,35.77924325929096,-5.82965650991142,35.77913169320556,-5.830906964998152,35.77917349450947,-5.830173084585434,35.78563643141488,-5.829373128632887,35.7859055726137,-5.829317961099034,35.78659089504106,-5.829249272155759,35.78704770052305,-5.829163948962961,35.78696081760869,-5.829114610331397,35.78687737614365,-5.829067226012621,35.78679073445069,-5.829018024365507,35.78661289235281,-5.828929232334034,35.78652027010703,-5.828884857172518,35.78643576729606,-5.828844387274908,35.78635159916791,-5.828804167105649,35.7862672257822,-5.828763857888811,35.7872100444153,-5.866787159467321]
IF you want to do is drawing simple line, see this link.
https://developers.google.com/maps/documentation/javascript/examples/polyline-simple
Unlike Direction service, there is no waypoints limitation.

MapBox ESRI Data Layer

I have a mapbox, and want to display a layer of esri data onto it. The data I'm getting is being pulled in from this json file:
https://gis.usps.com/arcgis/rest/services/EDDM/selectZIP/GPServer/routes/execute?f=json&env%3AoutSR=102100&ZIP=93003&Rte_Box=R&UserName=EDDM
The data['results'][0]['value']['features'] array looks something like this:
[{'attributes': {'key':'value'}},{'geometry':{'paths':[[-13273770,4064608],[-13273762,4064613],....]}},
{'attributes': {'key':'value'}},{'geometry':{'paths':[[-13273770,4064608],[-13273762,4064613],....]}},
{'attributes': {'key':'value'}},{'geometry':{'paths':[[-13273770,4064608],[-13273762,4064613],....]}}}]
My question is about the geometry array. The data there is not Lat/Lng values (which I was hoping for), so I'm not sure how to add these to my map. I'm new to GIS, and the research I've done so far points to SpatialReferences. Any help is obviously much appreciated!
MapBox seems to only accept Latitude and Longitude coordinates (from what I can tell at least). The coordinates you have in your file come from ESRI 102100 (3857) projection system - the clue is near the beginning of your file:
"spatialReference":{"wkid":102100,"latestWkid":3857}..."
Normally, you'd have to convert this yourself, a good link for potential tips in the future is:
https://gis.stackexchange.com/questions/9442/arcgis-coordinate-system
On this occasion however, you can do something far easier. Simply change the "outSR" property of your URL from 102100 to 4326 (WGS84) and let it do it for you.
https://gis.usps.com/arcgis/rest/services/EDDM/selectZIP/GPServer/routes/execute?f=json&env%3AoutSR=4326&ZIP=93003&Rte_Box=R&UserName=EDDM

How can I generate a file like this for Bing Heat Map data?

I am working on a fairly simple Heat Map application where the longitude and latitude of the points will be stored in a SQL Server database. I have been looking at an example that uses an array of objects as follows (eliminated a lot of data for brevity):
/* Sample data to demonstrate Bing Maps Heatmap */
/* http://alastair.wordpress.com */
var CrimeData = [
new Microsoft.Maps.Location(52.67280, 0.94392),
new Microsoft.Maps.Location(52.62423, 1.29493),
new Microsoft.Maps.Location(52.62187, 1.29080),
new Microsoft.Maps.Location(52.58962, 1.72228),
new Microsoft.Maps.Location(52.69915, 0.24332),
new Microsoft.Maps.Location(52.51161, 0.99350),
new Microsoft.Maps.Location(52.59573, 1.17067),
new Microsoft.Maps.Location(52.94351, 0.49153),
new Microsoft.Maps.Location(52.64585, 1.73145),
new Microsoft.Maps.Location(52.75424, 1.30079),
new Microsoft.Maps.Location(52.63566, 1.27176),
new Microsoft.Maps.Location(52.63882, 1.23121)
];
What I want to do is present the user with a list of some sort that displays all the data sets that exist in the database (they each have a name associated with them) and then allow the user to check all or only a select few. I will then need to generate an array like the above to create the heat map. Any ideas on a good approach to this?
What you trying to achieve is more related to a web developement rather than only related to Bing Maps.
To summarize, you have multiple ways to do this but it really depends on what you are capable to do and what you need in the interface.
What process/technology?
First, you need to determine what process you want to follow to display the data and it will set the technology that you will use. The questions that you need to ask yourself are:
Do you want to be able to change the data sets dynamically without refreshing the whole page?
If yes, it means that you will have to use asynchronous data loading through a dedicated web service in order to avoid loading all the information at the initial load of the page.
Do you have lots of data to load?
If so, it might comfort you with asynchronous loading to avoid loading all data.
If not loading every elements in multiple arrays might be the simplest solution.
Implementation
So now, you want to create a web service to load the data asynchronously, you can take a look at the following websites :
http://www.asp.net/get-started
http://www.stefanprodan.com/2011/04/async-operations-with-jquery-ajax-and-asp-net-mvc/
There might be interesting other website, you will be able to find them. If needed, add comment and I'm sure the community will help you.
If you want to generate the data directly in the script, it could be simple as you can compose the JavaScript directly in your dynamically created HTML page (in your ASP.Net markup code or whatever technology you're using).

GIS: How to resize layer using .prj (WKT) projection? (Geographic Coordinate System)

Briefly:
How to parametrize .prj WKT file so that I can perform 7 point tranformation (wiki). I know how false_easting and false_northing params work, but how can I adjust scale? I do not mean scale_factor'
That's the problem description:
I have transportation network (vector layer) saved in non-GIS environment (transport modeling software). Network consists of nodes (points) and polylines (road links). It's done mostly from random backgrounds, regardless any projection, coordinates, etc.
I need to set appropriate projection for the network.
I have accesss to .prj files (if I'm in an say WGS84 projection I can switch to any other projection)
So that's what I'm trying:
I try 7 point Helmert Transformation (http://proj.maptools.org/gen_parms.html). I use towgs84 transformation as a WKT param in .prj file, where I assume that rotation matrix is zero (can I do so?) and I calculate only delta_x, and delta_y, and scale param.
However it will not work. This is my .prj , params in TOWGS84 do not affect transformation:
PROJCS["UTM 17 (WGS84) in northern hemisphere.",
GEOGCS["WGS 84",
DATUM["WGS_1984",
SPHEROID["WGS 84",6378137,298.257223563],
TOWGS84[0,0,0,0,0,0,100000000000000000000000]],
PRIMEM["Greenwich",0],
UNIT["DMSH",0.0174532925199433],
AXIS["Lat",NORTH],
AXIS["Long",EAST],
PROJECTION["Transverse_Mercator"],
PARAMETER["latitude_of_origin",0],
PARAMETER["central_meridian",0],
PARAMETER["scale_factor",1],
PARAMETER["false_easting",0],
PARAMETER["false_northing",0]]
So I tried to use false_norting and false_easting params, and those work good, and transform my network proprely, BUT:
It will not chcange scale of my network, only position. So how can I rescale my network using .prj file?
Thanks for any hints
Problem solved: both 'scale_factor' , and UNIT['Meter',%scale_factor] works only if datum changes.
Actually comments at the same problem at gis.stackexchange.com/ here brought me to solution.
Anyway: .prj files, Geo Coordinate Systems, proj4js, EPSG etc. are vary weakly documented: no API, no tutorials, no examples, no refernces.
i.e.
1)not any straighforward description of what EPSG database codes are, and which should be chosen.
2)what +proj parameters should I choose to define projection
3)how to create .prj and what are parameters of specific .prj file elements.
awful programming area!

How to draw line connecting route between several points on Google Map?

I have real-time GPS data stored in a database and I'm currently pulling the lat/lon from this data and dynamically displaying them as markers on a Google Map.
What I'm trying to accomplish is to use these lat/lon points to draw a path connecting them. I looked at GDirections, but that seems like it's only used to connect two points together. I'm looking for something where I can send a bunch of GPS coordinates, from start to finish, and have it draw the path on the map connecting them.
Any guidance is greatly appreciated.
Apparently it was a lot easier than I thought.
The following will do the trick:
echo "var polyline = new GPolyline([new GLatLng($startlat, $startlon), new GLatLng($endlat, $endlon)], \"#ff0000\", 10);";
echo 'map.addOverlay(polyline);';