8 Replies Latest reply: Sep 10, 2013 7:36 AM by gdildine RSS

    Multiple Tile Layers with Google

    gdildine

      I am working a mapviewer project which requires Google overlaid with other tiled and vector layers.   I have been able to successfully been able to overlay vector layers with Google using the approach within the demo tutorial for oramaps v2 html5.  I tried to similarly use code to overlay a tiled basemap.   I cannot find any recent documentation on how to do this.  I used the approach documented here to set the zoom levels:  Oracle MapViewer: Displaying MapViewer tile layers over Google Maps
      This approach does not seem to work and needs some modification.  The following is the xml for the  layer:

       

      <map_tile_layer name="IXN_BASEMAP" image_format="PNG" http_header_expires="168.0" concurrent_fetching_threads="3">
         <internal_map_source data_source="ITIS-DB3-WY" base_map="IXN_BASEMAP" bgcolor="none"/>
         <tile_storage root_path="C:\MapViewer\config\tilecache\ITIS-DB3-WY.IXN_BASEMAP\"/>
         <coordinate_system srid="4055" minX="-180.0" minY="-90.0" maxX="180.0" maxY="90.0"/>
         <tile_image width="256" height="256"/>
         <zoom_levels levels="20" min_scale="0.0" max_scale="0.0" min_tile_width="76.43702697753906" min_tile_height="4.0075016E7">
            <zoom_level level="0" name="" description="" scale="0.0" tile_width="4.0075016E7" tile_height="4.0075016"/>
            <zoom_level level="1" name="" description="" scale="0.0" tile_width="2.0037508E7" tile_height="2.0037508E7"/>
            <zoom_level level="2" name="" description="" scale="0.0" tile_width="1.0018754E7" tile_height="1.0018754E7"/>
            <zoom_level level="3" name="" description="" scale="0.0" tile_width="5009377.0" tile_height="5009377.0"/>
            <zoom_level level="4" name="" description="" scale="0.0" tile_width="2504688.5" tile_height="2504688.5"/>
            <zoom_level level="5" name="" description="" scale="0.0" tile_width="1252344.25" tile_height="1252344.25"/>
            <zoom_level level="6" name="" description="" scale="0.0" tile_width="626172.125" tile_height="626172.125"/>
            <zoom_level level="7" name="" description="" scale="0.0" tile_width="313086.0625" tile_height="313086.0625"/>
            <zoom_level level="8" name="" description="" scale="0.0" tile_width="156543.03125" tile_height="156543.03125"/>
            <zoom_level level="9" name="" description="" scale="0.0" tile_width="78271.515625" tile_height="78271.515625"/>
            <zoom_level level="10" name="" description="" scale="0.0" tile_width="39135.7578125" tile_height="39135.7578125"/>
            <zoom_level level="11" name="" description="" scale="0.0" tile_width="19567.87890625" tile_height="19567.87890625"/>
            <zoom_level level="12" name="" description="" scale="0.0" tile_width="9783.939453125" tile_height="9783.939453125"/>
            <zoom_level level="13" name="" description="" scale="0.0" tile_width="4891.9697265625" tile_height="4891.9697265625"/>
            <zoom_level level="14" name="" description="" scale="0.0" tile_width="2445.98486328125" tile_height="2445.98486328125"/>
            <zoom_level level="15" name="" description="" scale="0.0" tile_width="1222.992431640625" tile_height="1222.992431640625"/>
            <zoom_level level="16" name="" description="" scale="0.0" tile_width="611.4962158203125" tile_height="611.4962158203125"/>
            <zoom_level level="17" name="" description="" scale="0.0" tile_width="305.74810791015625" tile_height="305.74810791015625"/>
            <zoom_level level="18" name="" description="" scale="0.0" tile_width="152.87405395507812" tile_height="152.87405395507812"/>
            <zoom_level level="19" name="" description="" scale="0.0" tile_width="76.43702697753906" tile_height="76.43702697753906"/>
         </zoom_levels>
      </map_tile_layer>
      
      
        • 1. Re: Multiple Tile Layers with Google
          Renan Barbalho

          Hi,

          I had same problem. I solved configuring the basemap with same definition Google Layer (srid, zoom level)

           

           

          See below:

           

          <map_tile_layer name="CUSTOMER_MAP_TEST" http_header_expires="168.0" image_format="PNG" antialias="true">
             <internal_map_source base_map="CUSTOMER_MAP" bgcolor="none" data_source="MVDEMO"/>
             <tile_storage root_path=""/>
             <coordinate_system srid="3857" minX="-2.0037508E7" minY="-2.0037508E7" maxX="2.0037508E7" maxY="2.0037508E7"/>
             <tile_image width="256" height="256"/>
             <zoom_levels levels="19" min_scale="0.0" max_scale="0.0" min_tile_width="76.43702697753906" min_tile_height="2.0037508E7">
                <zoom_level level="0" name="" description="" scale="0.0" tile_width="2.0037508E7" tile_height="2.0037508E7"/>
                <zoom_level level="1" name="" description="" scale="0.0" tile_width="1.0018754E7" tile_height="1.0018754E7"/>
                <zoom_level level="2" name="" description="" scale="0.0" tile_width="5009377.0" tile_height="5009377.0"/>
                <zoom_level level="3" name="" description="" scale="0.0" tile_width="2504688.5" tile_height="2504688.5"/>
                <zoom_level level="4" name="" description="" scale="0.0" tile_width="1252344.25" tile_height="1252344.25"/>
                <zoom_level level="5" name="" description="" scale="0.0" tile_width="626172.125" tile_height="626172.125"/>
                <zoom_level level="6" name="" description="" scale="0.0" tile_width="313086.0625" tile_height="313086.0625"/>
                <zoom_level level="7" name="" description="" scale="0.0" tile_width="156543.03125" tile_height="156543.03125"/>
                <zoom_level level="8" name="" description="" scale="0.0" tile_width="78271.515625" tile_height="78271.515625"/>
                <zoom_level level="9" name="" description="" scale="0.0" tile_width="39135.7578125" tile_height="39135.7578125"/>
                <zoom_level level="10" name="" description="" scale="0.0" tile_width="19567.87890625" tile_height="19567.87890625"/>
                <zoom_level level="11" name="" description="" scale="0.0" tile_width="9783.939453125" tile_height="9783.939453125"/>
                <zoom_level level="12" name="" description="" scale="0.0" tile_width="4891.9697265625" tile_height="4891.9697265625"/>
                <zoom_level level="13" name="" description="" scale="0.0" tile_width="2445.98486328125" tile_height="2445.98486328125"/>
                <zoom_level level="14" name="" description="" scale="0.0" tile_width="1222.992431640625" tile_height="1222.992431640625"/>
                <zoom_level level="15" name="" description="" scale="0.0" tile_width="611.4962158203125" tile_height="611.4962158203125"/>
                <zoom_level level="16" name="" description="" scale="0.0" tile_width="305.74810791015625" tile_height="305.74810791015625"/>
                <zoom_level level="17" name="" description="" scale="0.0" tile_width="152.87405395507812" tile_height="152.87405395507812"/>
                <zoom_level level="18" name="" description="" scale="0.0" tile_width="76.43702697753906" tile_height="76.43702697753906"/>
             </zoom_levels>
          </map_tile_layer>
          

           

          I combined this basemap with GoogleTileLayer, this way:

           

          <script language="JavaScript" type="text/javascript">
              var map = null;
              var tileLayer1 = null;
              var tileLayer2 = null;
              
              function showMap()
              {
                  map = new OM.Map(
                  document.getElementById('map'),
                  {
                      mapviewerURL:baseURL
                  }) ;       
                  tileLayer1 =  new OM.layer.GoogleTileLayer("baseMap1",{mapTypeList:"OM.layer.GoogleTileLayer.TYPE_ROAD;OM.layer.GoogleTileLayer.TYPE_SATELLITE;OM.layer.GoogleTileLayer.TYPE_SHADED",mapTypeVisible: true});
                  tileLayer2 = new OM.layer.TileLayer(
                  "baseMap2", 
                  {
                      dataSource:"mvdemo", 
                      tileLayer:"CUSTOMER_MAP_TEST", 
                      tileServerURL:baseURL+"/mcserver"      
                  });     
                  map.addLayer(tileLayer1) ;
                  map.addLayer(tileLayer2) ;
                  map.setMapCenter(new OM.geometry.Point(-122.45,37.6706,8307) );
                  map.setMapZoomLevel(4) ;
                  map.init() ;
              }
          </script>
          

          I hope help you.

          Renan

          • 2. Re: Multiple Tile Layers with Google
            gdildine

            Thank you Renan, you information was helpful, but I still have a problem.   From the information above, I modified the coordinate info and the tiled layer worked and came up in the correct location.  The problem, however, was that I could get either the google tiles to display, or the oracle mapviewer tiles to display, but not both.  If I comment out the "addlayer" method to the mapviewer tiles, then the google tiles will display.  If I uncomment the mapviewer tiles, then the google tiles will not display. (I placed the goolge tiles on the bottom.  I verified that the layer have a different z-index as appropriate.  I also verified that it is not a translucency issue.

             

            <script language="JavaScript" type="text/javascript">
                var map = null;
                var tileLayer1 = null;
                var tileLayer2 = null;
                var baseURL  = "http://itis-laptop3-gd:7001/mapviewer";
                function showMap()
                {
                    map = new OM.Map(
                    document.getElementById('map'),
                    {
                        mapviewerURL:baseURL
                    }) ;
                    tileLayer1 =  new OM.layer.GoogleTileLayer("baseMap1",{mapTypeList:"OM.layer.GoogleTileLayer.TYPE_ROAD;OM.layer.GoogleTileLayer.TYPE_SATELLITE;OM.layer.GoogleTileLayer.TYPE_SHADED",mapTypeVisible: true});
                    
                    tileLayer2 = new OM.layer.TileLayer("baseMap2", 
                    {
                        dataSource:"itis-db3-wy", 
                        tileLayer:"IXN_BASEMAP"
                    });
            //tileServerURL:baseURL+"/mcserver"
                    vectorlayer1 = new OM.layer.VectorLayer("vectorlayer1",
                    {
                        def:{
                            type:OM.layer.VectorLayer.TYPE_PREDEFINED,
                            dataSource:"itis-db3-wy",
                            theme:"IXN_COUNTIES",
                            url: baseURL,
                            loadOnDemand: true
                        }
                    });
                    vectorlayer1.setZoomLevelRange(8, 20);
            
                    // add a vectorlayer. conversion from srid 90000006 to 4055 will occur on the server
                    //vectorlayer1.setLabelsVisible(true);
                    map.addLayer(tileLayer1) ;
                    map.addLayer(tileLayer2) ;
                    map.addLayer(vectorlayer1) ;
                    map.addNavigationPanelBar();
                    map.setMapCenter(new OM.geometry.Point(-104.82,41.136,8307) );
                    map.setMapZoomLevel(8);
                    map.init();
                }
            

             

             

            Any help would be greatly appreciated!

            • 3. Re: Multiple Tile Layers with Google
              Renan Barbalho

              Can you post the IXN_BASEMAP definition?

              • 4. Re: Multiple Tile Layers with Google
                gdildine

                IXN_BASEMAP definition

                 

                <?xml version="1.0" standalone="yes"?>
                <map_definition>
                      <theme name="IXN_COUNTIES" min_scale="1.0E7" max_scale="0.0" scale_mode="RATIO"/>
                      <theme name="IXN_CITIES" min_scale="800000.0" max_scale="0.0" scale_mode="RATIO"/>
                      <theme name="IXN_ROADS" min_scale="60000.0" max_scale="0.0" label_min_scale="20000.0" label_max_scale="0.0" scale_mode="RATIO"/>
                      <theme name="IXN_INTERSTATES"/>
                  </map_definition>
                

                Base map  layers definitions:

                 

                <?xml version="1.0" standalone="yes"?>
                <styling_rules>
                    <rule>
                        <features style="L.COUNTY_BOUNDARY"> </features>
                        <label column="COUNTY" style="T.GREY STATE NAME"> 1 </label>
                  </rule>
                </styling_rules>
                

                 

                 

                <?xml version="1.0" standalone="yes"?>
                <styling_rules>
                    <rule>
                        <features style="L.CITY_BOUNDARY"> </features>
                        <label column="ENTITYNAME" style="T.S03_CITIES_L1"> 1 </label>
                  </rule>
                </styling_rules>
                

                 

                 

                <?xml version="1.0" standalone="yes"?>
                <styling_rules>
                    <rule>
                        <features style="L.TEST_ROAD"> </features>
                        <label column="ROUTE_GISID" style="T.ROAD NAME"> 1 </label>
                  </rule>
                </styling_rules>
                

                 

                 

                <?xml version="1.0" standalone="yes"?>
                <styling_rules>
                    <rule column="ROUTE_GISID">
                        <features style="L.S04_ROAD_INTERSTATE"> (ROUTE_GISID IN ('ML80I','ML80D','ML25I','ML25D','ML90I','ML90D')) </features>
                        <label column="ROUTE_GISID" style="T.ROAD NAME"> 1 </label>
                  </rule>
                </styling_rules>
                

                 

                As you can see the layers are defined using "line" styles only, so that they would not block underlying tiles.

                 

                Regards

                • 5. Re: Multiple Tile Layers with Google
                  Renan Barbalho

                  Please,

                   

                  The definition of the tile layer defined on Mapviewer (xml of layer), you can get this definition in database does the query in user_sdo_cached_maps.

                   

                  Renan

                  • 6. Re: Multiple Tile Layers with Google
                    gdildine
                    <map_tile_layer name="IXN_BASEMAP" image_format="PNG" http_header_expires="168.0" concurrent_fetching_threads="3">
                       <internal_map_source data_source="ITIS-DB3-WY" base_map="IXN_BASEMAP" bgcolor="none"/>
                       <tile_storage root_path="C:\MapViewer\config\tilecache\ITIS-DB3-WY.IXN_BASEMAP\"/>
                       <coordinate_system srid="3857" minX="-2.0037508E7" minY="-2.0037508E7" maxX="2.0037508E7" maxY="2.0037508E7"/>
                       <tile_image width="256" height="256"/>
                       <zoom_levels levels="20" min_scale="0.0" max_scale="0.0" min_tile_width="76.43702697753906" min_tile_height="4.0075016E7">
                          <zoom_level level="0" name="" description="" scale="0.0" tile_width="4.0075016E7" tile_height="4.0075016"/>
                          <zoom_level level="1" name="" description="" scale="0.0" tile_width="2.0037508E7" tile_height="2.0037508E7"/>
                          <zoom_level level="2" name="" description="" scale="0.0" tile_width="1.0018754E7" tile_height="1.0018754E7"/>
                          <zoom_level level="3" name="" description="" scale="0.0" tile_width="5009377.0" tile_height="5009377.0"/>
                          <zoom_level level="4" name="" description="" scale="0.0" tile_width="2504688.5" tile_height="2504688.5"/>
                          <zoom_level level="5" name="" description="" scale="0.0" tile_width="1252344.25" tile_height="1252344.25"/>
                          <zoom_level level="6" name="" description="" scale="0.0" tile_width="626172.125" tile_height="626172.125"/>
                          <zoom_level level="7" name="" description="" scale="0.0" tile_width="313086.0625" tile_height="313086.0625"/>
                          <zoom_level level="8" name="" description="" scale="0.0" tile_width="156543.03125" tile_height="156543.03125"/>
                          <zoom_level level="9" name="" description="" scale="0.0" tile_width="78271.515625" tile_height="78271.515625"/>
                          <zoom_level level="10" name="" description="" scale="0.0" tile_width="39135.7578125" tile_height="39135.7578125"/>
                          <zoom_level level="11" name="" description="" scale="0.0" tile_width="19567.87890625" tile_height="19567.87890625"/>
                          <zoom_level level="12" name="" description="" scale="0.0" tile_width="9783.939453125" tile_height="9783.939453125"/>
                          <zoom_level level="13" name="" description="" scale="0.0" tile_width="4891.9697265625" tile_height="4891.9697265625"/>
                          <zoom_level level="14" name="" description="" scale="0.0" tile_width="2445.98486328125" tile_height="2445.98486328125"/>
                          <zoom_level level="15" name="" description="" scale="0.0" tile_width="1222.992431640625" tile_height="1222.992431640625"/>
                          <zoom_level level="16" name="" description="" scale="0.0" tile_width="611.4962158203125" tile_height="611.4962158203125"/>
                          <zoom_level level="17" name="" description="" scale="0.0" tile_width="305.74810791015625" tile_height="305.74810791015625"/>
                          <zoom_level level="18" name="" description="" scale="0.0" tile_width="152.87405395507812" tile_height="152.87405395507812"/>
                          <zoom_level level="19" name="" description="" scale="0.0" tile_width="76.43702697753906" tile_height="76.43702697753906"/>
                       </zoom_levels>
                    </map_tile_layer>
                    
                    • 7. Re: Multiple Tile Layers with Google
                      Renan Barbalho

                      Dear friend,

                      I saw your definition and it's good to me.

                      I did a similar test using the MVDEMO database and I used the MVDEMO app with OracleMaps v2 Demo - Sample B06 and I didn't problem, I made alternate the tile layers  without problems.

                      The code below:

                       

                      
                      
                      <script language="JavaScript" type="text/javascript">
                          var map = null;
                          var tileLayer1 = null;
                          var tileLayer2 = null;
                          var vectorLayer1 = null;
                          function showMap()
                          {
                              map = new OM.Map(
                              document.getElementById('map'),
                              {
                                  mapviewerURL:baseURL
                              }) ;       
                              tileLayer1 = new OM.layer.TileLayer(
                              "baseMap", 
                              {
                                  dataSource:"mvdemo", 
                                  tileLayer:"DEMO_MAP_GOOGLE", 
                                  tileServerURL:baseURL+"/mcserver"
                              });       
                              
                              tileLayer2 = new OM.layer.GoogleTileLayer("layer1",{mapTypeList:"OM.layer.GoogleTileLayer.TYPE_ROAD;OM.layer.GoogleTileLayer.TYPE_SATELLITE;OM.layer.GoogleTileLayer.TYPE_SHADED",mapTypeVisible: true});
                              vectorLayer1 =  new OM.layer.VectorLayer("vectorlayer1", 
                              {
                                  def:{
                                      type:OM.layer.VectorLayer.TYPE_PREDEFINED, 
                                      dataSource:"mvdemo", theme:"customers", 
                                      url: baseURL,
                                      loadOnDemand: true
                                  }
                              });
                              map.addLayer(tileLayer1) ;
                              map.addLayer(tileLayer2) ;
                              map.addLayer(vectorLayer1) ;
                              map.setMapCenter(new OM.geometry.Point(-122.45,37.6706,8307) );
                              map.setMapZoomLevel(4) ;
                              map.init() ;
                          }
                      </script>
                      

                       

                      Renan

                      • 8. Re: Multiple Tile Layers with Google
                        gdildine

                        I found the problem.  I inadvertently configured 20 zoom levels instead of 19.  Removing the top level corrected the problem.