I am wanting to allow users to click on a specific part of a photograph in a tablet/phone (via a web browser or software) and it will record their choice.
Essentially I have some aerial photographs and I want to place a regular grid (say 100m x 100m over the top). This grid would be semi-transparent, and each grid cell would be clear if not clicked ('off') and change to blue when clicked ('on'). Each grid cell would store a value if it is 'on' or 'off'.
This would preferably done using a spatially referenced geotiff image, but is not essential.
I have lots experience in GIS related software, but I am looking for a simple solution.
Is this possible?
What tools, web languages (html, java etc), or software is recomended.
Responsive image maps kind of seem relevant here but I am not sure?
Tracking user interaction over an image is possible. You can overlay a grid of clickable div, and simply listen for clicks on each div.
Here is an approach where I place a 10x10 grid of div on top of an image:
https://jsfiddle.net/o31p99wh/
The key is to know the size / scale of the image, and make sure that the tiles are mapped to that. E.g. each 35 x 35px square maps to 350 x 350m.
Related
I have this less than mediocre tool I made to help me design maps for a game I am working on. You can see the code here.
I used CSS grids to build a tile editor for my tile based game map. When you run the app (with init button) as is and start to edit the tiles, it is pretty responsive. But when I scale the map size (using multX and multY fields), the click and drag input and css grid response seems to drag. Note: if you scale the above fields to 10 or so, it will take ~30s to initialize the grid. This lag becomes pretty hindering when trying to design a bigger map.
Does anyone have any ideas on how to make CSS grid more responsive with a large number of rows/columns?
Any more appropriate approaches for making a tile editor grid instead of native css grid?
Thanks!
I am trying to use the functionality of Google Slides to create a complicated diagram of a complicated process. Basically, I have tiny rectangles (shapes) within larger rectangles within even larger rectangles, all on top of a huge rectangle that occupies my entire viewport with the maximum zoom out (Ctrl-Alt-Minus pressed many times). Rectangles have some small font text in them and there are also a bunch of connectors going from one rectangle to another.
It's a big mess.
When I want to see the details of a small rectangle, I use the provided Ctrl-Alt-Plus shortcut to zoom in as far as it lets me. However, it's incredibly cumbersome, because it will only zoom in to whatever is in the very center of the screen. So, I need to constantly adjust my view port to place what I want into the center of the screen.
What I want is to write a script (if such functionality is in fact provided - hence the question) where I could click on a specific rectangle and it would immediately zoom to this rectangle, placing it in the middle of my screen, it occupying about 50% of the screen space.
I looked through Google Slides API reference and found absolutely nothing related to zoom. Am I searching incorrectly, or is it simply not there?
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.
I'm developing a visualization for certain parts of a Warehouse with Flex 3. In this visualization there are lot of blocks where 1 to x pallets can be placed where x is between 9 and 15. I need to represent each pallet with a black square, each place which is already assigned to a pallet but not physically taken with a grey square and each free place with a white square. I first thought to just use a canvas for each place on a block and change their color if the state changes. But the hundreds of canvases which are there as a result of this approach are not updated quickly enough for my purposes (screen freezes for a few seconds).
I don't want to use embedded images because of the great amount of images I had to embed in the application (those Images appear in 4 orientations).
My idea was to create background images which reflect the state of the whole block only when needed for that certain state and cache them, so that the computation time is spread over the whole runtime.
My problem now is I don't know how to create them in a way that I can use them as "backgroundImages". As far as I understand I would need them as a class object but I don't know how to achieve that, when not embedding the images.
I'm of course open to better approaches to solve my problem. Thanks for your support.
I would suggest using Graphics property of a Sprite for example. It provides basic drawing API, like drawing lines, circles and rectangles.
Besides, you can draw bitmap images on the Graphics to produce more advances results.
My first KML project was an animated map of the Washington DC Metro system (see Animating Metro with KML and Google Earth). Unfortunately, where Metro lines share the same track, only one color prevails. The real map shows a wider line with both colors side by side.
Is there a way to draw a line in KML (Google Earth) with two side-by-side colors? I've seen a way to have a different color on the edges of the line, but that's different.
I could cheat by changing the coordinates of each station, but aside from computational difficulties, I'd have to continuously changes to positions every time the user zooms, to prevent a gap between colors (or an overlap).
Other subway systems show more than two colors running alongside each other, so an option to show multiple colors would be nice. And this is not really a gradient, as the colors don't fade together; they should be distinct, assuming the pixel width is wide enough.
This is probably a feature request, though surely someone else has run across this problem before Google Earth v6? Would love to be able to do this, or find a good workaround in the interim.
Michael
http://www.mvjantzen.com/blog/
The short answer is no, although you could probably create a custom MVC object that renders the line for you as desired (i.e. you would not need to alter the Kml)
http://code.google.com/apis/maps/articles/mvcfun.html
That said, your cheat method could work too - and I would disagree that
"...I'd have to continuously changes to positions every time the user
zooms, to prevent a gap between colors"
You can set the <gx:physicalWidth> property which allows you to set the width of a LineString to be in meters, rather than pixels.
https://developers.google.com/kml/documentation/kmlreference#gxphysicalwidth
In the case of your track example, this means you can set the width of the track to match the underlying imagery no matter what altitude the end user views it from.