Zooming and panning on a floorplan made with Raphaeljs - zooming

I am making some kind of floor plan that shows the position of participants of a meeting.
For this I am using Raphael.js.
I am looking to find a way to zoom & pan trough that floorplan but I am not finding anything. Can anyone point me in the right direction?

Without changing any of your code that defines the rest of the functionality go to
http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2&q=paper.setviewbox
Also use the raphael link to the documentation which always points to the latest....
There are some powerful new features in Raphael 2 that are not currently widely used.
Whats nice about this is that its just an add on!

Related

Polygonal Search

I have read several of the posts concerning Polygonal Search, but they are all about fixing or updating the programs. I am just wondering how it works. If there is a way I can get something like pseudo code of it or an explanation of how a shape captures the data points.
To further specify my goal, I am trying to make a constant square that will be held over a map (such as google maps), but the map can move around behind the square, however, the square will continue to report whatever cities lie within its bounds. [I will eventually proceed to building it, I just need some guidance]
Thank you.
There is an open-source library which has a function to check if two shapes overlap. You can check source code:
http://turfjs.org/static/docs/module-turf_inside.html
If you look for theory behind it check Hyperplane separation theorem

Google Maps as texture map

Hasn't anybody thought about creating dynamic texture of Google Maps? So for instance, we create a simple plane and apply a texture to it that is going to be an actual map of Google (with all of it properties, like drag, zoom, etc.).
Would be nice to somehow deploy google map to a canvas element, grab it as a map for Object3D texture, hide it and listen to its changes (mousemove, etc.) and update the texture map again as it’s being changed.
Hasn’t anybody implement this already? Or maybe at least somebody has some thoughts on how to do this implementation??? May be some alternative that I don’t know about?
Correct me if I’m wrong, but I think that it would be nice to have Google Maps inside of THREE.js as a plugin or even as a part of library.
I have definitely thought about this and I'm not alone. You should be verrrrry prudent if you choose to do so, however: https://developers.google.com/maps/licensing
For student-ish projects you may be okay but don't be surprised if your game or real estate company gets a C&D letter in like 2 hours after release :)
Seems like this has already been done.
The Google Maps team joined with B-Reel to make the Google Maps Cube
Game, where you help a small blue ball navigate the streets of New
York, Tokyo, Paris and San Francisco (among others). As you move your
mouse the cube rotates and the ball rolls down the streets, bouncing
off buildings and making its way towards the goal.
No discussion on WebGL is complete without mentioning Mr. doob's
Three.js library at some point, and this is no exception: the Maps
Cube game makes use of Three.js for its gorgeous rendering. If you're
considering doing some WebGL work in a commercial setting, Three.js is
a really good place to start; it's a very nice library that will save
you a lot of headaches.
http://www.playmapscube.com/ (requires chrome).

Google Maps - Grid based clustering

on this page https://developers.google.com/maps/articles/toomanymarkers
it says how this is the easiest clustering posible, but I can't find any client side solution for this. Does anyone know for free open source, client side solution of grid based clustering for google maps markers ? i don't want MarkerClusterer.
I didn't find it, so i went and start coding my own solution. The first obvious request is that it has to be fast for up to at least 1000 markers loaded on map. Every zoom in out, move and soo on, will repeat procedure/function of clustering. Grid blocks are customizable, default value is 50*50 pixels.
Image below is showing what should the result look like.
I'm having problem with algoritem, now all I can think of to achive this is to itterate through all markers for each grid and ask if it is inside bounderies and then increase array of grid ++. This obviusly can't be done that way. There should be some hash or something that just one itteration through all markers would be needed and I would know in which grid specific marker belongs to.
I hope someone will give me a hint for algoritem I'm after. Thank you !
Seems like geohash is the answer to your problem, you even allude to that solution in your question. It's explained well here:
http://blog.trifork.com/2013/08/01/server-side-clustering-of-geo-points-on-a-map-using-elasticsearch/
I am actually exploring developing a similar clustering algo for Google Maps API v3. I'll post more if I actually get anywhere with it.
You can use a geohash or a space filling curve to reduce the dimension and reorder and hash a marker. On the server side you can use a point and a spatial index data stucture but you can also compute the geohash manually. Look for xkcd internet map comic and the hilbert curve to see how it works.

Custom map for website

I have an overview drawing of a plant and I want to show the important pieces of equipment. Each piece of equipment would show some description information and have a link whenever it is hovered over.
I want the whole thing to function similarly to Google Maps where I can zoom in and pan around.
I have been trying to get the basic pan and zoom functions to work in Flash but are there better ways to develop this? Maybe something that doesn't involve Flash?
If you want to go for a flash-free, google maps-free plugin, you can combine http://wayfarerweb.com/jquery/plugins/mapbox/ with some jQuery for the mouseover behaviours.
It of course depends on how comfortable you are using jQuery, the implementation of the map itself is quite easy (it has zoom and pan), and the hovers are not complicated but will require more research if you haven't worked with javascript before. The advantage is that you will have complete control over it...

Drawing resizable (not intersecting) polygons

I have been searching everywhere but I could not find an answer. I
need to have drawing resizable polygons with mouse interaction but I
do not want irregular, overlapping or intersecting polygons in the
end.
Here is a simple example of drawing resizable polygons
http://www.wolfpil.de/polygon.html
You can easily create & resize polygons which is great. But I need an
extra functionality to detect intersections and NOT allowing weird
looking shapes/polygons.
You can see the problem in this video:
http://www.youtube.com/watch?v=zou2jcGM8zw
The only solution for that problem I found at http://www.wikimapia.org. They have added features to handle the problem.
You can see it in this video: http://www.youtube.com/watch?v=K7-K0k2D-2A
I spent 3 days trying out to achieve something like this. I have gone
through wikimapia's javascript code but it is way too complex for me
to understand.
In sum, it does not have to look as fancy as as wikimapia's. I just
need resizable polygons which do NOT intersect while resizing or
adding new points to it. Can you give me any suggestions how to
achieve that?
Thank in advance.
Depending on how many points that you allow, a naive, simple O(N^2) line intersection algorithm suffices. Algorithmically this is not the best solution, but for starting out it's the most accessible for a beginner in computational geometry.
For starter, see Wikipedia article on line segment intersection. One of its links has an easy to understand explanation on how to compute the intersection point of two line segments.
Good luck!
While this is not a complete answer, note that the example you supplied appears to be using the Geometry Controls from the GMaps Utility Library, which is an open source project hosted on Google Code.
You can check the full source code in the Google Code browser.