How to set up an image to be used with openlayers? - openlayers-3

I have a big image that I want to display on my website, and allow people to navigate it like a map (zoom and move around).
OpenLayers 3 seems to be a good technology for the client side.
Now the question is: how do I set up the server side so that it can serve the image tiles in a way that works with OpenLayers?
Note that there is no "geographical data" to be displayed, just a plain image.
More details: the server side is a pretty common apache+php host. Ideally, I'd just want to split the image with an automatic tool and upload it, and let openlayers take care of the rest.

Could possibly use a service like http://www.maptiler.com/ ?
It looks like you can add non-georeferenced raster images, and have it create tiles for you. Then the tiles could be hosted on your server and used with OL3 or whatever client-side mapping tool.

If your image is not prohibitevely big you could use the ol.layer.Image layer that allows feeding a static image from a URL to it. This has the benefit that you can use the image as-is, without having to split it into tiles or use some fancy protocol to communicate with the tiles server.
There is an official live example with code included.

Related

Temporary tiles cache for Mapserver

I was searching on Google and StackOverflow to see if anyone have solution for my problem, but didn't found anyone with same problems.
So, currently I'm running Debian machine with Mapserver installed on it. The server also run webserver for displaying map data over the browser. The generation of map is dynamic, based on layers definition in database I built mapfile in PHP and based on that generated PHP the map is shown to user. The data is defined in database and as a SHP files (both combined in single mapfile).
It is fully dynamic, what I mean with that is that user can enable/disable any of layers or click inside polygon (select some points on map) it color the selection (generate new mapfile based on selection and re-generate tiles).
So the execution of all that code from selecting some area to coloring selected items somtimes take too much time for good user experience.
For solution I'd like to use some kind of temporary tiles cache, that can be used for single user, and to be able to delete it's content when user select some items on map or enable/disable one of the layers.
P.S. I already did all the optimizations provided from Mapserver documentation.
Thanks for any help.
It sounds to me like your problem is not going to be helped by server-side caching. If all of the tiles depend on user selections, then you're going to be generating a bunch of new tiles every time there's an interaction.
I've been using MapCache to solve a similar problem, where I am rendering a tileset in response to a user query. But I've broken up my tiles into multiple logical layers, and I do the compositing on the browser side. This lets me cache, server-side, the tiles for various queries, and sped up performance immensely. I did seed the cache down to zoom level 12, and I needed to use the BerkeleyDB cache type to keep from running out of inodes.
I'm using Leaflet.js for the browser-side rendering, but you should also consider OpenLayers.
After looking at the source code, I have some other ideas.
It looks like you're drawing each layer the same way each time. Is that right? That is, the style and predicate of a particular layer never change. Each user sees the image for that layer the same way, if they have selected the layer. But the combination of layers you show does change, based on OpenLayers control? If that's the case, you don't need per-user caching on the server. Instead, use per-layer caching, and let the user's browser figure out the client side caching.
A quick technique for finding slow layers is to turn them all of. Then reenable them one by one to find the culprit. Invoke Mapserver from the command line, and time the runs, for greater precision than you'll get by running it from your webserver.
You mentioned you're serving the images in Google 3857 while the layers are in Gauss-Kruger/EPSG 3912. Reprojecting this on the fly is expensive. Reprojecting the rasters on the fly is very expensive. If you can, you should reproject them ahead of time, and store them in 3857 (add an additional geometry column).
I don't know what a DOF file is--maybe Digital Obstacle File? Perhaps preload the DOF file into PostGIS too? That would eliminate the two pieces you think are problematic.
Take a look at the SQL queries that PostGIS is performing, and make sure those are using indexes
In any case, these individual layers should go into MapCache, in my opinion. Here is a video of a September 2014 talk by the MapCache project leader.

simple image recognition with any api/library

