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

2 Answers 2

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

Mark C explained you how to store image in DB but actually, most of the time, there is absolutely no need to store image content (as blob) in a database.

I would give you the advice of storing it as just a file and store the path into the database. You, then, just have to create a new varchar field containing a filepath like /images/user/my_image.png

This will speed up the script execution and prevent DB overload .... It seems, that's what you are actually trying to do.

Regarding your last attempt, you are passing the photo as pic parameters into the URL but in the PHP part, you treat it as $_FILES['photo']. It can't work ...

Change it to :

  var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address + "&photo=" + photos +
share|improve this answer

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.