We Keep Coding

I am getting error 419 in laravel while displaying something on map eventhough my path is correct

Im creating an application using google maps api that allows the user to add a marker at a specific location
but when im clicking on the map to add the location, all data i get back is correct but i get the response code of error 19...this is my code for saving the data
function saveData(lat,lng)
{
console.log("LAT:"+lat+" LNG:"+lng);
var description = document.getElementById('manual_description').value;
var formData = new FormData();
console.log("DESC:"+description);
formData.append("latitude", lat); //outputs correctly
formData.append("longitude", lng);//outputs correctly
formData.append("description", description); //outputs correctly
console.log(formData.get("latitude")+" "+formData.get("longitude")+" "+formData.get("description"));
downloadUrl(formData, function(data, responseCode) {
console.log("RESP:"+responseCode);
console.log(data.length);
if (responseCode === 200 && data.length > 1) {
var markerId = getMarkerUniqueId(lat,lng); // get marker id by using clicked point's coordinate
var manual_marker = markers[markerId]; // find marker
manual_marker.setIcon(purple_icon);
infowindow.close();
infowindow.setContent("<div style=' color: purple; font-size: 25px;'> Waiting for admin confirm!!</div>");
infowindow.open(map, manual_marker);
}else{
console.log("RESPONSECODE: "+ responseCode); //419
console.log("DATA: "+data); //html data with title of Page Expired
infowindow.setContent("<div style='color: red; font-size: 25px;'>Inserting Errors</div>");
}
});
function downloadUrl(formData, callback)
{
var xhttp = new XMLHttpRequest;
xhttp.onreadystatechange = function() {
console.log(xhttp.readyState);
if (xhttp.readyState == 4) {
callback(xhttp.responseText, xhttp.status);
}
};
xhttp.open("POST", "http://localhost/cacheFinder/public/save");
xhttp.setRequestHeader('X-CSRF-TOKEN', '{{ csrf_token() }}');
xhttp.send(formData);
}
this is my route Route::post('save', 'MarkersController#save');
and this is the save function :
public function save(Request $request){
$lat = $request->input("latitude");
$lng = $request->input("longitude");
$description = $request->input("description");
Marker::create([
'latitude'=>$lat,
'longitude'=>$lng,
'description'=>$description
]);
return redirect('usermap');
}
Any help would be much appreciated

add this to your VerifyCsrfToken middleware
protected $except = [
'/cacheFinder/public/*'
];
or
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader('X-CSRF-TOKEN',window.Cookies.get('_csrf'));

this is because of https://laravel.com/docs/5.7/csrf disable route protection in CsrfMiddleware or post valid value

Input field is not recognizing dynamic data

I have a reverse geolocation code which returns a formatted address to which i then dynamically add to a google map address field which should automatically update the map. The problem is that the only way the google map will update is if I add a space bar or any type of input in the input field as if it does not recognize the data i am dynamically adding via document.getElementById.('address').value=
I have tried to simulate key events to the input field to make it believe there was data added, I have tried to use the google api to just manually refresh the map which had no effect, I have tried to split the string being added after it was added to see if it recognizes a change, I have also tried to set the length of the input field to + 1 to see if that worked. I really have no clue what to do at this point. Here is my current attempt to make the input field recognize there is a value.
<span class="findme" id="find1"><i class="fa fa-compass" style="font-size:33px;color:green;"></i></span>
<script>
var find1 = document.getElementById("find1");
var info = document.getElementById("info");
var selector = [];
find1.addEventListener("click", function() {
selector.push("jform_fulladdress");
getLocation();
}, false);
function putInDom(address){
if(selector.length == 1){
//one field for address
var field = document.getElementById(selector[0]);
field.value = address;
}
}
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(getAddress);
} else{
info.innerHTML="Geolocation is not supported by this browser.";
}
}
function getAddress(position){
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var apiurl = 'https://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+lon+'&sensor=true';
var url = 'ba-simple-proxy.php?url='+encodeURIComponent(apiurl);
var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.onload = function() {
if(this.status==200 && JSON.parse(xhr.responseText).contents.results.length > 0){
var result = JSON.parse(xhr.responseText).contents.results[0].formatted_address;
putInDom(result);
} else {
info.innerHTML = "Could not find your location.";
}
}
xhr.send();
}
jQuery('form').change(function() {
var splAd = document.getElementById('jform_fulladdress').value;
splAd = splAd.split(',').slice(0, 2).join(',');
document.getElementById('jform_maps_search').value= splAd;
document.getElementById('jform_fulladdress').value= splAd;
jQuery('jform_fulladdress')
.trigger({
type: 'keypress',
which: character.charCodeAt(49)
});
}).click(function() {
var splAd = document.getElementById('jform_fulladdress').value;
splAd = splAd.split(',').slice(0, 2).join(',');
document.getElementById('jform_maps_search').value= splAd;
document.getElementById('jform_fulladdress').value= splAd;
jQuery('jform_fulladdress')
.trigger({
type: 'keypress',
which: character.charCodeAt(49)
});
});
</script>

