Leaflet.draw - How to Save/Show Results?

[Arnie Shore]

All, Leaflet.draw is a lovely piece of work, but how do I capture the
results of a drawing to save at the server, and subsequently re-use?

(I can handle the server programming OK.)

AS

[Bryan McBride]

You just have to listen for the 'created' event. Try pasting this into your javascript console on the demo here: http://jacobtoye.github.com/Leaflet.draw/

map.on('draw:marker-created', function (e) {

    console.log(e.marker);

});

BRYAN

[Jacob Toye]

Hi Arnie,

Glad you like Leaflet.draw :)

To get the shapes that are created using Leaflet.draw you need to listen to the draw events:

draw:poly-created

draw:rectangle-created

draw:circle-created

draw:marker-created

See https://github.com/jacobtoye/Leaflet.draw/blob/master/example/drawing.html for an example.

From here you will need to need to send the back to the server an appropriate data structure depending on the shape. Leaflet has methods like getLatLngs() on L.Polyline that should help. Unfortunately there is no asGeoJson() methods, which would probably make your life easier.

Hope this helps.

[Paulo Vieira]

On Tue, Dec 4, 2012 at 3:29 AM, Jacob Toye <jacob...@gmail.com> wrote:

 Leaflet has methods like getLatLngs() on L.Polyline that should help. Unfortunately there is no asGeoJson() methods, which would probably make your life easier.

There was a suggestion in the uservoice  to have a method like "asGeoJson". Vladimir agreed that it would be useful.

http://leaflet.uservoice.com/forums/150880-ideas-and-suggestions-for-leaflet/suggestions/3121234-convert-vectors-layers-to-geojson

Meanwhile, other people have done this already:

issue: toGeoJSON

https://github.com/CloudMade/Leaflet/issues/712

pull request: getGeoJSON method

https://github.com/CloudMade/Leaflet/pull/645

[Shaun]

Hey Arnie, if you manage to figure it out would it be possible to share your final code? 

This function would work great for the game maps on my mobile app. It would allow users to pin markers that are saved persistently.

Cheers buddy :)

[Bryan McBride]

I wrote this little Leaflet layer to WKT script to help with writing simple geometries back to a database: https://gist.github.com/4248238

BRYAN

[Shaun]

Hey Bryan, thanks for posting this!

Do you have a working example of such an implementation using SQLite or even saving to a standard text file? I have no experience in Well Known Text and I don't know how it would interface with a database.

Cheers!

[Bryan McBride]

Hi Shaun,

I don't have anything I can share at the moment, but what I do is bind a popup to the layer with a form containing the geometry and attributes. Whenever the geometry gets modified, or you add a new feature, you call that toWKT(layer) function to return the WKT representation of the geometry (I usually included it in a hidden field in the form). You can pass the WKT, along with the rest of your data to an SQL insert or update script and voila! Most spatially aware databases, such as PostGIS and MySQL can convert a WKT string to the internal geometry storage format. In PostGIS you could do something like this: SET the_geom=ST_GeomFromText('$geom', 4326) where $geom is the WKT passed from your form.

You could insert the WKT directly into an SQLite database- if you are familiar with PHP, this is a great utility: https://github.com/phayes/geoPHP

BRYAN

[Shaun]

Thanks Bryan for explaining the process of this!

Rather overwhelming for me just now but I do understand it. It will take much trial and error for me but that's the best way to learn.

PostGIS sounds like the preferred choice since it is most suited for this.

If I manage to make this work I will share among the masses.

Cheers bud :)

--
 
 
 

[Ofir Attia]

Shaun, how I can show the cordinates of circle, when I edit the layers? 

what I did so far is:

if (layer instanceof L.Circle) {

            return "circ((" + coords.join(",") + "," + layer.getLatLng().lng + " " + layer.getLatLng().lat + "))";

        } 

but its work only when I created the layer. by the way the geoPHP insert the result to mysql?

thanks!

[Shaun]

Hey Ofir,

Sorry for the late reply.

Your best off asking in a new thread your question, as I don't have any experience with circles nor did I get MySQL, etc., working with Leaflet. Sorry chap!

