Skip to content

Instantly share code, notes, and snippets.

Forked from anonymous/view.php
Last active August 4, 2016 21:14
Show Gist options
  • Save kazzkiq/7c92d8e92c28d3df1e09c3290eaf704d to your computer and use it in GitHub Desktop.
Save kazzkiq/7c92d8e92c28d3df1e09c3290eaf704d to your computer and use it in GitHub Desktop.
// keep track post values
$coord = $_REQUEST['coord'];
//recupera as coordenadas e atribui ao X e Y
list($x,$y) = explode(":",$coord);
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>SIV Finder</title>
<!-- Bootstrap core CSS -->
<link href="/pati/css/bootstrap.css" rel="stylesheet">
<link href="/pati/css/style.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="pati/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src=""></script>
<script src=""></script>
<script src="../js/jquery-1.4.1.min.js"></script>
<!--Exibe a posição do mouse ao movê-lo pela página -->
<script src="./mousemove_files/jquery-1.4.1.min.js"></script>
<!--Exibe a posição do mouse ao movê-lo pela página -->
<!--Exibe a posição do mouse quando efetuado click na página -->
// Pega as coordenadas que o PHP gerou
var coordsElement = document.getElementById('coord');
var coords = { x: coordsElement.getAttribute('data-x'), y: coordsElement.getAttribute('data-y') };
// Roda a função pra imprimi-las na tela
document.getElementById('coord').value =("X: " + e.pageX + " - Y: " + e.pageY)
<!--Gera a marcação da local clicado -->
function click_pos(e, ele){
var x = e.pageX;
var y = e.pageY;
circle = document.getElementById('circle'); = x-15 + 'px'; = y-152+ 'px'; = 'block';
function gerarMarcacoes(coord) {
var x = coord.x;
var y = coord.y;
circle = document.getElementById('circle'); = x-15 + 'px'; = y-152+ 'px'; = 'block';
<style type="text/css">
#ele {
position: relative;
border:1px solid;
#circle {
position: absolute;
background-color: red;
width: 30px;
height: 30px;
border-radius: 50%;
display: none;
-moz-opacity: 0.65;
filter: alpha(opacity=65);
#teste {
width: 100%;
height: 780px;
background: url("../img/tps1_1pv.jpg") no-repeat;
repeat: no;
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<a class="navbar-brand" href="#"> SIV Finder - PATI/SBPA </a>
<div class="navbar-collapse collapse" id="navbar-collapsible">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.php"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="create.php"><span class="glyphicon glyphicon-plus-sign"></span> Novo Registro</a></li>
<li><a href="" target="_blank" title="Informações de Usuário"><span class="glyphicon glyphicon-info-sign"></span></a></li>
<li><a href="" target="_blank" title="Pagina de Monitoramento"><span class="glyphicon glyphicon-share-alt"></span></a></li>
<li><a href="#"> </a></li>
<div class="container-fluid" style="margin-top: 30px" >
<div class="row">
<div id="coord" data-x="<?php echo $x ?>" data-y="<?php echo $y ?>"></div>
<label >Coordenada:</label>
echo json_encode($coord);
<div class="row" onclick="click_pos(event, this)" id="ele" >
<div id="circle"></div>
<div class="row" id="teste" >
<!-- sera exibido a planta do local selecionado -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src=""></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment