Develop Reference

Problem of tiling with GeoWebCache: most tiles are missing

I set up a PostGIS database that I added in GeoServer via a parameterized SQL view. I used Leaflet to display this layer via wms.
It worked fine until I add GeoWebCache using the url "/geoserver/gwc/service/wms" instead of "/geoserver/wms". I can still see my polygons when I'm at the minimal zoom. But then when I zoom I see only a red polygon and a half of a green polygon and if I zoom again I see only the red polygon. You can see these 3 states on the images below:
I guess this is a problem of tiling: I get the minimal tiles and also some tiles around the red polygon for further zooms but for some reason it seems that the other tiles are not sent.
Here is the code I use to get my wms layer with leaflet:
geoJSONlayer = L.tileLayer.wms("/geoserver/gwc/service/wms", {
layers: 'cartowiki:choix',
format: 'image/png',
transparent: true,
viewparams: 'year:'+(annee+3000)
}).addTo(map);
geoJSONlayer.addTo(map);
Do you have an idea of the problem here ?
Thanks in advance,

The bounding box was the problem indeed. In Geoserver, I had to modify the properties of the layer in 2 places :
I clicked 'Compute from SRS bounds' and then 'Compute from native bounds' in the Bounding Boxes part of the Data section
I erased and created again the available gridsets in the Tile Caching section so that the grid subset bounds would update with the new Bounding Boxes
I hope it can help someone in the future!

Leaflet Map is Zooming out too far

Using NodeJS to drop datapoints on a map via Leaflet.
Current issue:
When I scroll out, I can't get the map region to be locked to one Earth. That is, when I scroll out all the way, I end up with 5 copies of Earth, unique from each other. I want the map to be locked to one frame of the Earth.
Methods tried:
I've tried using Map.setView, setZoom, fitBounds, setMaxBounds/maxBounds (which was successful in locking panning, but not scrolling). As far as I can tell I've been using these correctly/in the correct places, but still to no avail.

Figured it out Eugen!
Needs to be set in the initializeLeaflet method. Code added to fix it seen at the bottom of this block.
initializeLeaflet() {
const mapRoot = this.template.querySelector('.map-root');
this.map = L.map(mapRoot);
this.map.fitWorld();
L.control.scale().addTo(this.map);
this.map.setMinZoom(2);
this.map.setMaxZoom(8);
}

Google Streetview API Indoor panorama.setPosition() redirects to start position

I am working on a Google Streetview indoor application using the Google Maps JS API. I am using panorama pictures that are available on Google Streetview. I sometimes want to programatically change the position, for instance when somebody clicks on a position in a small map. However, when I call panorama.getPosition() I automatically get redirected to a different position. I can actually see the position_changed event being triggered twice.
I already sort of found the cause of this issue. It has something to do with the starting/entrance positions Google maps uses for Streetview Indoor.
The two orange circles depict the two possible starting/entrance points into the building. When dropping the pegman over these circles you will enter the building in Streetview Indoor.
It looks like when these starting points exist, the Google Maps API does not let you programatically set the position to some position other then any of the starting points. It will always redirect you to one of the starting points. This is obviously not what I want.
//The starting/entrance position is lat: 52.089988, lng: 5.178041
//The position I want to go to
var goToPosition = {lat: 52.0898852, lng: 5.1780344};
//Position changed EventListener
google.maps.event.addListener(panorama, 'position_changed', function() {
var newPosition = panorama.getPosition();
console.log('changed position to:', newPosition.lat(), newPosition.lng());
});
//Calling setPosition with goToPosition
panorama.setPosition(goToPosition);
//Will result in two console.logs directly printed after another:
changed position to: 52.0898852 5.1780344 //goToPosition
changed position to: 52.089988 5.178041 //starting position
The console.logs show that it looks like the position is being changed twice directly after each other, ending the position at the starting position.
I'm wondering if any body else has encountered this problem and if there is a known workaround for this. I am in contact with the photographer that uploaded the panorama pictures to Google. Maybe there's something in the way these pictures are uploaded to Google and configured. I wonder if this can even be fixed in my application code, or if it's an API problem or even expected behavior.
Thanks!

