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.
Related
I have a dwg (I can change the file format to svg or other formats if needed) file that I want to show on my web page. After this file is displayed in the page, I want to be able to zoom in, zoom out, pan and put links that request the api where necessary. In fact, it looks like information and links about the relevant place appear when you hover over the landmarks on Google maps.
How should I go about doing this job?
If you can translate the DWG file to DXF (there are several tools to do this) then you can use MapServer to render it on a web map compatible way. Have a look at MS4W for an easy way to install and configure MapServer on Windows. Since you want pop-ups, I'd recommend using Leaflet as the client side browser tool kit for providing pan, zoom, pop-ups etc to communicate to MapServer. figuring out the coordinate system of the DWG file will likely be the hardest part.
Use this method if integrating your DWG with other mapping data (roads, etc) is important. Otherwise look for something easier to implement.
There are libraries that let you easily zoom and pan an SVG image. For example svg-pan-zoom.
As for the links, you would need to do a bit of extra work. IIRC DXF files don't have the concept of a whole element that you could hover over. All the lines in the file are discrete object. So, if I am remembering that correctly, you may need to load the SVG into an editor and add elements on top of the diagram that correspond to your hover areas. They don't need to be visible. They can be transparent and still hoverable. You just need to then add the interactivity. Ie.
Optionally add hover effects with CSS.
Add a mouseover or click event handling to implement the link handling, or
use standard SVG <a> linking instead.
I'm trying to integrate my own markers as pointers on my map. The defaults of circle, rectangle diamond etc... are not what I need and I'm looking for arrow symbols instead. Ideally the popular Microsoft wingdings arrows. I'm surprised simple arrows are not on the default list, I'd thought there would be many a need to indicate a rise or fall with any numeric data on a map.
I would like to solve this with an expression to force an arrow icon as a marker, can this be done by using it's character code etc..? I'm using SSDT to design the report.
Alternatively I'll just have to do this in paint and upload via the image import.
Food For Thought
I see they've done a great job in making the map process easy to set up, but when it comes to customisation from the norm it is extremely difficult.
TechNet: Understanding Marker type Rules:
http://technet.microsoft.com/en-us/library/ee240825.aspx
As you can see from the link (Which is one example as not to swarm this post with links) Microsoft make no mention of image upload or Expression input for maps. This I find is one example, the maps are great, but I feel it's difficult to get documented resources to further customise my report.
You'll need to use an image of an arrow for your custom marker, and you will still be able to change other attributes of it (size, transparency, etc).
If you use a custom image marker, you may run into problems where Visual Studio fails to render the map in design mode from time to time - it's incredibly annoying, so I find it best to drop in the custom images as the very last thing I do when building a map (just use a circle marker or something in the interim).
I know it is possible with Google Map API v3 (MapTypeStyler option) but do you think it is with Leaflet API ?
Thing is that I have text that cover a map I need to make more visible by adjusting brightness or - even better - by applying blur effect like in this example : http://www.hongkiat.com/blog/css-filter/
CSS shader looks very promising but supported only with latest Chrome browser.
The text over the map is modal (user must interact with button) and I could add overlay with a PNG image file. I don't like to much this solution that need unnecessary file to be transfered to the client.
Thank you,
Leaflet is very lightweight and simply puts references to tile images on your html page. So I see two options to change the look of the tiles:
CSS
Which indeed depends on the browser.
Custom tiles
Leaflet will display tiles from any server. You can for example pick one of the many styles served by cloudmade or make one of your own there.
Or use a tool like TileMill to create (and perhaps even host) them yourself.
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
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