I'm working on this project which involves a map with pins on it that populate from a database. The idea was to click on the map and the pin would pull up information, I have all of this working. I position these with a relative layout and the pin inside this.
Where my problem lies is, I have a pinch to zoom and all that on here and when I zoom on the image, my pins stay in their original position. Is there anyway I can have these pins zoom in when the image is zoomed?
Thanks!
I would look into placing the Pins onto the map via an exact location (eg latitude and Longitude) and then the pin always being the same size image this when the map zooms the pin is relative to an exact position there for moving with the image below.
another eg would be locating the pin on pixles 100 right and 50 down.
An implementation of an HTML map like element in an Android View:
Supports images as drawable or bitmap in layout
Allows for a list of area tags in xml
Enables use of cut and paste HTML area tags to a resource xml (ie, the ability to take an HTML map - and image and use it with minimal editing)
Supports panning if the image is larger than the device screen
Supports pinch-zoom
Supports callbacks when an area is tapped.
Supports showing annotations as bubble text and provide callback if the bubble is tapped
try this link you will find your solution https://github.com/catchthecows/AndroidImageMap
Related
Overhead schematic of Docks map in Modern Warfare
Overhead schematic of Docks with one callout name
I'm creating an app that will display names - "callouts" - for various specific areas of each map in the video game Modern Warfare. I want to be able to place the text (or a placeholder) in the same location, regardless of scale, transformations, etc. Is there a way to do this besides getting the (x,y) coordinates of each location in an image editor, then using those coordinates in my layout? That method seems extremely tedious because there's 10 - 20 callouts per map, and approximately 20 maps! I also want to avoid adding the text graphically so that I can change it as necessary in Android Studio.
If I place TextViews visually in the [Design] tab in Android Studio, will they stay in the same position relative to the background ImageView, regardless of scaling, transforms, etc.? Please advise, and I'll be happy to clarify if necessary. Thanks!
I think I've found the solution I'm looking for, folks:
Within a ConstraintLayout, have an ImageView to hold the map graphic, and TextViews for each callout label.
Constrain each TextView to the Start, End, Top, and Bottom of the ImageView.
Drag the TextViews to the desired location in the [Design] tab of the layout editor. This will automatically adjust the Horizontal and Vertical Bias, which is essentially a percentage of the parent's width and height, relative to the left and top of the parent.
In my preliminary testing, this seems to preserve the location of each callout label relative to the map, which is what I was hoping for. If anyone has anything to add, please do so!
I am working in Indoor Positioning System .. It will be an android app like this
I am trying to make custom View for displaying the map, First step I make a Scrollable ImageView following article called 'A simple implementation of a scrollable ImageView'
The problem is when I put a marker in the map (using another ImageView for marker), When I start scrolling .. the markers start disappearing like this
So can any one help me ? I want markers to stick into the map and only the map scroll (I mean like Google Maps)
For creating map, Canvas is a better option, in canvas you can implement scroll,zoom,rotation etc.
In canvas it supports any number of bitmaps, and also we can draw programmatically within the canvas.
Ok, so I have this map and I have various sliders on the right. After changing slider values and pressing 'Execute' button, some provinces in the map below should change colour.
However, I don't know how to implement the map below. I have used 33 png drawable for each province. I have set them all to have a same big rectangle dimension so that they'd align themselves.
I am getting an 'Out of memory on byte allocation' error.
I assume this is because of all the large drawables I have.
I'm new to android and I want to ask, is there a way to implement this without the error?
Also the map should always be displayed on the left side of the screen so the images always have to be visible.
I would recommend making a SVG and changing the colors programmatically.
Graphics are hard to scale and are heavy space users, scalable graphics are slim, look great everywhere (device size and dpi) and easy to manage (single file instead of 33).
I'm making an app for a real life game. The app needs to use a custom map that uses scalar vector graphics (SVG). The map I'm using provides very accurate detail, such as door locations inside a building; This is why i'm using SVG instead of the maps api.
Now I know there is an api for svg (http://code.google.com/p/svg-android/), so here is what I need help with:
1) The image must be zoomable. The only reason for using the SVG graphics is for clean zooming.
2) I need to place dynamic markers (images, or buttons w/ numbers) on the SVG image. An SQL table has an image, and a location. The table will be updated, added to, and removed from. I need to place said images on top of the SVG image, and possibly each other. Coordinates and math aside, how do I place the images on top of each other (can't use XML since they aren't static).
I need to use Android 2.2
The default browser in 2.2 doesn't support SVG. You can target Opera Mobile, which supports SVG and other new technology much better, but it won't be a native app.
The first step I'd try would be designing the interface in Inkscape, then you can reference the .svg file from HTML and move elements with javascript.
flying-pigs,
If i understand your question, you want to display a SVG like that on your phone ? So you can display user location on that map.
I describe a working solution here : Add SVG Tile Provider
Let me know if you have other questions about GG Map
i have an imageview containing a bitmap that can be zoomed into and scrolled. i've used the setImageBitmap() method instead of setting the image on a canvas. the imageview acts as a map which the user can browse through. now, my application is supposed to allow the user to marker points of interest with push-pins as done in Google Maps on a point selected on the imageview by the user. i've gotten the ability to pick up which point on the original bitmap was selected using a modified implementation of the OnTouch() method to work so i know where exactly the marker has to be placed.
i want to set a marker to this location and pass a string into a database to store information about the location so that when the marker is tapped, this information is shown in a bubble/toast notification.
as of now, i can scroll the image, sense a longTouch event on the imageview, save point of tap, move to new activity to collect information to add in the database. i can't seem to find a way to set up my markers on the original imageview.
also, i'm guessing i'd have to use an ArrayList implementation here to get markers with individual IDs that could be correlated to the ID in the database fields but i don't understand how to implement that.
i looked around the Internet for a solution or an idea and i've tried many things before posting here but nothing seems to work.
using a canvas' draw functions wouldn't allow for onTap functions to show info notifications. the drawn bitmaps also lose scale and quality while zooming. i tried making a custom class extending RelativeLayout to act an an invisible layer on my imageview but i don't know how to place markers in exact locations and also make the custom RelativeLayout easier. i tried placing a false transparent canvas of the same dimensions as my bitmap to get scaling to work and allow me to place markers at absolute locations but it didn't work. plus, using onTouch events on the custom RelativeLayout class meant i couldn't use the onTouch events on the lower imageview class.
i can't seem to come up with any solutions that can help me implement the mechanism as i want to, so i'm open to any sorta idea that can be thrown at me. i'd appreciate some help.