How to re-render html element in canvas element - javascript

I have short question.
Is possible render Google maps or Bing maps to hidden element and re-render in canvas with sepia and blur effect?
I think not, so, is possible do this with any kind of todays technologie?

You don't really need to render the maps to a hidden element and then capture it somehow, the maps are all made of images anyway, you just need to download the image tiles. You can then add those images to a canvas in the normal way.
However, downloading and storing GMaps images would probably be a violation of their terms of service, I imagine Bing will have similar restrictions. However OpenStreetMap does allow tile downloading, if you scroll to the bottom of that page you'll see some links to tile providers and tools.

Related

Can Google maps functions be loaded without loading the map?

I have a site where I'm using Maps Javascript API to print several polygons to the screen and manage hover/click events, but I don't need to see the underlying map. At the moment I've just styled all of the map elements to white, and it works, but I'd rather eliminate the requests, since it's currently downloading ~40 seperate blank white squares.
Happy to try a different plugin / API if it works, but I had a look for alternate applications without much luck.

How to overlay Longitude & latitude markers on JPG map?

I need to be able to show markers (polygons) on a few maps that are JPG's that are various zoom level looks at same thing.
I would normally use google maps for this, but I cannot rely on the mobile device having access to the internet when needed, thus need to use a locally stored set of JPG's and overlay the items on it, preferably with some sort of interaction such as click/touch for more detail popup/modal.
Has anybody made anything similar to this that uses the GEO location but not the internet of a mobile device, and locally stored long/lat details? Can you give me any pointers?
Use CATiledLayer for displaying and overlaying marks.Here is a nice tutorial
Here

Google like customize and preview embedded map in my site?

i whant to have something similar like googles customize and preview embedded map. is it possible that users just find location on the map, type in the size they want and just copy the generated code?
What it sounds like is that you want to allow people to select and save a custom Google map of their own within your app.
A simple way to do so would be using Google maps APIto create a map inside a container dom element. You would then allow user to resize the container element which would essentially allow them to position the map and also their chosen size.
When the user is finished resizing and positioning, you would need to make another call to the API to get the current lat/long of the map as well as getting the dimensions of the container. With the lat/long and container dimensions saved, this should be enough information for you to save the users custom map.
Hope this helps.

JS library for image dragging, scrolling and zooming + markers on pictures like google maps

I'm looking for a google maps like js library just for a image. The features i need are simple: Drag, Scroll, Zoom and most important are markers (eventually vectors). But instead of a map I want to have one picture in the background.
Description of what the library should do: Think as it would be a map-similar situation. In this web app I want to have a image (e.g. a treasure map, map of a building) like the tiles in google maps. The image should be moveable and zoomable. Overlayed over the pictures should be markers. Markers can be as simple as letters (a,b,c), symbols, pointers, div elements... The markers are fixed to the image, positioned relative to its size (zoom) and position like on google maps. drag n drop support is needed for user interaction. While editing the resource a user may drop a new marker onto the map or move/delete an existing one. If the user is not in the editing mode the markers may funktion as tooltips or links. Also if clicking an link outside the "image", the image should scroll to the right position, to show the searched result on the "image"-map. The App should also work on mobile devices.
Has anyone already seen such a tool or is interessted in helping to develop it?
Regards Manuel
How about openlayers?
It has a similar interface to google maps but allows you to customize the tiles/map and markers and doesn't rely on google's servers.
You can use custom layers with Google Maps - so you could replace the entire map with your own tiles (image). Simple example is here: http://code.google.com/apis/maps/documentation/javascript/examples/groundoverlay-simple.html or something more complicated http://mapwow.com/

google maps api v3 - how to display image thumbnails inside bubble?

I have some thumbnails with gps info that I want to pass to a javascript google maps instance. I can get the points to draw on the map, center and zoom to fit, and I can replace the markers with the thumbnails.
This is close, but I'm looking for something that I can style (border, size, etc) and show more of a precise location, like a popup bubble like in google maps business search.. I've looked at the chart library, but that doesn't seem to be anything more than text and their icons.
I also like the way the panoramio (when you turn on photos in a google map) will scale the majority of images down and deal with zooming.. are there public libraries or functions we can use that do this stuff?
Thanks
Something like this? http://jsfiddle.net/Kai/Unh2M/embedded/result/ Its using an InfoWindow to display the picture when you click on the pin.
You can view the source on that at http://jsfiddle.net/Kai/Unh2M/ and check the reference on InfoWindows at http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows

Categories

Resources