I'm looking to add a custom tile overlay of my university campus on top of a Google Map. What I have is a jpeg image of my university campus layout, and what I'm trying to figure out is how to align it to the existing Google Maps such that I know the top leftmost tile coordinate which I need in order to then run the image through the Photoshop tile cutter script found at http://brokenbytes.info/tuts/documentation/examples/tilecutter.php.
The tool at http://anymap.org/GmapImage2TileGenerator/ sounded perfect for this job, but it looks as though it's only just been moved over to a new server and is proving buggy for me (I enter the image URL of my campus, but then it never shows an overlay of it on top of the map).
Are there any other tools available which can help with visually aligning an image/prepping it for the tile cutter, when the image itself has no geo information immediately attached to it?
The easiest is probably to use the latest MapTiler (from http://www.maptiler.com/) and it's visual georeferencing functionality.
See the video tutorial we prepared: https://www.youtube.com/watch?v=eJxdCe9CNYg
Related
I would like to create a webpage that displays one image at a time with shapes and annotations shown over it. Each image should have a unique URL address in the address bar.
I have a set of images as PNGs. For each image there is a set of shapes (rectangles, polylines - as pairs of x,y coordinates in pixels) and annotations (location on the image x, y in pixels and a short text as string) to be displayed over it.
When user loads the unique url for an image they should see it with shapes displayed on top of it and annotation markers shown as circles. When user presses a button labeled „next“ the page loads the next PNG with its corresponding shapes and annotations. User can click on an annotation marker and a text balloon should open to show the text for the annotation.
How to approach developing this? I am asking since I don’t have an overview of web app frameworks or the current best practices for databases and graphic formats for online content.
I have experience in programming - Python, datascience, Procedural geometry, Unity for game development (C#), Lua - but not for the web.
I can do a WebGL app using Unity to do what i want and link it to a MySQL database but it feels like shooting a fly with bazooka. Maybe there is an easier, simpler way. Any advice or tips would be appreciated.
The best tip, I think, is in one of the tags of your question: canvas.
Images can be drawn onto it, as well as shapes. To handle your markers you could compare the coordinates of a click on the canvas to the coordinates of your markers (see this post for further info on getting the click coordinates). The annotation balloons could be realised by hiding or showing a simple <div> on click.
As for web app frameworks, depending on how fancy it should be you could do it "by hand" in native html and css, or use something with nice predefined components, like Bootstrap.
Depending on where you will be hosting this webpage, you will, or will not have to worry about the backend/server. There are numerous hosting providers available that provide user-friendly admin panels.
Is there a way to insert the image overlay a layer below the streets but on top of the map background? The roads can be individually styled, so it should technically work, but I haven't been able to find the option for it.
The only lead I have found so far is this question: Google Maps API - Overlay Custom Roads
Which unfortunately doesn't really solve the problem of having to manually enter the street info.
I'm currently working on a custom map for a whole city and manually illustrate all the streets and enter the street names would take an enormous amount of time.
Any info would be very appreciated, thanks!
Try to check this documentation about Styled Maps. Styled maps allow you to customize the presentation of the standard Google base maps, changing the visual display of such elements as roads, parks, and built-up areas.
Here you can also find some sample code that you can use in your sample code.
Also you can find here the Styled Map Wizard.
Creating styles by hand and testing your code to see how they look is potentially time-consuming. Instead, you can use the Styled Map Wizard to set up the JSON for your map's styles. The wizard allows you to select features and their elements, apply operations to those features, and save the styles to JSON, which you can copy and paste into your application.
I have a building floor plan and I need to specify its position on top of google map.
I like the way this is done in Google Floor Plans app - screenshot(the right part with map) - but I cannot figure out how they made it! :)
What part in Google Maps API I should look at?
In short - I have an image (plan of floor), and need to show it on top of Google Map and be able to manipulate with it (changing dimensions on events).
I'm thinking you'll want to implement a custom overlay. That link provides the relevant instructions for doing so. Also, Google provides a simple example so you can see the result here. Is that sort of what you're going for?
#Cianan Sims: Well, sure, I want custom overlay, but how is the question :-)
Fortunately, Google published tool called Overlay Tiler, which does exactly what I wanted - georeferencing of the image.
Currently, on a web application I am working on, one of our clients asked for a feature I am not quite sure how to implement. We have a Google Map on the main page and our client wants to be able to draw on that map for presentations. I have seen two examples of what our client wants. The first example is at http://www.scribblemaps.com/ where I can draw lines, shapes, and in the Pro version "block arrows" which is what our client is asking for. However, this application only allows you to create the map on their site and then save it as a JPEG. Our client wants to do this within our application. Scribble Maps accomplishes this by using Adobe Flash and I'm guessing they place a Google Map in the background which I am not sure would be the best route for us.
I also found this blog http://googlegeodevelopers.blogspot.com/2011/11/make-your-map-interactive-with-shape.html describing User Editable Shapes. On this example I am able to create shapes and Adjust the size post creation. I was wondering if it were possible to create a custom polygon like a block arrow as another button on the map where the user could add that shape to the map and edit the size? I realize the user could use the custom polygon button but I know our client won't want to draw their own arrow each time.
* EDIT *
So that I am clear I am not asking anyone to write any code for me but point in the direction of information. I want to know if it is possible to pre-create polygon shapes like "block arrows" so that our client can click and drag to draw this arrow on the map like circles or rectangles using just the Google Maps API.
I had vary similar tasks to perform in my project.
You can let them draw shapes on the map. In my project I have let he user draw there shape by clicking on map and adding a marker on each click and when he clicks on the existing marker all the makers form a closed polygon. Then you can save it to database. As far as that editing part you mentioned above, you can set editable property of polygon to true to let them play with polygon.
Hope this helps you in your project.
Happy Coding !! Good Luck
Maybe a late answer but I think this one would be useful for you.
https://developers.google.com/maps/documentation/javascript/examples/user-editable-shapes
hi i wanted to display a us state on google map with borders drawn,
when the user opens up a page i wanted to show in the center that state...with borders drawn.
additionally i wanted to put a button on that page so that user clicks it and draws a rectangle on the state, the system will just have to popup the latitude and longitude of the selected area, and area ...
can you anyone guide me through the steps? or is there any good reference that i could follow. thanks in advance!
as an example of what i mean
http://opentopo.sdsc.edu/gridsphere/gridsphere?gs_action=lidarNSAF&cid=geonlidarframeportlet
I would start in the Google AJAX APIs playground, here: http://code.google.com/apis/ajax/playground/#map_simple
There are tons of samples here and by playing with them you should get an idea of how to do what you want and/or come up with some more specific questions.