ThinkGeo.com    |     Documentation    |     Premium Support

Shape files over Google map background

Hi,


I'd like to be able to use a Google map background for my sample application as this is what my users are interested in.  I also need to be able to display shape files (as static layers) over the map.  I've seen the sample which shows how to set the background map to a Google map, but when I add in the Google background map, my other shape files do not show up.


Any suggestions?


Thanks in advance for your help; and thanks to David for multiple replies to a previous post!


Tom



Tom, 
  
 Thanks for the post. 
  
 If you set Google as a Background Map you would need to add your shapefiles to the DynamicLayers collection off of the Map instead of the StaticLayers.  This will tell the Map Control to draw the shapefile ontop of Google.   
  
 Now there are some things to be aware of when doing this, Google uses a different projection so when you zoom out the shapefile won’t lline up very good, we are currenlty working on some code that will always have the ShapeFile line up no matter what the zoom level but haven’t quite figured it out yet. 
  
 I did however get it to line up good when you are zoomed in fairly close.  If you want to give it try add these lines of code to the UseGoogleMap sample application that came with the latest beta refresh. 
  
             Dim UtahWaterLayer As ShapeFileLayer = New ShapeFileLayer(MapPath("~/SampleData/USA/UtahWater.shp")) 
             UtahWaterLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.GetSimpleAreaStyle(GeoColor.SimpleColors.Red) 
             UtahWaterLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20 
             Map1.DynamicLayers.Add(“UtahWater”, UtahWaterLayer) 
  
 This may help get you started, let me know if you run into any problems. 
  
 Thanks! 
  
 Clint 
  
 

Tom,

Our next Beta will be released in a couple days and we have some new way to deal with the google map integration. Here is a sample of how to do it with the new edition. 


 protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                Map1.BackgroundFillBrush = new GeoSolidBrush(GeoColor.FromHtml("#B3C6D4"));
                Map1.MapUnit = GeographyUnit.Meter;
                // Following is a proper extent for showing US in Google Map. 
                Map1.CurrentExtent = new RectangleShape(-13939426.6371, 6701997.4056, -7812401.86, 2626987.386962);
                Map1.MapControls.MousePosition.Enabled = true;

                // Create a shape file Layer including major cities in US
                ShapeFileFeatureLayer shapeFileFeatureLayer = new ShapeFileFeatureLayer(@“C:\Program Files\ThinkGeo\Map Suite Web Full Edition 3.0 (Beta)\Samples\CSharp Samples\SampleData\USA\cities_a.shp”);
                shapeFileFeatureLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = PointStyles.CreateSimpleCircleStyle(GeoColor.StandardColors.Black, 12f);
                shapeFileFeatureLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
                shapeFileFeatureLayer.DrawingMarginPercentage = 50;

                // We need to set the projection for the shapefile layer to make it as same as Google Map
                Proj4Projection proj4 = new Proj4Projection();
                proj4.InternalProjectionParametersString = Proj4Projection.GetEpsgParametersString(4326);
                proj4.ExternalProjectionParametersString = Proj4Projection.GetGoogleMapParametersString();
                shapeFileFeatureLayer.FeatureSource.Projection = proj4;

                // Add the shapefile layer to layer overlay
                LayerOverlay layerOverLay = new LayerOverlay();
                layerOverLay.IsBaseOverlay = false;
                layerOverLay.Layers.Add(shapeFileFeatureLayer);

                // Create the google map overlay
                GoogleOverlay googleMap = new GoogleOverlay(“Google Map”);
                googleMap.GoogleMapType = GoogleMapType.Normal;

                // Add the 2 overlays into map
                Map1.CustomOverlays.Add(layerOverLay);
                Map1.CustomOverlays.Add(googleMap);
            }
        }


Here is the result. The round black circle (I know that not looks good, just make it significant so you can tell it’s not from Google Map itself) is from the shape file I added with the above code. 




Ben.

Ben,



Thanks for providing this code.  I am glad to see that the projection issue will be resolved.  I see that the Google Map is now another layer, as opposed to the background.  In my implementation, I have 2 shape files overlaying the Google Map background as dynamic layers.  I'll make the changes when your next beta is released.  Will I be able to overlay multiple shape files over the Google Map?  I need to have 2 or 3 shape files on top of the Google Map so that outlines can be highlighted and areas can be 'colored in' but the background needs to show through.



I can do this now, but due to the fact that Internet Explorer 6 doesn't handle transparent .PNG files, it doesn't work in IE 6.  I need this to work on both IE 6 and 7.  I hope that this Internet Explorer 6 - Transparency issue will be fixed in your upcoming beta release.



I have attached 2 sample images showing the Google map with a world map shape file overlaying it.  The country borders are blue and a selected country is orange.  The base color of the shape file is transparent but the borders are set to blue.  The highlighted country is marked with a semi-transparent orange.  The first picture shows the rendering in IE7, the second in IE6.


Thanks,

Tom







 



Tom, 
  
 Yes, you can add more than one shape file layers on top of the Google Map background. Also the IE6 transparent problem has been solved in the latest edition which will be released in a couple days, the appearance within IE7 and IE6 are now the same. 
  
 Ben. 


Tom, 
  
 Yes, you can add more than one shape file layers on top of the Google Map background. Also the IE6 transparent problem has been solved in the latest edition which will be released in a couple days, the appearance within IE7 and IE6 are now the same. 
  
 Ben.