Dropzone (with file renaming) is working. I need to populate a js form using PHPexcel or sheetsJS. Can't seem to get queuecomplete to work

Here is what I did to get the file renaming working:
Dropzone.js - How to change file name before uploading to folder
From index.php:
$(document).ready(function() {
Dropzone.autoDiscover = false;
var fileList = new Array;
var i =0;
$("#some-dropzone").dropzone({
addRemoveLinks: true,
init: function() {
// Hack: Add the dropzone class to the element
$(this.element).addClass("dropzone");
this.on("success", function(file, serverFileName) {
fileList[i] = {"serverFileName" : serverFileName, "fileName" : file.name,"fileId" : i };
//console.log(fileList);
i++;
});
this.on("removedfile", function(file) {
var rmvFile = "";
for(f=0;f<fileList.length;f++){
if(fileList[f].fileName == file.name)
{
rmvFile = fileList[f].serverFileName;
}
}
if (rmvFile){
$.ajax({
url: "http://localhost/dropzone/sample/delete_temp_files.php",
type: "POST",
data: { "fileList" : rmvFile }
});
}
});
},
url: "http://localhost/dropzone/sample/upload.php"
});
});
From upload.php:
<?php
$ds = DIRECTORY_SEPARATOR; // Store directory separator (DIRECTORY_SEPARATOR) to a simple variable. This is just a personal preference as we hate to type long variable name.
$storeFolder = 'uploads'; // Declare a variable for destination folder.
if (!empty($_FILES)) {
$tempFile = $_FILES['file']['tmp_name']; // If file is sent to the page, store the file object to a temporary variable.
$targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds; // Create the absolute path of the destination folder.
// Adding timestamp with image's name so that files with same name can be uploaded easily.
$date = new DateTime();
$newFileName = $date->getTimestamp().$_FILES['file']['name'];
$targetFile = $targetPath.$newFileName; // Create the absolute path of the uploaded file destination.
move_uploaded_file($tempFile,$targetFile); // Move uploaded file to destination.
echo $newFileName;
}
?>
New file delete_tmp_files.php:
<?php
$ds = DIRECTORY_SEPARATOR; // Store directory separator (DIRECTORY_SEPARATOR) to a simple variable. This is just a personal preference as we hate to type long variable name.
$storeFolder = 'uploads';
$fileList = $_POST['fileList'];
$targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;
if(isset($fileList)){
unlink($targetPath.$fileList);
}
?>
Here I need dropzone to call PHPExcel or sheetJS. I have sheetJS parsing to CSV in a static page using ajax here:
<html>
<head>
<title>AJAX XLS TEST</title>
</head>
<body>
<br/><div id="fileurl"></div>
<pre id="out"></pre>
<br />
<script src="js/iemagic.js"></script>
<script src="js/shim.js"></script>
<script src="js/jszip.js"></script>
<script src="js/xlsx.js"></script>
<script>
function to_csv(workbook) {
var result = [];
workbook.SheetNames.forEach(function(sheetName) {
var csv = XLSX.utils.sheet_to_csv(workbook.Sheets[sheetName]);
if(csv.length > 0){
result.push("SHEET: " + sheetName);
result.push("");
result.push(csv);
}
});
return result.join("\n");
}
function process_wb(wb) {
var output = to_csv(wb);
if(out.innerText === undefined) out.textContent = output;
else out.innerText = output;
if(typeof console !== 'undefined') console.log("output", new Date());
}
var url = "uploads/fw.xls";
var oReq;
if(window.XMLHttpRequest) oReq = new XMLHttpRequest();
else if(window.ActiveXObject) oReq = new ActiveXObject('MSXML2.XMLHTTP.3.0');
else throw "XHR unavailable for your browser";
document.getElementById('fileurl').innerHTML = 'Download file';
oReq.open("GET", url, true);
if(typeof Uint8Array !== 'undefined') {
oReq.responseType = "arraybuffer";
oReq.onload = function(e) {
if(typeof console !== 'undefined') console.log("onload", new Date());
var arraybuffer = oReq.response;
var data = new Uint8Array(arraybuffer);
var arr = new Array();
for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
var wb = XLSX.read(arr.join(""), {type:"binary"});
process_wb(wb);
};
} else {
oReq.setRequestHeader("Accept-Charset", "x-user-defined");
oReq.onreadystatechange = function() { if(oReq.readyState == 4 && oReq.status == 200) {
var ff = convertResponseBodyToText(oReq.responseBody);
if(typeof console !== 'undefined') console.log("onload", new Date());
var wb = XLSX.read(ff, {type:"binary"});
process_wb(wb);
} };
}
oReq.send();
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36810333-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Question 1: How do I get dropzone to call this ajax csv output? A. There is "queuecomplete" but where to put the quecomplete code (body? head? index.php? Upload.php? Another option would be using PHPexcel (below) but again not sure how to get dropzone to call it after renaming is done:
| Excel To Array
|--------------------------------------------------------------------------
| Helper function to convert excel sheet to key value array
| Input: path to excel file, set wether excel first row are headers
| Dependencies: PHPExcel.php include needed
*/
$filePath = "uploads/fw.xls";
function excelToArray($filePath, $header=true){
//Create excel reader after determining the file type
$inputFileName = $filePath;
/** Identify the type of $inputFileName **/
$inputFileType = PHPExcel_IOFactory::identify($inputFileName);
/** Create a new Reader of the type that has been identified **/
$objReader = PHPExcel_IOFactory::createReader($inputFileType);
/** Set read type to read cell data onl **/
$objReader->setReadDataOnly(true);
/** Load $inputFileName to a PHPExcel Object **/
$objPHPExcel = $objReader->load($inputFileName);
//Get worksheet and built array with first row as header
$objWorksheet = $objPHPExcel->getActiveSheet();
//excel with first row header, use header as key
if($header){<SNIP>
I really think PHPexcel would be much easier when it comes to culling out specific data from the xls as I only need specific fields to populate the following javascript form, but again, where do I put the PHPexcel script? Do I use queuecomplete to call the file? I think if I use queuecomplete and reference phpexcel_parse.php I could get it going from there but I just can't seem to get dropzone to do something with the file after uploading and renaming is complete. Any help is much appreciated. Thanks!

Is my geojson data file created correclty?

I'm using this code to map power transformers on a leaflet map, but unfortunately when the map loads I don't find my data displayed. Can you please help me identify some problems(if any) in my code. I must admit that I'm new to web mapping so I just need some help here.
Here is the javascript code I'm using:
//global variables
var map,
fields = ["tx_id", "owner", "kva_rating", "prim_voltage", "sec_voltage", "serial_no", "area_name"],
autocomplete = [];
$(document).ready(initialize);
function initialize(){
$("#map").height($(window).height());
map = L.map("map", {
center: L.latLng(-0.7166700, 36.4359100),
zoom: 10
});
var tileLayer = L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoicmFqYWJueWFtYnUiLCJhIjoiY2lqbTB4cnpiMDA4bnZhbHh3Znl2aDAwZiJ9.YC_iahav7t9GPl-7XgB-yQ', {
attribution: 'Network Design © Rajab Inc., Map data © OpenStreetMap contributors, | Map Tiles: CC-BY-SA, Imagery © Mapbox',
maxZoom: 19,
minZoom: 1,
id: 'rajabnyambu.oo91e3ga',
accessToken: 'pk.eyJ1IjoicmFqYWJueWFtYnUiLCJhIjoiY2lqbTB4cnpiMDA4bnZhbHh3Znl2aDAwZiJ9.YC_iahav7t9GPl-7XgB-yQ'
}).addTo(map);
//next: add features to map
getData();
};
function getData(){
$.ajax("getData.php", {
data: {
table: "transformer",
fields: fields
},
success: function(data){
mapData(data);
}
})
};
function mapData(data){
//remove existing map layers
map.eachLayer(function(layer){
//if not the tile layer
if (typeof layer._url === "undefined"){
map.removeLayer(layer);
}
});
//create geojson container object
var geojson = {
"type": "FeatureCollection",
"features": []
};
//split data into features
var dataArray = data.split(", ;");
dataArray.pop();
//console.log(dataArray);
//build geojson features
dataArray.forEach(function(d){
d = d.split(", "); //split the data up into individual attribute values and the geometry
//feature object container
var feature = {
"type": "Feature",
"properties": {}, //properties object container
"geometry": JSON.parse(d[fields.length]) //parse geometry
};
for (var i=0; i<fields.length; i++){
feature.properties[fields[i]] = d[i];
};
//add feature names to autocomplete list
if ($.inArray(feature.properties.featname, autocomplete) == -1){
autocomplete.push(feature.properties.featname);
};
geojson.features.push(feature);
});
//console.log(geojson);
//activate autocomplete on featname input
$("input[name=area_name]").autocomplete({
source: autocomplete
});
var mapDataLayer = L.geoJson(geojson, {
pointToLayer: function (feature, latlng) {
var markerStyle = {
fillColor: "#CC5600",
color: "#CAF",
fillOpacity: 0.5,
opacity: 0.8,
weight: 1,
radius: 8
};
return L.circleMarker(latlng, markerStyle);
},
onEachFeature: function (feature, layer) {
var html = "";
for (prop in feature.properties){
html += prop+": "+feature.properties[prop]+"<br>";
};
layer.bindPopup(html);
}
}).addTo(map);
};
my getData.php file works well so I guess the problem lies within the javascript file. Here is the getData.php:
require ('networkdbinfo.php');
$dbc = pg_connect( "$host $port $dbname $credentials" );
if(!$dbc) {
echo "Not connected : " . pg_error();
exit;
}
// Get the table and fields data
$table= 'transformer';
$fields = ["tx_id", "owner", "kva_rating", "prim_voltage", "sec_voltage", "serial_no", "area_name"];
// Turn fields array into formatted string
$fieldstr="";
foreach ($fields as $i=> $field) {
$fieldstr=$fieldstr . "l.$field,";
}
// Get the geometry as geojson in EPSG:900913
$fieldstr=$fieldstr . "ST_AsGeoJSON(ST_Transform(l.geom, 900913))";
// Create basic SQL statement
$sql="SELECT $fieldstr FROM $table l";
//if a query, add those to the sql statement
if (isset($_GET['area_name'])){
$area_name = $_GET['area_name'];
$distance = $_GET['distance'] * 1000; //change km to meters
//join for spatial query - table geom is in EPSG:900913
$sql = $sql . " LEFT JOIN $table r ON ST_DWithin(l.geom, r.geom, $distance) WHERE r.area_name = '$area_name';";
}
// echo $sql;
// Send the query
if (!$response=pg_query($dbc, $sql)) {
echo "A query error occurred.\n";
exit;
}
// Echo the data back to the DOM
while ($row=pg_fetch_row($response)) {
foreach ($row as $i=> $attr) {
echo $attr.", ";
}
echo ";";
}
?>

You probably have the same issue as there:
Json file dosen't show up in google chrome
I.e. opening your page from File System in Chrome browser.
The solutions proposed in that post are to set up a local server or to open Chrome with specific parameters.
But you should be able to test it directly with Firefox instead.

jquery getJSON from local url

Hi everyone i develop web map using openlayer.
i use geojson, i have this code from :
https://scraperwiki.com/views/openlayers_geojson_example/edit/
this is code :
<script type="text/javascript">
// Start position for the map (hardcoded here for simplicity)
var lat=50.90685
var lon=-1.4029
var zoom=12
var map; //complex object of type OpenLayers.Map
//Initialise the 'map' object
$(function() {
$.getJSON("http://mapit.mysociety.org/area/66016.geojson",
"callback=?",
function(data, textStatus, jqXHR) {
map = new OpenLayers.Map('map', {
layers: [
new OpenLayers.Layer.OSM.Mapnik("Mapnik"),
],
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Attribution()],
maxResolution: 'auto',
});
var lonLat = new OpenLayers.LonLat(lon, lat)
.transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
map.setCenter(lonLat, zoom);
var vector_layer = new OpenLayers.Layer.Vector("GeoJSON");
var geojson_format = new OpenLayers.Format.GeoJSON();
var geometry = geojson_format.parseGeometry(data);
geometry.transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
var feature = new OpenLayers.Feature.Vector(geometry);
vector_layer.addFeatures([feature]);
map.addLayer(vector_layer);
})
});
</script>
in :
$.getJSON("http://mapit.mysociety.org/area/66016.geojson",
"callback=?",
it works when i call from iis localhost
i try to change like this :
$.getJSON("assets/json/66016.geojson",
"callback=?",
but it didnt work, :(
please help me why and how to make this work.
this is the wrong :
HTTP Error 404.0 - Not Found
localhost --- >/assets/json/66016.geojson?callback=jQuery152048599341535009444_1366340277133&_=1366340277237

Try this
$.getJSON("/assets/json/66016.geojson",
"callback=?",

Sorry guys, finnaly i get my answer this is the solve :
$.getJSON("assets/json/66016.geojson",
"callback=?",
just erase "callback=?",
$.getJSON("/assets/json/66016.geojson",