Is it possible to do very basic image recognition to compare an image against a database of images(resource folder images or any web servers images if we have) and determine which image in the database is the best match? I don't need to do any processing of any of the images, but simply differentiate between a finite list of images.
Is it any open source code available ?
I would recommend using OpenCV if you simply want to compare images (i.e. decide if two images are the same).
Here is a similar question on SO:
iOS image comparison
I would also go about reading a little bit about what Core Image (the iOS image library) has to offer, before going about OpenCV or other 3rd party.
I hope this helps.

Handling very large image files in web browsers

First post on SO; hopefully I am doing it right :-)
Have a situation where users need to upload and view very high resolution files (they need to pan, tilt, zoom, and annotate images). A single file sometimes crosses 1 GB so loading complete file on client side is not an option.
We are thinking about letting the users upload files to the server (like everyone does), then apply some encryption on server side creating multiple, relatively small low resolution images with varying sizes. We then give users thumbnails with canvas size option on the webpage for them to pick and start their work.
Lets assume a user opens low grade image with 1280 x 1028 canvas size. Image will be broken into tiles before display, and when user clicks on a title it will be like zooming in to a specific tile. Client will send request to the server asking for higher resolution image for the title. Server will send the image which will be broken into titles again for the user to click and get another higher resolution image from server and so on ... Having multiple images with varying resolution will help us break images into tiles and serve user needs ('keep zooming in' or out using tiles).
Has anyone dealt with humongous image files? Is there a preferred technical design you can suggest? How to handle areas that have been split across tiles is bothering me a lot so not sure how above approach can be modified to address this issue.
We need to plan for 100 to 200 users connected to the website simultaneously, and ours is .NET environment if it matters
Thanks!
The question is a little vague. I assume you are looking for hints, so here are a few:
I see uploading the images is a problem in the firstplace. Where I come from, upload-speeds are way slower than download speeds. (But there is litte you can do if you need your user to upload gigabytes...) Perhaps offer some more stable upload than web. FTP if you must.
Converting in smaller pieces should be no big problem. Use one of the availabe tools. Perhaps imagemagick. I see there is a .net wrapper out: https://magick.codeplex.com/
More than converting alone I think it is important not to do it everytime on the fly (you would need a realy big machine) but only once the image is uploaded. If you want to scale you can outsource this to another box in the network.
For the viewer. This is the interessting part. There are some ready to use ones. Google has one. It's called 'Maps' :). But there is a free alternative: OpenLayers from the OpenStreetmap Project: http://wiki.openstreetmap.org/wiki/OpenLayers All you have to do is naming your generated files in the right way and a litte configuration.
Even if you must for some reasons create the tiles on the fly or can't use something like OpenLayers I would try to stick to its naming scheme. Having something working to start with is never a bad idea.

Ideas for rendering 2d autocad drawings in a browser

I'm working on a .net mvc web application. A core piece of functionality is a requirement to take a DWG (AutoCAD) file, and render it on the web application, in such a way that the user can zoom in/out and move about the drawing. I also need to add overlays to the drawing to represent various things.
I'm trying to work out the best way to do this. There are various .net CAD libraries out there but the best you can get browser-based are tools that will convert the file to an image on the server and render it on the page.
My current idea is to convert the dwg to an image, use something like google maptiler to chop up the image at various zoom levels, and then use something like openlayers.org to present this to the user.
Are there other/easier/better solutions?
You could convert the DWG to a GIS format like a geo-referenced image (e.g. geoTIFF), and then use a map server to serve the image to OpenLayers or to Google Maps.
Essentially the map server chops up the tiles for you on-the-fly as they are requested. This means you can support arbitrary zooming and panning.
This is the "purest" way of doing things with OpenLayers - and it's a lot easier than it might sound. MapServer & GeoServer are good free open source map servers, this is vanilla stuff for them. In the past I used to chop up images into Google Maps tiles myself, but I'm not going back now.
You may want to look Autodesk's Freewheel application, which allows you to render 2D and 3D files on the server.
Another possibility would be to convert the relevant parts of the drawing file to your own format, and render them with Javascript. You can use a library like Dojo to facilitate this. This approach is more work, but you will get cross-browser compatibility and more control over the display.

