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!

Google map with postal code and custom marker image

I'm currently using the Google Map's staticmap with a postal code and the standard red marker. I would like to use a custom png image instead of the red marker.
I've tried adding the url of the image with the marker parameter in the url but it gives an error in the map.
<img src="https://maps.googleapis.com/maps/api/staticmap?center=v302t8&zoom=9&size=460x150&maptype=roadmap&key=APIKEY&markers=color:red%7Cv302t8" alt="">
I'd like to be able to use this method as opposed to the geocoding method as they the number of queries is limited.

I don't know what the center location v302t8 ( source of the error? ) is or the final %7Cv302t8 in the map url so I modified the above as you can see below. The map loads OK and displays a custom marker image centred upon the "Tower of London"
The chosen image should be 64px x 64px or less.
https://maps.googleapis.com/maps/api/staticmap?center=51.507336, -0.074968&zoom=15&size=512x512&maptype=roadmap&key=<APIKEY>&markers=icon:http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/af/afeef641914e77b0950eb8b8317bfbf080b69ace_medium.jpg|51.507336, -0.074968
Update:
Using a png file also works - again bearing in mind the max dimensions of the marker image
https://maps.googleapis.com/maps/api/staticmap?center=51.507336, -0.074968&zoom=15&size=512x512&maptype=roadmap&key=<APIKEY>&markers=icon:https://cartoon.aminoapps.com/static/bower/emojify.js/images/emoji/skull.png|51.507336, -0.074968

D3.js mouseover not active when markers too close together

I have developed a google map which uses image markers. I want to display an information box when the cursor is over the marker but when markers are close together (not necessarily overlapping) the information box does not display.
What controls the minimum distance between markers required for mouseover to be activated?

Each of your markers is an <image> inside its own <svg>. The images may only be 16px*16px, but the SVGs are 160px*20px, and that entire area is grabbing mouse events. When your markers are close together, that means that an invisible portion of the SVG for one marker is blocking the mouse event from passing through to the visible marker below.
Changing the CSS to ignore mouse events on the <svg>, and only respond on the visible parts of the <image> seems to get things working as expected:
.members svg {
pointer-events: none;
}
.members svg image {
pointer-events: visiblePainted;
}

How do I programatically change layers in Leaflet?

I don't want to the show the layers control on the map, but I want to put some buttons somewhere else to change between layers. Is this possible to change the layer programmatically?

Suppose you have a map:
var map = L.map('worldmap-map').setView([37.8, -96], 4);
To remove a layer, layer1:
map.removeLayer(layer1)
To remove a control layer, ctrlLayer,
map.removeControl(ctrlLayer)
Or you want to add a layer1 to map:
layer1.addTo(map)
For an example, there is a Leaflet example : http://leafletjs.com/examples/choropleth-example.html
You could use firebug or chrome dev tools to see its source.

From https://stackoverflow.com/a/33762133/4355695 : Just myTileLayer.addTo(map) does the job of changing background layer (without adding on top), if it is already part of the base layers. And you don't need to explicitly remove the previously selected background layer.

How to add custom street names on Google Maps?

So you want to add custom street names or other labels on your Google Map? For example on this location. After learning current (3.6) google map js API you have these possible options:
KmlLayer (not works now)
GroundOverlay (works!)
OverlayView (should work)
KmlLayer "...adds geographic markup to the map from a KML, KMZ or GeoRSS file that is hosted on a publicly accessible web server...”. We can try this latest feature to add path with label. And it will work in Google Earth. But if path is too short – Google Earth will not show us a label. Workaround for short path is just make it long by adding start and end points few times:
<coordinates>
55.043196,82.907145 55.043473,82.909902
55.043196,82.907145 55.043473,82.909902
55.043196,82.907145 55.043473,82.909902
55.043196,82.907145 55.043473,82.909902
</coordinates>
Then we already see our nice custom label in Google Earth, but in Google Map not. Most possible reason is that google earth's latest feature is too latest. Currently it’s a fail way, but may be later, google map's KML renderer will take that feature into account.
GroundOverlay is "... a rectangular image overlay on the map ...". All is much simple.
Create image:
Open your Google Earth (make sure your latitude/longitude settings are Mercator) and go to your location
Add one pixel white image on your area and make it 33% transparent
Go to properties / place tab of your image overlay and copy latitudes/longitudes from there
Make screenshot in Google Earth and paste it to your favorite graphic editor
Crop image to the borders of your white transparent area
Add layer, where you will add your custom labels and add them
Switch off your base layer and save the result as png, for example overlay.png
Add the resulting image to your google map as:
google.maps.event.addDomListener(window, 'load', function() {
var mapDiv = document.getElementById('map'),
opts = {mapTypeId: google.maps.MapTypeId.HYBRID},
map = new google.maps.Map(mapDiv, opts),
area = new google.maps.LatLngBounds(
new google.maps.LatLng(55.042297, 82.906337),
new google.maps.LatLng(55.043862, 82.910473)
),
overlay = new google.maps.GroundOverlay(
'overlay.png', area, {map: map, clickable: false}
);
map.fitBounds(area);
});
OverlayView you can try by yourself.
ps: Is this a correct format for article? Or may be it should be a community wiki?

I created a MapLabel utility library a while ago. While it doesn't have any rotation or text-on-path capabilities (I'd love to see you add it!), it does let you put text on a map.