1

My tryonly.php looks like following

enter image description here

I also have categories.php to add layers with a common category or create a new in the database

enter image description here

There is no error in the code below, where i have been using openlayers and Geoserver with postgresql. I have tryonly.php where i have a div on top of my map with layertree and a file kaylin.js, where i have added all the wmslayers source one by one. The respective layers adds and gets removed from the map via checkboxes(which are dynamically generated) just as i expected. But in the kaylin.js, what i want is all the wmslayer to be called dynamically without the need to specify new wmsSource for each and every layers. As all the layers name is already in the database.

What do i need to do for that?

kaylin.js code is as follows:

           var format = 'image/png';
             var bounds = [80.0177154541016,26.327468872070388,88.2422409057617,30.4679260253906];

            function init() {



              var wmsSource = new ol.source.ImageWMS({
                    url: 'http://localhost:8080/geoserver/kaylin/wms',
                    params: {'LAYERS': 'kaylin:nepal','FORMAT': format,
                               'VERSION': '1.1.1'},

                    STYLES: '',
                    LAYERS: 'kaylin:nepal',
                    serverType: 'geoserver',
                    crossOrigin: 'anonymous'
                  });

                  var nepal= new ol.layer.Image({
                    source: wmsSource,
                    name: 'kaylin:nepal',
                    opacity: 0.9
                  });



                //nepal district layer
                var wmsSource2 =new ol.source.Vector({
                    url: 'http://localhost:8080/geoserver/kaylin/ows?service=WFS&version=1.1.1&request=GetFeature&typeName=kaylin:nepal_district&maxFeatures=50&outputFormat=application/json',
                    format: new ol.format.GeoJSON()
                  });

                  var nepal_district =  new ol.layer.Vector({
                    source: wmsSource2,

                  });


            //nepal zone layer
                 var wmsSource3 =new ol.source.Vector({
                    url: 'http://localhost:8080/geoserver/kaylin/ows?service=WFS&version=1.1.1&request=GetFeature&typeName=kaylin:nepal_zone&maxFeatures=50&outputFormat=application/json',
                    format: new ol.format.GeoJSON()
                  });

                  var nepal_zone =  new ol.layer.Vector({
                    source: wmsSource3,

                  });



             var wmsSource4 =new ol.source.Vector({
                    url: 'http://localhost:8080/geoserver/kaylin/ows?service=WFS&version=1.1.1&request=GetFeature&typeName=kaylin:overallvdc&maxFeatures=50&outputFormat=application/json',
                    format: new ol.format.GeoJSON()
                  });

                  var overallvdc =  new ol.layer.Vector({
                    source: wmsSource4,

                  });


                   var wmsSource5 = new ol.source.ImageWMS({
                    url: 'http://localhost:8080/geoserver/kaylin/wms',
                    params: {'LAYERS': 'kaylin:nepal_devregion','FORMAT': format,
                               'VERSION': '1.1.1'},

                    STYLES: '',
                    LAYERS: 'kaylin:nepal_devregion',
                    serverType: 'geoserver',
                    crossOrigin: 'anonymous'
                  });

                  var nepal_devregion = new ol.layer.Image({
                    source: wmsSource5,
                    name: 'kaylin:nepal_devregion',
                    opacity: 0.9

                  });



             var vectorSource = new ol.source.Vector({
              url: 'http://localhost:8080/geoserver/kaylin/ows?service=WFS&version=1.1.1&request=GetFeature&typeName=kaylin:nepal_district&maxFeatures=50&outputFormat=application/json',
              format: new ol.format.GeoJSON()
            });

                var bing = new ol.layer.Tile({
                        source: new ol.source.BingMaps({
                    key: 'AkKdajp4XdO5LkJ78t-k9meWWM2hMNiiseWHQP8VfGtQfn0dqlo-kwLEinrksted',
                    imagerySet: 'Road',
                    units: 'm',
                    axisOrientation: 'neu'
                  })
                  });
                var mousePositionControl = new ol.control.MousePosition({
                    className: 'custom-mouse-position',
                    target: document.getElementById('location'),
                    coordinateFormat: ol.coordinate.createStringXY(5),
                    undefinedHTML: ' '
                  });   

                var phnom_penh = ol.proj.transform(
                      [11.529535, 104.935913], 
                      'EPSG:4326', 'EPSG:3857','EPSG:32648');

                var map = new ol.Map({
                    controls: ol.control.defaults({
                      attribution: false
                    }).extend([mousePositionControl]),
                    target: 'map',
                    layers: [bing],

                    view: new ol.View({
                  center: phnom_penh,
                  units: 'm',
                  axisOrientation: 'neu'
                    })
                  });


                 $(document).ready(function() {


            const checkbox = document.getElementById('kaylin:nepal');
            const checkbox2 = document.getElementById('kaylin:nepal_district');
            const checkbox3 = document.getElementById('kaylin:nepal_zone');
            const checkbox4 = document.getElementById('kaylin:overallvdc');
            const checkbox5 = document.getElementById('kaylin:nepal_devregion');


            checkbox.addEventListener('change', (event) => {
              if (event.target.checked) {
             map.addLayer(nepal);
              } else {
                 map.removeLayer(nepal);
              }
            })

            checkbox2.addEventListener('change', (event) => {
              if (event.target.checked) {
             map.addLayer(nepal_district);
              } else {
                 map.removeLayer(nepal_district);
              }
            })

            checkbox3.addEventListener('change', (event) => {
              if (event.target.checked) {
             map.addLayer(nepal_zone);
              } else {
                 map.removeLayer(nepal_zone);
              }
            })



            checkbox4.addEventListener('change', (event) => {
              if (event.target.checked) {
             map.addLayer(overallvdc);
              } else {
                 map.removeLayer(overallvdc);
              }
            })




            checkbox5.addEventListener('change',(event)=>{
                if (event.target.checked) {
             map.addLayer(nepal_devregion);
              } else {
                 map.removeLayer(nepal_devregion);
              }
            })
             }); 
                var projection = new ol.proj.Projection({
                      code: 'EPSG:4326',
                      units: 'degrees',
                      axisOrientation: 'neu',
                      global: true
                  });
                 var view = new ol.View({
                    center: [0, 0],
                    zoom: 1
                  });

                    map.getView().on('change:resolution', function(evt) {
                    var resolution = evt.target.get('resolution');
                    var units = map.getView().getProjection().getUnits();
                    var dpi = 25.4 / 0.28;
                    var mpu = ol.proj.METERS_PER_UNIT[units];
                    var scale = resolution * mpu * 39.37 * dpi;
                    if (scale >= 9500 && scale <= 950000) {
                      scale = Math.round(scale / 1000) + "K";
                    } else if (scale >= 950000) {
                      scale = Math.round(scale / 1000000) + "M";
                    } else {
                      scale = Math.round(scale);
                    }
                    document.getElementById('scale').innerHTML = "Scale = 1 : " + scale;
                  });
                          map.getView().fit(bounds, map.getSize());

                          map.getView().setZoom(3);     

             // Popup showing the position the user clicked
                  var popup = new ol.Overlay({
                    element: document.getElementById('popup')
                  });
                  map.addOverlay(popup);


                           map.on('click', function(evt) {
                    var element = popup.getElement();
                    var coordinate = evt.coordinate;
             var view = map.getView();
                          var viewResolution = (view.getResolution());
                           var source = bing.get('visible') ? bing.getSource() : wmsSource.getSource();
                          var url = wmsSource.getGetFeatureInfoUrl(
                            evt.coordinate, viewResolution, view.getProjection(),
                            {'INFO_FORMAT': 'text/html', 'FEATURE_COUNT': 50});


                    $(element).popover('destroy');
                    popup.setPosition(coordinate);
                    // the keys are quoted to prevent renaming in ADVANCED mode.
                    $(element).popover({
                      'placement': 'top',
                      'animation': false,
                      'html': true,
                      content: function() {
                   return '<iframe seamless src="' + url + '"></iframe>'   
               }
                    });
                    $(element).popover('show');
                  });

                   }

I don't want to create new var nepal,nepal_district,nepal_zone etc as i have done above and dont want to specify handcode values of layer name as i have done above in the following line of code:

       const checkbox = document.getElementById('kaylin:nepal');
        const checkbox2 = document.getElementById('kaylin:nepal_district');
       const checkbox3.....etc

I wished that these layers were dynamically displayed on map, on checkbox clicks and i would add only a single wmslayer, which hold the url in which i can concat the value of the layer in which the checkbox is clicked just as below:

                var wmsSource =new ol.source.Vector({
                    url: 'http://localhost:8080/geoserver/kaylin/ows?
   service=WFS&version=1.1.1&request=GetFeature&typeName='+CHECKBOXVALUE'   
&maxFeatures=50&outputFormat=application/json',
                    format: new ol.format.GeoJSON()
                  });

my tryonly.php link here!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.