I wanted to display a map in HTML5 notification. Since notifications do not allow a full fledged HTML+JS app to run inside them, I wanted to show just an image.
The question is how do I get the link to the appropriate map tile image if I know the lat/lon co-coordinates. I can set some fixed values for zoom level etc. I don't wan't to run my own tile server or depend on third party servers (other than openstreetmaps.org) that may go down any time. I am okay with the lack of ability to customize image size, or centering image around the co-ordinate etc.
There are a bunch of example conversions from lat/long to tile number in various langauges on this OSM wiki page - hopefully you'll find something there that you can use.
Related
I'm toying around with d3.js and some other javascript libraries plotting geoJSON data in the browser. I've done some cool things with the data, but to give it a bit more context I want to lay it over a map that fills the browser (i'll probably make it opaque to not distract). I've spent a few hours with the google and bing API, which have great "zoom" options, but I want to specify how detailed the map becomes without further restricting how far I can zoom in. Is there a way to do this? I.e. I want to zoom further in and be able to pan around, without all of the side streets appearing-- maintaining the "main drags" of the city I'm working with.
I'm open to using different resources, but this is not a commercial product so I don't want to pay anything. As far as I know, the option for increasing and decreasing the detail/resolution of the pane is by increasing or decreasing the zoom variable. Thanks.
Edit: There really doesn't need to be much interaction with the map. This is kind of the intention http://www.caudillweb.com/temp/d3_choropleth.html, but since it will be at the city level, as you can see when you zoom in that far all sorts of different elements and side streets appear, taking away from the clean view at a more zoomed-out level and it begins to distract from the data.
I would like to draw a map of current temperatures (or air pressures, etc.) from many weather stations, with the underlying map still recognizable. the problem is easiest to think of as follows:
I have an array of spot measurements from irregularly spaced dots---think triples of GPS coordinates with one temperature value each. my stations can be very close to or very far apart from one another, and a user may want to zoom in or out. cold should be blue, warm should be red. Ideally, I would like to just pass the array, the color range, and have the rest be taken care of. I would prefer everything to be inside a web browser. The user needs to be able to zoom in, zoom out, move around, and get back to his current location.
I do not even know how to think about this problem. If a user has zoomed out enough, non-transparent dots could be so close as to obscure the terrain. However, zooming in, it would be nice to recognize the dot that is the station itself. This presumably requires some intelligence that realizes how many dots there are, e.g., relative to the density of the display? not sure.
I believe google maps charges for many API calls, so I would prefer using an open map and/or open API that can use different underlying maps. It does not have to be fancy. I don't care about directions, etc.---just a map that is recognizable at most zoom settings, with landmark and street names, and my nice temperature station overlay coloring, so that a user can visualize where it is cold and where it is warm.
(Stations come online and offline, but I don't need to update this more than once an hour. I can place the map measurements into a file that is URL web-accessible.)
is this an easy or a hard problem for the high-level web programmer?
/iaw
after looking around for a long time, I think the best way to do this is with html5 openlayers nexrad.
alas, the docs seem to be a mess. half the examples that I found did not seem to work. it's pretty hit-or-miss. similarly, the openlayers cookbook also seems to be outdated and has incorrect examples, but they did have a reasonably short example of such a nexrad map overlaid on the U.S., that one can further study.
I want to make an html5 app for mobile devices, where one of the features is a Google Map. I am able to do this using the regular apis embedded in html5 in the normal way.
However, for the next version I want something more particular. Instead of the user being able to view anywhere in the world at any zoom, I want to restrict it to view only inside, say, a 20 km rectangle around a particular location, for, say, only 4 levels of zoom. i.e. there is only a small finite number of tiles that ever need to be used. Also since there is a limited area and a small finite number of tiles, I want to download absolutely all the tiles for every zoom level when the html5 app first opens, and store them locally. This would allow a user to look around inside this 20 km rectangle, and zoom, pan, etc, and the loading would be lightning-fast. (i.e. it would not be fetching new data from GMaps' servers each time you change zoom or pan--instead all of that data would be stored locally (downloaded when the app is run for the first time) and simply displayed as the user navigates around. How do I do this?
Also if there is a non-Google-Maps solution I am interested in that too.
Thanks
Would this article by Drew McLellan on 24ways help you out in any way?
http://24ways.org/2010/finding-your-way-with-static-maps
That would be breaking the Terms of Service. You are not allowed to download/cache tiles.
I would like to face a problem for which I haven't seen a solution looking around in Internet. This is: I need to save the elements drawn by WEB users on a canvas space not as a flat image, but each one singularly. This in order to let the same user, or even other users, to modify every single element (drag-and-drop, erase, erase partially, ecc.) in a second moment. This should also help to eventually save a drawing history and restore it in next working sessions. All the examples I found were intended to save just a canvas flat image.
Update:
To better clarify: not necessary as layers, but for sure I thought to realize several different driving tools; a drawing element is the singular application/istance of a tool: a circle, a box, a added image, a straight line or even a free hand drawing that start from the moment of right button mouse click till it is released. Then the chance to save the elements state allowing to modify each one in a second moment.
You can't do this natively with canvas. You should look at using a third party library. Fabric is a library that was built to do what you want.
The base idea was to use convans as a container for vectorial shapes (triangles, squares, cirlces, etc.), manual drawn figures (see example http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/) and inserted images giving the chance to users to save/upload the content not as serialized image, but with each distinguished element in its original format in order to continue to work on them in a future work session.
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.