I have 48 coordinates/markers in 1 column/row.
When I double-click in that row and open preview KML link, it shows 48 coordinates.
But when I create my own map and show that marker using fusion tables and SQL queries,
the map only shows 3 markers.
Why is the output different in Fusion tables versus my own map?
Or, is there any technical limitation when using Google Fusion and Map APIs
Thanks Guys
------------------EDIT-------------------
in coordinate column [Koordinat Pohon] in rowid 17001 actualy it has 48 coordinate but it only show 3 coordinate in my own map.
TABLE ID : 1O5aIPnHBCimWsYg0gOXIeRH6eL-6byD95Nd2pdXR
ROW ID : 17001
<!DOCTYPE html>
<?php
$id=$_GET['id'];
?>
<input type="hidden" value="<?php echo $id;?>" id="rowid"/>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Fusion Tables queries</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var rowid=document.getElementById("rowid").value;
var map;
function initialize() {
var centerMAP = new google.maps.LatLng(-7.402438, 110.446957);
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: centerMAP,
zoom: 16,
mapTypeId: google.maps.MapTypeId.SATELLITE
});
var layer = new google.maps.FusionTablesLayer({
query: {
select:"Koordinat Pohon",
from: "1O5aIPnHBCimWsYg0gOXIeRH6eL-6byD95Nd2pdXR",
where: "rowid = "+rowid
}
});
layer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
<?php
?>
When I use your code I don't see 3(as mentioned) or 48(as expected) markers, I see 10 markers.
The reason may be found at
https://developers.google.com/maps/documentation/javascript/fusiontableslayer#limits
When looking at the map, you may notice: The ten largest-area components of a multi-geometry are shown.
The KML is a multi-geometry, the number of features that will be shown is limited to 10
What you can do:
store only single points in a column
ommit the FusionTablesLayer and instead request the geometry via AJAX and create the markers on your own
Related
I have a webpage that offers clients to perform filter operations.
See image of my interface here. The user can filter results based on the countries in the squares.
Everything is working fine, my view updates perfectly when user filters.
However, I cannot find a solution to update the map on filter, like I am updating the content.
I am wondering how to ask Mapbox to listen for click event outside of the map, or to stay updated with what is filered on the interface.
It's the same example than this, except that instead of having to click on the menu inside the map to filter the results on the map, I want the results on the map to be automatically filtered based on my other filter (the one with square regions of the world, shown on my interface
here
Thanks!
You can use the map variable to trigger map changes from outside the map:
mapboxgl.accessToken = 'pk.eyJ1Ijoiam93ZXQiLCJhIjoiY2wzcTlhOTc0MTJ5aDNwbDJlNG5ncDAzZiJ9.PiDzh6BzO92pueGLxv1w5g';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-87.661557, 41.893748],
zoom: 10.7
});
var flyToButton = document.getElementById('flyToButton');
flyToButton.addEventListener('click', handleZoomButtonClick);
function handleZoomButtonClick() {
map.flyTo({
center: [-74.5, 40],
essential: true
});
}
var addLayerButton = document.getElementById('addLayerButton');
addLayerButton.addEventListener('click', handleAddLayerButton);
function handleAddLayerButton() {
map.addSource('urban-areas', {
'type': 'geojson',
'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/ne_50m_urban_areas.geojson'
});
map.addLayer({
'id': 'urban-areas-fill',
'type': 'fill',
'source': 'urban-areas',
'layout': {},
'paint': {
'fill-color': '#f08',
'fill-opacity': 0.4
}
});
}
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#flyToButton {
position: absolute;
}
#addLayerButton {
position: absolute;
top: 30px
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Points on a map</title>
<meta name='viewport' content='width=device-width, initial-scale=1' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.8.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.8.1/mapbox-gl.css' rel='stylesheet' />
</head>
<body>
<div id='map'></div>
<button id="flyToButton">Fly to</button>
<button id="addLayerButton">Add layer</button>
</body>
</html>
How you can implement the filter functionality depends on the type of your data. But probably the following mapbox example will help you: Filter features within map view
Using paperjs if I rotate p.view.rotate(update.deg); it is working fine with out issue.
If I refresh the page and call the above function p.view.rotate(update.deg); onload then the view is different. it is displaying a slight zoom.
default image rotation
After reloading the page I am rotating p.view with the previous value. then it is displaying as
Here is my js file
https://github.com/muralibobby35/annotateJs/blob/master/opentok-whiteboardnew.js
I was not able to run your code but I would suggest, for an easier project state preservation, that you use transformations (scale, rotation, ...) through layer rather than through view.
That would allow you to easily export/import your project whithout having to manually restore state by calling view.rotate() like methods on window reload.
Here is a fiddle demonstrating the solution.
It simulates window reload by exporting/importing a project from one canvas to another empty one.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Debug Paper.js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-full.min.js"></script>
<style>
html,
body {
margin : 0;
overflow : hidden;
height : 100%;
}
main {
display : flex;
height : 100vh;
}
canvas {
flex : 1;
border : 1px solid;
}
</style>
</head>
<body>
<main>
<canvas id="canvas1" resize></canvas>
<canvas id="canvas2" resize></canvas>
</main>
<script type="text/paperscript" canvas="canvas1">
// draw a square
var rectangle = new Path.Rectangle({
from: view.center - 50,
to: view.center + 50,
fillColor: 'orange'
});
// rotate layer rather than view so transformations are persisted when exporting
project.activeLayer.rotate(30);
// export datas and store them in global variable just for the demo, to simulate a page reload
window.exportedDatas = project.exportJSON();
</script>
<script type="text/paperscript" canvas="canvas2">
// import the exported datas
project.importJSON(window.exportedDatas);
// see that rotation is preserved
</script>
</body>
</html>
I took the Github xAPI script for "playing a youtube video" and tried to modify it to show two videos instead of one. Ultimately I would like to list five or six videos in this page. Unfortunately I cannot get it to show more than one video at a time. Instead it only shows one video and that is the second one that I have listed. Can someone tell me how I can modify this code to list more than one video? Also, I changed my LRS credentials before posting this question for obvious reasons. Many thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<meta name="description" content="A shorthand syntax for communicating xAPI Statements">
<meta name="author" content="ADL">
<link rel="icon" href="favicon.ico">
<title>xAPI Youtube Video Tracking</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<section class="container">
<div class="page-header">
<h1 class="text-primary"><i class="fa fa-youtube"></i> xAPI Youtube Video Tracking</h1>
<h3 class="text-muted">Send Youtube Video interactions to an LRS with xAPI</h3>
</div>
<div class="row">
<div class="form-group col-md-12">
<div id="player"></div>
<div id="player2"></div>
<p>This example uses minimal javascript and the youtube iframe API.</p>
<p>Statements are built with xapi-youtube-statements.js and dispatched to an LRS with xapiwrapper.min.js using a custom ADL.XAPIYoutubeStatements.onStateChangeCallback function.</p>
<p>You can view statements with the statement viewer.</p>
</div><!-- .col-md-12 -->
</div><!-- .row -->
</section><!-- .container -->
<script type="text/javascript" src="lib/xapiwrapper.min.js"></script>
<script type="text/javascript" src="src/xapi-youtube-statements.js"></script>
<script>
var video = "6hwHKOYCYL4"; // Change this to your video ID
var videoName = "Microlearning vs Traditional Learning";
var video2 = "SUJkBCHB4vQ"; // Change this to your video ID
var videoName2 = "Micro Learning is a BIG deal";
// "global" variables read by ADL.XAPIYoutubeStatements
ADL.XAPIYoutubeStatements.changeConfig({
"actor": {"mbox":"mailto:john.menken#syniverse.com", "name":"John M."},
"videoActivity": {"id":"https://www.youtube.com/watch?v=" + video, "definition":{"name": {"en-US":videoName}} }
});
ADL.XAPIYoutubeStatements.changeConfig({
"actor": {"mbox":"mailto:john.menken#syniverse.com", "name":"John M."},
"videoActivity": {"id":"https://www.youtube.com/watch?v=" + video2, "definition":{"name": {"en-US":videoName2}} }
});
function initYT() {
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: video,
playerVars: { 'autoplay': 0 },
events: {
'onReady': ADL.XAPIYoutubeStatements.onPlayerReady,
'onStateChange': ADL.XAPIYoutubeStatements.onStateChange
}
});
}
var player2;
function onYouTubeIframeAPIReady() {
player2 = new YT.Player('player2', {
height: '390',
width: '640',
videoId: video2,
playerVars: { 'autoplay': 0 },
events: {
'onReady': ADL.XAPIYoutubeStatements.onPlayerReady,
'onStateChange': ADL.XAPIYoutubeStatements.onStateChange
}
});
}
initYT();
// Auth for the LRS
var conf = {
"endpoint" : "https://www2.test.com/test/ScormEngineInterface/TCAPI/",
"auth" : "Basic " + toBase64("test:test"),
};
ADL.XAPIWrapper.changeConfig(conf);
/*
* Custom Callbacks
*/
ADL.XAPIYoutubeStatements.onPlayerReadyCallback = function(stmt) {
console.log("on ready callback");
}
// Dispatch Youtube statements with XAPIWrapper
ADL.XAPIYoutubeStatements.onStateChangeCallback = function(event, stmt) {
console.log(stmt);
if (stmt) {
stmt['timestamp'] = (new Date()).toISOString();
ADL.XAPIWrapper.sendStatement(stmt, function(){});
} else {
console.warn("no statement found in callback for event: " + event);
}
}
</script>
</body>
</html>
You are overwriting the onYouTubeIframeAPIReady callback immediately upon setting the first one, so that when the iframe is ready the first callback is no longer the value of that function. (Have to think asynchronously.) That function should only ever get called once, and should only have a single definition. To make this work, you need to move the instantiation of player2 into the onYouTubeIframeAPIReady function. (This portion is a duplicate of onYouTubeIframeAPIReady called once but multiple videos needed on a page)
Also note that ADL's wrapper is effectively using a singleton for communications with the LRS, so you are going to get all of your statements for both videos with the activity as the object from the second video (because it is the later call to changeConfig). I don't see a way around this other than to wrap their state change handler with your own function that calls changeConfig each time the event occurs, and even then you'd have the potential for a race condition.
I'm trying to add a D3.js liquid fill gauge (http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6) in a Leaflet popup without succeeding.
Here is my code:
var map = L.map('map').setView([47.261491,-1.549244], 16);
var dataCenterIcon = L.icon({
iconUrl: 'images/datacenter-icon.png',
iconSize: [20, 20] // size of the icon
});
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
d3.json("data/datacentersSigma.json",function (data){L.geoJson(data,{
pointToLayer: function (feature,latlng){return L.marker(latlng,{icon:dataCenterIcon});},
onEachFeature : function (feature, layer) {
var div = $('<div class="popupGraph" style="width: 200px; height:200px;"><svg id="gauge"/></svg></div>')[0];
var popup = L.popup().setContent(div);
layer.bindPopup(popup);
// var svg = d3.select(div).select("svg").attr("width", 200).attr("height", 200);
// svg.append("rect").attr("width", 150).attr("height", 150).style("fill", "lightBlue");
loadLiquidFillGauge("gauge",55);
}}).addTo(map);});
d3.json("data/trajetsFibreDCSigma.json",function (data){
L.geoJson(data, {
style: function(feature){return {color : feature.properties.stroke};}
}).addTo(map);
});
<!DOCTYPE html>
<html>
<head>
<title>Yepee</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/leaflet.css" />
<script src="js/leaflet.js"></script>
<script src="js/d3.js"></script>
<script src="js/liquidFillGauge.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px"></div>
<!-- <svg id="gauge"/>-->
<script src="js/yepee.js" type="text/javascript"></script>
</body>
</html>
When I'm trying to display my map, I can't even see the markers and I've got this error:
TypeError: d3_window(...) is null
I can also load a liquid fill gauge on a svg element which isn't on my map.
I've tried to add just a simple svg square in the popup by following an example (http://jsfiddle.net/2XfVc/132/) and it worked.
The goal is to put that gauge in the leaflet popup and despite searching for a long time, I can't find what the problem is.
Thank you in advance for your answers.
You're trying to initialize the gauge when the actual SVG element isn't added to the DOM yet. Once the popup opens, the content gets added to the DOM, that's when you should initialize the gauge.
// Have same content for all your popups
var content = '<svg id="gauge" width="100" height="100"></svg>'
// Set markers with popup, include content and set value as option
new L.Marker([0, -45]).bindPopup(content, {'value': 33}).addTo(map)
new L.Marker([0, 45]).bindPopup(content, {'value': 66}).addTo(map)
// Catch popup open event
map.on('popupopen', function (e) {
// Initialize the gauge with current popup option's value
loadLiquidFillGauge('gauge', e.popup.options.value);
})
Demo on Plunker: http://embed.plnkr.co/2hMjBt/preview
I've created a PHP file named maps.php that contains a simple Google Maps API that works on the iPad's default browser.
But when I call it using Ajax, the page loads itself but not the map. If I open the link in a desktop or mobile browser it works fine.
You can show google maps by accessing google's javascript api.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Or you can load any php page directly in webView by using window.location="http://www.mourady.me/alhokair/iphone/maps.php" javascript method, as your php page contain google map in canvas tag, you can not load that in div through ajax call, better way used iframe tag to the job.
<html>
<body onload="bodyload()">
<button onclick="bodyload()">Ajax call</button>
<iframe id="mapDiv" height=500px width=700px src="http://www.mourady.me/alhokair/iphone/maps.php"></iframe>
</body>
</html>