--
 
---
You received this message because you are subscribed to a topic in the Google Groups "Leaflet" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/leaflet-js/ZAOs2TyKLwI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to leaflet-js+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[jamlick wanderi]

HEY BRYAN. 

Am trying to bind the latlong from my leaflet event into the postgis.

my query looks like this. 

<?php

require 'connection.php';

error_reporting(0);

if (isset($_POST['submit'])) {

  $activity= $_POST['activity'];

  $image= $_POST['image'];

  $desc = $_POST['description'];

  $long = $_POST['longitude'];

  $lat = $_POST['latitude'];

$query = "INSERT INTO reported_incident(activity,image,description,geom) 

 VALUES ('$activity','$image','$desc','ST_GeomFromText('POINT($long, $lat)',4326) ')";

        $result = pg_query($conn, $query);

        if ($result) {

                echo"SUCCESSFULLY REPORTED!";

        } else {

             die();

        }

 }

?>

 Still not working upon binding the WKT feature alongside other form details to DB.

Do you have a sample code?

[Abhik Betal]

Hi!  i don't know pos gis. But in similar way i inserted my lat - long values from leaflet to mysql database. These lat- long can be of any poly, line or points features.  I am sending my codes if it helps you.

<?php

require("phpsqlinfo_dbinfo.php");

$coordinates = $_GET['coordinates'];

$day = $_GET['day'];

$job = $_GET['job'];

$month = $_GET['month'];

$year = $_GET['year'];

$nofday = $_GET['nofday'];

$user = $_GET['user'];

#$coordinates = "LatLng(27.176469, 68.664551),LatLng(31.034108, 68.664551),LatLng(31.034108, 73.015137),LatLng(27.176469, 73.015137)";

#$date2 = "test";

#$month = "06";

#$year = "2018";

#$totdays = "30";

//$coordinates = "LatLng(27.176469, 68.664551),LatLng(31.034108, 68.664551),LatLng(31.034108, 73.015137),LatLng(27.176469, 73.015137)";

//echo explode("LatLng",$coordinates);

$exploded = multiexplode(array("LatLng",),$coordinates);

function multiexplode ($delimiters,$string) {

    

    $ready = str_replace($delimiters, $delimiters[0], $string);

    $launch = explode($delimiters[0], $ready);

    return  $launch;

}

//print_r($exploded);

echo ("<br>");

$imploded = implode("",$exploded);

//echo $imploded;

// Opens a connection to a MySQL server.

$connection=mysql_connect ("localhost", $username, $password);

if (!$connection) {

  die('Not connected : ' . mysql_error());

}

// Sets the active MySQL database.

$db_selected = mysql_select_db($database, $connection);

if (!$db_selected) {

  die ('Can\'t use db : ' . mysql_error());

}

// Inserts new row with place data.

$query = sprintf("INSERT INTO cordint " .

         " (id, coordinates,day,month,year,job,nofday,user) " .

         " VALUES (NULL, '%s','%s','%s','%s','%s','%s','%s');",

         mysql_real_escape_string($imploded),

mysql_real_escape_string($day),

mysql_real_escape_string($month),

         mysql_real_escape_string($year),

mysql_real_escape_string($job),

mysql_real_escape_string($nofday),

mysql_real_escape_string($user));

$result = mysql_query($query);

#echo shell_exec("python C:\python\export_image1.py $imploded");

$command = escapeshellcmd('python C:\python\export_image1.py');

$output = system($command);

if (!$result) {

  die('Invalid query: ' . mysql_error());

}

?>

Regards

Avik 

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[jamlick wanderi]

Am reading the code, thanks.. Need to translate to POSTGIS thou... For some spatial advantages. 

Actually, carto does do the same thing we trying to figure out since the CartoDB is built on top of postgis jst that it's commercial. If we could figure out the sql to do this. It could be a change locker.

To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.

To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.

[Abhik Betal]

Yes!! sounds good.... I am in

To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.

To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.

To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+unsubscribe@googlegroups.com.

[jamlick wanderi]

COOOOOOL, bruv doing a research on it asap! 😇☺

To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.

To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.

To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.

To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.