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.
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.
How do I implement the red dots as seen on the Google Map linked below:
Red Dots
UPDATE
I'm using Google Maps version 3 (not 2)
UPDATE 2
I found the following Presentation by Google talking about what I want to do.
docs.google.com/present/view?pli=1&id=dggjrx3s_153hdf2s6cm
It's slide 27, called "Tiny Clickable Markers". However, they do not talk about how I implement these kind of markers nor does it answer my questions above.
Unfortunately, those dots are -- as far as I know -- a special feature of Google's commercial Maps application (distinct from the maps api, v2 or v3), meaning it's unavailable for api use.
As for how it actually works, it appears they are not being added to the map in the standard fashion of the larger, tear-drop markers, each of which is an individual div being absolutely positioned on the map. The tiny red dots are actually a layer of image tiles being baked on Google's servers, and then these tiles are added to the map as images (I'm not sure how they're made clickable). Anyway, all this makes sense, because adding that many individual divs to the DOM burns up a lot of CPU. (Disclaimer: this is just my guess as to how it works).
All of which is to say: it's probably not a great idea to put that many markers on a map, unless you implement something like Google's tile solution.
UPDATE
It's been awhile, but it turns out you can do this, you just have to use Google's Fusion Tables service.
some documentation here
How much control do I have regarding the styling of a google map?
Can I make it more closely resemble a site's colour scheme or are we stuck with pastels?
Controls
There is a decent description of the process to override the set of builtin Controls. So you have total control over the UI elements overlaying the map.
Map Tiles
I don't agree with the previous answers that you are out of luck if you want to change the images in the map itself.
The range of map types available give you a few options outside the pastel default map:
G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP, G_PHYSICAL_MAP, G_MAPMAKER_NORMAL_MAP,
G_MAPMAKER_HYBRID_MAP, G_SATELLITE_3D_MAP, G_DEFAULT_MAP_TYPES, G_MAPMAKER_MAP_TYPES
Obviously, this only works if you are willing to create the tiles, but Custom Tilesets are quite well supported by the Google Maps API and there a few good examples out there:
World of Warcraft tileset
Batmud tileset
Tower of the Hand tilset
Update
Google recently announced support for Styled Maps in the Google Maps API. You can extensively customize the color scheme used by Google Maps. So you can customize the look of your mashup, without resorting to custom tilesets.
You can probably change around all the controls, perhaps by making your own or subclassing the google default versions. You won't be able to change the colors on the map itself without generating all new map images, at which point you are probably better off using something other than google. If thats what you want, you should consider OpenStreetMaps.
I've looked into this before. From what I've found is that the styles of layers/overlays on the map are pretty much determined by Google (minus a few size option for some overlays). What I have found is that you'll either need to subclass the existing overlays or create entirely new overlays that mimic the existing functionality, which in some cases can be painful given their complexity (such as street view and others).
Last I checked, you were stuck with the colors you were given (this was a year ago). You can check http://code.google.com/apis/maps/ for more info.