Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I'm a complete amateur at writing code. I would like to make an application for storing LNG, lat, and other data, as well as images in mysql. I've set up, I made a separate application for storing images and data storage via WebGIS applications. Now I do not know how to integrate the two applications.

If someone could help me, to be shown how to integrate this code:

<form enctype="multipart/form-data" action="add.php" method="POST"> 
Photo: <input type="file" name="photo"><br> 
<input type="submit" value="Add"> 
</form>

in

<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet" href="/ol/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="/ol/theme/default/google.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="/ol/OpenLayers.js"></script>



<script type="text/javascript">




var marker;
var infowindow;

var customIcons = {
  restaurant: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  },
  bar: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  }
};


function initialize() {


  var latlng = new google.maps.LatLng(45.0000, 17.5000);
  var options = {
   zoom: 10,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.SATELLITE
 }
  var map = new google.maps.Map(document.getElementById("map-canvas"), options);
  var html = "<table>" +
             "<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
             "<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" +
             "<tr><td>Type:</td> <td><select id='type'>" +
             "<option value='bar' SELECTED>bar</option>" +
             "<option value='restaurant'>restaurant</option>" +
             "</select> </td></tr>" +
             "<tr><td></td><td><input type='button' value='Save & Close onclick='saveData()'/></td></tr>";
infowindow = new google.maps.InfoWindow({
 content: html
});

google.maps.event.addListener(map, "click", function(event) {
    marker = new google.maps.Marker({
      position: event.latLng,
      map: map
    });
    google.maps.event.addListener(marker, "click", function() {
      infowindow.open(map, marker);
    });
});

}


function saveData() {
  var name = escape(document.getElementById("name").value);
  var address = escape(document.getElementById("address").value);
  var type = document.getElementById("type").value;
  var latlng = marker.getPosition();

  var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address +
            "&type=" + type + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
  downloadUrl(url, function(data, responseCode) {
    if (responseCode == 200 && data.length <= 1) {
      infowindow.close();
      document.getElementById("message").innerHTML = "Location added.";
    }
  });

}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request.responseText, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}




</script>
</head>

<body style="margin:10px; padding:10px;" onload="initialize()">
<div id="map-canvas" style="width: 100%; height: 800px"></div>
<div id="message"></div>
</body>

</html>

thanks

share|improve this question
    
java tag or javascript tag? first you need a separate php code to connect to your mysql database - see stackoverflow.com/questions/15805887/… –  Mapperz Oct 25 '13 at 13:50
    
I have created php, works correctly. All data is stored in MySQL, except for pictures. I think the problem in this html code, because I do not know how to integrate the two presented code. –  Davorin Oct 25 '13 at 14:12
add comment

3 Answers

To try to simply ask the question .....

In order for this application https://developers.google.com/maps/articles/phpsqlinfo_v3 to add the option to store images?

share|improve this answer
    
Creating a new column in mysql for storing files, modify php code ... I think it's ok ... but I can not understand how to manage the Java code that is functioning. –  Davorin Oct 25 '13 at 22:25
add comment

You have to use a blob type column in MySQL to store the image. Your php script then needs to present that blob as read from the MySQL table to the JS Script with the correct Mime Type.

I cannot give you any example code as I work in ASP, but the concept is the same. This might help you along.

Read from the Blob, write using a streamwriter with the correct Mime Type.

The JS Script will not care, it just has to look like an image when it arrives at the browser, so all the work needs to be done on your server to make this happen

share|improve this answer
add comment

Here is my attempt to integrate the two applications: Upload a File and write to MySQL (http://php.about.com/od/phpwithmysql/ss/Upload_file_sql.htm) and From Info Windows to a Database: Saving User-Added Form Data (https://developers.google.com/maps/articles/phpsqlinfo_v3). Applications work perfectly when I run separately.

HTML

<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <link rel="stylesheet" href="/ol/theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="/ol/theme/default/google.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css">
<script src="/ol/OpenLayers.js"></script>
<script type="text/javascript">

var marker;
var infowindow;

var customIcons = {
  restaurant: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  },
  bar: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
    shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
  }
};


function initialize() {

  var latlng = new google.maps.LatLng(45.0000, 17.5000);
  var options = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  }
  var map = new google.maps.Map(document.getElementById("map-canvas"), options);
  var html = "<table>" +
             "<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
             "<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" +
             "<tr><td>Photo:</td> <td><input type='file' id='photo'/></td> </tr>" +
             "<tr><td>Type:</td> <td><select id='type'>" +
             "<option value='bar' SELECTED>bar</option>" +
             "<option value='restaurant'>restaurant</option>" +
             "</select> </td></tr>" +
             "<tr><td></td><td><input type='submit' value='Save & Close' onclick='saveData()'/></td></tr>";
 infowindow = new google.maps.InfoWindow({
 content: html
});

google.maps.event.addListener(map, "click", function(event) {
    marker = new google.maps.Marker({
      position: event.latLng,
      map: map
    });
    google.maps.event.addListener(marker, "click", function() {
      infowindow.open(map, marker);
    });
});
}


function saveData() {
  var name = escape(document.getElementById("name").value);
  var address = escape(document.getElementById("address").value);


  var photos = escape(document.getElementById("photo").value);
  var f = document.createElement('form');
  f.action = "phpsqlinfo_addrow.php";
  f.method = "post";
  f.enctype = "multipart/form-data";
  f.target = photos.name;



  var type = document.getElementById("type").value;
  var latlng = marker.getPosition();

  var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address + "&pic=" + photos +
            "&type=" + type + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
  downloadUrl(url, function(data, responseCode) {
    if (responseCode == 200 && data.length <= 1) {
      infowindow.close();
      document.getElementById("message").innerHTML = "Location added.";
    }
  });

}


function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request.responseText, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}


</script>
</head>

<body style="margin:10px; padding:10px;" onload="initialize()">
<div id="map-canvas" style="width: 100%; height: 800px"></div>
<div id="message"></div>
</body>

</html>

PHP

<?php
require("phpsqlinfo_dbinfo.php");

$target = "../mysqlimg/"; 
$target = $target . basename( $_FILES['photo']['name']); 


// Gets data from URL parameters
$name = $_GET['name'];
$address = $_GET['address'];

$lat = $_GET['lat'];
$lng = $_GET['lng'];
$type = $_GET['type'];
$pic = ($_FILES['photo']['name']);

// Opens a connection to a MySQL server
$connection=mysql_connect ("localhost", $username, $password);
if (!$connection) {
  die('Not connected : ' . mysql_error());
}

// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Insert new row with user data
$query = sprintf("INSERT INTO markers " .
     " (fid, name, address,  lat, lng, type, photo ) " .
     " VALUES (NULL, '%s', '%s', '%s', '%s', '%s', '%s');",
     mysql_real_escape_string($name),
     mysql_real_escape_string($address),

     mysql_real_escape_string($lat),
     mysql_real_escape_string($lng),
     mysql_real_escape_string($type),
mysql_real_escape_string($pic));

$result = mysql_query($query);

move_uploaded_file($_FILES['photo']['tmp_name'], $target);

if (!$result) {
  die('Invalid query: ' . mysql_error());
}
?>

SQL

fid     int(11)              
name    varchar(60)              
address varchar(80)              
lat     float(10,6)              
lng     float(10,6)              
type    varchar(30)              
g           geometry       
photo   varchar(30) 

Whether this is my attempt to make sense? The database is updated all data except the column photos.

I asked if someone could specifically to focus attention on the function savedata (), if I'm on the right track?

thanks

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.