Category Archives: Code

Many points with d3 and leaflet

Update August 2015: check “scaled”- based fast SVG rendering on top of Leaflet here

manypoints

Testing SVG limits of plotting points on map using D3, Leaflet following this base sample:http://bost.ocks.org/mike/leaflet. However instead of scaling SVG in deep zooms, I am using Enter/Update/Exit pattern from D3 to dynamically update points on map. This has been prototyped also here http://bl.ocks.org/sumbera/9972460 with brushing of 100T points.

For zooming out (causing all points to be displayed), I am filtering out points that can’t be effectively visible, thus reducing number of points in SVG. (check console for log output).

This sample is using real data of 24T coordinates where points are clustered around cities, rather than artifically randomized. Real number of rendered points / removed points can be seen in console

Test page : http://bl.ocks.org/sumbera/10463358

Leaflet, WebGL / Canvas tiled vectors

From .NET to iOS developer

Tiled WMS overlay in Windows Phone 8

3 Replies

Update May 2014: version for Windows Phone 8.1 is here: https://blog.sumbera.com/2014/05/23/wms-overlay-on-windows-8-1-and-windows-phone-8-1/

Looking on Windows Phone 8 Map SDK, I have tried to migrate a simple WMS overlay from Windows Phone 7 (Bing map) – blogged here : https://blog.sumbera.com/2010/11/07/tiled-wms-overlay-in-windows-phone-7/

Changes :

– for migration you have to add before migration System.Core into the project (had to edit manualy proj file and add it there)

-Change from *.Controls.Map to *Map.Controls

– XAML definition

 <maps:Map x:Name="sampleMap"
 LandmarksEnabled="False"
 Loaded="sampleMap_Loaded"
 CartographicMode="Hybrid"                    
 Center="49.320574,16.68942"
 ZoomLevel="14" />

Loading TileSource:

private void sampleMap_Loaded(object sender, RoutedEventArgs e)
{
MapsSettings.ApplicationContext.ApplicationId = "<applicationid>";
MapsSettings.ApplicationContext.AuthenticationToken = "<authenticationtoken>";
TileSource wmsTileSource = new WMSTile();
sampleMap.TileSources.Add(wmsTileSource);
}

..then in your TileSource you can use as usual your method GetUri.

Sample code based on Microsoft Sample can be downloaded here: www.sumbera.com/lab/WP8/WMSonWP8.zip

WMS overlay in iOS MapKit

1 Reply

update May 2014: iOS7 version and notes available here: https://blog.sumbera.com/2014/05/17/wms-on-mapkit-with-ios7/

I have crafted really simple and quick code at ESA App dev camp for viewing WMS sources. And as few people questioned me on how to do this, I am posting the full code of the MapView component that takes sample WMS service (Ozone) and overlays this above MapKit.

In github here : https://github.com/Sumbera/WMSoverMapKit

you will find MapViewController that accepts WMS sources stored as array with BBOX %f, %f, %f, %f

-(void) addWMSOverlays: (NSArray*) overlays

this can be called from your rootController:

MapViewController * mapViewController = [[MapViewController alloc] init];

WMSOverlay * wmsOverlay =[[WMSOverlay alloc]
 initWithName:@"Ozone" Url:@"http://wdc.dlr.de/ogc/produkt_t?LAYERS=GOME2_O3&
 TRANSPARENT=TRUE&
 FORMAT=image/png&
 STYLES=&
 SLD=http%3A%2F%2Fwdc.dlr.de%2Fsld%2FGOME2_O3_sld.xml&
 TIME=2012-02-12T00:00:00Z&
 SERVICE=WMS&
 VERSION=1.1.1&
 REQUEST=GetMap&
 SRS=EPSG:4326&
 WIDTH=256&
 HEIGHT=256" 
 Opacity:0.5];
  [mapViewController  addWMSOverlays:[NSArray arrayWithObjects:wmsOverlay, nil]];

please note:

#1. that sample code uses experimentaly MKNetworkKit, which has some occasional troubles. You can replace the download method in WMSOverlayView class downloadTile

#2 it uses simple hash for storing tiles on cache.

enjoy

How to erase iOS6 maps in MapKit

4 Replies

Update: be aware as this is not working on iOS7, however in iOS7 MapKit officially supports to disable base layer !

This blog : https://blog.sumbera.com/2011/09/18/how-to-disable-base-google-maps-in-mapkit/ wrote about how to disable Google maps in MapKit. Now with new iOS6 and brand new Apple maps and OpenGL rendering , the question is how to disable rendering of the base maps without using undocumented functions. Removing whole base layer (VKMapView) is possible but cripples touch handling of the overlays. So here is very simple way how to do this without removing VKMapView – just set opacity of the layer to 0.0. This will erase base iOS6 maps .

+(void) eraseiOS6maps:(UIView*) mapView{
   // -- get rendering layer
    UIView *rootView = [mapView.subviews objectAtIndex:0];
    UIView *vkmapView = [rootView.subviews objectAtIndex:0];
    UIView *vkmapCanvas = [vkmapView.subviews objectAtIndex:0];
   // -- set opacity to 0.0 
    [vkmapCanvas.layer setOpacity:0.0];
}

