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.
Related
Can someone help me put a nearby search on leaflet? Currently I only have Geocoding search and I want that when I search a place I can see nearby shops, medical centers, eatery, etc. within a range.
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.4.0/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.4.0/dist/leaflet.js"
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
crossorigin=""></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet#2.2.4/dist/esri-leaflet.js"
integrity="sha512-tyPum7h2h36X52O2gz+Pe8z/3l+Y9S1yEUscbVs5r5aEY5dFmP1WWRY/WLLElnFHa+k1JBQZSCDGwEAnm2IxAQ=="
crossorigin=""></script>
<!-- Load Esri Leaflet Geocoder from CDN -->
<link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder#2.2.14/dist/esri-leaflet-geocoder.css"
integrity="sha512-v5YmWLm8KqAAmg5808pETiccEohtt8rPVMGQ1jA6jqkWVydV5Cuz3nJ9fQ7ittSxvuqsvI9RSGfVoKPaAJZ/AQ=="
crossorigin="">
<script src="https://unpkg.com/esri-leaflet-geocoder#2.2.14/dist/esri-leaflet-geocoder.js"
integrity="sha512-uK5jVwR81KVTGe8KpJa1QIN4n60TsSV8+DPbL5wWlYQvb0/nYNgSOg9dZG6ViQhwx/gaMszuWllTemL+K+IXjg=="
crossorigin=""></script>
<style>
#mapid{
width: 100%;
height: 400px;
}
</style>
<body>
<div id="wrapper">
<% include ../.././partials/nav.ejs %>
<ul class="breadcrumb">
<li>Home</li>
<li class="active">Dashboard</li>
</ul>
<div id="mapid"></div>
<script>
var mymap = L.map('mapid').setView([37.0902, -95.7129], 4);
L.tileLayer('https://tiles.wmflabs.org/hikebike/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(mymap);
var searchControl = L.esri.Geocoding.geosearch().addTo(mymap);
var results = L.layerGroup().addTo(mymap);
searchControl.on('results', function(data){
results.clearLayers();
for(var i =data.results.length -1; i>=0; i--){
results.addLayer(L.marker(data.results[i].latlng));
}
})
</script>
This is the line of code I currently have.
I'm a absolute beginner to Tizen. I want to make a little app. For this app, I want to add "More Options". It's not working and I really don't know. I followed each step in the documentation (I also followed this: https://developer.tizen.org/ko/development/guides/web-application/user-interface/tizen-advanced-ui/applications-circular-ui/implementing-more-options) but this didn't help me either. Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>List</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<link rel="stylesheet" href="css/more_options.css">
</head>
<body>
<div id="moreoptionsPage" class="ui-page">
<header class="ui-header ui-has-more">
<h2 class="ui-title">Einkaufsliste</h2>
<button type="button" class="ui-more ui-icon-overflow">More Options</button>
</header>
<div class="ui-content">
<ul class="shopping_list ul-listview">
</ul>
</div>
<!--Rectangular profile-->
<div id="moreoptionsPopup" class="ui-popup" data-transition="slideup">
<div class="ui-popup-header">Options</div>
<div class="ui-popup-content">
<ul class="ui-listview">
<li>Hinzufügen</li>
<li>Entfernen</li>
</ul>
</div>
</div>
<!--Circular profile-->
<div id="moreoptionsDrawer" class="ui-drawer" data-drawer-target="#moreoptionsPage" data-position="right" data-enable="true" data-drag-edge="1">
<div id="selector" class="ui-selector">
<div class="ui-item add-icon" data-title="Hinzufügen"></div>
<div class="ui-item remove-icon" data-title="Entfernen"></div>
</div>
</div>
</div>
</body>
<script src="lib/tau/wearable/js/tau.min.js"></script>
<script src="js/circle-helper.js"></script>
<script src="js/app.js"></script>
<script src="js/lowBatteryCheck.js"></script>
<script src="js/more_options.js"></script>
</html>
here's my more_options.js:
(function() {
var page = document.querySelector('#moreoptionsPage'),
popup = page.querySelector('#moreoptionsPopup'),
handler = page.querySelector('.ui-more'),
drawer = page.querySelector('#moreoptionsDrawer'),
selector = page.querySelector('#selector'),
helper,
clickHandlerBound;
function clickHandler(event) {
alert("calling");
if (tau.support.shape.circle) {
tau.openPopup(popupCircle);
} else {
tau.openPopup(popup);
}
}
page.addEventListener('pagebeforeshow', function() {
if (tau.support.shape.circle) {
helper = tau.helper.DrawerMoreStyle.create(drawer, {
handler: '.drawer-handler'
});
} else {
/* Shape is square */
clickHandlerBound = clickHandler.bind(null);
handler.addEventListener('click', clickHandlerBound);
}
});
page.addEventListener('pagebeforehide', function() {
if (tau.support.shape.circle) {
handler.removeEventListener('click', clickHandlerBound);
helper.destroy();
}
});
})();
and here's my more_options.css:
#moreoptionsDrawer {
display: none;
}
#media all and (-tizen-geometric-shape: circle) {
#moreoptionsDrawer {
display: block;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 100%;
}
#moreoptionsPopup {
display: none;
}
}
I get errors when using tau.helper.DrawerMoreStyle.create and in the examples on Github it is not used at all. Check it out:
https://github.com/Samsung/TAU/tree/tau_1.2/examples/wearable/UIComponents/contents/assistviews
Im working on a webpage that should look like this: https://imgur.com/a/eW3gK
And I'm trying to use bootstrap grids but the map is just not resizing and shows up right below the columns and it's not working.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="~/css/custom.css">
<script src="~/js/googleMap.js"></script>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div class="row">
<div class="col-md-6">Google Maps</div>
</div>
<div class="row">
<div class="col-md-6">Contact Information</div>
<div class="col-md-6">
<div id="map"></div>
</div>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCQKR41AqiPXn-2WfLS-giuXPLWpnFxLjk&callback=initMap"></script>
</body>
</html>
CSS
#map {
width: 100%;
height: 400px;
background-color: grey;
}
JS
function initMap() {
var uluru = { lat: 51.957244, lng: 4.570751 };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
How can I use the Google Maps with the Bootstrap grid according to the mockup?
Check this working example http://jsbin.com/capetay/edit?output
Here is the updated html, Map and the Contact Info container should be in the same row
<div class="row body">
<div class="col-sm-6">
<div id="map"></div>
</div>
<div class="col-sm-6 text-center">
<h4>Contact Information</h4>
<ul>
<li>ABC</li>
</ul>
</div>
</div>
Here is the code snippet as well: (try running in full screen)
function initMap() {
var uluru = { lat: 51.957244, lng: 4.570751 };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
#map {
width: 100%;
height: 400px;
background-color: grey;
}
.row.body > div {
padding: 30px;
border: 1px solid
}
.with-border h3 {
border: 1px solid black;
max-width: 300px;
margin: auto auto 20px auto;
padding: 15px;
}
ul {
list-style: none;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<title>Google Maps API in Bootstrap</title>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div class="row">
<div class="col-md-12 text-center with-border">
<h3>Google Maps</h3>
</div>
</div>
<div class="row body">
<div class="col-sm-6">
<div id="map"></div>
</div>
<div class="col-sm-6 text-center">
<h4>Contact Information</h4>
<ul>
<li>ABC</li>
</ul>
</div>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKQX3cyZ7pVKmBwE8wiowivW9qH62AVk8&callback=initMap"></script>
</body>
</html>
I'm having a problem with a D3 chart. The data won't load, and the console gives an error
"(index):54 Uncaught TypeError: nv.addGraph is not a function(…)".
<!DOCTYPE html>
<meta charset="utf-8">
<title>Doodsoorzaak door huidkanker </title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
<!-- <link href="css/d3.min.css" rel="stylesheet" type="text/css"> -->
<link rel="stylesheet" href="css/colors.css" />
<link rel="stylesheet" href="css/height.css" />
<link rel="stylesheet" href="css/cssstyles.css" />
</script>
<style>
text {
font: 12px sans-serif;
}
svg {
display: block;
}
html, body, #chart1, svg {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<container>
</ul>
<header>
<nav class="col-xs-12 h300" class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid">
<center><img id="logo" src="img/Logo.png" width="auto" height="auto" /></center>
<ul id="menu">
<center> <h4> De laatste jaren is het aantal sterfte gevallen door huidkanker toegenomen. Vooral 60-plussers sterven het vaakst door huidkanker.</h4> </center>
</ul>
</div>
</nav>
</header>
<body>
<div id="chart">
<svg></svg>
</div>
<script type="text/javascript">
nv.addGraph(function() {
var chart = nv.models.discreteBarChart()
.x(function(d) { return d.label }) //Specify the data accessors.
.y(function(d) { return d.value })
.staggerLabels(true) //Too many bars and not enough room? Try staggering labels.
.tooltips(false) //Don't show tooltips
.showValues(true) //...instead, show the bar value right on top of each bar.
.transitionDuration(350)
;
d3.select('#chart svg')
.datum(exampleData())
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
//Each bar represents a single discrete quantity.
function exampleData() {
return [
{
key: "Cumulative Return",
values: [
{
"label" : "Infectieuze en parasitaire ziekten" ,
"value" : 3104
} ,
{
"label" : "Ziekten van hart en vaatstelsel" ,
"value" : 37862
} ,
{
"label" : "Uitwendige oorzaken v. ziekte en sterfte" ,
"value" : 6813
}
]
}
]
}
</script>
</body>
<footer>
<section class="col-xs-12 h100">
<center>
<p>
<br><br>
Copyright Tufan Ugurel
</p>
</center>
</section>
<footer>
</container>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script href="js/d3.min.js"></script>
This is the demo where I got the code from:
http://nvd3.org/examples/discreteBar.html
I hope it's not a stupid thing! Thanks for helping
It seems your referencing NVD3 but only declaring D3. You need to include both on top if you're using NVD3, which is a package on top of D3.
I am using Intel XDK to try and get the google maps displayed on the screen at the location set in Intel XDK. However, I am having issues with actually displaying the map on the screen, after spending many hours researching trying to figure out why it isn't working I have hit a brick wall and I have no idea how to proceed from here.
So any help will be greatly appreciated to point me in the right direction, thanks in advance.
Index.html class
<!DOCTYPE html>
<html>
<!--
* Please see the included README.md file for license terms and conditions.
-->
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jqm/jquery.mobile-min.css">
<title>Blank App Designer Cordova Web App Project Template</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<!-- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1"> -->
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1, maximum-scale=2"> -->
<style>
100% ; } #viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
#-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; } #viewport { user-zoom: fixed ; min-zoom: 100% ; }
</style>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<!-- <script src="lib/mc/hammer.js"></script> -->
<!-- <script src="lib/ft/fastclick.js"></script> -->
<script src="cordova.js" id="xdkJScordova_"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<!-- <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>-->
<script src="https://maps.googleapis.com/maps/api/js?key=MyApiKey&callback=initMap"></script>
<script src="js/app.js"></script>
<script src="js/Maps.js"></script>
<script type="application/javascript" src="lib/jquery.min.js"></script>
<script type="application/javascript" src="jqm/jquery.mobile-min.js" data-ver="0"></script>
<script type="application/javascript" src="js/index_user_scripts.js"></script>
<script type="application/javascript" src="sidebar/js/hammer.js"></script>
<script type="application/javascript" src="sidebar/js/jquery.hammer.js"></script>
<script type="application/javascript" src="sidebar/js/swipe-hammer.js"></script>
<script type="application/javascript" src="sidebar/js/sidebar.js"></script>
<script type="application/javascript" src="xdk/ad/jqm_subpage.js"></script>
</head>
<body id="afui" class="v2" onload="navigator.geolocation.getCurrentPosition(onSuccess, onError)">
<!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! -->
<!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work above -->
<!-- <script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglongfunkynumberfromthexdkstesttab"></script> -->
<div class="upage vertical-col left" id="mainpage" data-role="page"><a class="widget uib_w_2 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" id="maps" href="#Maps" data-transition="fade">Maps</a>
<a class="widget uib_w_3 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" id="gps">GPS</a>
</div>
<div class="upage" id="Maps" data-role="page" >
<div class="upage-outer" >
<div class="upage-content ac0 content-area vertical-col left" id="page_70_37"><a class="widget uib_w_4 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button">Button</a>
<div id="map" style="height: 500px; width: 300px; margin: 0; padding: 0;">
</div>
<div data-role="footer" data-position="fixed" class="container-group inner-element uib_w_6" data-uib="jquery_mobile/footer" data-ver="0">
<h1>footer</h1>
<div class="widget-container wrapping-col single-centered"></div>
<div class="widget-container content-area horiz-area wrapping-col left"></div>
<div class="widget-container content-area horiz-area wrapping-col right"></div>
</div>
</div>
<div class="outer-element uib_w_5 uib_crossbar botbar fixed bar-bg thumb-bg bar-gutter" data-uib="layout/bottom_crossbar" data-ver="1" data-anim="{'style':'overlap', 'v':400, 'side':'bottom', 'dur':500}">
<div class="sidebar-content content-area vertical-col">
</div>
</div>
</div>
</body>
</html>
App.js
var latitude;
var longitude;
var onSuccess = function(position) {
alert(
latitude = position.coords.latitude;
longitude = position.coords.longitude;
};
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
var locationOptions = {
maximumAge: 10000,
timeout: 6000,
enableHighAccuracy: true
};
Maps.js
function initMap() {
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
var map = new google.maps.Map(document.getElementById('map'),{
zoom: 16,
center: new google.maps.LatLng(latitude,longitude)//{latitude, longitude}
});
//var marker = new google.maps.marker({position: LatLng, map:map});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('right-panel'));
/* // stops the text directions when un commented
var control = document.getElementById('floating-panel');
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
*/
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', onChangeHandler);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var start = new google.maps.LatLng(latitude,longitude)//{latitude, longitude};
var end = '10 Downing Street, Downing Street, London';
directionsService.route({
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
Index_User_Scripts
/*jshint browser:true */
/*global $ */(function()
{
"use strict";
/*
hook up event handlers
*/
function register_event_handlers()
{
/* button Button */
$(document).on("click", ".uib_w_1", function(evt)
{
/* your code goes here */
});
/* button #maps */
$(document).on("click", "#maps", function(evt)
{
/*global activate_page */
activate_page("#Maps");
initMap();
//calculateAndDisplayRoute();
});
/* button #gps */
$(document).on("click", "#gps", function(evt)
{
navigator.geolocation.getCurrentPosition(onSuccess, onError);
});
}
document.addEventListener("app.Ready", register_event_handlers, false);
})();
You need to have permission to use Google API. I used the Google Maps widget and tried with two locations, Statue of Liberty and Taj Mahal. I was able to make it work in emulator as well as on the Intel XDK Preview apps on my phones. Details are in this post:
http://hodentekmobile.blogspot.com/2016/07/intel-xdk-controls-6-using-google-map.html
Here are the settings I used for the widget: