DoubleTap not recognized in hammer.js after panning the element.
var singleTap = new Hammer.Tap({event:'singletap',taps:1});
var doubleTap = new Hammer.Tap({event:'doubletap',taps:2,posThreshold:3000,threshold:300});
var tripleTap = new Hammer.Tap({event:'tripletap',taps: 3 });
mcViewer.add([tripleTap, doubleTap, singleTap]);
tripleTap.recognizeWith([doubleTap, singleTap]);
doubleTap.recognizeWith(singleTap);
doubleTap.requireFailure(tripleTap);
singleTap.requireFailure([tripleTap, doubleTap]);
Related
Hello I have a code where I can see on a map latitude and longitude markers, that code I did following this tutorial I would like to know how to make each marker is linked with a Polyline
This is what I have
This is what I want
Next I leave my code
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-16.342024,-71.540503),
zoom: 4.0
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP or XML file
downloadUrl('../controlador/test1.xml', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marcadores');
Array.prototype.forEach.call(markers, function(markerElem) {
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('movil');
var hora = markerElem.getAttribute('hora');
var bateria = markerElem.getAttribute('bateria');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label,
animation: google.maps.Animation.DROP
});
var text = document.createElement('br');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
var text = document.createElement('text');
text.textContent = "MOVIL: "+type
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
var text = document.createElement('br');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
var text = document.createElement('text');
text.textContent = "HORA: "+hora
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
var text = document.createElement('br');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
var text = document.createElement('text');
text.textContent = "BATERIA: "+bateria+"%"
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=myapikey&callback=initMap">
</script>
(At top of the code below is the XML file from which the markers are created. Copy the XML data into file and name test1.xml)
Any idea how? Thanks.
You can start off by following the examples in this Polyline doc, you can draw a line on your map connecting different locations.
Here's a sample in JSFiddle that you can check, which shows 3 locations connected by a polyline.
var flightPlanCoordinates = markerPoints; //the coordinates of your markers
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates, //set the path of the polyline to the marker positions
geodesic: true, //for the polyline to follow the curvature of the earth
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 3,
icons: [
{icon: lineSymbol, offset: '25%'},
{icon: lineSymbol, offset: '50%'},
{icon: lineSymbol, offset: '75%'},
{icon: lineSymbol, offset: '100%'},
]
});
Please see full code in the sample fiddle. Hope it helps!
I am able to get the image behind the drawing canvas but when i start drawing on the canvas the image dissapear
var $ = function(id){return document.getElementById(id)};
var canvas = this.__canvas = new fabric.Canvas('c', {
isDrawingMode: true
});
ctx = canvas.getContext("2d");
var background = new Image();
background.src = "images/pic01.jpg";
// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function(){
ctx.drawImage(background,0,0);
}
That is not how you draw images using fabric.
Here is the correct way using fabric.Image.fromURL
var canvas = new fabric.Canvas('c', { isDrawingMode: true });
fabric.Image.fromURL('http://i.stack.imgur.com/UFBxY.png', function(myImg) {
canvas.add(myImg);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.4/fabric.min.js"></script>
<canvas id="c" width="300" height="300"></canvas>
I am trying to create a circle, for example, appear using something like FadeIn but in TweenJS library.
This is the code I have written so far:
var stage = new createjs.Stage("demoCanvas");
var circle1 = new createjs.Shape();
var x =circle1.graphics;
x.setStrokeStyle(0.14, 'round', 'round');
x.beginStroke(('#000000'));
circle1.graphics.drawCircle(0, 0,10);
x.endStroke();
x.endFill();
circle1.x = 250;
circle1.y = 250;
stage.addChild(circle1);
circle1.addEventListener("tick", function(){
createjs.Tween.get(circle1).to({alpha: 1,visible:true},1000);
});
You can not put the tweenJs inside de event Tick, because they will fire every tick.
I made an example: https://jsfiddle.net/nywsy1pp/
var stage = new createjs.Stage("canvas");
createjs.Ticker.addEventListener("tick", tick);
var circle = new createjs.Shape(
new createjs.Graphics().f("#f00").dc(0,0,100)
).set({x:100,y:100});
circle.alpha = 0;
stage.addChild(circle);
createjs.Tween.get(circle).to({alpha: 1},5000);
function tick() {
stage.update();
}
So I have a functioning code (example here) to create a split screen of half google map Hybrid view and then when you click somewhere on that map (left side) then (right side) opens street view for that location.
I want to have a marker on the hybrid map side that when clicked on opens an info window on that side and then the street view for that location on the right side of the screen. But I can't seem to figure out how to code in that marker to open as an info window/bubble on the left side map?
Here's the code currently (including the mistake I've made as it doesn't work):
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var myCenter = new google.maps.LatLng(42.315126 , -72.63455);
var DoYouFeel = new google.maps.LatLng(42.315148 , -72.634429)
var sv = new google.maps.StreetViewService();
var panorama;
function initialize() {
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));
// Set up the map
var mapOptions = {
center: myCenter,
zoom: 16,
mapTypeId: google.maps.MapTypeId.HYBRID,
streetViewControl: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
//Set up the markers
var marker = new google.maps.Marker({
position: DoYouFeel,
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function() {
bubble = new google.maps.InfoWindow({
content: '<div id="mydiv"><br><embed src="Do You Feel....mov" width="720" height="576" align="center"><br><br></div>'
})
bubble.open(map, marker);
});
// getPanoramaByLocation will return the nearest pano when the
// given radius is 50 meters or less.
google.maps.event.addListener(map, 'click', function(event) {
sv.getPanoramaByLocation(event.latLng, 50, processSVData);
});
}
function processSVData(data, status) {
if (status == google.maps.StreetViewStatus.OK) {
var marker = new google.maps.Marker({
position: data.location.latLng,
map: map,
title: data.location.description
});
panorama.setPano(data.location.pano);
panorama.setPov({
heading: 270,
pitch: 0
});
panorama.setVisible(true);
google.maps.event.addListener(marker, 'click', function() {
var markerPanoID = data.location.pano;
// Set the Pano to use the passed panoID
panorama.setPano(markerPanoID);
panorama.setPov({
heading: 270,
pitch: 0
});
panorama.setVisible(true);
});
} else {
alert('Street View data not found for this location.');
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
OK so ive been playing with this code for a bit, it basicly adds multiple images from DOM to canvas by dragging. But i cant seem to remove the image properly from the canvas on click/ tap event listener.
window.onload = function(){
var stage = new Kinetic.Stage({
container : "cantainer",
width : 475,
height : 150
});
var layer = new Kinetic.Layer();
stage.add(layer);
var con = stage.getContainer();
var dragSrcEl = null;
//image
document.getElementById("yoda").addEventListener('dragstart',function(e){
dragSrcEl = this;
});
document.getElementById("woman").addEventListener('dragstart',function(e){
dragSrcEl = this;
});
document.getElementById("nature").addEventListener('dragstart',function(e){
dragSrcEl = this;
});
document.getElementById("srce").addEventListener('dragstart',function(e){
dragSrcEl = this;
});
document.getElementById("game").addEventListener('dragstart',function(e){
dragSrcEl = this;
});
document.getElementById("dog").addEventListener('dragstart',function(e){
dragSrcEl = this;
});
document.getElementById("house").addEventListener('dragstart',function(e){
dragSrcEl = this;
});
con.addEventListener('dragover',function(e){
e.preventDefault(); //#important
});
//insert image to stage
con.addEventListener('drop',function(e){
var image = new Kinetic.Image({
x: 30,
y: 20,
draggable : true
});
layer.add(image);
imageObj = new Image();
imageObj.src = dragSrcEl.src;
imageObj.onload = function(){
image.setImage(imageObj)
layer.draw()
};
});
}
You can add a click listener on each of your image objects and remove any image that's clicked.
image.on("click",function(){
this.remove(); // or this.destroy();
layer.draw();
});