I'm trying to test simple web map based on PostGIS/Geoserver/OpenLayers stack on Windows Server 2008. I've been using this tutorial and geoserver docs.
When I try to add WMS layer to my map using GeoWebCache:
var index1d = new OpenLayers.Layer.WMS(
"Index1",
"http://localhost:1979/geoserver/gwc/service/wms",
{'layers': "Index2000:index1d",
'format': "image/png",
'transparent': true
},
{'opacity': 1.0, 'isBaseLayer': true}
);
map.addLayer(index1d);
I get infamous 'pink tiles'. Error in Geoserver says:
ERROR [geowebcache.GeoWebCacheDispatcher] - Requested horizontal resolution:
750.0000000000005 , best match: 632.4668417968734 exceeds 10% threshold.
Perhaps the client is configured with an incorrect set of scales (resolutions),
or the DPI setting is off compared to the one in GWC ? http://localhost:
1979/geoserver/gwc/service/wms
My layer seems to be configured correctly and when I serve it without GeoWebCache with simply:
"http://localhost:1979/geoserver/wms"
everything works fine.
Could anyone point where I'm making mistake?
I haven't used GWC, but I guess you have set up the cache yourself? If so, I suppose you had to set the scales where GWC would create it's tiles. Building on these assumptions, I would say that you then must use the same scale levels when accessing the tiles. Look over your GWC settings and maybe recreate the cache.
(Using WMS will work because the map data by default is rendered on the fly, taking whatever parameters you supply it with and rendering from that.)
Related
I'm currently coding a simple HTML page with embedded Javascript to visualise a local mbtiles, including local glyphs and sprites.
The html index.html is :
...
<script src="https://unpkg.com/maplibre-gl#2.1.9/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl#2.1.9/dist/maplibre-gl.css" rel="stylesheet" />
...
<body>
<div id="map"></div>
</body>
<script type="module" src="./index.js" async defer></script>
The javascript index.js is :
var map = new maplibregl.Map({
container: 'map',
style:
'styles/style.json',
center: [174.746344, -36.8899343],
zoom: 11.15
});
and the goal is to load a style.json file that would define the mbtiles, sprites and glyphs local location.
I'm currently using the OSM Bright style, copied over locally on my machine, within the style.json file and the goal is to swap any connection to remote files by local files:
glyphs
"glyphs": "./glyphs/{fontstack}/{range}.pbf",
It works well for the glyphs
sprites
"sprite": "./sprites/sprite",
I have the following error :
Unable to parse URL "./sprites/sprite"
mbtiles
"sources": {
"openmaptiles": {
"type": "vector",
"url": "./mbtiles/country.mbtiles"
}
},
I got the following error : Error: Unexpected token 'S', "SQLite for"... is not valid JSON
I'm definitely missing some protocols here, and I can't find any answer to my question so far, knowing :
I'm not looking to build an IOS/Android app : so this useful website for instance https://medium.com/#ty2/how-to-display-offline-maps-using-maplibre-mapbox-39ad0f3c7543 doesn't apply to my case -> I've tried to add
asset://sprites/sprite
or
mbtiles://country.mbtiles
but that doesn't work (neither for the glyphs, but it doesn't look like it's necessary any way)
this Load local .mbtiles with maplibre-gl-js looks like the closest to my need, but again the answer focus on application and not html, plus the question has not yet been fully resolved neither
So any help would be appreciated, especially I would be interested to know if this is even possible with the maplibre-gl.js library that I'm using as this might just not be possible. If that's the case, I would appreciate a similar answer with mapbox-gl.js if necessary, but still using local (offline) files.
In other words the main objective is to run a website (not an app) with maplibre (not mapbox - at least if possible) and only including local files.
Thanks for any feedback.
I know it's may be late, but nevertheless:
mbtiles:// protocol only works with maplibre-gl not with maplibre-gl-js as I know.
So I used pbf files. You can get them from mbtiles file with mbutil or from osm.pbf file with tilemaker.
Before converting from osm.pbf with tilemaker you should modify field "compress" to "none" in config-openmaptiles.json, or map won't be rendered.
For me only "glyphs" worked with relative path, but "sprite" and "tiles" with full path, like http://... (But I only tried python3 embedded http.server and uvicorn)
This is my excerpt from style.json:
"sources": {
"openmaptiles": {
"type": "vector",
"tiles": ["http://localhost:8000/data/tiles/{z}/{x}/{y}.pbf"],
"minzoom": 0,
"maxzoom": 14
}
},
"sprite": "http://localhost:8000/data/sprites/bright-v8",
"glyphs": "data/glyphs/{fontstack}/{range}.pbf",
"tiles" path should be in square brackets and you should provide "maxzoom" of your map (14 is a default for many maps, as I know) if you want overzoom to work.
I am attempting to add NOAA's Doppler Radar to my web map. For whatever reason the later will not display on the map. No errors are being reported and I have used console.log() to confirm the data is being pulled correctly form noaa's arcGIS server. Any thoughts as to how to configure this so the data gets displayed?
maps.addWeather = function addWeatehr () {
console.log("addWeather Called...");
var weatherServiceURL = "http://gis.srh.noaa.gov/arcgis/rest/services/RIDGERadar/MapServer"
var weatherLayer = new FeatureLayer(weatherServiceURL,{
outFields:["*"],
visible:true
});
console.log(weatherLayer);
maps.map.addLayer(weatherLayer);
};
You're trying to add a FeatureLayer using a map service that doesn't support returning features - which makes sense if you think about it, what features would a weather radar return? If you look at the root folder of the NOAA server:
http://gis.srh.noaa.gov/arcgis/rest/services
You should see "RIDGERadar (MapServer)". If it supported Feature access it would either say "FeatureServer", or have a second entry if it supported both.
Try adding it as a dynamic map service instead:
var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.srh.noaa.gov/arcgis/rest/services/RIDGERadar/MapServer");
maps.map.addLayer(layer);
The ArcGIS services directory is a very useful thing to play with - I got the above line from the internal Javascript viewer linked from the MapServer page.
I have an app (using Fabricjs) that allows a user to draw on a canvas. They draw their name on a canvas and click save. I call toSVG() on the canvas and take the svg string and store it in my database.
The user can then later add that SVG string to a new canvas, I call...
fabric.loadSVGFromString(svg_string, function(objects, options) {
var group = new fabric.PathGroup(objects, options);
canvas.add(group);
canvas.calcOffset();
canvas.renderAll();
group.setCoords();
});
That adds the svg image to the canvas just fine and the type is 'path-group'.
Now when the user clicks 'save' I call var my_string = canvas.toObject(). Then I submit that json string to my server and save it with JSON.stringify(my_string).
The SVG is now converted to JSON and I store that entire JSON string in a database.
I allow the user to come back and edit that canvas image again. I load the json string into the canvas with...
var json = my_string;
var serialized = (typeof json === 'string') ? JSON.parse(json) : json;
canvas.loadFromJSON(serialized, function(){
canvas.renderAll.bind(canvas);
});
This worked just fine in Chrome until about one month ago. It will still load the images and text just fine and it even adds a 'path-group' object to the canvas. However, the path group does not display.
It will display in just fine in Safari and Firefox and in IE.
I was using Fabric 1.4.9 and now I've upgraded to 1.5.0 (just to see if it would fix the issue) then I upgraded to 1.6.0.rc1. It still will not work in Chrome but it will work in Safari and Firefox.
So it will read and parse the SVG and convert it to JSON then add it to the canvas just fine but when adding it from a JSON string it chokes.
As asturur pointed out. If you disabled Hardware Acceleration in Chrome Settings this will work again in Chrome.
Here is a JS Fiddle
Open that link in Chrome and you'll see it won't display. Open it in Safari or Firefox and you'll see "Travis". If you disable Hardware Acceleration in Chrome it will work as expected.
update:
I know that this is a bug on several of my users computers but for what it is worth, here is the output of chrome://gpu.
Graphics Feature Status
Canvas: Hardware accelerated
Flash: Hardware accelerated
Flash Stage3D: Hardware accelerated
Flash Stage3D Baseline profile: Hardware accelerated
Compositing: Hardware accelerated
Multiple Raster Threads: Enabled
Rasterization: Software only. Hardware acceleration disabled
Video Decode: Hardware accelerated
Video Encode: Hardware accelerated
WebGL: Hardware accelerated
Driver Bug Workarounds
disable_multimonitor_multisampling
gl_begin_gl_end_on_fbo_change_to_backbuffer
init_varyings_without_static_use
max_cube_map_texture_size_limit_1024
regenerate_struct_names
scalarize_vec_and_mat_constructor_args
unfold_short_circuit_as_ternary_operation
validate_multisample_buffer_allocation
Problems Detected
Limit max cube map texure size to 1024 on Macs with Intel GPUs
Applied Workarounds: max_cube_map_texture_size_limit_1024
Multisampling is buggy on OSX when multiple monitors are connected: 237931
Applied Workarounds: disable_multimonitor_multisampling
Multisampled renderbuffer allocation must be validated on some Macs: 290391
Applied Workarounds: validate_multisample_buffer_allocation
Unfold short circuit on Mac OS X: 307751
Applied Workarounds: unfold_short_circuit_as_ternary_operation
Mac drivers handle varyings without static use incorrectly: 322760
Applied Workarounds: init_varyings_without_static_use
Always rewrite vec/mat constructors to be consistent: 398694
Applied Workarounds: scalarize_vec_and_mat_constructor_args
Mac drivers handle struct scopes incorrectly: 403957
Applied Workarounds: regenerate_struct_names
glBindFramebuffer sometimes requires a glBegin/End to take effect: 435786
Applied Workarounds: gl_begin_gl_end_on_fbo_change_to_backbuffer
Accelerated rasterization has been disabled, either via about:flags or command line.
Disabled Features: rasterization
Version Information
Data exported 9/22/2015, 1:07:56 AM
Chrome version Chrome/45.0.2454.99
Operating system Mac OS X 10.10.5
Software rendering list version 10.9
Driver bug list version 8.19
ANGLE commit id 6f0fd8c5457f
2D graphics backend Skia
Command Line Args Chrome.app/Contents/MacOS/Google Chrome --enable-avfoundation --enable-avfoundation --flag-switches-begin --flag-switches-end
Driver Information
Initialization time 1
Sandboxed true
GPU0 VENDOR = 0x8086, DEVICE= 0x0a2e *ACTIVE*
Optimus false
AMD switchable false
Driver vendor
Driver version 10.6.33
Driver date
Pixel shader version 1.20
Vertex shader version 1.20
Max. MSAA samples 8
Machine model name MacBookPro
Machine model version 11.1
GL_VENDOR Intel Inc.
GL_RENDERER Intel Iris OpenGL Engine
GL_VERSION 2.1 INTEL-10.6.33
GL_EXTENSIONS GL_ARB_color_buffer_float GL_ARB_depth_buffer_float GL_ARB_depth_clamp GL_ARB_depth_texture GL_ARB_draw_buffers GL_ARB_draw_elements_base_vertex GL_ARB_draw_instanced GL_ARB_fragment_program GL_ARB_fragment_program_shadow GL_ARB_fragment_shader GL_ARB_framebuffer_object GL_ARB_framebuffer_sRGB GL_ARB_half_float_pixel GL_ARB_half_float_vertex GL_ARB_instanced_arrays GL_ARB_multisample GL_ARB_multitexture GL_ARB_occlusion_query GL_ARB_pixel_buffer_object GL_ARB_point_parameters GL_ARB_point_sprite GL_ARB_provoking_vertex GL_ARB_seamless_cube_map GL_ARB_shader_objects GL_ARB_shader_texture_lod GL_ARB_shading_language_100 GL_ARB_shadow GL_ARB_sync GL_ARB_texture_border_clamp GL_ARB_texture_compression GL_ARB_texture_compression_rgtc GL_ARB_texture_cube_map GL_ARB_texture_env_add GL_ARB_texture_env_combine GL_ARB_texture_env_crossbar GL_ARB_texture_env_dot3 GL_ARB_texture_float GL_ARB_texture_mirrored_repeat GL_ARB_texture_non_power_of_two GL_ARB_texture_rectangle GL_ARB_texture_rg GL_ARB_transpose_matrix GL_ARB_vertex_array_bgra GL_ARB_vertex_blend GL_ARB_vertex_buffer_object GL_ARB_vertex_program GL_ARB_vertex_shader GL_ARB_window_pos GL_EXT_abgr GL_EXT_bgra GL_EXT_blend_color GL_EXT_blend_equation_separate GL_EXT_blend_func_separate GL_EXT_blend_minmax GL_EXT_blend_subtract GL_EXT_clip_volume_hint GL_EXT_debug_label GL_EXT_debug_marker GL_EXT_draw_buffers2 GL_EXT_draw_range_elements GL_EXT_fog_coord GL_EXT_framebuffer_blit GL_EXT_framebuffer_multisample GL_EXT_framebuffer_multisample_blit_scaled GL_EXT_framebuffer_object GL_EXT_framebuffer_sRGB GL_EXT_geometry_shader4 GL_EXT_gpu_program_parameters GL_EXT_gpu_shader4 GL_EXT_multi_draw_arrays GL_EXT_packed_depth_stencil GL_EXT_packed_float GL_EXT_provoking_vertex GL_EXT_rescale_normal GL_EXT_secondary_color GL_EXT_separate_specular_color GL_EXT_shadow_funcs GL_EXT_stencil_two_side GL_EXT_stencil_wrap GL_EXT_texture_array GL_EXT_texture_compression_dxt1 GL_EXT_texture_compression_s3tc GL_EXT_texture_env_add GL_EXT_texture_filter_anisotropic GL_EXT_texture_integer GL_EXT_texture_lod_bias GL_EXT_texture_rectangle GL_EXT_texture_shared_exponent GL_EXT_texture_sRGB GL_EXT_texture_sRGB_decode GL_EXT_timer_query GL_EXT_transform_feedback GL_EXT_vertex_array_bgra GL_APPLE_aux_depth_stencil GL_APPLE_client_storage GL_APPLE_element_array GL_APPLE_fence GL_APPLE_float_pixels GL_APPLE_flush_buffer_range GL_APPLE_flush_render GL_APPLE_object_purgeable GL_APPLE_packed_pixels GL_APPLE_pixel_buffer GL_APPLE_rgb_422 GL_APPLE_row_bytes GL_APPLE_specular_vector GL_APPLE_texture_range GL_APPLE_transform_hint GL_APPLE_vertex_array_object GL_APPLE_vertex_array_range GL_APPLE_vertex_point_size GL_APPLE_vertex_program_evaluators GL_APPLE_ycbcr_422 GL_ATI_separate_stencil GL_ATI_texture_env_combine3 GL_ATI_texture_float GL_ATI_texture_mirror_once GL_IBM_rasterpos_clip GL_NV_blend_square GL_NV_conditional_render GL_NV_depth_clamp GL_NV_fog_distance GL_NV_light_max_exponent GL_NV_texgen_reflection GL_NV_texture_barrier GL_SGIS_generate_mipmap GL_SGIS_texture_edge_clamp GL_SGIS_texture_lod
Disabled Extensions
Window system binding vendor
Window system binding version
Window system binding extensions
Direct rendering Yes
Reset notification strategy 0x0000
GPU process crash count 0
Turns out there was an issue with how Chrome was testing for a null value in the strokeDashArray.
On each of my path objects I had the strokeDashArray like this...
"strokeDashArray": [null, null ]
Changing it to this solved the problem...
"strokeDashArray": null
Or to this...
"strokeDashArray": [1, 0 ]
// this is not recommended as it *could* hurt performance for no reason.
I still submitted a ticket to the Chromium team and I see that they found the problem and fixed it. So in future releases of chrome the [null, null ] should work just fine when user has hardware acceleration enabled. This may not be relevant in the future but I figure maybe some day a googler will find this question/answer and it will help them.
I'm using Leaflet JS and Cloudmade in my mobile HTML5 application. Unfortunately I can't get the retina support to work.
I use this url to access the cloud made api:
var url = 'http://{s}.tile.cloudmade.com/{key}/{style}#2x/256/{z}/{x}/{y}.png?token={token}';
My key, style and token are replaced by the correct values.
For my leaflet map layer I use the following simple configuration:
L.tileLayer(url, {
detectRetina: true
}).addTo(map);
Unfortunately the result looks really weird.
It seems like something is going wrong with the tiles and the position of them.
If I remove the detectRetina flag I get a correct result in the browser
But as you can see both solutions are not sharp on my retina display (Mac Book Pro).
Has anyone made this working?
Thanks!
This worked for me:
var tileURL = 'http://{s}.tile.cloudmade.com/{api-key}/1714' + (L.Browser.retina? '#2x': '') + '/256/{z}/{x}/{y}.png';
L.tileLayer(tileURL, {detectRetina: true}).addTo(yourMap);
Have you tried with different tile styles and check if that might be the issue?
I am using the ExternalInterface on Flex 3. We are actually using flex to compress a large amount of DOM data, so this is specifically being used with LARGE data.
To further investigate, if there is a limitation, is this universal? (IE. Silverlight)
First, let me state that this is being done with an application that was made by inexperienced software engineers. This is an app that we need to buy time by compressing the data so that we can build a long-term solution. We have no other options, unfortunately.
Background: This is an application that is actually a web-spreadsheet. Our long term solution is to make a Office Business Application.
No, Flash do not impose any size limits on ExternalInterface communication.
I think it does, or there is some other configuration which governs this. I was testing a file upload using FileReference object and wanted to pass the data sent from server back to hosting page via external interface call. Below is a snippet of my UPLOAD_COMPLETE_DATA event handler
private function onFileUploadCompleteData (e:DataEvent):void
{
var file:FileReference = FileReference(e.target);
Alert.show("onFileUploadCompleteData : " + e.data );
if(ExternalInterface.available && callBackOnUploadCompleteData.length > 0)
{
var data:Object = new Object();
data.FileName = file.name;
data.ServerData = e.data;
//data.ServerData = e.data.substr(0, 50);
ExternalInterface.call(callBackOnUploadCompleteData, data);
}
}
This event gets fired but the call to my javascript is never made. If I uncomment the line which trims the returned data to first 50 characters, it start working and calls the javascript correctly.
Either there is a size restriction imposed by flash (10.2) or IE9 (which is what I was using), or there is something else I am missing.