"leaflet" How do I store and retrieve (search for) markers using a MySQL database? - mysql

I'm having a hard time with this project: https://groups.google.com/forum/#!topic/leaflet-js/Vl56hyRp1i8
I hope you guys can help me with this last step.
There will be hundreds of thousands of markers but only the one you search for will be displayed. The content of the tooltips will have to be submitted through a form. I will not know the position for the markers until the mosaic is rendered.
Once the mosaic is rendered we have the position of the markers and I need to be able to search for any marker (by it's ID) and zoom+pan to it while displaying the marker and it's tooltip.
For example if I want to make a mosaic of 500x500 pictures this is what will happen:
we wait for users to submit a picture each until we have 250.000 pictures.
the tooltip meta content will be submitted along with each picture from the users (1 picture for each user) - this is also when the marker ID will be generated
now that we have 250k pictures we can render the mosaic, after the mosaic is complete I will have a text file containing the name and location of each individual picture by row+column
I need to use this file to fill in the position of the marker for each user's picture
I need to be able after this, to display only markers that you search for
when you search for a marker it will be by it's ID so it will be accurate and also I need the zoom+pan function here
when you click on a picture (marker) I need for that marker to appear (unhide the tooltip).
If anybody can help me please, this project is very cool and I would hate to get stuck on it. I will give proper credit and stuff. If you are really good I am even considering monetary rewards.
Thanks.

I suggest to follow this workflow:
For data drawing and editing I use Leaflet plugin leaflet.draw - .
For store data in GeoJSON format I use Leaflet function toGeoJSON(); like that var myMarkers = new L.FeatureGroup();
map.addLayer(myMarkers);
....
// get json
var myMarkersJson = myMarkers.toGeoJSON();
myMarkersJson I upload to MySQL database and store data as json. You can read more about sending json to MySQL using js/jquery here.
For analysis of data I use jQuery parseJSON
For uploading json data again to leaflet map, I use Leaflet function geoJSON();
I think this workflow is the easiest way to store, search and display data in leaflet from MySQL. But this solution may not be suitable for big data analysis.

Related

Show data(numbers) instead of pins on google map

I want to show data (numbers) from database on the map, instead of just pointing the place and clicking on the pin to show data, I want it shown already where the pin is. I use this example to make the google map with pins: http://tips4php.net/2010/10/use-php-mysql-and-google-map-api-v3-for-displaying-data-on-map/
I cannot show images because I'm a new user, so here is an example of what I want to show on map, information about prices instead of usual pins: http://www.norc-imobiliare.ro
You may use the dynamic icons of the Image Charts -API. But this API is deprecated, it may(but must not) stop working in 2015.
The other options:
create an own serverside script that takes the strings(prices) as argument and delivers the desired image based on the input.
create a overlay instead of a marker, it may contain any HTML. e.g. infoBox would be usable.

Google Map or Mapquest API to track the visible area

I am trying reverse lookup of the locations from the maps.
Say, I have different locations in my database with their co-ordinates and details.
Now, whenever I zoomin/out or drag the map (in Mapquest) all entries should be displayed in a dropdown with the visible area of the map. It should update the list according to the map zoom level and position.
Is there anyway to do this. I am Ok with Google maps also.
Here is the link what I want to achieve.
http://oobgolf.com/courses/finder/
Basically...the business logic is like this:
You need to get the boundaries from the map object and then pass these as parameters via AJAX to the SQL query which fetches the records, e.g minLat/maxLat & minLng/maxLng ... these go into the WHERE condition. This will "cut out a rectangle" from your geo-data. You might adjust these values by 5-10% - so that points very close to the boundaries will not be painted to the map (that's just a cosmetic fix).
Just found some sample JS code on my drive for the Google Maps API (it uses jQuery):
function loadViewport() {
var b = map.getBounds();
$.minY = b.getNorthEast().lng();
$.maxY = b.getSouthWest().lng();
$.minX = b.getSouthWest().lat();
$.maxX = b.getNorthEast().lat();
$.url = "http://www.somehost.com/data.php?mode=viewport&minX="+$.minX+"&maxX="+$.maxX+"&minY="+$.minY+"&maxY="+$.maxY;
$.ajax({type:"GET",url:$.url,dataType:"json",success: parseJSON});
}
Populating to listing to the left will need to by done in function parseJSON() ...
The WHERE condition of the SQL would be something like that:
WHERE
(`location`.`latitude` BETWEEN ".(float)$minX." AND ".(float)$maxX.")
AND
(`location`.`longitude` BETWEEN ".(float)$maxY." AND ".(float)$minY.")
Of course the columns in the table need to be of data-type float - else this won't work for sure.
As you can see, I'm casting from string to float - in order to enable the comparison...
Hope this helps, the code for MapQuest may vary - but the logic should be quite the same.
Source
This logic works for the MapQuest APIs as well. You will need to pass the current extent of your map into the query so that you can query the database based on the extent of the map. The results from the query would then populate your drop-down menu, so all POIs currently showing on the map will have a corresponding item in the drop-down menu.
If you're using the MapQuest JavaScript API, take a look at the MQA.TileMap.getBounds method, which returns the current bounding box of the map extent. I've found the forums on the MapQuest Developer Network website to be extremely helpful when I've had questions, so don't hesitate to post a question or code sample there if you need help or need further clarification. Here's the link: http://developer.mapquest.com/web/products/forums/

Max url length with Google Maps static image

I need to create a static image of google map with several markers, and each marker has a custom icon.
In the Api DOC there is the note: Static Map URLs are restricted to 2048 characters in size. In practice, you will probably not have need for URLs longer than this, unless you produce complicated maps with a high number of markers and paths.
The url is very long.... There is the position for each marker and the URL for the custom icon for each one.
I've already tried with POST request ma it is not supported.
There is another way to create a static map image without max length limitation?
A possible way might be this, but i don't know if is it possible: I've create my custom map using the function in GMaps, and i have added all the markers i need.
There is a way to access in static way to this particular map? so in the url i have to give only the center of the map and other parameters (zoom, ...), but all the markers are already positioned.
Or... another idea... Can i submit the URL of a KML with all markers positioned instead each single marker position+icon url?
FYI, Google recently updated the limit to 8192.
Have you tried using a URL shortener for the icon urls? I believe the static map API will respect services that make URLs shorter... might save you a few characters.
You might wanna check out toopola´s API to help working with Google Static Maps, I am about to make my own attempt.
Another idea
find map area that contains all the markers
divide the map area into rectangular pieces (4 pieces for example)
create image url for each part, but include in url only markers and icons visible on map
show images
Мethod of division depends on the markers position.
Yes, you can definitely do this with the Javascript API.
I have built a few applications using that API. It can be a little tricky to get your head around, but it is pretty good. For what you want to do, it would not be too difficult. If the user has to be able to interact with the map and add pins and such, it starts to get a little more complicated because you have to capture clicks and such.
Does the map its self need to be available as a URL, or does it just need to be embedded on some page and that URL can be used?
The Javascript API will work best if you can embed the map into an existing webpage.

Approaching a map based selection

I have a map of several counties I need to turn into a county select menu (i.e clicking Leicestershire will select Leicestershire.
I am using a php built system that this map will need to return the appropriate value to. I am thinking this will be a get in the url, checked for valid values in the backend.
How would you approach this? A html co-ordinate map? Some sort of Javascript? Flash?
I am aware all those solutions have one drawback or another. Does anyone know a better way of doing this? Or an existing opensource project?
Just an idea, if I read your problem correctly: I would personally use the Google Maps API for this. Plot each county onto your custom Google Map, then when you click each marker an info window could appear with "Select this County". Click the link and pass a value through the URL to your PHP script.
Used a html map system. Dreamweaver made it easy (first time I've used the design screen seriously)

google maps api v2 - tens of thousands of markers

my problem is with XXk (aka XX000) markers, atm I have 7k markers and will be more, and more, problem is in marker database, because atm this is 4MB (link to my DB http://tinyurl.com/ybau9ce) and problem is, how load that fast? for example DOWNLOAD only this what are show now, DOWNLOAD because load I have with ClusterMarker and problem is not with java but with download that database I think...
http://code.google.com/apis/maps/documentation/overlays.html
find the part about the marker manager
quote from that "The manager monitors the map's current viewport and zoom level, dynamically adding or removing markers from the map as they become active."
dynamicly doing this would require a database with all the markers.
Theres a good explanation on how to do that on the link under here.
code.google.com/apis/maps/articles/phpsqlajax.html
you are able then to dynamicly generate those markers that are in the boundaries of the current zoom.
There will be some events after zooming or moving the map and you can then trigger on that
and find out the boundaries of the current view.
Would that be helping solving it?
Why would you want to download all that data at once? You cannot visualize 7K markers at once on a map imo.
I don't know what the goal of your question is, but I would have only the data uploaded that is in focus, e.g. on display and visible.