I found the solution for my problem, partly thanks to #LilDevil's answer.
Each panorama for a position has a panorama ID. If you know the panorama ID in advance, it can be used to move to that position using setPano().
I store panorama ID together with the lat,lng of a position. When clicking on the map I calculate the known position that is nearest to the clicked position. I can then look up the panorama ID that belongs to this position and use it to move to that panorama using setPano().
This doesn't seem to be a very clean way to solve the problem, because the panorama ID might change over time (for instance when new panorama pictures are uploaded to Google Streetview). However, I couldn't find anything in the documentation that says this method shouldn't be used. The documentation says that this method should be used when dealing with custom panorama pictures, which is not the case in my situation. Also, in this specific situation we are in control of when new panorama pictures will be uploaded (because it's for Google Indoor) so I can change the stored panorama ID's if that happens.

You can't just set the panorama to any coords. You need to use getPanorama() with your start coords and a radius, to find the coords to the nearest panorama, then set the pano to those coords. Some examples on https://developers.google.com/maps/documentation/javascript/streetview?hl=en

How to remove markers when use Leaflet Slider to show changes over time

I am using Leaflet Slider, of Dennis Wilhelm, to try to show changes in data over a period of five years in a Leaflet map.
I am trying to get that when the user move the cursor over the slider, some marker disappear and some other appear. So far, I only get that the new marker appear on top of the old marker.
So, my question is:
How can I remove markers when use Leaflet Slider to show changes over time? What changes I have to do in the original SliderControl.js?
Thanks in advance!
Below is the link to Dennis Wilhelm's Leaflet Slider code:
https://github.com/dwilhelm89/LeafletSlider/blob/master/SliderControl.js

It might be late, but for anyone who is looking for it now. If you want to show changes over time and want to show specific points at a time, pass the parameter follow as true, so the slider would show only one point at a time.
var sliderControl = L.control.sliderControl({
position: "topleft",
layer: layername,
follow: true
});

When I need to update markers in Leaflet I add my markers to a layergroup. I then add that layer group to the map once, and clear it before adding new markers. Below is a code snippet of what it might look like. That way all markers are cleared out before adding new ones. I hope that helps you.
var map = L.map('map').setView([0, 0], 2);
var markerLayerGroup = new L.LayerGroup();
map.addLayer(markerLayerGroup);
function addMarkers() {
markerLayerGroup.clearLayers();
markerLayerGroup.addLayer(markerVariable);
}

I have used the range: true property to overcome this issue in a project i'm working on.
It is suboptimal however given that you need to move 2 sliders, both a Left and right slider, which represent the limits of the period you're interested in viewing, rather than just one for say a month end snapshot.
Also one increment of the slider will add 1 point to the map rather than adding a whole lot at once.
I expect there are solutions to these problems by extending the class but i've not had the time to do that yet.
here's my code:
var sliderControl = L.control.sliderControl({
position: "topleft",
layer: membMarksCurrent,
range: true
});
map.addControl(sliderControl);
sliderControl.startSlider();

google maps v3 zoom to fit all markers(path) function

I've put together a little snippet on js fiddle so you can see what I am working with.
Basically I am trying to hook up a "Zoom" button so that once a path is created you can click the zoom button and the map zooms to fit the path. All of the answers I have found work by having an array of markers which I do not have. Any suggestions would be greatly appreciated.
http://jsfiddle.net/A3NBZ/

Well, in fact you do have an array of markers! It's stored in the Polyline that you're creating when the user is clicking on the map. To retrieve the points on which the user has clicked, simply use Polyline.getPath(). You can then add those points (as geocodezip mentioned) to a LatLngBounds object and use google.maps.Map.fitBounds() to adjust the map view to the given bounds.
Here's a simple implementation of the zoom method, based on the code example you've provided (you can see it working here).
function zoom() {
var bounds = new google.maps.LatLngBounds();
geodesic.getPath().forEach(function(latLng) {
bounds.extend(latLng);
});
map.fitBounds(bounds);
}

Similar to the examples you have seen with markers, add all the google.maps.LatLngs in the path to a google.maps.LatLngBounds object (using bounds.extend()), then call map.fitBounds on the resulting bounds object.
updated jsfiddle