3

It May act as a duplicate question to many, but i have tried refering too all the questions related to my questions, but i am still confiused.

Below in attached my code. which i use for Web Mapping

        <div id="map">

   </div>


        <div id="nav">hello</div>

  <script type="text/javascript">



  var wmslayers = L.layerGroup();


   var latit = <?php echo $latitude ?>; // Get latitude from php variable to js variable
   var langt = <?php echo $longitude ?>; // Get longitude from php variable to js variable
   var zom = <?php echo $zooms ?>; // get zoom value from php variable to js variable
   var wmsl = <?php echo $wmslay ?>; //way to get wmy layer from php variable



    //Leaflet provider plugin to access different layers.
    var osmLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>',
        thunLink = '<a href="http://thunderforest.com/">Thunderforest</a>',
        esrilink = '<a href="http://esri.com/">ESRI MAPS</a>';


    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        osmAttrib = '&copy; ' + osmLink + ' Contributors',
        landUrl = 'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png',
        thunAttrib = '&copy; '+osmLink+' Contributors & '+thunLink,
        esriurl= 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
        esriAttrib= '&copy;'+esrilink+'Contributors';

    var osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib}),
        landMap = L.tileLayer(landUrl, {attribution: thunAttrib}),
        esriMap = L.tileLayer(esriurl, {attribution: esriAttrib});

    var map = L.map('map', {layers: [esriMap] // only add one!
    })
    .setView([latit, langt], zom);

      var baseLayers = {
                        "OSM Mapnik": osmMap,
                         "Landscape": landMap,
                         "Street":esriMap
                       };
                          map.on('click', function(e) {
                                        alert(e.latlng);
                                                        });

          L.control.layers(baseLayers).addTo(map);


     //ways to add wms service from geoserver to leaflet map
     wmslayers.addTo(map); 

     var wms_service = L.tileLayer.wms("http://localhost:8080/geoserver/raster/wms", 
     {
      layers: wmsl,
      format: 'image/png',
      transparent: true,
      version: '1.1.1',
      attribution: "",
      tiled:true
        });

     wmslayers.addLayer(wms_service);
      wms_service.bringToFront(); 


  // script to load geojson or kml file and also custoom icon has been assigned.
    var style = {color:'red', opacity: 1.0, fillOpacity: 1.0, weight: 2, 
                    clickable: false};
    L.Control.FileLayerLoad.LABEL = '<i class="fa fa-folder-open"></i>';
    L.Control.fileLayerLoad({
        fitBounds: true,
        layerOptions: {style: style,
                       pointToLayer: function (data, latlng) {
                        var myIcon = L.icon({iconSize: [15, 15], iconUrl: 'img/Map-Marker-Bubble-Azure-icon.png'});
                          return L.marker(latlng, {icon: myIcon });
                       }},
    }).addTo(map);
      /// this adds the reverse geolocation  attribute
    var osmGeocoder = new L.Control.OSMGeocoder();
    map.addControl(osmGeocoder);



      //Create the opacity controls -- 


    var higherOpacity = new L.Control.higherOpacity();
                        map.addControl(higherOpacity);
    var lowerOpacity = new L.Control.lowerOpacity();
                        map.addControl(lowerOpacity);
    var opacitySlider = new L.Control.opacitySlider();
                        map.addControl(opacitySlider);

//Specify the layer for which you want to modify the opacity. Note that the setOpacityLayer() method applies to all the controls.
//You only need to call it once. 

    opacitySlider.setOpacityLayer(wms_service);

//Set initial opacity to 0.5 (Optional)
    wms_service.setOpacity(0.5);


    </script>
    </body>

With this code i am able to display data onto leaflet map with a click of a button and also able to control the opacity of that. Now I want to display different raster images coming from geoserver according to time slider, basically trying to depict Urbanization growth in city.

Any leads on how should i go about it, will be helpful

1

It seemed to me you need some kind of layer switcher. You want to switch between layers using a controller. You can implement function below on your code. Then you need to call this function everytime time slider changes.

    function switchLayer() {
        var layers = [];
        //Push all active layers to an array
        map.eachLayer(function (layer) {
            if (layer instanceof L.TileLayer)
                layers.push(layer);
        });
        layers.forEach(element => {
            if (element._url == layer1._url) {
                map.removeLayer(layer1);
                map.addLayer(layer2);
            } else if (element._url == layer2._url) {
                map.removeLayer(layer2);
                map.addLayer(layer1);
            }
        });
    }
|improve this answer|||||

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.