I'm using Google web toolkit for some project mapping seismic activity of some land area. The request from users is to create a map which marked points. When user will click on some point, more detailed information is shown.
So, I need to be able to draw some particular areas on a common image. Areas should be dynamically drawn (size and color based on last monitoring figures), and active: when user hover a mouse or click to the area, more detailed information is shown.
Please see the example of image:
http://polansky.eu/images/p07-b.jpg
I tried many ways how to draw dynamically or overlay image, and to bind handlers, but nothing was successful. Any ideas please?
Check these projects out:
gwt-g2d
GWT Widget Library (demo)
gwt-canvas
gwt-incubator GWTCanvas (demo)
Not sure if all of the mentioned projects suit your needs but I guess they'll help as a starting point.
Related
I am trying to create a line connection on click an image icon, I have tried the same using the wires.html example. But it is not working. I am using react with mxGraph. How to implement this. Is there any way to achieve this.
mxEvent.addGestureListeners(
img,
mxUtils.bind(this, function(evt) {
mxConnectionHandler.prototype.isStartEvent = function(me) {
console.log("Here we have to start the line connection");
};
})
);
I have to start the line connection inside the bind event. Is there anyway to fix this. I have tried but none of them is working.
I really need help.
In the image Arrow Connection (Multiple points are not supported. Used for directly connecting source to target) is working properly. But need to implement Line Connection (Multiple points are supported. Starting from source we can click any where to create multiple points till the target connection).
Please check the below URL for example
Demo URL: http://jithin.com/javascript/examples/contexticons.html
Source Code URL: https://jsfiddle.net/fs1ox2kt/
In the Demo URL, when click on a cell 4 icons will be displaying (Delete, Resize, Move, Connect). I have replaced Delete with Line Connection and Resize with Arrow Connection. Please have a look.
I am not sure I understand your question correctly, so I am answering to some possible ones:
I found the hello world example very helpful for understanding how to write code which allows to create and modify nodes and connections using mxGraph.
Your tags suggest that you are using React. Interestingly, you are not mentioning Redux-Saga as library. If you are not using it yet, you might want to have a look at the concept of reducers.
Your question might also be about the specific behavior of a mxGraph line connection:
when I click on the line connection hover icon it does not start from the cell.
When looking at the workflow example, I do not see any hover icon when I want to draw a line or connection from a task box to another. I remember vividly that it took me a while to figure out that you have to click on the source box, hold, and drag onto the target box.
If your question is more about hover icons, you have already another (unanswered) question on that: adding connection handler on click hover icon not working mxGraph
EDIT: I finally understood that the icons in your figure are the hover icons, so there is a 5th interpretation of your question:
Problem description: The user clicks on the orange box with the microchip-icon then some pop-up menu (your hover-icons) appear, and then the user should choose a line type by clicking on on of the items. The endpoint of the respective line should still be the task box the user selected initially.
Solution sketch: Already in the initial onClick-event, you should populate a variable final_vertex with the coordinates of the box with the micro-chip icon containing the coordinates of the click, or the respective vertex - your box. When drawing the chosen connection, you have to make sure to choose this final_vertex as end-point, and the box with the lambda-icon as initial vertex. In other words, you need at least two events - the initial onClick and an onHoverItemClick. I am not too familiar with mxGraph, but I assume you cannot solve the issue with a single event-handler.
I'll try to describe what I'd like to have.
At the moment, I have custom control Desk with:
an Accordion Container (dojo)
several Accordion Panes, of which
one contains custom control Agenda
In custom control Agenda, there's nothing really special, expect for
custom control Tiles
In custom control Tiles, I display meeting info in a nice way, as tiles. There can be multiple tiles on one row. In order to make things looking perfect, I have to spread these tiles over the full line, justified, using CSS (that part works, 99%). What doesn't work is that when the accordion is hidden when the page loads, I have no details on the size of each tile so I can't do my calculations (i.e. offsetWidth==0).
So I have to delay the calculations to when the accordion is activated and onShow is triggered. But how to pass this on downwards, all the way to the custom control Tiles?
Tiles is used in other places too, so it cannot be a fixed reference. It doesn't even know that it's inside an accordion...
Question:
How can I call/trigger a function that's inside the Tiles custom control from the top custom control, Desk, in a transparent way?
NB A code example, even an illustrative one, would be very complicated to make (I think).
Could someone give me a push into the right direction? Events and triggers maybe? Pass accordion id down to the Tiles cc and then do something brilliant?
Thanks!!
I have a solution right now, but it isn't exactly a beautiful and transparent one.
I gave the Tiles a styleClass="Tiles", and then I can find these Tiles using getElementsByClassName. It's not the proper way, but it's a way, the pragmatic one.
I'm currently working to develop a real estate website for a client. The client is stuck with the idea to create something like this :
http://woodfield-sillery.com/plans/
Basically, I'm looking to find a way to recreate the same thing, technically it would require :
Managing image map behaviour (to be able to react to mouseover)
Managing the onclick to open a view of the selected floor
Once selected, a second map would show of the floor, with available condos
Then onclick again, it would show pricing, availability, etc.
I'm having trouble managing the rollover image map through CSS.
Besides that, of course, the client would want to manage all by himself (so he can update the condo statuses), and I was planning to host the website through Wordpress
Questions :
Has anyone worked on a solution like this and would be willing to share experience?
Has anyone come across a Wordpress solution that works this?
Has anyone have a technical solution for this (Javascript, HTML5, CSS combined?)
I'm the author of MapSVG WordPress / jQuery plugin which is able to do what you need: http://mapsvg.com
To get started you would need to create a blank image in any vector editor (InkScape, Adobe Illustator, etc.). Then embed building image (png/jpeg) to the background. Then add shapes on top of the image and give them a transparent color fill (=rgba(0,0,0,0)). Save image as SVG, upload it to MapSVG map builder.
Everything else will be done in MapSVG Builder - colors, tooltips, popovers, links, event handlers, etc. See the demo.
you can use maphilight plugin
or you can use jvector
tutorial use link
I have to do 4 things with an image for a website i am creating.
You should be able to zoom in and out of the image.
When you rollover a certain part of the image it should highlight that part.
When you rollover the image a tool tip should be shown.
When one of these rollover parts are clicked it should link to a different page
Here is the image
As you can see it is quite intricate. I have a very hq version of the image which i would use for the site.
It is a image of a retail park, so when you rollover a certain retail.
Either the whole image goes dark and shows the tool tip of what retail shop you are on, or else, it just becomes more highlighted and shows the tool tip.
How would i do this in html , css and jquery?
Something like this would be perfect, though i would need the image to be able to zoomed in on
I'd recommend finding something like google maps that will let you specify your own images. A quick search online revealed:
tutorial for google maps:
- http://forevermore.net/articles/photo-zoom/
- http://blog.mikecouturier.com/2011/07/create-zoomable-images-using-google.html
3rd party libraries:
- http://www.maplib.net/ (link expired)
- http://mashupforge.com/ (link expired)
I am sure there are a bunch more as well. Basically, these should give you all the functionality of google maps, but without having to recode it all yourself. You could specify boundaries and do all the normal google maps stuff and have it link out using its various api features.
Developer of Mashupforge here. You can accomplish everything easily with Mashupforge with the exception of number 2. We don't support highlighting when you hover over a marker yet. Other than that, you just upload your source image and the app basically creates a zoomable, draggable map for you. Feel free to reach out to me if you have any questions!
I'm not fluent in more than basic javascript, but I am looking to have a way that the user can draw a box around a certain portion of image, and then have the coordinates accessible so I can save them. Something similar to tagging photos in Facebook. Does anybody know of any libraries I can reuse? Any tips to get started?
Thanks in advance.
Check out the jQuery image crop plugin. It's the most usable and beautiful plugin for the requirement that I know.
Here are some examples. You should be able to fetch the coordinates as shown in the event handler demo.