Jag tänkte bygga på lite på tidigare inlägg om Leaflet och måndagens inlägg om PostGIS i QGIS.
Först så bygger jag ett javaskript som visar mitt PostGIS lager på Open Street Map via QGIS Server och LeafletJS.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="script/leaflet.css" />
</head>
<body>
<div id="map" style="width: 800px; height: 600px"></div>
<script src="script/leaflet.js"></script>
<script>
var osm = L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Kartan: © <a href="http://openstreetmap.org">OpenStreetMap</a> bidragsgivare.'
});
var signs = new L.TileLayer.WMS("http://192.168.0.25/cgi-bin/qgis_mapserv.fcgi?VERSION=1.3.0&map=/qgis/skyltar.qgs", {
layers: 'skyltar',
format: 'image/png',
transparent: true,
minZoom: 7
});
var map = L.map('map', {
center: [57.66505,14.95789],
zoom: 13,
layers: [osm, signs]
});
var grundkartor = {
"OSM": osm
};
var lager = {
"Skyltar": signs
//"Bilder": bilder
};
L.control.layers(grundkartor, lager).addTo(map);
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("Du klickade på: " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);
</script>
</body>
Jag kopierar helt enkelt ett exempel från http://leafletjs.com/ och modifierar det lite så att jag får med mitt eget WMS lager från QGIS Server.
I stället för att bara visa positionstext så lägger jag även till en länk med POST information till en ny sida:
.setContent("Position: " + e.latlng.toString() + "<br><a href='form.htm?lat=" + e.latlng.lat.toString() + "&lng=" + e.latlng.lng.toString() + "'>Klicka för att skapa punkt</a>")
Detta skickar med positionen till den nya sidan ”form.php”:
<html> <head> </head> <body> <form action=spara.php method=POST> <?PHP echo "Latitud: <input type='text' name='lat' value=" . $_GET["lat"] . "><br>"; echo "Longitud: <input type='text' name='lng' value=" . $_GET["lng"] . "><br>"; ?> Typ: <input type="text" name="typ" value""><br> Beskrivning: <input type="text" name="beskrivning" value""><br> Datum: <input type="text" name="datum" value""><br> <input type="submit" value="Spara"> </form> </body> </html>
Sedan så måste alla data in i databasen, och det görs i filen ”spara.php”:
<html>
<head>
</head>
<body>
<?PHP
$lng = $_GET["lng"];
$lat = $_GET["lat"];
$typ = $_GET["typ"];
$beskrivning = $_GET["beskrivning"];
$datum = $_GET["datum"];
$sql = "INSERT INTO skylts (geom, typ, beskrivning, datum) VALUES (ST_Transform(ST_GeomFromText('POINT($lng $lat)',4326), 3006), '$typ', '$beskrivning', '$datum')";
$databas = pg_connect("host='192.168.0.25' port='5432' dbname='geodata' user='user' password='password'");
if (!$databas) {
die("Fel i databasanslutning: " . pg_last_error());
}
$resultat = pg_query($databas, $sql);
if (!$resultat) {
die("Fel i SQL-frågan: " . pg_last_error());
}
pg_free_result($resultat);
pg_close($databas);
?>
<A href="skyltar.htm">Återvänd till kartan</A>
</form>
</body>
</html>
Sådär! Eftersom jag får Lat/Long i decimala grader och mina data är lagrade i SWEREF99TM i PostGIS så måste jag använda ”ST_Transform” i SQL-satsen.
Nu kan jag klicka i kartan, redigera positionen och attributen och spara dessa i PostGIS och slutligen visa resultatet i kartan igen… Det går naturligtvis att snygga till och lägga till rätta i koden, och framför allt lägga till felhantering, men det ovanstående fungerar. Prova själv…
Nice. Testade detta mot mysql och det fungerar bra. Hur är det smidigast om man vill kunna klicka på en markör för att sedan ändra platsen eller attributen?
Både attribut och koordinater går att redigera i formulär (se gamla inlägg). Man kan även hämta nya koordinater genom ”klick i karta” med samma tekniker. Vill man klick-dra positioner i kartan så blir det tyvärr lite krångligare, men kolla på Open Layers om du är intresserad.
Det var inte så klurigt när jag väl lade manken till. En testsite: http://meandernatur.se/vallokaler