Ik ben bang dat jullie hier weinig aan hebben, maar als het jullie zou helpen om een idee te krijgen van m'n probleem, indien andere css en js files gewenst zijn, voeg ik ze wel toe.
Ook heb ik al geprobeer overal touchend bij te zetten, (kwam ik tegen bij het googlen), maar dat helpt helaas ook niet. Uiteraard cache enz. geleegd
....on("click touchend",...
De links waar ik het over heb zijn iig:
...
$("#closePlotInfo").on("click", function (event){
event.preventDefault();
$("#plotInfo").hide();
});
$("#OpenInfra").on("click", function() {
$('#infra').submit();
});
...
map.css
#clearzoom {
position: fixed;
top: 60px;
left: 10px;
z-index: 999;
}
.mapTooltip {
position : absolute;
background-color : #fff;
moz-opacity:0.70;
opacity: 1;
filter:alpha(opacity=100);
border-radius:10px;
padding : 10px;
z-index: 1000;
max-width: 200px;
display:none;
color:#343434;
margin-top: -50px;
}
.maparea {
overflow: hidden;
}
.map {
opacity: 0.7;
filter:alpha(opacity=70);
}
.zoomIn, .zoomOut {
display: none;
}
#plotInfo {
display: none;
position: absolute;
top: 5px;
left: 5px;
min-height: 150px;
width: 250px;
color:#fff;
overflow:auto;
margin:10px;
padding: 5px;
padding-top: 35px;
z-index: 99999;
}
#plotInfo h2 {
position: absolute;
top: -15px;
left: 0px;
width: 100%;
background-color: #000066;
color: #ffffff;
font-size: 16px;
height: 30px;
line-height: 30px;
text-align: center;
}
#plotInfo span {
color: white;
}
#OpenInfra {
position: absolute;
bottom: 10px;
right: 10px;
padding-left: 35px;
cursor: pointer;
height: 30px;
background-repeat: no-repeat;
background-size: 30px 30px;
line-height: 30px;
}
#OpenInfra.red {
background-image: url('../imgs/icon_infra_red.png');
}
#OpenInfra.orange {
background-image: url('../imgs/icon_infra_orange.png');
}
#OpenInfra.green {
background-image: url('../imgs/icon_infra_green.png');
}
map.js
$(function() {
//The map
var tPlots = {};
var tLinks = {};
var zoomLevel = 0;
var xMap = 0;
var yMap = 0;
var clickedPlot = false;
$.getJSON("/map/getPlots", function (json) {
// Set the variables from the results array
$.each(json, function(index, d){
var plot = {};
plot.title = d.title;
plot.latitude = d.latitude;
plot.longitude = d.longitude;
plot.attrs = {
fill: d.fill
};
plot.tooltip= {
content: d.tooltip
};
plot.myText = d.myText;
plot.status = d.status;
plot.locationID = d.location;
tPlots[d.title] = plot;
});
});
$.getJSON("/map/getLinks", function (json) {
// Set the variables from the results array
$.each(json, function(index, d){
var link = {};
link.between = [d.from,d.to];
link.tooltip = {
content: d.tooltip
};
link.attrs = {
stroke: d.strokeColor
};
tLinks[d.name] = link;
});
});
setTimeout(function(){
$.fn.mapael.defaultOptions.map.defaultArea.attrsHover = {};
$.fn.mapael.defaultOptions.map.defaultPlot.attrsHover = {};
$.fn.mapael.defaultOptions.map.defaultLink.attrsHover = {};
$(".maparea").mapael({
map: {
name: "world_countries",
zoom: {
enabled: true,
touch: true,
maxLevel: 450,
"animDuration": 0,
},defaultPlot: {
size: 5,
attrs: {
stroke: "#ccc",
"stroke-width" : 1
},
eventHandlers: {
click: function (e, id, mapElem, textElem, elemOptions) {
if (typeof elemOptions.myText != 'undefined') {
if(elemOptions.myText !== '') {
$('#plotInfo h2').html(elemOptions.title);
$('.plotInfo').html(elemOptions.myText);
var statusImg = '/views/layout/imgs/icon_infra_' + elemOptions.status + '.png';
$('#OpenInfra').removeClass('red');
$('#OpenInfra').removeClass('orange');
$('#OpenInfra').removeClass('green');
$('#OpenInfra').addClass(elemOptions.status);
$('#plotInfo').show();
$('#infraLocation').val(elemOptions.locationID);
clickedPlot = true;
} else {
clickedPlot = false;
}
} else {
clickedPlot = false;
}
}
}
},defaultLink: {
factor: 0.1,
attrs: {
"stroke-width": 2
}
},defaultArea: {
attrs: {
fill: "#000066",
stroke: "#fff",
"stroke-width": 0.1,
opacity: 0.8
}
},
afterInit: function ($self, paper, areas, plots, options) {
$('.mapcontainer .map').unbind("resizeEnd");
//var screenW = $(window).width();
//var screenH = $(window).height() - $("#header").height() - $("#hostgroup_location").height() - $("#footer").height() + 10;
var screenW = $("#content").width();
var screenH = $("#content").height();
paper.setSize(screenW, screenH);
paper.canvas.setAttribute('preserveAspectRatio', 'none');
$(window).on('resize', function () {
//var screenW = $(window).width();
//var screenH = $(window).height() - $("#header").height() - $("#hostgroup_location").height() - $("#footer").height() + 10;
var screenW = $("#content").width();
var screenH = $("#content").height();
paper.setSize(screenW, screenH);
paper.canvas.setAttribute('preserveAspectRatio', 'none');
}).trigger('resize');
}
},
plots: tPlots,
links: tLinks
});
}, 200);
setTimeout(function(){
$(".maparea").trigger('zoom', {
level: 1
});
$(".maparea").trigger('zoom', {
level: 0
});
}, 210);
$('#clearzoom').on('click', function() {
$(".maparea").trigger('zoom', {
level: 0
});
});
$(".maparea").on("zoom", function(e, zoomOptions) {
if(zoomOptions.level >= 0) {
$(".maparea").trigger("update", [{
map: {
defaultPlot: {
size: 25 / (1 + (0.25 * zoomOptions.level)),
attrs: {
"stroke-width": 1 / (1 + (0.25 * (zoomOptions.level + 0.01)))
}
},defaultLink: {
attrs: {
"stroke-width": 2 / (1 + (0.25 * (zoomOptions.level + 0.01)))
}
}
}
}]);
}
console.log(zoomOptions.level);
});
/*mouse handles*/
var mouseDragging = false;
var mouseDown = false;
$(".maparea .map").mousedown(function(e) {
mouseDown = true;
}).mousemove(function(e) {
if(mouseDown) {
mouseDragging = true;
$("#plotInfo").hide();
} else {
mouseDragging = false;
}
}).mouseup(function(e) {
var wasDragging = mouseDragging;
mouseDragging = false;
mouseDown = false;
if (!wasDragging) {
$("#plotInfo").hide();
var offset = $(this).offset();
var map = $.fn.mapael.maps["world_countries"];
zoomLevel = $(".maparea").data("zoomLevel");
var zoomRatioX = (zoomLevel * $.fn.mapael.defaultOptions.map.zoom.step) + 1;
var zoomRatioY = (zoomLevel * $.fn.mapael.defaultOptions.map.zoom.step) + 1;
var panX = $(".maparea").data("panX");
var panY = $(".maparea").data("panY");
var ratioX = map.width / $(this).width();
var ratioY = map.height / $(this).height();
var x = (e.pageX - offset.left);
var y = (e.pageY - offset.top);
xMap = x * ratioX;
yMap = y * ratioY;
xMap = xMap / zoomRatioX;
yMap = yMap / zoomRatioY;
xMap = xMap + panX;
yMap = yMap + panY;
if(clickedPlot === false)
setTimeout(doZoom, 100);
}
});
function doZoom() {
if(clickedPlot === false) {
$(".maparea").trigger('zoom', {
fixedCenter: true,
level : zoomLevel + 35,
x:xMap,
y:yMap
});
}
clickedPlot = false;
}
$("#closePlotInfo").on("click", function (event){
event.preventDefault();
$("#plotInfo").hide();
});
$("#OpenInfra").on("click", function() {
$('#infra').submit();
});
});
map - view, incl. header & footer
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no, minimal-ui">
<meta name="HandheldFriendly" content="true">
<link href="/views/layout/css/main.css" rel="stylesheet" type="text/css">
<link href="/views/layout/css/others.css" rel="stylesheet" type="text/css">
<link href="/views/layout/css/overview.css" rel="stylesheet" type="text/css">
<link href="/views/layout/css/map.css" rel="stylesheet" type="text/css">
<script src="/views/layout/libs/js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="/public/js/defaultFunctions.js" type="text/javascript"></script>
<script src="/views/layout/js/main.js" type="text/javascript"></script>
<script src="/views/layout/libs/js/raphael-min.js" type="text/javascript"></script>
<script src="/views/layout/libs/js/jquery.mapael.js" type="text/javascript"></script>
<script src="/views/layout/libs/js/world_countries.js" type="text/javascript"></script>
<script src="/views/layout/libs/js/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="/views/layout/js/map.js" type="text/javascript"></script> <script src="/views/layout/js/inobounce.js"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<a class="info" title="Show Info"></a>
<a class="refresh" title="Refresh Page"></a>
<a class="menu" title="Open Menu"></a>
</div>
<div id="content">
<input type="button" value="Clear zoom" id="clearzoom">
<div class="maparea">
<div class="map"><span>Alternative content for the map</span></div>
</div>
<div id="plotInfo" class="rounded gradiant_red_ver simple_shadow"><h2 class="rounded_tLeft rounded_tRight"></h2>
<a href="/" id="closePlotInfo" class="closeIcon"></a>
<span class="plotInfo"></span>
<span id="OpenInfra" title="Open Infrastructure">Infra.</span>
<form method="POST" action="/infra" id="infra" style="display: none"><input id="infraLocation" type="hidden" name="locationid"></form>
</div></div>
<div id="footer" class="gradiant_lightGrey_ver"><div class="container">
<a href="/index" class="button btn_overview">Overview</a><a href="/map" class="button btn_worldmap active">Worldmap</a><a href="/servicedesk" class="button btn_service_desk">Service Desk</a><a href="/reports" class="button btn_reports">Reports</a></div>
</div>
<div id="menu" class="rounded_bLeft gradiant_lightGrey_fromRight">
<li><a href="/users" class="myAccount">My account</a></li>
<li><a href="/users/notifications" class="myNotifications">Notifications</a></li>
<li><a href="/users/logout" class="logout">Logout</a></li>
</div>
<div id="aboutWrap"><div id="about" class="rounded gradiant_red_ver simple_shadow">
<h2 class="rounded_tLeft rounded_tRight">About TOPI App<a href="/" id="closeAbout" class="closeIcon"></a></h2>
<div class="logo"></div>
<p><b>Transparency On Production App</b><br>...</p>
<h6><b>Developed by:</b><br>Dennis<br>E: ...</h6>
<h5>©2016</h5>
</div></div>
</body>
</html>
[size=xsmall]
Toevoeging op 05/07/2016 11:18:07:[/size]
Ik ben erachter dat het met iOS te maken heeft.
In ieder geval, voor zover ik weet :-/
Je moet best 'snel' je vinger van het scherm afhalen, voordat deze getriggered wordt.
Anders is het alleen maar zoiets als ... 'highlight' of 'hover' whatever
Nog geen oplossing gevonden