delphi+openstreetmap

is there a vcl or a project (in delphi) that would allow me to download OSM tiles and display them on an app?
I have tried embedding an browser and it worked great but i need a way to display the maps offline.
As I see it, there is 3 ways to do this :
Save all displayed tiles as a single image (could be done easily with a TWebBrowser, or TEmbeddedBrowser component) : you would navigate to the map address (OSM Mapping Server) based on given coordinates (top left corner), and then take a snapshot. You need to recalculate the base coordinates (top left corner) after each snapshot.
You need to understand how tiles are generated, wich is not quite difficult :
basically, the scheme of osm tiles generation is as follow http://osmserver.org/tiles/tile/x/y/z.png
Once you understand how it works, you could calculate tiles url by code and download'em one by one.
For more info on the tiles generation scheme look here :
good thread on manifold forum : http://forum.manifold.net/forum/t71011.13#75206
http://wiki.openstreetmap.org/wiki/Slippy_Map
http://wiki.openstreetmap.org/wiki/Tiles%40home
or if you need to go further : http://wiki.openstreetmap.org/wiki/OSM_Protocol_Version_0.5
download the entire OSM maps (available on the web) and use a VCL component to display them (Tatukgis DK...)
Best Regards,
Mo3ez
I don't know the OpenStreetMap project very well, but there's a chance that the project itself has the software to "view" the maps inside a page.
You can accomplish your goal: show the maps off-line using the same basic construct you have now for the user interface: a embedded browser.
What you change is the url the browser will connect to to something like (http://localhost:3458), making your application her own web-server, for example, with Indy TIdHTTPServer binded to port 3458 (just an example port).
That way, you can serve the content for the embedded browser from inside your application, in the same way Delphi IDE (>= 2005) itself provides content for the main page you see when you start it (in fact, a embedded web browser).
To that browser, you serve the viewer page, all it's dependencies and the OSM file. The only restriction to this idea is the viewer MUST do all the things on the client side (for example, it could be javascript, flash, etc.). No server side scripts, unless you are willing to "mimic" the server side behavior or to integrate your application with the script engine (not too easy).
Other chance is to use THBImage, who offers OpenStreetMap integration with Delphi and a (not working) site demo.
Oops! I tried to provide a few hyperlinks in my message but as a new StackOverflow user I'm limited to just one. You might checkout the "Need solution to display map" message thread (25-Jan-2010) on: embarcadero.public.delphi.thirdpartytools.general
I'm trying to solve a similar problem. I need to display a county-wide or city-wide map using Delphi and then put custom icons on the map. I do not need routing or a very detailed map. In the past I've used a TMS "hotspot" component for the custom icons on top of a TImage. Now I need a way for the client to select their own map for the static background image.
A freeware MFC GUI control class (with source) which implements display of OpenStreeMap tiles:
www.naughter.com/osmctrl.html
The zip there has an executable that shows how it works.
This unit is to calculate URLs for the OpenStreetMap Project's TileServer, and other useful utilities as may be needed. If you want to use OpenStreetMap in your pascal programs, then this is for you.
http://code.google.com/p/openstreetmap-fpk/
I'm also considering using the free Tiger/Line maps. Those look pretty good in a free Linux program (xastir).
TatukGIS looks very good (and expensive). I certainly don't need a full GIS solution so this seems to be way overkill just to display a map. But if I don't find a simpler solution this still might be better than integrating MS MapPoint.
TGlobe seems like what I need but sadly it is no longer available.
look in StelMAP for Delphi with OSM
Component to view a map of the project OpenStreetMap for Delphi 2010 without using browser or scripts.
You can view maps offline. Support for proxy servers for work online. Multi-threaded loading tile map speeds up the process to download and view maps.
The set of procedures and property allows you to add a component to map an unlimited number of layers, shapes and images.
Don't know about OSM files, but if you can open them in a browser, you can always embed a TWebBrowser in your Delphi application and load the files within it.
Not the most elegant, but should work...(requires IE)

Resources