I have some layers in Geoserver that come from a database. In it I load thousands of points that I represent graphically and paint in green or pink depending on whether they are active or not.
The problem is that depending on the zoom level the colors change (they look pink when they should be green).
Where the blue dots are, the circles should be green.
var zonesT = L.tileLayer.wms("https://geoserver.abcd.com/geoserver/abcd/wms", {
layers: 'city:points',
format: 'image/png',
transparent: "true",
attribution: "city"
});
Zoom 1: OK
Zoom 2: Incorrect, the center points are painted pink
Zoom 3: OK
Any suggestion of the error? Thanks
Related
I tried to customise leaflet heatmap.js to render rectangles to generate a heatmap. I was doing good so far. But, there are spacing in between rectangles that I can't get rid of. As in the picture.
heatmap
Solutions that I tried: turn off antialiasing, add offset. While adding offset remove the space, it creates an area with "blended color" which I don't want to have. I wonder if there is a solution to remove the gap or remove the blending color in heatmap.js.
Thanks and regards.
Turn out it is precision problem of the leaflet latlong to screen coordinate function. I have fixed it by recalculate the coordinate.
I have created some custom styles in mapbox studio. They are essentially just the mapbox outdoors style and the mabpox satellite style, each customized, separated out into 2 styles each: the basemap with no labels at all, and only the labels without the basemap. I want to give the user the ability to toggle layers on and off, or set the transparency. You can see the layers here:
Outdoors labels only
Satellite labels only
Within mapbox studio, the tiles show transparency where there are no roads / labels / etc. This is what I would expect. I am then using these layers in leaflet like so:
var mapBoxOutdoorsLabels = L.tileLayer(
'https://api.mapbox.com/styles/v1/slutske22/ck87tp2fq0rq41iqox69g4ko5/tiles/256/{z}/{x}/{y}#2x?access_token={accessToken}',
{ accessToken ,maxZoom: 18, pane: 'labels'})
.addTo(map1)
var mapBoxSatelliteLabels = L.tileLayer(
'https://api.mapbox.com/styles/v1/slutske22/ck8i7fv4h0h771ipc6mwzwmp4/tiles/256/{z}/{x}/{y}#2x?access_token={accessToken}',
{ accessToken ,maxZoom: 18, pane: 'labels'})
.addTo(map2)
As far as I can tell, the way I'm importing these two layers is identical. But for some reason, my labels layer for outdoors shows up properly (with transparent background), while my labels layer for satellite shows up with all black background, and you cannot see through to the basemap. The map on the right is the problem:
Here is a working codesandbox of the problem
I'm not sure what I'm doing wrong in mapbox studio or in my leaflet import for the tiles to be generated with black instead of transparent. The way I'm building the two maps are identical, at least as far as I can tell. Any ideas?
Thanks for reading.
The background layers in your labels mapbox style are not transparent.
Here is a codepen with a copy of your style with the background fixed
What I did:
Removing the /tiles/{x}/{y}/{z}/ part from your style's URL and running that in a browser returns the json from mapbox.
There I saw that your background layer color is missing the alpha channel value.
"layers": [
{
"id": "background",
"type": "background",
"layout": {
"visibility": "none"
},
"paint": {
"background-color": "hsl(222, 56%, 4%)" <= SHOULD BE (222, 56%, 4%, 0)
},
I was able to save the json file and upload it as my own style on https://studio.mapbox.com/
there I changed the alpha channel of the background and reduced the opacity of the satellite layer.
It appears that "visibility: none" doesn't work as intended
exported as a new style, I updated the fork with my style and access token
How can I deal with overlapping lines in the Leaflet map library?
I download geoJSON from the server sid and draw it right onto the map. If there are two identical entries, Leaflet draws them twice. This could be fixed by finding exact duplicated on the server side.
That however doesn't work for different datasets sharing some of the same space. As a result parts of both are drawn onto the same spot.
It appears that the lines are being rendered with the default Leaflet Polyline opacity of 0.5. If you were instantiating the Polylines yourself in code, you could override the opacity to make the lines opaque in this manner:
var myPolyLine = new L.Polyline( myPoints, { opacity: 1 } );
The line that would appear on top would then be the line that you added to the map last (one or the other is going to be on top, unless you make them both opaque and the same color). But this may be moot if you are loading in geoJSON directly and don't have control over how Leaflet renders it.
I am making a custom View where I am plotting a curve. Now I want the background of that curve to be like a graph paper.
shall I use a vertical and horizontal lines Or draw a series of rectangles Or use background image?
currently I am using vertical and horizontal lines but the problem is even when I am setting the thickness of the line to be 1 pixel, It still seems to be thicker and If I reduce the thickness to say 0.5 then the color becomes lighter than what I have set it to.
For this kind of thing, if you don't expect to have to make many, many dynamic changes to the background image, you could just use a carefully-crafted .png. You can even make the thing a single square and then use
view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"template"]];
Although, if you're doing plot work, then you may want to draw the lines manually as you are. The answer to your question then is to make the stroke width 1.0 but to draw the lines at the halves: so to draw a vertical line down the 100th x pixel column, move the cursor to (99.5, 0.0) and stroke to (99.5, 480.0). CoreGraphics drawing routines draw your stroke centered on the theoretical line you create, and will antialias to physical pixels as necessary.
I want to draw with a texture brush, in a color of my choice, on a white background using OpenGLES.
I have a bitmap image which I use CG to load and turn into a texture. This bitmap is mostly black, but has a white circle in the center that I want to use as the "brush". In other words, I want the black part to vanish in the final compositing, but the white part to take on the color that I set using glColor.
The best I can get is with the blend parameters (GL_SRC_ALPHA, GL_ONE) after setting some opaque bright color is a faded color line on a grey (not pure white background). But when I set the background to pure white, the line isn't visible.
At least in the current situation, the black edges of the original texture don't appear. Most other blend combinations I'm trying cause either nothing to show up even on grey, or to see the entire brush including the black edges, which is no good.
Is anyone willing to explain to me how I should set up my texture and/or GL states to make the bright color show through on pure white, without showing the black texture edges at all? This might be a newbie question, but I've tried working through the blend math, and I still just don't understand how the colors are all being factored together.
Here's the image I'm using as the brush:
alt text http://www.coldcoffeeandjuice.com/OpaqueBrush.png
Here's some resulting output, when the background is grey, and the glColor4f is set to (1, 0, 0, 1), eg pure red, and the brush is used on a bunch of consecutive GL_POINTs. Note that what's good about this is that only the white part of the brush image shows the color red-- that's right. The bad parts is that the red which I want to be pure and bright is pale due to being blended with the background (?) and/or the white of the brush (?) so that it washes out entirely if the background is pure white. This uses the blend params as given above (src_alpha, one).
(source: coldcoffeeandjuice.com)
Here's what I want to see, given the pure red color (thanks Paintbrush):
(source: coldcoffeeandjuice.com)
Can anyone help me understand what I'm doing wrong?
Thanks!
Ok, so you're trying to "paint" a given colour (in this case "red") on to a background, using a mask for the brush shape.
You need to do the following before you start rendering the "paint":
First make sure your brush has an alpha channel that corresponds with its shape - that is the alpha channel should look similar to the brush image you posed.
Render with these states set (note space to get around wiki markup):
// Make the current material colour track the current color
glEnable( GL_COLOR_MATERIAL );
// Multiply the texture colour by the material colour.
glTexEnvf( GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE );
// Alpha blend each "dab" of paint onto background
glBlendFunc( GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA );
See also:
http://www.opengl.org/documentation/specs/man_pages/hardcopy/GL/html/gl/colormaterial.html
http://www.khronos.org/opengles/documentation/opengles1_0/html/glTexEnv.html