I am trying to solve a problem using Bing maps v7 JS API. My problem is that I need a custom callout or bubble with the beak pointing to a specific position (lat/lon) and the bubble portion containing 2-4 short lines of text which describe that point. The bubble portion should be movable (and the text within it).
Our first try at this was using a pushpin and an infobox. This functioned as desired but was not aesthetically pleasing. It was created where the pushpin could be moved and the infobox followed. The only option to mark the original location of the pushpin once it was moved was to extend a polyline from the pushpin tip to the original point. This really wasn't intuitive when looking at the map because the actual location was not at the push pin but at the end of the polyline connecting the pushpin to the original location. Also, there were 3 different objects used for each point which detracted from the presentation of the map.
Now, alternatively, I have created a polygon resembling a callout whose bubble portion can be moved around while keeping the beak pointing to the desired location (this is a requirement as well). What I can't figure out is how to place text within the polygon. Moving this text with the polygon would be the next hurdle but something that I am pretty sure that I can handle once I figure out how to place it. The text needs to be, say white, with a transparent background so that it appears it and the polygon are one.
In this application there will be 3-8 of these callouts. And each may have their bubbles re-positioned so that they may all fit in the screen view.
How can I place text within a polygon using the v7 JS API?
Thanks!
Any ideas
Related
I need to make a lasso implementation for an image.
The user clicks on the image and a dot is placed,
after the next click, one more point is added and they are connected by a line. And this happens until the lines intersect. After that, only the area that was selected remains on the image, and the rest becomes transparent.
Can you please help. I do not need a full implementation of this logic, but at least help in which direction to look for information, or there are already ready-made solutions in the form of a library. I was thinking of using uibezierpath to draw but I don't know how to apply it to clearing the rest of the image
I've been asked to build something similar to this so that customers can draw basics shapes of kitchen tops. Similar to that in the image below but also have dimensions.
It looks like konva has support for basic shapes like rectangle and circle etc and it also includes a transformer which allows for resizing. However, I think if I want to build a custom shape like the one in green and have individual sizing i.e. resize each individual line. I am going to have to build something myself.
I was hoping someone could point me in the right direction. I have seen an example where someone has used a "line" class which takes a series of points and then sets the attribute to closed which fills in the shape. Obviously I would need to extend this to allow the custom resizing. However, Im not sure this is the correct path to head down?
Any suggestions?
.
How about using rectangles and having an option to snap them together. It should be fairly simple to do the edge detection and snapping. Then show the result as a Konva.Line around the perimeter.
Then you can show all the control handles for the rectangles except those on the sides where another Rect has joined.
I want to use multiple irregular picture makes up a map, each picture is a button.Transparent part of the images will overwrite each other, how should I do to make their control areas does not overlap.
I use a lot of pictures makes up a large map.
And each piece of the map is irregular, but their control area is a rectangle. Because they all have transparent pixels.
I just want to make the hit area and their shape becomes the same.Some encountered a similar problem?
I have implemented one for the cocos2d-x v3.x:
https://github.com/yszheda/cocos2d-x-irregular-button
It works OK on cocos2d-x v3.2. Maybe you can have a try XD
I am developing a Map App for our school. Our school provide me its own map image and coordinate information. So I want use my map image as the source of map and accord to user's location to show a point in the map image. Can anybody gives me some advice?
Thanks in advance.
There are 2 ways:
It is possible to change the source of the map-tiles (e.g. from Bing to say Nokia or Google) of the Map Control. However, for this to work, it is important that map-tiles source implements mechanisms like quadkeys (e.g. see this). Therefore, to answer your question if you would like to use the Bing Map Control with your school's map so that you can leverage the positioning features of the control, it would require that you have a map-tile server properly designed in order to achieve this. AND, there might be some legal issue with altering the Bing Map control if i am not mistaken.
However, given that you are suggesting an image of the map and then doing positioning, then i would suggest that it can be as easy as you calibrating the pixel X-Y coordinate system on the map with that of the geo-coordinate provided by the geo-watcher. Then, in your code you could do a simple mapping between these 2 systems and then draw something on top of the image. For this part you could use a writeablebitmap or simply use the fact that you can overlay UI controls with silverlight. So, for the latter have a canvas with the an image of the map of your school and then on top of that canvas you can have an <image> representing the device and change its top-left coordinate wrt to the canvas.
So, in summary, as the geo-watcher gives geo x-y coordinates to your code, there is mapping function to the pixel X-Y (which you have pre-calculated) and use that XY to position an overlay <image> or draw some "pin" on a writeablebitmap where you have previously draw the image of the map of your school. Things get complicated with this approach when you want to have zooming as well but, this solution is easily scalable.
Does this help clear things a bit?
Answering 2nd question in comment below:
Yes you can zoom in and out of the canvas but, you would have to program it yourself. The control itself, the canvas does not have this capability. Hence, you would have to recognize the triggers for a zoom action (e.g. clicking on the (+) or (-) buttons or, pinch and stretch gestures) and react to that by re-drawing on the canvas a portion of the region on the canvas so that now that regions stretches over the entire canvas. That is, zooming. For instance for the zoom in case: you would have to determine a geometrical area which corresponds to the zoom factor and is in ratio to the dimensions of the canvas object. Then, you would have to scale that portion up so that edges and empty spaces representing walls and spaces between them grow proportionately. Also, you have to determine the center point of that region which your fix on the canvas so that everything grows away from it. Hence, you would be achieving a appropriate zooming effect. At this point you would have to re-adjust your mapping function of geo-coordinates to pixel XY so that the "pin" or object of interest can be drawn with precision and accurately on the newly rendered surface.
I understand that this can appear quite intensive but, it is straightforward once you appreciate for yourself the mechanics of what is required.
Another easier option could be to use SVG (Scalable Vector Graphics) in a Web-Browser control. Note that you would still require the geo-coordinate to pixel-xy system. However, with this approach you can get the zooming for free with the combination of SVG (which have transformation capabilities for the scale up and down operations) and Web-Browser which enables you to render the SVG and does the gesture handling of zooming in to the map. For that, i believe that the cost of work would be in re-creating the map of your school which is in bitmap to SVG. There are tools like Inkscape which you can use to load the image of your map and then trace the outlines over it. You can then save that outline document as an SVG. In fact, i would recommend this approach to your problem before tackling the Canvas method as i feel that it would be the easiest path for your needs.
Please have a look at this page:
http://www.abhi.my/lab/3D-menu.html
If you haven't already guessed, I'm trying to emulate the new iOS notification animation (that's where I first saw it), and obviously, my two paltry div's aren't behaving like a full box...
Any idea what I'm doing wrong here...?
This is what I'd like to get close to: http://www.youtube.com/watch?v=pBgVbzBJqDc
You are only transforming you elements in 2d space, even though you are going for a 3d effect.
A working example:
http://jsfiddle.net/mrlundis/wU296/
The "bottom" span is positioned behind the "front" span by using translate3d(x,y,z) where y and z correspond to half of the elements height (it's rotated around it center point.) It should be possible to achieve the same effect using -webkit-transform-origin.
-webkit-transform-origin is also used to make sure the containing div rotates around it's center point on hover.