I'm setting up a heat map in Sheets which tracks maintenance work orders for an apartment complex. I have an image of the complex that I adjusted to being 50% transparent so you can see through it to the cells underneath. The cells underneath have formulas that calculate off a database. I apply conditional formatting to these cells so that as more maintenance techs log work orders, the resulting heat map changes. The problem I'm having is that the image shifts in relation to the underlying cells when I embed the Sheet into Google Sites. The heat map is then no longer aligned properly.
I tried to insert the image as both a shape and a picture and neither stopped the issue from happening. I also tried purposely off-setting the image in Sheets thinking that it would then be aligned better when embedded into Sites, but that doesn't work either.
The expected result when embedding the Sheet into Sites is for the image to stay fixed in relation to the underlying cells. The actual result is the image shifts which then renders the underlying heat map unusable. Any thoughts on how to prevent this from happening? Thanks!
Related
I have a few hundred images that I would like to have a user manually sort along two axes. Each row represents a users perceived nominal label, eg red, orange, yellow, green, ... The images in a row are ordered according to some feature perceived by the user (eg brightness). So given an image the person sorting should be able to determine which row it belongs to and which two images it should be between in the row and insert it there.
Initially I tried using Google sheets and loading the images into cells in the spreadsheet. The problem I encountered are the images are really low resolution and Google sheets applies some blending to the pixels (eg linear?, bicubic?) which made understanding the images too difficult for my user. If I could load an image and have it resize using the nearest pixel color I think it would be fine.
I have looked at some photo organizing software, the closest feature I can find is organizing photos based on geo-coordinates onto a 2D map, which isn't intuitive for my user.
I suppose I could create a webapp that the user could assign a row and column too, but it seems like there should be an easier way.
The intent is to apply machine learning on the provided labels so that we can automatically sort larger datasets, so it would be great if the solution could be used with machine provided metadata, which could then be visually inspected for accuracy.
I am building a website where users can search for specific places or areas on a map with some filters like "park", "supermarket", "cafe", etc. For example, a user should be able to find all suitable areas in a city that are near a park but also are at least 1 km away from a highway (for some reason). To do so, after the user has specified some filters, I want to add an overlay that masks all areas that don't satisfy these filters while still allowing the user to zoom and pan freely. I am using MapboxGL for building the map.
My first attempt was to use Turf on my geojson data to perform the necessary operations, i.e. converting the current viewport to a bounding box polygon, union all needed geojson features to one polygon and mask the difference between them and then simply add the result as a Fill-Layer on the mapbox map as seen in the image below.
While this approach does work for simple overlays it doesn't scale and needs a lot of time to perform the necessary operations on the data when used with a lot of geojson data and more filters.
Instead of working with the geojson directly I thought it might be better to use a canvas overlay and render the mask layer with webgl to improve the performance. I found a mapbox example for overlaying a custom style layer on a map, but unfortunately, I have never used webgl before and I'm not really sure how I would render such an overlay with this custom layer.
Is using a custom overlay with webgl the right approach to solve my problem? Or is there an obvious option (or another library) for this task I haven't considered yet?
I am developing large geo location web site. There are over 2.5 million places to show on Google Map with markers and info window (when marker clicked).
I am using MarkerClusterer to narrow down the load of individual marker.
But, I am afraid if so much data in browser (JSON etc) would really kill the page.
Any suggestions to load on demand JSON by identifying the map bounds when panning is changed.
Any recommendations to resource also appreciated.
Have a look at Cluster I think it may do what you want:
Only the markers currently visible actually get created.
If too many markers would be visible, then they are grouped together into cluster
markers
You can look for a quadkey. A quadkey is perfect to reduce the dimension complexity and build clusters of the point of interest. There are many different methods like z curve, hilbert curve, peano curve. To further limit the constraints you can attach the cluster thing to the bounding box and the zoom level of the google maps.
There is a version of marker Clusterer that works for v3 of the google maps api, but that isn't the issue here. The issue is that you'd still be handling the underlying data in the browser with JS (2.5 million places retrieved thru JSON/AJAX). That is most likely too much, unless you're on a fast connection using the fastest computers with a lot of ram.
For those contemplating this issue on their own sites, keep in mind that more and more mobile devices are accessing these sites, and the javascript on such devices just can't handle nearly as many points. My own site broke with the latest release of iOS6, and now I have to accommodate by changing my js to an easier system load.
But to get back to the answer at hand, what you'll have to do is make a new ajax call whenever the map bounds change, and if the zoom goes too far out, you'll have to limit the number retrieved and implement some system to show the user that not all results are shown. My site uses a limit of 250, if I recall correctly, and shows a bounding rectangle around the locations (along with markerclusterer to cluster them). Before populating with real data, I did a test database of thousands and thousands, and this number seemed to be the best tradeoff of performance and information. (But that was before I went mobile and before v3 of the api). v3 is supposed to be more streamlined, but mobile devices are limited, so you'll have to test.
I am using marker clusterer plus library with a marker size cap of 200 and default zoom level 8. On zoom change or drag, another 200 markers will come on the map.
If you zoom-out the markers will be clustered and vice-versa.
The application has resemblances to this page, the best example being the "matrix hoop" tape style:
http://www.troohoops.com/products/decorator.php
The difference is that this example uses gif files that have already been manually drawn to represent each combination of tape style and swatch. My application requires the layers to be created on-the-fly because I will be dealing with many more of such tape styles rather than just five, and potentially more swatches; and because new tape styles will be added to the system ad hoc so the web operator should not have to draw dozens of images to represent style/swatch combination each time a style is added to the system.
Some ideas I have are:
using CSS and image masks and/or z-indexes... but this seems not able to handle transparency suitably
building a flash application... but this is an unknown as I do not have any flash programming experience, but I would be willing to learn if it is viable
defining polygonal image regions using XHTML image mapping as z-indexed layers and filled with repeated swatch thumbnails... but again this is beyond my understanding
using an image library that can process style layers as .svg files and fill vectored regions with swatches as .gif files
I have no evidence that any of these ideas works.
It is assumed that style layers can be created using software such as The Gimp, or other suitable image editing software.
My application also needs to produce a snapshot image of the selected style/swatches as a jpeg, gif or png; if another technology is required to do this then that's acceptable.
The final solution will also allow selection from a list of styles and swatches in the same fashion as the above link.
The solution will operate on a PHP/MySQL based web site, but the solution does not need to use PHP/MySQL.
Just to clarify the main question, the logic would go something like this:
Take square thumbnail of fixed dimension. I.e. a swatch.
Take outline of an irregular shape. I.e. one layer of a tape style.
Fill the irregular shape with the image of the thumbnail where the thumbnail is repeated vertically and horizontally without crossing the outline of the irregular shape and without leaving any of the irregular shape unfilled. I.e. fill the tape style layer with the swatch.
Repeat this process for five layers, but stack the layers on top of each other so that lower layers are visible where there is transparent unfilled regions of higher layers.
Produce a flattened snapshot of all the layers as a jpeg, gif or png file.
There is the equivalent of a carton of beer up for grabs for the outline of a solution, offered in the form of a PayPal payment; redeemable upon identifying a viable technology.
I have about 5000 markers I need to render on Google Map. I'm currently using the API (v3) and there are performance issues on slower machines, especially in IE. I have done the following already to help speed things up:
Used a simple marker class that extends OverlayView and renders a single DIV element per marker
Implemented the MarkerClusterer library to cluster the markers at different levels
Render GIFs for IE, instead of alpha PNGs
Are there faster clustering classes? Any other tips? I'm trying to avoid server-side clustering unless this is the only option left to squeeze performance out of the system.
Thanks
I used a method that loads all the markers onto the page, and then listens for the map to finish panning.
When the map has finished panning, I first check the zoom level - if it's too high I don't display anything. If it's at an acceptable level, I then loop through the markers I have stored and see if they fall into the bounding box of the map. If they do, they get added. A second loop then removes any that have moved out of the view.
The highest number I've used is about 30,000 markers with this method, although I have it so you must be zoomed in quite far to see them. In areas of higher concentration of markers it's obviously a little slower but it's useable.
The solution mentioned above works for much higher number of markers. We use it for millions of GPS points at backend (including polygons etc). The only problem is some logic behind like proper caching of spatial queries, or fetching new results only, if user moves a map for more than X meters. There is a lot of work to make it done, but for viewing real high number of points, there is nothing better.
Marker clusteres are usually working at browser side, so these is still need to load all points at once - and this makes this method unusable for large numbers.
You can check it out at http://www.tixik.com/london-2354567.htm live (just click ,,plan a trip " and start planning. Just try to move a map, zoom in or out and all points will show/hide on map zoom/drag.