I try to create some feature with mapbox, where you get a view of the folder in jewelry. What I want to do is take a screenshot of the pendant with the map inside. The code I've made so far takes a screenshot, but I don't see the picture of the jewelry over
as you can see on picture I have map and on top of map I have this jewelry photo But When I try to screenshot I get just map, and if I try to screenshot some other div I dont get map. my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Swipe between maps</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css" rel="stylesheet">
<link href="./index.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js"></script>
<script src="./html2canvas.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css" type="text/css">
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.4.0/mapbox-gl-compare.js"></script>
<link rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.4.0/mapbox-gl-compare.css"
type="text/css">
<div id="comparison-container">
<!-- mjenjanje dizajna mape -->
<div id="menu">
<input id="satellite-v9" type="radio" name="rtoggle" value="satellite" checked="checked">
<!-- See a list of Mapbox-hosted public styles at -->
<!-- https://docs.mapbox.com/api/maps/styles/#mapbox-styles -->
<label for="satellite-v9">satellite</label>
<input id="light-v10" type="radio" name="rtoggle" value="light">
<label for="light-v10">light</label>
<input id="dark-v10" type="radio" name="rtoggle" value="dark">
<label for="dark-v10">dark</label>
<input id="streets-v11" type="radio" name="rtoggle" value="streets">
<label for="streets-v11">streets</label>
<input id="outdoors-v11" type="radio" name="rtoggle" value="outdoors">
<label for="outdoors-v11">outdoors</label>
</div>
<div class="wrapper" id="wrapper">
<div id="before" class="map">
<!-- lijeva (svijetla strana) lancica i mape -->
<div class="lancic"></div>
</div>
<div id="after" class="map">
<!-- desna (tamna strana) lancica i mape -->
<div class="lancic-desno" id="aaa"></div>
<!-- slika koja ide preko tamne strane lancica -->
<div class="new-overlay-large gold" id="bbb" data-id="Necklace"></div>
</div>
<div id="geocoder" class="geocoder"></div>
</div>
</div>
<button onClick='printScr()'>Uslikaj</button>
<button onClick='capture()'>Uslikaj2</button>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = ''
// gdje je style stavis stilove koje si kreirao u mapbox studio before je za svijetlu mapu a after za tamnu (lijevu i desnu)
// gdje je center stavis kordinate gdje hoces pocetnu da ti se loade mapa
// gdje je zoom stavis koliko hoces da ti bude blizu mapa
const beforeMap = new mapboxgl.Map({
container: 'before',
style: 'mapbox://styles/mapbox/streets-v11',
center: [18.413370, 43.857114],
zoom: 10,
preserveDrawingBuffer: true,
});
const afterMap = new mapboxgl.Map({
container: 'after',
style: "mapbox://styles/selmanbecar/cl3kcwswk000014o518iwtue7",
center: [18.413370, 43.857114],
zoom: 10,
preserveDrawingBuffer: true,
});
// funkcija za mjenjanje dizajna mape
const layerList = document.getElementById('menu');
const inputs = layerList.getElementsByTagName('input');
for (const input of inputs) {
input.onclick = (layer) => {
const layerId = layer.target.id;
afterMap.setStyle('mapbox://styles/mapbox/' + layerId);
};
}
// A selector or reference to HTML element
const container = '#comparison-container';
const map = new mapboxgl.Compare(beforeMap, afterMap, container, {
// Set this to enable comparing two maps by mouse movement:
// mousemove: true
});
// Add the control to the map.
const geocoder = new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
mapboxgl: mapboxgl
});
document.getElementById('geocoder').appendChild(geocoder.onAdd(beforeMap));
const printScr = () => {
html2canvas(document.getElementById('after')).then((canvas) => {
let img = new Image();
img.src = canvas.toDataURL();
window.document.body.appendChild(img);
})
}
</script>
</body>
</html>
<!-- https://docs.mapbox.com/mapbox-gl-js/example/setstyle/ -->
Related
I am trying to get on my website the gmaps with few markers but i am getting the grey screen or partially grey screen.Before, I used google maps API the same way and everythings works fine. If you can help me I would be grateful.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Zadanie 7</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY"></script>
</head>
<body>
<div class="container-fluid" id="map" style="height: 500px;">
</div>
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>Zadanie 6 Martin Kranec</h4>
<ul class="nav nav-pills nav-stacked">
<li>Prvá Stránka</li>
<li>Druhá Stránka</li>
<li class="active">Tretia Stránka</li>
</ul><br>
</div>
<div class="container-fluid">
<div class='container-fluid'><div class='table-responsive'><table class='table'><thead><tr><th>Vlajka</th><th>Štát</th><th>Počet Navštevníkov</th></tr></thead><tbody><tr><td>World</td><td>World</td><td>2</td></tr><tr><td><img class='flag' src='http://www.geonames.org/flags/x/sk.gif'></td><td><a href='countrystatistics.php?countrycode=sk'>Slovensko</a></td><td>2</td></tr></tbody></table></div></div> </div>
</div>
</div>
<footer class="container-fluid">
<p>©Martin Kranec Webové technológie</p>
</footer>
<script type='text/javascript'>
var lat=[];
var lon=[];
lat.push(48.15);
lon.push(17.1167);
lat.push(48.1704);
lon.push(17.4209);
</script>
<script>
function initMap() {
//alert(lat[1]);
var mapProp = {
center: new google.maps.LatLng(89, -25),
zoom: 4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapProp);
var count = lat.length;
for (var i = 0; i < count; i++) {
var myLatLng = {lat: lat[i], lng: lon[i]};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: ''
});
}
}
initMap();
//initMap();
</script>
<!--<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY&callback=initMap"></script>-->
</body>
</html>
and here is my website where I work on this project http://147.175.98.165/zadanie7/thirdpage.php
Google maps has a lot of race conditions. I use this code a lot to display them instead. This code should be in a ready event like jquery ready.
new Promise(function (resolve, reject) {
if (!document.getElementById('google-maps')) {
var fileref = document.createElement('script');
fileref.setAttribute("type", "text/javascript");
var link = "https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY&callback=mapsFinishedLoading";
fileref.setAttribute("async", "async");
fileref.setAttribute("defer", "defer");
fileref.setAttribute("src", link);
fileref.setAttribute("id", 'google-maps');
window.mapsFinishedLoading = resolve;
document.getElementsByTagName("body")[0].appendChild(fileref);
} else {
resolve();
}
}).then(function (result) {
//Your map should be available now
mapOptions={};//put your options here
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
});
Make sure your map div is visible before calling
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
i hope all of you are having a great day.
I come here with a question i have a form, with a dropdown menu with the list of locations of the company.
And below is my google maps api working. I get all the data from a previously received json from my api.
Im currently trying to make that when click on the map marker changes the value in the dropdown AGENCIA.
Heres the example of the form.
And here is the code, im almost there but i dont get it to work... right now i make an alert when i click on the marker to see if it the value is correct but when i click it the dropdown menu gets empty.
<?php
//Habilitar las sesiones
$codigoError ="";
session_start();
//Validar si existen las sesiones
if(!isset($_SESSION['vsJsonAgencias']))
{
header("location:../index.php");
}
//if(!empty($_SESSION['codigoError'])){
$codigoError = $_SESSION['codigoError'];
//}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="SGLabz">
<title>CitasWeb</title>
<!-- Bootstrap core CSS -->
<link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../css/portfolio-item.css" rel="stylesheet">
<link rel="stylesheet" href="../css/form-basic.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script>
<script src="../js/form.js"></script>
<link href="../css/pikaday.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- date new-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body >
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#"><?php echo '<img alt="LOGO" height="40" width="40" src="http://'.$_SESSION['vsApache'].'/citasweb/icon.png"" >';?>CitasWeb</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<!-- Portfolio Item Row -->
<form class="form-basic" id="form-basic" <?php echo 'action="http://'.$_SESSION['vsApache'].'/citasweb/gestAgenciafunc.php"';?> method="post">
<div class="form-title-row">
<h1>Seleccionar</h1>
</div>
<div class="form-row">
<label>
<span>Gestión</span>
<?php
echo '<select name="codgestion">';
$jsonData =$_SESSION['vsJsonAgencias'];
$jsonDataObject = json_decode($jsonData);
foreach($jsonDataObject->TipoGestion as $option){
echo '<option value=' . $option->ID . '>' . $option->Nombre . '</option>';
}
echo '</select>';
?>
</label>
</div>
<div class="form-row">
<label>
<span>Fecha</span>
<input input type="text" id="datepicker" name="fecha" required/>
</label>
</div>
<div class="form-row">
<label>
<span>Agencia</span>
<?php
echo '<select id="agencia" name="agencia">';
//$jsonData = $_SESSION['vsJsonAgencias'];
$jsonData = file_get_contents('https://api.myjson.com/bins/t222l');
$jsonDataObject = json_decode($jsonData);
foreach($jsonDataObject->Agencias as $option){
echo '<option value=' . $option->ID . '>' . $option->Nombre . '</option>';
//CAPTURAR NOMBRE DE LA AGENCIA
$_SESSION['vsNomagencia'] = $option->Nombre;
}
echo '</select>';
?>
</label>
</div>
<body onload = "loadMap()">
<h2>Agencias</h2>
<?php
//$jsonData = file_get_contents('https://api.myjson.com/bins/t222l');
$jsonDataObject = json_decode($jsonData);
?>
<center>
<div id = "map" style = "width:480px; height:480px;"></div>
<script>
// fake JSON call
function getJSONMarkers() {
var markers = <?php echo $jsonData ?>;
return markers;
}
function loadMap() {
// Initialize Google Maps
const mapOptions = {
center:new google.maps.LatLng(13.706360,-89.212204),
zoom: 10
}
infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Usted esta aquí.');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
const map = new google.maps.Map(document.getElementById("map"), mapOptions);
// Load JSON Data
const data = getJSONMarkers();
// Initialize Google Markers
for(agencia of data.Agencias) {
let marker = new google.maps.Marker({
id: agencia.ID,
map: map,
position: new google.maps.LatLng(agencia.Latitud, agencia.Longitud),
content: agencia.Nombre,
})
marker.info = new google.maps.InfoWindow({
content: agencia.Nombre
});
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, marker);
marker = this;
alert('ID is :'+ this.id);
$(document).ready(function(){
$("#agencia").val(this.id);
});
});
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyD-h6xw5-2X2DdSmL93dQmrR7p63Q_uv5w"></script>
</body></center>
<div class="form-row">
<button type="submit" >Consultar Horarios</button>
</div>
<center>
<?php
//print_r($_SESSION['codigoError']);
print_r( $codigoError);
?>
<br>
</center><br/>
<?php echo '<img alt="SALIR" height="42" src="http://'.$_SESSION['vsApache'].'/citasweb/php/regresar.png"" width="142">';?>
</form>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<?php echo '<center><img alt="SALIR" height="50" width="170" src="http://'.$_SESSION['vsApache'].'/citasweb/conticsa.png"" ></center><br/>';?>
<p class="m-0 text-center text-white">Copyright © Citas Web 2017</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="../js/pikaday.js"></script>
<script src="../js/moment.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
$.datepicker.regional['es'] = {
closeText: "Cerrar",
prevText: "<Ant",
nextText: "Sig>",
currentText: "Hoy",
monthNames: [ "Enero","Febrero","Marzo","Abril","Mayo","Junio",
"Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre" ],
monthNamesShort: [ "ene","feb","mar","abr","may","jun",
"jul","ago","sep","oct","nov","dic" ],
dayNames: [ "domingo","lunes","martes","miércoles","jueves","viernes","sábado" ],
dayNamesShort: [ "dom","lun","mar","mié","jue","vie","sáb" ],
dayNamesMin: [ "D","L","M","M","J","V","S" ],
weekHeader: "Sm",
dateFormat: "dd/mm/yy",
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: "" };
$.datepicker.setDefaults($.datepicker.regional['es']);
} );
</script>
</body>
</html>
Thanks in advance..
The problem's with the $(document).ready - it is not required:
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, marker);
marker = this;
alert('ID is :'+ this.id);
//----$(document).ready(function(){
$("#agencia").val(this.id);
//----});
});
Ok I downloaded this bootstrap template - Freelancer:
https://blackrockdigital.github.io/startbootstrap-freelancer/
I changed some stuff but the main code is still there. This is how the page looks:
When you click on any of the three cards (HTML or PHP or Android) it displays the picture and title ok, but the description of the course is wrong, it is always the html text.
I tried changing the:
// Popup initialization
var popup = new Popup();
popup.setContent(htmlText);
var popup2 = new Popup();
popup.setContent(phpText);
var popup3 = new Popup();
popup.setContent(androidText);
var modal = new Modal("modal", popup);
var modal2 = new Modal("modal", popup2);
var modal3 = new Modal("modal", popup3);
I also tried adding this at the Popup:
// Popup initialization
var popup = new Popup();
if(popup.title=="Android"){
popup.setContent(androidText);
};
This did not work.
How do I set different descriptions for every popup ?
This is the full html:
<!DOCTYPE html>
<html>
<head>
<title>Team Logic Education Center</title>
<!-- Support for Serbian Latin -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Google font: Montserrat (400, 500, 600, 700) -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700" rel="stylesheet">
<!-- Google font: Lato (400, 700) -->
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet"></head>
<!-- Body CSS -->
<link href="css/body.css" rel="stylesheet">
<!-- Header CSS and JS -->
<link href="css/header.css" rel="stylesheet">
<script src="js/header.js"></script>
<!-- Content CSS -->
<link href="css/content.css" rel="stylesheet">
<!-- Section CSS -->
<link href="css/section.css" rel="stylesheet">
<!-- Course CSS and JS -->
<link rel="stylesheet" href="css/course.css">
<script src="js/coursebox.js"></script>
<!-- Contact CSS and JS -->
<!-- <link href="css/contact.css" rel="stylesheet">
<script src="js/contact.js"></script> -->
<!-- Modal CSS and JS -->
<link href="css/modal.css" rel="stylesheet">
<script src="js/modal.js"></script>
<!-- Popup CSS and JS -->
<link href="css/popup.css" rel="stylesheet">
<script src="js/popup.js"></script>
<!-- Data -->
<script src="js/data.js"></script>
</head>
<body>
<!-- Header -->
<div id="header">
<!-- Content inserted via JS -->
</div>
<!-- Popup window (which is modal) -->
<div id="modal">
<!-- Content inserted via JS -->
</div>
<div class="content">
<!-- In-page link for logo section -->
<a class="inlink" id="pocetna"></a>
<!-- Logo section -->
<div class="section green">
<img class="logo" src="Images/TL.png">
<h1>Team Logic Education Center</h1>
</div>
<!-- In-page link for course section -->
<a class="inlink" id="kursevi"></a>
<!-- Course section -->
<div class="section white">
<h1>Kursevi</h1>
<hr>
<div id="courseBox">
<!-- Content inserted via JS -->
</div>
</div>
<!-- In-page link for about section -->
<a class="inlink" id="onama"></a>
<!-- About section -->
<div class="section green">
<h1>O Nama</h1>
<hr>
<p id="content" class="columns" style="max-width: 600px; margin: auto">
<!-- Content inserted via JS -->
</p>
</div>
<!-- In-page link for prices section -->
<a class="inlink" id="cenovnik"></a>
<!-- Prices section -->
<div class="section bluePrice">
<h1>Cenovnik</h1>
<hr>
<p id="contentCenovnik" class="columns" style="max-width: 600px; margin: auto">
<table align="center" style="font-family: Montserrat;">
<tr style="color:white; background-color: #17222c;">
<td>Kurs</td>
<td>Cena</td>
<td>Vreme trajanja</td>
</tr>
<tr>
<td>HTML + CSS + JS </td>
<td>100€</td>
<td>90 min / 1 mesec</td>
</tr>
<tr>
<td>PHP</td>
<td>100€</td>
<td>90 min / 1 mesec</td>
</tr>
<tr>
<td>Android</td>
<td>150€</td>
<td>90 min / 1 mesec</td>
</tr>
</table>
</p>
</div>
<!-- In-page link for contact section -->
<a class="inlink" id="kontakt"></a>
<!-- Contact section -->
<div class="section white">
<h1>Kontakt</h1>
<hr>
<div style="font-family: Lato; font-size: 20px; color: #2C3E50; max-width: 600px; margin: auto">
<div style="float:left;"> <img src="Images/MSG.png" style="vertical-align: middle;"> <span style="vertical-align: middle;"> email#blablac.com </span> </div>
<div style="float:right;"><img src="Images/MOB.png" style="vertical-align: middle;"> <span style="vertical-align: middle;"> +381 (0)63 44 21 56 </span> </div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="map" style="width:100%;height:400px">
</div>
<!-- Information section -->
<!-- <div class="section lightBlue">
</div> -->
<!-- Footer section -->
<div class="section darkBlue">
<footer>
Facebook | Linkedin | Skype <br>
© 2017 TeamLogic. Sva prava zadržana.
</footer>
</div>
</div>
</body>
<script>
// Header initialization (using data.js)
var header = new Header("header");
for(var i = 0; i < links.length; i++) {
header.addLink(
links[i].text,
links[i].href,
links[i].className
);
}
// Popup initialization
var popup = new Popup();
popup.setContent(htmlText);
// var popup2 = new Popup();
// popup.setContent(lorem);
//
// var popup3 = new Popup();
// popup.setContent(phpText);
var modal = new Modal("modal", popup);
//
// var modal2 = new Modal("modal", popup2);
// var modal3 = new Modal("modal", popup3);
// Course box initialization (using data.js)
var courseBox = new CourseBox("courseBox");
for(var i = 0; i < courseItems.length; i++) {
courseBox.addItem(
courseItems[i].text,
courseItems[i].color
);
}
courseBox.setCallback(function (text, color) {
popup.setTitle(text);
popup.setCaption(text);
popup.setCaptionBgColor(color);
modal.open();
});
// About section initialization (using data.js)
var content = document.getElementById("content");
content.innerHTML = lorem;
// Prices section initialization (using data.js)
// var contentCenovnik = document.getElementById("contentCenovnik");
// contentCenovnik.innerHTML = cene;
// Google map
function myMap() {
var myCenter = new google.maps.LatLng(43.332859, 21.908850);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 15};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
</body>
</html>
This is the popup.js :
function Popup() {
var self = this;
self.callback = null;
self.setTitle = function (title) {
self.popupTitle.innerHTML = title;
}
self.setCaption = function (caption) {
self.imgBoxCap.innerHTML = caption;
}
self.setCaptionBgColor = function (bgColor) {
self.imgBoxCap.style.backgroundColor = bgColor;
}
self.setContent = function (content) {
self.popupContent.innerHTML = content;
}
self.open = function() {
self.container.className = "popup";
}
self.close = function() {
self.container.className = "popup zoomOut";
}
self.onClose = function() {
if (self.callback != null) {
self.callback();
}
}
self.setCallback = function(callback) {
self.callback = callback;
}
self.crossItem = document.createElement("div");
self.crossItem.className = "cross";
self.crossItem.addEventListener("click", self.onClose);
self.crossItem.innerHTML = "×";
self.crossBox = document.createElement("div");
self.crossBox.className = "crossBox";
self.crossBox.appendChild(self.crossItem);
self.popupTitle = document.createElement("div");
self.bar = document.createElement("div");
self.bar.className = "bar";
self.bar.appendChild(self.popupTitle);
self.bar.appendChild(self.crossBox);
self.imgBoxCap = document.createElement("div");
self.imgBoxCap.className = "imgBoxCap";
self.imgBox = document.createElement("div");
self.imgBox.className = "imgBox";
self.imgBox.appendChild(self.imgBoxCap);
self.popupContent = document.createElement("p");
self.middle = document.createElement("div");
self.middle.className = "middle";
self.middle.appendChild(self.imgBox);
self.middle.appendChild(self.popupContent);
self.container = document.createElement("div");
self.container.className = "popup none";
self.container.appendChild(self.bar);
self.container.appendChild(self.middle);
}
Also tried this:
// Popup initialization
var popup = new Popup();
if(CourseBox.text=="Android"){
popup.setContent(phpText);
} else {
popup.setContent(htmlText);
};
But every description is now phpText...
Fixed in:
courseBox.setCallback(function (text, color) {
console.log(text);
popup.setTitle(text);
//HERE
if (text=="HTML + CSS + JS") {
popup.setCaption(text);
popup.setContent(htmlText);
} else if(text=="PHP") {
popup.setCaption(text);
popup.setContent(phpText);
} else {
popup.setCaption(text);
popup.setContent(androidText);
};
popup.setCaptionBgColor(color);
modal.open();
});
I created a simple app for Android. I have an error: "script error : $jq('#map'). panTo is not a function"
I tried so many changes but the error remains. where am I wrong?
Thanks in advance.
The code is:
<script>
//Called after application is started.
function OnStart()
{
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
osmAttrib = '© OpenStreetMap contributors',
osm = L.tileLayer(osmUrl, {
maxZoom: 18,
attribution: osmAttrib
});
var map = L.map('map').setView([0, 0], 2).addLayer(osm);
marker= L.marker(map.getCenter()).addTo(map)//.bindPopup("<b>Actual Position</b>").openPopup();
loc = app.CreateLocator( "GPS,Network" );
loc.SetOnChange( loc_OnChange );
loc.SetRate( 0.2 ); //10 seconds.
loc.Start();
sns = app.CreateSensor( "Accelerometer" );
sns.SetOnChange( sns_OnChange );
sns.Start();
}
//Called when we get a change in location.
var $jq = jQuery.noConflict();
function loc_OnChange( data )
{
$jq('#field_GPS').text( data.provider);
$jq('#field_GPS').append("<br>Lat "+data.latitude+", Lng "+data.longitude
+", Alt "+data.altitude);
$jq('#field_GPS').append("<br>Spd "+data.speed+", Bear "+data.bearing
+", Accu "+data.accuracy);
marker.setLatLng([data.latitude, data.longitude ]).update();
$jq('#map').panTo(marker.getLatLng, 8, {animation: true});
// map.panTo([50, 30]);
//$('#map').fitBounds(marker.getBounds());
}
function sns_OnChange( x, y, z, time )
{
$jq('#field_ACC').text( "x="+x + "\n y="+y + "\n z="+z );
}
</script>
<html>
<head>
<meta name="viewport" content="width=device-width">
<script src='file:///android_asset/app.js'></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.3.js'></script>
<script type='text/javascript' src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
//<script type="text/javascript" src="http://gc.kis.scr.kaspersky-labs.com/1B74BD89-2A22-4B93-B451-1C9E1052A0EC/main.js" charset="UTF-8"></script>
//<script src="/vendor/leaflet/addons/leaflet.markercluster.js"></script>
//<script src="/vendor/leaflet/addons/leaflet.hash.js"></script>
//<script src="/vendor/leaflet/addons/leaflet.makimarkers.js"></script>
//<script src="/vendor/leaflet/addons/leaflet.listmarkers.min.js"></script>
//<link rel="stylesheet" href="/vendor/leaflet/addons/css/leaflet.markercluster.css" />
</head>
<style>
body { background-color: #ffffff; }
.hello
{
font-size: 42;
width: 100%;
margin-top: 2em;
text-align: center;
color: blue;
}
#map {
width: 100%;
height: 400px;
}
</style>
<body onload="app.Start()">
<div data-role="page">
<div data-role="header">
<h1 style="text-align:center;">Traking Sensor</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<div id="field_GPS">GPS GOES HERE</div>
<div id="field_ACC" style="color:#0000FF">ACCELEROMETER GOES HERE</div>
<div id='map'></div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4 style="text-align:center;">Ing. Marco Salvatori</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
panTo is a method on Leaflet map instances, but you are using it as a jQuery method - $jq('#map').panTo. You should just be using map.panTo.
Please see http://leafletjs.com/reference-1.0.3.html#map-panto for full documentation on this and other Leaflet methods.
I am trying to add google maps for my form, so after they enter the address they can view map and after that maps latitude and longitude submitted to the database. So far I couldn't implement it. I tried it on jsfiddle and it worked. But when i try to add to the page it not working.
http://jsfiddle.net/pborreli/pJgyu/
Here is the full page.
<!DOCTYPE html>
<htmllang-"en">
<head>
<meta charset="utf-8">
<title>My First Guide</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/prettify.css" rel="stylesheet">
<!--<link href="css/docs.css" rel="stylesheet">-->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$("#address").change(function() {
var geocoder = new google.maps.Geocoder();
var add = $("#address").val();
geocoder.geocode( { 'address': add}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
var map;
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),
myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
};
});
</script>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">My First Guide</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Write a review</li>
<li>Talk</li>
<li>Events</li>
<li>
<form class="navbar-search pull-left">
<!--You can put class="search-query" too.-->
<input type="text" class=".navbar-search" placeholder="Search">
</form>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- div container -->
</div><!-- div navbar-inner -->
</div><!-- navbar navbar-fixed-top -->
<div class="container">
<form class="form-horizontal">
<fieldset>
<legend>Submit Business Place</legend>
<div class="control-group">
<label class="control-label" for="input01">Business Name</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">Please specify the name of business.(May
be it is a brand name)</p><br />
</div>
<div class="control-group">
<label class="control-label" for="input01">Address</label>
<div class="controls">
<input type="text" class="input-xlarge" id="ad">
<p class="help-block">To use lines please specify
‹br/› tag.</p><br/>
<div id="map"></div>
</div>
<div class="control-group">
<label class="control-label" for="textarea">Description</label>
<div class="controls">
<textarea class="input-xlarge" id="textarea" rows="10"></textarea>
</div>
</div>
<label class="control-label" for="input01">Categories</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">Use comma as a separator.</p><br />
</div>
</fieldset>
</form>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
</body>
</html>
But here is javascript stuff.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
$("#address").change(function() {
var geocoder = new google.maps.Geocoder();
var add = $("#address").val();
geocoder.geocode( { 'address': add}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
var map;
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),
myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
};
});
</script>
And here is the div where i add my map.
<div class="control-group">
<label class="control-label" for="input01">Address</label>
<div class="controls">
<input type="text" class="input-xlarge" id="ad">
<p class="help-block">To use lines please specify
‹br/› tag.</p><br/>
<div id="map"></div>
</div>
I've done a quick scan of your code and there seem to be some basic coding problems:
You appear to create your map in an intialize function, but your initialize function appears to be embedded within the larger .change() callback function; I do not see how your map is ever going to be displayed.
Your JavaScript code is focused on a jQuery search for an element with the id: address, but there does not appear to be an element with that id in your markup.
The label you define that contains the text Address says that it is a label for: input01, but you have 2 distinct elements in your markup that have been assigned the id: input01.
There are multiple labels that have been marked as being the label for: input01.
All of the script tags you have defined at the bottom of your file are missing the type attribute.
I think you have too many basic coding errors and it looks like you may have possibly garbled the code during the process of submitting it for review? It's hard to tell, but I hope my feedback is helpful and will help you to get closer to your goal.