Tiled background image in OpenLayers - javascript

When using OpenLAyers is it possible to have a layer that consists of a tiled, zoomable image? I can use CSS to set the background-image and background-repeat properties of the DIV tag but of course that doesn't scale when I zoom in and out.

I use OpenLayers.Layer.WMS for tiled, zoomable images, which I believe is the most commonly used layer for that purpose. There is a simple WMS example in the OpenLayers Demos. If you sniff the http requests made from that demo, you'll see a URL like:
http://vmap0.tiles.osgeo.org/wms/vmap0?LAYERS=basic&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&FORMAT=image/jpeg&SRS=EPSG:4326&BBOX=5.625,39.375,11.25,45&WIDTH=256&HEIGHT=256
Request parameters in this URL include a bounding box, a projection and a tile width and height. The server responds with the appropriately sized image for that location (BBOX) and projection (SRS). OpenLayers takes care of placing the tile images returned into the appropriate locations in your map viewport.
OpenLayers is doing a lot for you here. You don't have to manipulate the CSS or DIV tags yourself, but it is all done geospatially. If your tiled images aren't geospatial then you might want to look at something else besided OpenLayers. Hope I helped.

Related

slippy map tile zoom tool

So I've found many jquery simulated zoom tool demonstrations (example) where a small image and large image are stored on the server. When the mouse pans over the small image a mapped portion of the larger image is shown in a zoom window.
The zoom feature I am hoping to employ will be used on a slippy map (openlayers,tilelite,mapnik) so it will be easier for my old eyes to see the street names. So it is not practical to have larger versions of all the image tiles on hand for zooming. Is it possible to actually zoom (as opposed to simulated zoom) over dynamic web page content?
I do realize I can change the font sizes in the mapnik configuration files and I will do that if there are no other options available, but I'd like to avoid that if possible.

Polygon Background Texture in Leaflet

I am working on a mobile application with leaflet 1.0. The map contains many differently shaped polygons and I want to give them a texture via PNG-Files.
Leaflet's ImageOverlay does pretty much what I want except that it can't clip the image to the shape of the polygon. ImageOverlays only accept imageUrls so I need to have the clipped image locally saved for every individual polygon. Is there a better approach for my problem?
See the "Leaflet.pattern" plugin in the plugins list.

How do draw polygons which can be used with OpenLayers?

I can draw custom shapes using polygons in Inkscape. My goal is to display these shapes on top of the map of the US at fixed positions. The map and the polygons will display on a webpage with the ability to zoom in and out and pan. I wanted to know if these polygons can be placed on such a map using OpenLayers. How? Example anywhere? I am not familiar enough with OpenLayers and would learn it more if it can meet my requirements. I need to programmatically be able to color fill each shape either server or client side. I also want to place markers on the map based on lon/lat coordinates. Does OpenLayers support all this?
This is an example of what I want to do. The area in orange was defined in Inkscape and the color orange can be a different color set programmatically. This is a simple svg file displayed on the web page.
You should be able to treat the exported SVG as a regular image overlay. Here is the OpenLayers API for image overlays and here is another SO answer with a very basic image overlay example. OpenLayers supports markers, though if you're embedding the SVG as a flat image, I'm not sure if OpenLayers will allow you to style the SVG elements out of the box...
As an aside, Polymaps is an alternative mapping library that's slightly more SVG-oriented; it's especially good for stuff like dynamically transforming SVG layers based on data, manipulating styles and classes for SVG elements, etc. Per your example, here's their example for very simply throwing an image (with defined top-right / bottom-left coordinates) on a map.

Can I use OpenLayers for a simple custom tile grid system?

I have a table in my database with like 2.500 tiles, so 50 x 50. Frontend size is 256px x 256px per tile and there should be no zoom levels.
Then the are tables which hold other data (buildings, objects) and every one of this objects may belong to a certain tile.
In the frontend I want to use fullscreen OpenLayers to display a set of tiles to fill the screen and JUST use the dragging and async. reloading of tiles that OpenLayers provides. If possible even automatically stopping the dragging if the border of the world map is reached.
I also don't want to render images (pngs) - the tiles should be empty <div>s or at least transparent because the background of the body is a repeated grass texture anyway and I want to include <img>s depending on the objects which are associated to the tile in the model.
Can anyone familiar with OpenLayers tell me if this is possible with such a simple custom model on the backend? Any resources on this particular case would be very helpful!
Yes, this is possible in OpenLayers if each tile in your table has some geospatial data associated with it, such as a Bounds or the Lat/Lon of a corner.
OpenLayers wants to place base layers (your tiles as WMS) and features (your buildings and objects as WMS, WFS, or Vector) geospatially within the browser's viewport. The trick is to restrict OpenLayers to a single zoom level (resolution) to match the implicit resolution of your stored tiles, and then set the maxExtent of your OpenLayers.Map object to match the extent of all your tiles such that each WMS tile request generated by OpenLayers has a bounding box that matches one of your tiles.
Here is a WMS request generated by OpenLayers for a simple base layer I have (the BBOX is in meters). The link is behind a firewall so it won't work for you:
http://kpnatsp8:9080/WmsServlet?SERVICE=USSTATES&TRANSPARENT=FALSE&FORMAT=image/png&LAYERS=USSTATES&SCALE=4000000.0000000005&SPHERICALMERCATOR=true&MAXEXTENT=-20037508.34,-20037508.34,20037508.34,20037508.34&REQUEST=GetMap&STYLES=&SRS=EPSG:900913&BBOX=-12812623.352549,3443367.869216,-11909512.729118,4346478.492647&WIDTH=640&HEIGHT=640
I have a Java servlet that takes that request and returns a tile image. You would write your own servlet or server-side script to take the request, determine which tile in your database matches the BBOX bounds, and return that tile as an image response.
Sorry if I'm being pedantic here but you sounded new to OpenLayers. This is the way I would start but I'm open to better ideas.

How can I implement a zoomable draggable interface the same as seatgeek?

Seatgeek has a zoomable draggable tiled interface.
An example is here:
http://seatgeek.com/sf-bulls-yankees-tickets/3-2-2012-tampa-george-steinbrenner-field/mlb/785875/#
I want to implement a scrollable draggable interface like this but I cannot use Google's code for google maps.
Also I need the tile system like google maps where it pulls tiles from the server for rendering the map.
Need to implement in javascript. What library can I use? How can I do it?
How does seatgeek do it?
I de-compiled their javascript http://pastebin.com/PVjahhnH
Map Client
OpenLayers
OpenLayers Examples
Map Data
OpenStreetMap
This kind of interface seems complex to implement, but it is just some math tricks. If you decide to implement your own algorithm, try this out:
Take the full image and create tiles in different scales and consequently with different depth.
The user start looking at the scene in real scale, composed by 16 tiles created from the original scene.
If the user drags, all tiles moves equaly. If the user zoom in, all tiles are scaled up.
If the user zoom more than X, you change the 16 tiles by their 16 child tiles! Got it? Higher the zoom, higher the detail. To avoid having 36000 tiles at the same time, generate with different depth and switch them on the fly.
You just need to load and move the tiles. Multiply tile x, y, width, height by the zoom. Keep the focus of the scene in the mouse position. Take a look at this example. It does exactly the steps above, but with a lot of microscope images. It is the same idea of google maps.
CloudMade map tile is one of the server based map tile service. Please read this page server http://cloudmade.com/documentation/map-tiles or contact with alex#cloudmade.com for more information.

Categories