I'm working on a basic map that is organized in the standard X/Y coordinate fashion. At each coordinate (x,y), there are contents that are stored in the database (the contents for each location is loaded via php/mysql database).
At my current setup, the map is just placed in the page as a static object, and I've used jquery/ajax to update the display and data for the coordinates.
I'm looking for a way to have a dynamically loaded click & Drag map, that will load cells as they are needed. (what ever comes into your view--in this case the window, should be loaded from the server--a div be created with the proper coordinates relative to its surrounding cells).
As of right now, my static map has this setup:
http://i.stack.imgur.com/LeVYO.gif (link because i cannot post pics)
The images are placed row by row (z index changing as each row goes down to give the appearance of overlap).
If that same pattern were to be duplicated, to dynamically create those cells, you can see that when a row sticks out on the right side, there is room on the left side, leaving easy overlapping.
I haven't been able to find any way to accomplish this:
1) When a cell (region with multiple coordinates inside) is visible, check to see if the surrounding 8 cells are already loaded.
2) If a surrounding 1 of 8 cells are not loaded, create the cell in the correct position, and assign the 'center coord' so that the generated data has a reference point.
3) Ensure that the cells are movable via click&drag, as well as the ability to click on the objects under (to interact).
4) Cells cannot be accessed by scrolling (scroll bar)
I have a feeling its fairly complicated, but I'm looking for the best way to do it, so ANY help or direction would be great!
With all my desire to help, I really cannot give the answer that will solve the problem, which I apologize for, but I think I can try to direct you to something.
It's the HTML 5's canvas and relative functions.
Look at that:
http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/
Maybe also you have to look at how a MAP is built with HTML 5
After tinkering, and lots of google searching, a quick search for "jquery infinite drag" returned this result:
http://ianli.com/infinitedrag/
I managed to use the function call provided when each cell is created, to gather map data from the database (ajax) and create the cells as needed.
http://mc1.empirebattles.com/map/jquery_map.html
I REALLY like the way its working so far, except that if i want to be able to click on anything under the map (for actions and such), the click event is called whenever i release the click for dragging the map around.... i've tried jquery's UI doubleclick, but it appears this plugin takes control as soon as double click is called
Anyways, incase anyone else needs something similar to this, this solution has helped me lots!
Related
So, here's what I'm attempting to do:
I have an image of a target, and I'd like to dynamically place the location of each arrow on the target. I'd also like to have the shot location be referenceable with a dynamically generated tooltip (JQuery?) so that when the user hovers over the shot location, they can see what the score for that shot is.
So, in the image shown here, the "target" is a standard image and the numbers (in white) are added based upon data in my database and indicate the shot sequence and approximate location of that shot. I'm storing the location in two parts: score and clock position. So, for the second shot, the score is "5" and the clock position is 14:30 (approximately!) For the third shot, the score is "2" and the clock position is 16:15.
What's my best approach? I think I can use the PHP GD libraries to get the shot sequence number added to the base image, but I'm not sure how to get the hover/tooltip to work in conjunction with this.
Update: Mission accomplished: here's the semi-finished product:
If you want JavaScript to be able to interact with it, you might be better just having a <div> with the target as a background-image, then placing more <div>s with position:absolute in the right places, applying the tooltips to these. Much simpler than generating the image in PHP and then implementing tooltips over certain areas.
I'm developing a WebApp in which I take an invoice converted from PDF to HTML, then parse the invoice lines.
I have a div in my main window which displays the contents.
But when I display the contents from the invoice in that div, all the contents appear overlapped.
In the converted invoice there is no table, only divs with absolute positioning. I can't make it any other way at least with this aproach, because that's the way the converter works.
So, as a solution I'm converting from "div to table", trying to decide when there is a change of row or not, based on the top parameter from the corresponding div.
However besides the invoice data, I also have the invoice header. I'm having difficulties to decide if the table is the same or not.
But so far, I think the solution passes through making 3 tables, one for the company logo, one for the header, and one for the data.
But I need all these tables to appear in the correct positions and with the correct sizes.
At the moment, I'm not allowed to paste invoice examples, and as I'm stuck in an early stage (close to the algorithm stage). I don't think any examples of my code and of the invoices could help anyone to understand the situation better.
But I promise to update this with examples soon.
As an alternative solution I could parse the PDF myself, but I haven't found a way to do it so far.
I'm using PHP to make the WebApp and verypdf pdf2html to make the conversion.
I know with that little information, is hard to get help.
Any ideas are welcome.
How about trying to cure the overlapping itself. For example you could strip all the styling information from the DIVs after the PDF is parsed into DIVs. Then you can apply your own styles.
It might be useful to know if all the invoices are in the same format/arrangement, or not.
I have imported few shp files into PostGIS/PostgreSQL DB. Now I want to display the same on the OSM map using OpenLayers. As there are millions of records for the selected county, I want to only fetch those geometries that are within the viewport of the map in the browser.
Also, how should I fetch this data into the map? Is KML a good option? I am using PHP at the backendn and would like to know if I can use it instead of installing a geo server.
I have tried to find an example on the net but couldn't find any. Please help.
Look at the BBOX Strategy for getting stuff within a bounding box. Then look at Vector layer for getting them on the map. I don't have an example right now, but if I find one I will complete my answer.
You can use PHP to process the answers if you want to keep it simple. Just use a PHP page as datasource for the layer, and with the BBOX strategy you will always get info on the bounding box and the PHP page can get the correct features.
Grateful for any help on this. I'm very new to all this stuff.
I've created a jquery 'live search' form that links the input characters of a form to associated images of letter artwork in my mysql database (e.g., user enters f-l-o-w-e-r in live search and php echos six images).
Here's the php code for reference, which passes the images to a div in index.php:
foreach(str_split($_POST['search_term']) as $alpha)
{
echo "<img src='../delete/images/{$alpharray[$alpha][0]['imagePath']}' width='100' height='140'></src></a>";
}
I'd like a user to click on one of these images to open a carousel of related images from which s/he could drag and drop a new image to swap out the old one. Eventually they could submit the entire self-selected array of letters as an order.
From the jquery side, I can figure out the carousel and how to make something draggable, droppable. But I'm having trouble mentally mapping how I do the swappable part. Make a new array? Maybe someone can help set me straight with some hints...?
Thanks so much!
Not sure what exactly your problem is, but you could read the sources of the images which an .each() and post them to your php script. As it seems there you have an array which holds all the data, and you just read the elements you want. So you could just overwrite the elements that you want to change, or create a new array, depending on what exactly you want to do. And also you tagged your question mysql, not quite sure how your data is stored.
Edit:
Alright, I see two possible ways here. One would be creating all the images to each image in a div right on creation like this:
foreach(str_split($_POST['search_term']) as $alpha)
{
echo "<img class="clickable" src='../delete/images/{$alpharray[$alpha][0]['imagePath']}' width='100' height='140'></src></a>";
echo '<div class="editimages">';
// Code that creates the images with which the above image can be replaced
echo '</div>';
}
Downside is, that the user gets all the images at the same time which might be loading slow and creating alot of traffic. Upside is, that it the easiest solution, and will react fast when the user clicks. You could just do something like
$(".clickable").click(function(){
$(".editimages").hide();
$(this).next().show();
});
In your JS.
The other solution would be loading the images on click, at the moment the user wants to edit one. Upside is, that it will only load the images you need and so save traffic and load faster on init, but it will start to get the replacement images when the user wants to see them, so depending on how fast the server is and how big the images are, this might feel a bit slower.
I'm trying to create a hexagon world map for my PHP browser based strategy game. I've created a table in my database with the following data per row: id, type, x, y and occupied. Where type is the kind of tiles, which are defined in numbers. For example, 1 is grass. The map itself is 25 x 25.
I want to draw the map from the database with clickable tiles and the possibilty to navigate through the map with arrows. I don't really have a clue on how to start with this and any help would be appreciated.
Thank you in advance,
Fabian
I understand I have to use Javascript with this, but I have still no clue on creating the arrays for loading the tiles and coordinates from the database and display them with javascript on the page.
Assuming your asking about a hex grid, a very good introduction to generating hexgrid tiles using Javascript can be found by Ron Martin
From that point forward, you'll just have to handle the click events to utilize your PHP.
You are definitely going to need some javascript code for that. I would recommend using jQuery as e framework. It has all you need: event capturing(click, button pressed), DOM manipulation, etc.
You need to draw the hexagons with javascript, as pictures will not work if you put them next to each other. Draw the shapes with javascript, then capture clicks inside them. This might help: http://www.c-point.com/javascript_vector_draw.htm