View hierarchy:

MkMapView/UIView/VKMapView/VKMapCanvas
MkMapView/UIView/MkScrollContainerView/MkOverlayContainerView/MkOverlayClusterView/<your overlay>
MkMapView/UIView/MkAnnotation/...
MkMapView/MkAttributionLabel

Tiled WMS overlay in Windows Phone 7

2 Replies

Update 13/03/2013, here is new blog about Tiled WMS overlay for Windows Phone 8 :https://blog.sumbera.com/2013/03/10/tiled-wms-overlay-in-windows-phone-8/

This post [https://blog.sumbera.com/2010/02/25/overlay-wms-on- google-in-silverlight-bing/ ] talked about how to overlay over the Bing maps Silverlight control Google tiles and tiled WMS. It was quite easy to port this web sample into the Windows Phone 7 emulator. I took a smaple code from Training kit called “Ex1-TheBingMapControl” and extend it with the 2 classes : GoogleTile and WmsTile, with slight changes to the namespace using Microsoft.Phone.Controls.Maps (original for Silverlight was Microsoft.Maps.MapControl). Then extend MainPage.XAML with :

<my:MapTileLayer Opacity=”1″>

<my:MapTileLayer.TileSources>

<local:GoogleTile></local:GoogleTile>

</my:MapTileLayer.TileSources>

</my:MapTileLayer>

<my:MapTileLayer Opacity=”1″>

<my:MapTileLayer.TileSources>

<local:WMSTiledOverlay></local:WMSTiledOverlay>

</my:MapTileLayer.TileSources>

</my:MapTileLayer>

Extended sample code availabel for download here : http://www.sumbera.com/lab/wp7/TheBingMapControlWithWMSandGoogle.zip

Update: I found the way calculating BoundingBox from the quadkey somehow limiting (the DeepEarth weay) since it worked only till the level 18. So here is updated class fro getting correct bounding box of the tiled WMS request in the Bing Silverlight control:

public WMSTiledOverlay()
: base(@”http://mapserver-slp.mendelu.cz/cgi-bin/mapserv?map=/var/local/slp/krtinyWMS.map&REQUEST=GetMap&SERVICE=wms&VERSION=1.1.1&SRS=EPSG:4326&WIDTH={4}&HEIGHT={4}&FORMAT=image/png&BBOX={0},{1},{2},{3}&LAYERS=hm2003&Transparent=true“){}

public static double TileToWorldPosX(double tile_x, int zoom) {
return (float)((tile_x / Math.Pow(2.0, zoom) * 360.0) – 180.0);
}
public static double TileToWorldPosY( double tile_y, int zoom) {
double n = Math.PI – ((2.0 * Math.PI * tile_y) / Math.Pow(2.0, zoom));
return (float)(180.0 / Math.PI * Math.Atan(Math.Sinh(n)));
}
public override Uri GetUri(int tilePositionX, int tilePositionY, int tileLevel) {

int zoom = tileLevel; //SSU tileLevel would be same as zoom in Bing control
double deltaX = 0;// 0.00135; //SSU deltaX for SLP WMS
double deltaY = 0;// 0.00058; //SSU deltaY for SLP WMS
double minXLon = TileToWorldPosX(tilePositionX, zoom) + deltaX;
double minYLat = TileToWorldPosY(tilePositionY + 1, zoom) + deltaY;
double maxXLon = TileToWorldPosX(tilePositionX + 1, zoom) + deltaX;
double maxYLat = TileToWorldPosY(tilePositionY, zoom) + deltaY;
string wmsUrl = string.Format(this.UriFormat, minXLon, minYLat, maxXLon, maxYLat, 256);
return new Uri(wmsUrl);
}}

Tiled WMS overlay on Google Map v3

15 Replies

this is the third sample of the tiled WMS overlay over the Spherical Mercator, this time over the new Google Map v3. Previsous post talked about overlyaing WMS in Silverlight Bing maps (https://blog.sumbera.com/2010/02/25/overlay-wms-on-google-in-silverlight-bing/ ) and OpenLayers (https://blog.sumbera.com/2010/02/17/overlay-wms-on-google-in-openlayers/).

Sample application can be found here: http://www.sumbera.com/lab/GoogleV3/tiledWMSoverlayGoogleV3.htm You can try to run it on your mobile device as well – suprisingly it run very well on my iPhone (sometimes it just crash Safari :), however on the iPad there are some more serious issues that will be hopefuly resolved with new iOS update (JavaScript stops to run).

For the new Google Map v3 you have to do the following :

//Define custom WMS tiled layer

var SLPLayer = 
 new google.maps.ImageMapType (
 {
  getTileUrl:
    function (coord, zoom) { 
      var proj = map.getProjection(); 
      var zfactor = Math.pow(2, zoom); 
       // get Long Lat coordinates
      var top = proj.fromPointToLatLng(
             new google.maps.Point(coord.x * 256 / zfactor, coord.y * 256 / zfactor) ); 
      var bot = proj.fromPointToLatLng(
            new google.maps.Point((coord.x + 1) * 256 / zfactor, (coord.y + 1) * 256 / zfactor)); 
      //corrections for the slight shift of the SLP (mapserver)
       var deltaX = 0.0013; 
       var deltaY = 0.00058; 
      
      //create the Bounding box string
       var bbox = (top.lng() + deltaX) + "," +(bot.lat() + deltaY) +","
                           +(bot.lng() + deltaX) +"," +(top.lat() + deltaY);
      
       //base WMS URL
        var url = 
       "http://mapserver-slp.mendelu.cz/cgi-bin/mapserv?map=/var/local/slp/krtinyWMS.map&" ;
       url +="&REQUEST=GetMap"; //WMS operation
       url +="&SERVICE=WMS"; //WMS service
       url +="&VERSION=1.1.1"; //WMS version 
       url +="&LAYERS=" + "typologie,hm2003"; //WMS layers
       url +="&FORMAT=image/png"; //WMS format
       url +="&BGCOLOR=0xFFFFFF" ;
       url +="&TRANSPARENT=TRUE" ;
       url +="&SRS=EPSG:4326"; //set WGS84 
       url +="&BBOX="+ bbox; // set bounding box
       url +="&WIDTH=256"; //tile size in google
       url +="&HEIGHT=256" ; 
       return url; // return URL for the tile    
     }, //getTileURL

tileSize: new google.maps.Size(256, 256),

isPng: true

});


//add WMS layer

 map.overlayMapTypes.push(SLPLayer);

Overlay WMS in Silverlight Bing

6 Replies

Update May 2014: Git repo available here: https://github.com/Sumbera/WMSOnSilverlight

Web demo : http://www.sumbera.com/lab/WmsOnSilverlight/WmsOnSilverlightTestPage.html

Overlay WMS on Google in OpenLayers

19 Replies

[Note: therea are related post: overlyaing tiled WMS over the new Google Map v3 https://blog.sumbera.com/2010/11/02/tiled-wms-overlay-on-google-map-v3/ and overlying tiled WMS over the Silverlight Bing map https://blog.sumbera.com/2010/02/25/overlay-wms-on-google-in-silverlight-bing/ ]

Is it possible to display WMS (EPSG:4326) over the Google (EPSG:900913) in Openlayers ? Yes ! thanks to the great img ‘feature’ that enables you to shrink/expand your return image based on defined image size. That means that if your map view is rectangular or you request WMS as tiles (rectangular too) you get proper overlay of EPSG:4326 on EPSG:900913) . Example of various image sizes follows (these are actually WMS GetMap requests):

256 x 160

256 x 256

Here is the way how to implement it in OpenLayers – very simplified:

1. read this post http://docs.openlayers.org/library/spherical_mercator.html and create your Google map:

var options = {
projection: new OpenLayers.Projection(“EPSG:900913”),
displayProjection: new OpenLayers.Projection(“EPSG:4326”),
units: “m”,
numZoomLevels: 22,
maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
20037508, 20037508.34)
};
map = new OpenLayers.Map(‘map’, options);
// create Google Mercator layers
var ghyb = new OpenLayers.Layer.Google(
“Google Hybrid”,
{ type: G_HYBRID_MAP, ‘sphericalMercator’: true }
);

2. add your WMS layer

var gwms = new OpenLayers.Layer.TMS(“SLP”, “http://mapserver-slp.mendelu.cz/cgi-bin/mapserv?map=/var/local/slp/krtinyWMS.map&”,
{
layers: ‘obrys,typologie,hm2003’,
type: ‘png’,
visibility: true,
getURL: get_wms_url,
format: “image/png”,
opacity: 1,
isBaseLayer: false,
deltaX: 0.0013,
deltaY: 0.00058
});

3. include support for reprojection before you include OpenLayers:

4. handle WMS as TMS tiles as this:

function get_wms_url(bounds) {

// recalculate bounds from Google to WGS
var proj = new OpenLayers.Projection(“EPSG:4326”);
bounds.transform(map.getProjectionObject(), proj);

// this is not necessary for most servers display overlay correctly,
//but in my case the WMS has been slightly shifted, so I had to correct this with this delta shift

bounds.left += this.deltaX;
bounds.right += this.deltaX;
bounds.top += this.deltaY;
bounds.bottom += this.deltaY;

//construct WMS request

var url = this.url;
url += “&REQUEST=GetMap”;
url += “&SERVICE=WMS”;
url += “&VERSION=1.1.1”;
url += “&LAYERS=” + this.layers;
url += “&FORMAT=” + this.format;
url += “&TRANSPARENT=TRUE”;
url += “&SRS=” + “EPSG:4326”;
url += “&BBOX=” + bounds.toBBOX();
url += “&WIDTH=” + this.tileSize.w;
url += “&HEIGHT=” + this.tileSize.h;
return url;

}

That is, live example you can see here http://www.sumbera.com/lab/wms/getcapWGS.htm

or in MapShake here : http://www.mapshake.cz/mapfs.aspx?i=464