We are experimenting with using OpenLayers within a PHP application that displays data from PostgreSQL/PostGIS and GeoServer.
The initial use of OpenLayers is terrific except for one problem:
A lot of our data has very small extent eg < 0.1m.
When we zoom in to look at the features they disappear.
We have read the documentation, looked for examples, tried setting zoom values > 19 but to no avail.
There are NO scale thresholds in the SLD so this is not the issue.
Can anyone suggest how to get around this? Is there a NO-LEVELs mode for OpenLayers as we are not interested in mimicking Google Maps etc.
Related
I have been trying for some weeks to come up with a price map. My inspiration is the heatmap found on the website of Housing.com . The link to the map is:
https://housing.com/dsl/heatmaps/mumbai/buy
I have tried:
Google maps Javascript API 3
heatmap,js library
and many other websites.
The resulting map that I am getting is visually less appealing.
Have they defined boundaries for very small regions and then introduced the gradient(which, again I am unaware how to implement.)
Any thoughts on how it might have been implemented are welcomed.
They don't use Google Maps Heatmaps Layer in the application, or any other library for creating heatmaps. You can see that between the requests the webpage makes are images like this, this and also more for bigger zoom levels. They just render these images over custom styled google maps as tiles.
More on how to render custom tiles over google maps, check this part of docs. For more information how to style the map below the heatmap to look like in the example, check this parts of docs.
Creating tiles images to render over your google maps can be troublesome, there are some tools, like this one which should be able to help you, but is paid. I don't know of any free solutions, you can create it manually although it might take some time.
Hope this helps you to better understand the implementation techniques behind the referenced map.
I need to display a network diagram on a web page. The diagram will be too large to display as a single image, so I would like to display it in a similar fashion to google maps, i.e break it into tiles and allow the user to scroll around the image.
I also need to be able to overlay status information on to this diagram.
How would I go about breaking up an image into tiles, then displaying them on a website, while also overlaying data using some form of co-ordination system?
I have found a few tutorials and libraries online, however these all seem to relate to geospacial data from google/openstreetmap etc. As this is not geographical based, these resources do not seem to do what I need.
Any help greatly appreciated.
There are many scripts out there just like Google-Maps, and some of it is better, one of them called Custom Interactive Map from CodeCanyon, using the Json + SVG,
that's alive preview i made months ago, Some sites released it for free, you search for it.
And you can find alot of free scripts doing the same here:
20+ Useful jQuery Google Maps Tutorials and Plugins
50+ Best jQuery Map plugin with Demo examples
16 Best Free jQuery Map Plugins
Also you can find other scripts by searching with this keywords:
jquery map viewer like google maps
I have a large high-resolution image that I am using for an overlay using Google Maps v3 API. This works fine for desktop and laptop computers with a reasonable network connection, but unsurprisingly it does not work so well for mobile users.
What's the best/easiest way to break the image up into 2D tiles at the various zoom levels so I can act as a tile server for Google Maps via the API?
Is there a program that will reliably generate the tiles for me and provide me with the necessary zoom and coordinates for each resulting tile and/or give me the correct tile if I provide the zoom and coordinates?
Is it pretty easy to write a tile server to do it on the fly once you gather the right info? Perhaps there's source code out there that I can use as a model? (I found a tile server at http://blog.gmapify.fr/a-map-tile-server-part-2-understanding-google-maps-tile-overlays-and-building-up-a-tile-server which is certainly helpful, but it doesn't serve tiles from a source image, so I'd have to at least figure that part out...)
Or perhaps there is step-by-step algorithm that I can manually follow if that's more straightforward? (Since it's only one image and it covers an area on the map of maybe a square mile, manually doing it like that is perhaps feasible if not preferable.)
you can check MapTiler http://code.google.com/p/maptiler/. It can generate the tiles you need.
Tile server is really easy to write. The easiest way is just to host static files (your tiles) in a directory structure. The directory structure is then usually servername/zoom/x/y.png (or zoom/y/x.png). Such structure is also produced by MapTiler. MapTiler also generates an example web page using the tiles (but I guess it uses Google Maps API v2).
Information about using your tiles in Google Maps API v3 can be found here: http://code.google.com/apis/maps/documentation/javascript/maptypes.html#CustomMapTypese
You can do the entire thing clientside without tile pre-cutting
See https://github.com/Murtnowski/GMap-JSlicer
slicer = new JSlicer(document.getElementById('map'), 'myImage.png');
slicer.init();
Very simple.
There's a really good video tutorial on making maps with maptiler, which can be found here:
Mobile Maps That Aren't Terrible
It focuses on mobile maps, but also covers maptiler and other basics. I found that very helpful.
If you use the satellite GMapType using this Google-provided example in v3 of the API, the maximum zoom level has a scale of 2m / 10ft , whereas using the v2 version of another Google-provided example (had to use another one since the control-simple doesn't have the scale control) yields the maximum scale of 20m / 50ft. Is this a new "feature" of v3 ?
I have to mention that I've tested the examples in the same GLatLng regions - so my guess is that tile detail level doesn't influence it, am I mistaken ?
As mentioned in another question, v3 is to be considered of very Labs-y/beta quality, so use in production should be discouraged for the time being.
I've been drawn to the subject since I have to "increase the zoom level of a GMap", the answers here seem to suggest using GTileLayer, and I'm considering GMapCreator, although this will involve some effort.
What I'm trying to achieve is to have a larger zoom level, a scale of 2m / 10ft would be perfect, I have a map where the tiles aren't that hi-res and quite a few markers. Seeing that the area doesn't have hi-res tiles, the distance between the markers is really tiny, creating some problematic overlapping.
Or better yet, how can you create a custom Map which allows higher zoom levels, as by the Google Campus, where the 2m / 10ft scale is achieved, and not use your own tileserver ? I've seen an example on a fellow Stackoverflower's GMaps sandbox , where the tiles are manually created based on the zoom level.
I have seen the codebase for a custom Map on mapki, but this involves having a tileserver, can't you just use Google's tiles for a specific zoom level and then swap some of them (depending on tile.x and tile.y) with custom tiles, when the zoom level is higher than 19 ?
I don't think I'm making any more sense, so I'm just going to end this big question here, I've been wondering around trying to find a solution for hours now. Hope that someone comes to my aid though !
Thank you in advance !
Insights after a further investigation :
After investigating some more, it is indeed true - Maps v3 does allow a max zoom level of 22 (!), equating to a scale of 2m / 10ft, but only when the map type is Satellite, not Hybrid ! – Dr1Ku Apr 14 at 9:59
Fiddled around with the Automatic Tile Cuttor Photoshop plugin as well, couldn't produce the results I wanted (didn't know how exactly to scale my map so that the tiles would be perfectly arranged), using an ImageOverlay, doesn't look so pixel-y. – Dr1Ku Apr 14 at 10:00
Have since then ported my GMaps v2 code to v3, smooth sailing. And yes, having a Satellite Map (not Hybrid !) allows a max zoom of 22, tricky placed markers (close to each other) are rendered way better. Adding an overlay + custom tiles (eventually) for "Sorry, no imagery here" did the trick in the end – Dr1Ku May 17 at 20:17
I just wanted to post an update here that v3 of the Google Maps API is now out labs and has feature parity with v2.
Also v2 of the Maps API has been deprecated, so if you're looking for better zoom features, it looks like your best option is going to be to use v3 instead of a v2.
I have large images that I would like to have dragging and zooming controls like Google Maps. I started looking into Google Maps API and some other related websites, but I could not find something simple and easy.
MapKi tutorial suggests me to automatically cut tiles and add it as a custom map. This makes sense, but I have so many images in the file server that I don't have time to go through all of them and cut the tiles and figure out zoom levels for each. One good solution would be writing a script that can do this automatically, but that would take a lot of effort and time that has made to look for another solution if there is any.
Hence, is there a way to have similar functionalities as Google Maps controls for images without creating new images or tiles out of the original image. It would be great if you can either post some code or link to the tutorial/documentation. Or, if you know how to do this with Google API without making those tiles, please direct me to the right path. I'm a total newbie with Google Maps API.
I have found the DragZoom for Google Maps, but I don't think that's what I'm looking for.
You're looking for something like Djatoka
You should take a look at the IIIF protocol used by libraries and museums for zooming extremely large images (tens of thousands of pixels on a side +), preparing collections of images on canvases, presenting annotations on those images, etc.
http://iiif.io
…and just for the record here's an open source tiling server with a frontend viewer:
http://iipimage.sourceforge.net/
Check out https://github.com/Murtnowski/GMap-JSlicer
slicer = new JSlicer(document.getElementById('map'), 'myImage.png');
slicer.init();
It's super simple, no need for tile pre-cutting. Just point at a single image and go.