tag:blogger.com,1999:blog-179325926611299376.post7922593516592477181..comments2023-09-16T13:46:11.986+01:00Comments on Open Maps: LeafletChris Hillhttp://www.blogger.com/profile/02951528269028953589noreply@blogger.comBlogger26125tag:blogger.com,1999:blog-179325926611299376.post-37145235740149155982013-08-28T15:52:08.070+01:002013-08-28T15:52:08.070+01:00As I understand it Xampp is a way to install Apach...As I understand it Xampp is a way to install Apache, MySQL and PHP all at once. That means your database will be a MySQL one, the host will be 'localhost', the database will be 'toad' and you need to add your own username and password. That should be fine. The database schema needs to match the one I used (see previous comments). I suggest you try creating a really simple PHP page that accesses the database to return a simple string to be sure you have everything working then move up to ajax calls.<br /><br />I hope you get it working, but debugging someone else's code that I can't see, on a server that I can't access is near impossible. My example is just a suggestion. Try http://switch2osm.org too.Chris Hillhttps://www.blogger.com/profile/02951528269028953589noreply@blogger.comtag:blogger.com,1999:blog-179325926611299376.post-44167556640454638422013-08-28T13:47:51.400+01:002013-08-28T13:47:51.400+01:00And if I have the database on the same server, how...And if I have the database on the same server, how would that change the code?<br />I am using Xampp and created a db called toad with user and password on localhost.<br />but just removeing the 'include' and replaceing the variables with my values for user password and database, still won't workIonuțhttps://www.blogger.com/profile/06571816078555451645noreply@blogger.comtag:blogger.com,1999:blog-179325926611299376.post-23324487544800251912013-08-28T13:25:11.278+01:002013-08-28T13:25:11.278+01:00Hu Pascu,
The database is accessed by the server-s...Hu Pascu,<br />The database is accessed by the server-side. The db.inc is where I stored variables that hold the database name, db user name and password, so I didn't share the real contents of course. <br /><br />The point of ajax is to allow data from the server or database to be requested without refreshing the web page. The client web page does not access the database directly but requests data from the server using ajax.<br /><br />HTHChris Hillhttps://www.blogger.com/profile/02951528269028953589noreply@blogger.comtag:blogger.com,1999:blog-179325926611299376.post-67715017671326608842013-08-28T13:04:04.039+01:002013-08-28T13:04:04.039+01:00Hello,
I am a beginner in WMA developing, though n...Hello,<br />I am a beginner in WMA developing, though not alien to geospatial concepts. I am trying to do an interactive map using leaflet and an trying to follow the steps suggested by you regarding the connection to the database and generation of points based on the existing records.<br />Out of the instructions set and even the demo, I did not understand exactly where the database files are stored in relation to the rest of the files. Could you help me in this regard? I saw in the ajxToad, the following sequence: include ".. / include / db.inc". Does it have something to do with the problem illustrated?<br />I hope it's not too much of a trouble and thank you for your understanding and helpIonuțhttps://www.blogger.com/profile/06571816078555451645noreply@blogger.comtag:blogger.com,1999:blog-179325926611299376.post-85829262921122447982013-08-26T22:00:13.582+01:002013-08-26T22:00:13.582+01:00This is now badly out of date and Leaflet has deve...This is now badly out of date and Leaflet has developed such a lot, but this does still work.<br /><br />The SQL is in the php script ajxToad.php in the server folder in the github. I pass the bounding box (west, south, east, north) to the ajax call which then compares the points to see which ones fall into the current viewport. <br /><br />I have written a more recent post about using the GIS functions in MySQL to do a similar thing but for linestrings rather than points. Testing points by hand as I do here is fairly easy, but testing a linestring would mean testing every point that makes up the linestring, and a polygon even more. The GIS functions of MySQL, and even better ones of PostgreSQL, make light work of this, but I started simply.<br /><br />If you group your markers together in a LayerGroup (not available when I wrote the post) you can remove all of the markers with one call: clearLayers(). As the pan and zoom changes the viewport I remove the markers and then request a new set for the new viewport. You can use events to MoveStart and ZoomStart to remove markers at the start of zoom/pan rather than when the zoom/pan ends as I do.<br /><br />There is a Google group and an IRC channel for Leaflet where help is available.Chris Hillhttps://www.blogger.com/profile/02951528269028953589noreply@blogger.comtag:blogger.com,1999:blog-179325926611299376.post-56067175515333703612013-08-26T20:49:13.692+01:002013-08-26T20:49:13.692+01:00leaflet is fantastic.
and thanks for your pointer...leaflet is fantastic.<br /><br />and thanks for your pointers.<br /><br />if i may, what's the SQL for grabbing data only visible within the viewport.<br /><br />and can one remove points and add new ones during zoom and pan.<br /><br />Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-179325926611299376.post-42784289766484763802013-02-19T16:34:34.703+00:002013-02-19T16:34:34.703+00:00Thanks for the examples - I appreciate things have...Thanks for the examples - I appreciate things have moved on but you've written some nice plain JS that's easy to understand and it's a good starting place for our project. <br />BTW Bath has done a similar thing with Lions and with Pigs. I'll have to suggest Toads!tingenekhttps://www.blogger.com/profile/13423793315630012886noreply@blogger.comtag:blogger.com,1999:blog-179325926611299376.post-71598350885096837602012-09-10T19:09:21.947+01:002012-09-10T19:09:21.947+01:00Hi Chris,
in case you manage a self-hosted WordPre...Hi Chris,<br />in case you manage a self-hosted WordPress site: try installing my plugin "Leaflet Maps Marker", which allows you to pin, organize & show your favorite places through OpenStreetMap, Google Maps, Google Earth (KML), Bing Maps, GeoJSON, GeoRSS or Augmented-Reality browsers easily. More details at the plugin website at <a href="http://www.mapsmarker.com" rel="nofollow">www.mapsmarker.com</a><br />Regards,<br />RobertRoberthttp://www.mapsmarker.comnoreply@blogger.comtag:blogger.com,1999:blog-179325926611299376.post-91032041429120712802012-08-25T21:58:35.105+01:002012-08-25T21:58:35.105+01:00Arnie,
This example is now more than a year old an...Arnie,<br />This example is now more than a year old and is looking rather out-of-date. I'll try to use create a new example to use some of the new facilities that the latest version of Leaflet offers.<br /><br />If you are just going to ever have one marker on the map, store it's value in a global var (say as mark) and use map.removeLayer(mark) to remove the marker then create a new one. You can also move a marker by changing its lon / lat so you don't need to remove one and add a new one, just move the existing one. If you do want multiple markers, add them to a layerGroup then you can remover or hide them as a single entity.<br /><br />Leaflet's documentation is much better now than when I started, but solid working examples do still seem useful. Judging by the comments and hits here on a 15 month old blog post people still want help.Chris Hillhttps://www.blogger.com/profile/02951528269028953589noreply@blogger.comtag:blogger.com,1999:blog-179325926611299376.post-862719634969429792012-08-25T13:17:08.584+01:002012-08-25T13:17:08.584+01:00Thanks SO much - I'm a new Leaflet devotee!
N...Thanks SO much - I'm a new Leaflet devotee!<br /><br />Now I'm adding an icon to the map with the usual <br /> L.marker(e.latlng).addTo(map)<br />But I want to <i>remove any prior icon</i> - allowing just one. How do I do that?Arnie Shorehttps://www.blogger.com/profile/18021290503451841909noreply@blogger.comtag:blogger.com,1999:blog-179325926611299376.post-85279143026348575712012-06-26T16:49:05.742+01:002012-06-26T16:49:05.742+01:00Hey Chris,
I figured out what I was doing wrong. ...Hey Chris,<br /><br />I figured out what I was doing wrong. Thanks for your example.Nate Ilernoreply@blogger.comtag:blogger.com,1999:blog-179325926611299376.post-35144502148666950292012-06-26T10:52:07.806+01:002012-06-26T10:52:07.806+01:00The PHP code returns JSON, not GeoJSON. As another...The PHP code returns JSON, not GeoJSON. As another comment points out I would now group all the markers into one LayerGroup, which didn't exist when I wrote the post. You can then delete the group without the loop. You can remover a single GeoJSON layer, or any other layer in one go. Check out the leaflet documentation, which keeps improving.Chris Hillhttps://www.blogger.com/profile/02951528269028953589noreply@blogger.comtag:blogger.com,1999:blog-179325926611299376.post-17741652539126096332012-06-26T10:31:30.142+01:002012-06-26T10:31:30.142+01:00Great post!!!
It looks like your ajax response is...Great post!!!<br /><br />It looks like your ajax response is in XML format. I'm looking to do something similar, but using their GeoJSON layer support:<br />(http://leaflet.cloudmade.com/examples/geojson.html --and -- http://leaflet.cloudmade.com/examples/geojson-example.html). The issue I'm having is removing a layer...like your loop method, I'm used to storing the layers in an array and looping through to remove them. Do you have any insight on how one might remove a GeoJSON layer?Nate Ilernoreply@blogger.comtag:blogger.com,1999:blog-179325926611299376.post-87540322829910454252012-06-15T10:16:17.723+01:002012-06-15T10:16:17.723+01:00Valerio,
My code is Open, you can freely use it or...Valerio,<br />My code is Open, you can freely use it or copy part of it for any purpose, including commercial use. It would be nice if you mention my code in your app (e.g. link to this blog), but you don't have to. I'm pleased you find it useful.Chris Hillhttps://www.blogger.com/profile/02951528269028953589noreply@blogger.comtag:blogger.com,1999:blog-179325926611299376.post-36006019886137135352012-06-15T08:06:52.916+01:002012-06-15T08:06:52.916+01:00Thanks for the example!
But this solution is free ...Thanks for the example!<br />But this solution is free also for commercial use?Valerionoreply@blogger.comtag:blogger.com,1999:blog-179325926611299376.post-39139815893992100542012-05-14T18:44:46.468+01:002012-05-14T18:44:46.468+01:00Computers are picky, so you right to point it out,...Computers are picky, so you right to point it out, thanks. I've corrected it. <br /><br />I might need to review the code as Leaflet has moved on. Integration with jQuery for the initialisation and ajax is useful too.Chris Hillhttps://www.blogger.com/profile/02951528269028953589noreply@blogger.comtag:blogger.com,1999:blog-179325926611299376.post-9613150654898352822012-05-14T18:28:49.358+01:002012-05-14T18:28:49.358+01:00A big picky but there are two typos in the line:
...A big picky but there are two typos in the line:<br /><br />var osm = new L.TileLayer(osmUrl,{minZoom; 8, maxZoom;18, attribution: osmAttrib});<br /><br />after minZoom and maxZoom there should be colons, not semicolons, e.g. <br /><br />var osm = new L.TileLayer(osmUrl,{minZoom: 8, maxZoom: 18, attribution: osmAttrib});PeterThttps://www.blogger.com/profile/17805608715345849392noreply@blogger.comtag:blogger.com,1999:blog-179325926611299376.post-48590813129305600582012-03-28T19:37:20.325+01:002012-03-28T19:37:20.325+01:00Thanks Oliver,
You are, of course, quite right. Th...Thanks Oliver,<br />You are, of course, quite right. The LayerGroup didn't exist when I originally wrote the code and the post.<br /><br />I have used the LayerGroup and it works well.Chris Hillhttps://www.blogger.com/profile/02951528269028953589noreply@blogger.comtag:blogger.com,1999:blog-179325926611299376.post-2358981727791088392012-03-28T19:23:09.611+01:002012-03-28T19:23:09.611+01:00You can group markers with LayerGroup object. It a...You can group markers with LayerGroup object. It allows you to manage a group of object (marker or others...)Oliviernoreply@blogger.comtag:blogger.com,1999:blog-179325926611299376.post-14410513937583419612012-03-13T12:04:11.370+00:002012-03-13T12:04:11.370+00:00Thanks Chris,
"I allowed for the idea that t...Thanks Chris,<br /><br />"I allowed for the idea that there might be more than one picture for each toad by decoupling via the table ToadPicList."<br /><br />Ok, I guess this is what I didn't get. I also wanted to know if you stored the pictures as blobs or filenames. Now I have all my answers, thanks!<br />LudovicAnonymousnoreply@blogger.comtag:blogger.com,1999:blog-179325926611299376.post-82626549169360060932012-03-04T15:57:24.400+00:002012-03-04T15:57:24.400+00:00Vokabb,
Here's the SQL for the three tables:
...Vokabb,<br />Here's the SQL for the three tables:<br /><br />--<br />-- Table structure for table `toad`<br />--<br /><br />CREATE TABLE IF NOT EXISTS `toad` (<br /> `toadid` int(11) NOT NULL auto_increment,<br /> `toadname` varchar(50) NOT NULL,<br /> `lon` double NOT NULL,<br /> `lat` double NOT NULL,<br /> `sponsor` varchar(150) default NULL,<br /> `designer` varchar(50) NOT NULL,<br /> `artist` varchar(50) NOT NULL,<br /> PRIMARY KEY (`toadid`)<br />) ENGINE=MyISAM DEFAULT CHARSET=latin1 COMMENT='where the toads are' AUTO_INCREMENT=54 ;<br /><br /><br />--<br />-- Table structure for table `toadpiclist`<br />--<br /><br />CREATE TABLE IF NOT EXISTS `toadpiclist` (<br /> `toadid` int(11) NOT NULL,<br /> `picid` int(11) NOT NULL<br />) ENGINE=MyISAM DEFAULT CHARSET=latin1;<br /><br /><br />--<br />-- Table structure for table `toadpics`<br />--<br /><br />CREATE TABLE IF NOT EXISTS `toadpics` (<br /> `picid` int(11) NOT NULL auto_increment,<br /> `photo` varchar(50) NOT NULL,<br /> PRIMARY KEY (`picid`)<br />) ENGINE=MyISAM DEFAULT CHARSET=latin1 COMMENT='List of photos of toads, maybe more than one per toad' AUTO_INCREMENT=41 ;<br /><br />The table layouts are crude. I allowed for the udea that there might be more than one picture for each toad by decoupling via the table ToadPicList. The table ToadPics gives the filename to display.<br /><br />I hope that helps.Chris Hillhttps://www.blogger.com/profile/02951528269028953589noreply@blogger.comtag:blogger.com,1999:blog-179325926611299376.post-18493417635907123432012-03-04T13:20:56.751+00:002012-03-04T13:20:56.751+00:00That's great! I try to reproduce the example b...That's great! I try to reproduce the example but I can't get the following line:<br />$picquery="SELECT photo FROM toadpiclist t JOIN toadpics p on t.picid=p.picid where t.toadid='{$row["toadid"]}'";<br /><br />I would like to have a list of pictures to display too... How does the SQL table look like?Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-179325926611299376.post-3494382682472872462012-02-07T21:18:12.175+00:002012-02-07T21:18:12.175+00:00Leaflet passes you the marker that is clicked so y...Leaflet passes you the marker that is clicked so you don't need to keep track of them. <br /><br />Take a look at the JavaScript in swan.js on my github store https://github.com/chillly/Leaflet-Toads <br /><br />In there look at the stateChanged() function. There the data for each marker (toad) is added to the marker as the marker is created, so it is stored with the marker in the data variable. <br /><br />Later in the markerClick() function the parameter e is passed which has the marker that is clicked as the variable target. If you use e.target.data you get to the data attached to the marker when it was created above. <br /><br />HTHChris Hillhttps://www.blogger.com/profile/02951528269028953589noreply@blogger.comtag:blogger.com,1999:blog-179325926611299376.post-69827991368105555342012-02-07T20:38:18.050+00:002012-02-07T20:38:18.050+00:00This is great information, but I'm confused on...This is great information, but I'm confused on how you keep track of the markers. I'm trying to keep track of multiple markers on a map so when one is clicked, I "know" which one it is and can call functions based on which marker is clicked. I tried creating an array of LatLng coordinates and tried to compare the marker's coordinates, but it doesn't seem to work. Would you know how to identify a marker when it is clicked?Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-179325926611299376.post-34320817908866371692011-11-10T16:17:50.436+00:002011-11-10T16:17:50.436+00:00There are basically 2 ways to add Leaflet markers ...There are basically 2 ways to add Leaflet markers to a web page from a SQL DB:<br /><br />1, extract the data as the page is being created and use this populate an array to use in the markers. This means the page needs to be created with a scripting language such as ASP, PHP or the like.<br /><br />2. use AJaX to send a request from the web page to some of your code which will extract the data and return it to your web page for use.<br /><br />I tend to prefer the AJaX route. It is more powerful and dynamic, but probably a bit harder to master. There is a good starter guide to AJaX on the <a href="http://www.w3schools.com/" rel="nofollow"> W3Schools website</a>. I return the data as JSON or GeoJSON data which works well.<br /><br />Both routes need a good grasp of JavaScript because all of the power of Leaflet is controlled by JavaScript. You will benefit from a debug tool - I use the Firebug addon to Firefox, without it JavaScript debugging is very hard work.<br /><br />HTHChris Hillhttps://www.blogger.com/profile/02951528269028953589noreply@blogger.com