I am getting image map from the server and trying to display contents using ng-bind-html. while rendering AngularJS removes name attribute from map tag. Therefore user clicks are not affective in map.
This sample code.
<body ng-app="imgMapExample">
<div ng-controller="ExController">
<p ng-bind-html="ImgData"></p>
</div>
</body>
angular.module('imgMapExample', ['ngSanitize'])
.controller('ExController', ['$scope', function($scope) {
var imgPath = "http://www.w3schools.com/tags/";
var imgPlanet = imgPath + "planets.gif";
var imgSun = imgPath + "sun.htm";
var imgvenus = imgPath + "venus.htm";
var imgmercur = imgPath + "mercur.htm";
var ImgTag = '<img src="' + imgPlanet + '" width="145" height="126" alt="Planets" usemap="#planetmap" />';
var imgMap = '<map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="' + imgSun + '"> <area shape="circle" coords="90,58,3" alt="Mercury" href="' + imgmercur + '"> <area shape="circle" coords="124,58,8" alt="Venus" href="' + imgvenus + '"> </map>';
var imgMapTest = '<map name="planetmap"></map>';
$scope.ImgData = ImgTag + imgMap;
}]);
Used $sce.trustAsHtml(ImgTag + imgMap); until Angular will update the code not to remove name attribute.
github - issues 8719
Sample code
Related
This is my first time to make a GIS app with CodeIgniter, Leaflet, and Ajax. I want to show a polygon above my map with geojson file that I've made using geojson.io but the polygon doesn't show. When I inspect the page in my browser it shows an error message like
Failed to load modules/jenis_hutan/...geojson/map.geojson:1
resource: the server responded with a status of 404()
Here is my js code to show the geojson file.
let tnSelect = $("#tn-select");
let gisCard = $("#gis-card");
let divModal = $(".div-modal");
tnSelect.change(function () {
let $val = $(this).val();
loadPage();
setCookie("tn_value", $val, 0.0833333);
window.location.reload(true);
});
$(window).on("load", function () {
let $tn_val = getCookie("tn_value");
let gisMap;
$.ajax({
method: "GET",
url: base_url + "ajax/tn_data",
dataType: "JSON",
data: {},
success: (res) => {
console.log(res);
if ($tn_val !== null) {
for (let i = 0; i < res.length; i++) {
let data = res[i];
let name = data.tn_name;
name = name.replace(
/^[\u00C0-\u1FFF\u2C00-\uD7FF\w]|\s[\u00C0-\u1FFF\u2C00-\uD7FF\w]/g,
function (letter) {
return letter.toUpperCase();
}
);
if (data.tn_id == $tn_val) {
tnSelect.append(
'<option selected id="tn_name" value="' +
data.tn_id +
'">' +
name +
"</option>"
);
gisCard.html(
'<div class="card mb-4 gis-card">' +
'<div class="card-header py-3 text-center">' +
'<h6 class="m-0 font-weight-bold text-center">' +
name +
"</h6>" +
"</div>" +
'<div class="card-body" id="gis-map"></div>' +
"</div>"
);
gisMap = L.map("gis-map").setView([data.tn_lat, data.tn_long], 12);
mapAPI.addTo(gisMap);
} else {
tnSelect.append(
'<option value="' + data.tn_id + '">' + name + "</option>"
);
}
}
} else {
for (let i = 0; i < res.length; i++) {
let data = res[i];
let name = data.tn_name;
name = name.replace(
/^[\u00C0-\u1FFF\u2C00-\uD7FF\w]|\s[\u00C0-\u1FFF\u2C00-\uD7FF\w]/g,
function (letter) {
return letter.toUpperCase();
}
);
if (i < 1) {
tnSelect.append(
'<option selected id="tn_name" value="' +
data.tn_id +
'">' +
name +
"</option>"
);
gisCard.html(
'<div class="card mb-4 gis-card">' +
'<div class="card-header py-3 text-center">' +
'<h6 class="m-0 font-weight-bold text-center">' +
name +
"</h6>" +
"</div>" +
'<div class="card-body" id="gis-map"></div>' +
"</div>"
);
gisMap = L.map("gis-map").setView([data.tn_lat, data.tn_long], 12);
mapAPI.addTo(gisMap);
} else {
tnSelect.append(
'<option value="' + data.tn_id + '">' + name + "</option>"
);
}
}
}
//**//
$.getJSON(base_url + "modules/jenis_hutan/geojson/map.geojson", function (
data
) {
geoLayer = L.geoJson(data, {
style: function (feature) {
return {
fillOpacity: 0.5,
weight: 1,
opacity: 1,
color: "#fa7268",
};
},
onEachFeature: function (feature, layer) {
var kode = feature.properties.kode;
var info_zona = "<h5 style='text-align:left'>ZONA INTI</h5>";
info_zona += "<hr>";
info_zona +=
"<div style='width:100%;text-align:left;margin-top:10px;'><h6>Luas area: 10.475 ha</h6><br><h6>Fungsi zona: Jalur pendakian</h6></div>";
layer.bindPopup(info_zona, {
maxWidth: 260,
closeButton: true,
offset: L.point(0, -20),
});
layer.on("click", function () {
layer.openPopup();
});
},
}).addTo(map);
});
},
});
});
Is there something wrong with my code? This is my college task and the deadline is this Friday so please anyone enlight me:( or at least give me link to some tutorial related to this thing:( Thank you everyone.
I'm new to Vue and since my start some week ago I find myself really happy about it and the way it can be combined with pure javascript.
I'm running this code inside a laravel blade template:
<template v-for = "background in backgrounds" >
<template v-if="currentBackground.path === background.path">
<div class="m-1 background inline-block rounded-circle" style="width: 100px; height: 100px; overflow: hidden">
<img class="img-fluid " :src="background.path" v-on:click="changeBack(background)" :style="circledPositionStyle" v-on:load="inquadraThumb(background)">
</div>
</template>
</template>
And in the script section:
data() { return {
[...]
frontObjects : '',
circledPositionStyle : '' }},
methods: {
[...],
inquadraThumb(back) {
var thumbHeight = 100;
var calculatedThumbPositionY = (back.Ypos * thumbHeight) / 500;
var calculatedThumbPositionX = (back.Xpos * calculatedThumbPositionY) / back.Ypos;
this.circledPositionStyle = "transform: scale(4); height: " + thumbHeight + "px;transform-origin:" + calculatedThumbPositionX + "px " + calculatedThumbPositionY + "px;";
},
Now, the code works just fine, but all the images generated in the loop have the same circledPositionStylestyle applied... How can I manage to have different values for each cycle?
You are referencing circlePositionStyle as the data property, so if that value changes, it will change for every item that refers to it.
Instead, change your function to return the value of curclePositionStyle instead of mutating the data property.
inquadraThumb(back) {
var thumbHeight = 100;
var calculatedThumbPositionY = (back.Ypos * thumbHeight) / 500;
var calculatedThumbPositionX = (back.Xpos * calculatedThumbPositionY) / back.Ypos;
return "transform: scale(4); height: " + thumbHeight + "px;transform-origin:" + calculatedThumbPositionX + "px " + calculatedThumbPositionY + "px;";
}
You will also need to slightly adjust the tag:
<img class="img-fluid " :src="background.path" v-on:click="changeBack(background)" :style="inquadraThumb(background)">
I get following error from the socket.io server.
"Transport unknown"
Can you please tell me why it's giving this error?
I using this Signalling server Connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';
My code used to work before but suddenly it stopped working.
Using this library to implement webRTC
http://www.rtcmulticonnection.org/docs/
Can anyone help me with this?
Following is my code
<script src="https://cdn.webrtc-experiment.com:443/rmc3.min.js"></script>
<script type="text/javascript">
var Connection = new RTCMultiConnection();
// or a free signaling server
Connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';
Connection.session = {
data: true,
audio: true,
};
Connection.sdpConstraints.mandatory = {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
};
localvideoContainer = document.getElementById('meeting-preview');
remotevideoContainer = document.getElementById('attendee-xylon');
Connection.onstream = function(event){
var video = event.mediaElement;
console.log(event);
if (event.type === 'local') {
var userinfoDIV = document.createElement('div');
userinfoDIV.className = 'user-video';
userinfoDIV.innerHTML = '<video id="' + event.userid + '" src="' + URL.createObjectURL(event.stream) + '" autoplay muted=true volume=0></vide>' || '<img src="/frontend/images/meeting-preview.png" class="img-responsive" />';
localvideoContainer.appendChild(userinfoDIV);
};
if (event.type === 'remote') {
var userinfoDIV = document.createElement('div');
userinfoDIV.id = event.userid;
userinfoDIV.className = 'user-video meeting-attendees-content timer-icon';
userinfoDIV.innerHTML = '<div id="remote"><video id="' + event.userid + '" src="' + URL.createObjectURL(event.stream) + '" autoplay muted=true volume=0></vide></div><button class="btn btn-custom" type="button" data-toggle="collapse" data-target="#collapse-one" aria-expanded="false" aria-controls="collapse-one">Show Goals / Progress</button><div class="collapse" id="collapse-one"><div class="well attendees-moreinfo"><div class="row"><div class="col-lg-12"><div class="personality-label week-goal"><span>1.</span> Here comes my defined goal for the week</div><div class="personality-bar"><div class="goal-bar-wrap"><div class="meter goal-progress nostripes"><span style="width: 66px; height: 4px;"></span></div></div></div><div class="personality-percentage text-right"><p>66%</p><p></p></div></div></div><div class="row"><div class="col-lg-12"><div class="personality-label week-goal"><span>2.</span> Here comes my defined goal for the week</div><div class="personality-bar"><div class="goal-bar-wrap"><div class="meter goal-progress nostripes"><span style="width: 50px; height: 4px;"></span></div></div></div><div class="personality-percentage text-right"><p>50%</p><p></p></div></div></div><div class="row"><div class="col-lg-12"><div class="personality-label week-goal"><span>3.</span> Here comes my defined goal for the week</div><div class="personality-bar"><div class="goal-bar-wrap"><div class="meter goal-progress nostripes"><span style="width: 80px; height: 4px;"></span></div></div></div><div class="personality-percentage text-right"><p>80%</p><p></p></div></div></div></div></div>' || '<img src="/frontend/images/meeting-preview.png" class="img-responsive" />';
remotevideoContainer.appendChild(userinfoDIV);
};
}
Connection.onclose = Connection.onleave = function(event) {
console.log(event);
$('#'+event.userid).hide();
};
</script>
<script type="text/javascript">
$(document).ready(function(){
var url = window.location.pathname;
Connection.openOrJoin(url.replace('/meetings/joinMeeting/',"") || 'predefined-roomid');
});
</script>
Please check this:
https://github.com/muaz-khan/RTCMultiConnection/releases/tag/3.4.2
Recent release is using latest socket.io.js, so you're asked to use following files instead:
<script src="https://rtcmulticonnection.herokuapp.com/dist/RTCMultiConnection.min.js"></script>
<script src="https://rtcmulticonnection.herokuapp.com/socket.io/socket.io.js"></script>
Please do NOT use rmc3.min.js.
I'm noob with Jquery DataTables.
I have a very basic question on how to use the sorting plugins:
Have googled a lot on this, but I fail to get proper answers, on how to incorporate them in my code, do we have to just add the script to a ".js" file and add it? or Do we also have to call the function of the plugins?
Can someone point me to a working example with sorting of numeric columns formatted with commas/percentage signs.
The columns with signs or commas are sorted as string. I have seen a lot of references which say to use plugins and then specify sType or sSortableDataType but that doesn't work.
Here's my code: (Please correct me where I'm wrong)
<%# Page Language="C#" AutoEventWireup="true" CodeFile="scorecard_dynamic.aspx.cs" Inherits="Dashboard_scorecard_dynamic" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>new score card</title>
<%--<script src="../js/jquery-1.10.2.min.js"></script>--%>
<style type="text/css" title="currentStyle">
#import "../js/datatable/css/demo_page.css";
#import "../js/datatable/css/demo_table.css";
</style>
<script type="text/javascript" src="../js/datatable/js/jquery.js"></script>
<script type="text/javascript" src="../js/datatable/js/jquery.dataTables.js"></script>
<script src="../js/datatable/Plugins-master/sorting/custom-data-source/percent.js"></script>
<link href="../StyleSheet/LoadingPanel.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
gettopchannelsplot();
//transpose();
var otable = $('#example').dataTable({
"iDisplayLength": 5,
"aLengthMenu": [[1, 2, 3, 4, 5], [1, 2, 3, 4, "All"]],
"oLanguage": {
"oPaginate": {
"sPrevious": "Previous", //can change text for pagination
"sNext": "Next"
},
//"fnDrawCallback": function (oSettings) {
// alert('DataTables has redrawn the table');
//},
"aoColumns": [
null,
{ "sType": "pct" },
null,
null,
null,
null,
null,
null
],
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0,5,6,7 ] }
]
}
//"sPaginationType": "full_numbers"
});
oTable.fnSort([[3, 'asc']]);
});
var StartDate = '16-oct-2013';
var EndDate = '22-oct-2013';
function transpose() {
var t = $('#example tbody').eq(0);
var r = t.find('tr');
var cols = r.length;
var rows = r.eq(0).find('td').length;
var cell, next, tem, i = 0;
var tb = $('<tbody></tbody>');
while (i < rows) {
cell = 0;
tem = $('<tr></tr>');
while (cell < cols) {
next = r.eq(cell++).find('td').eq(0);
tem.append(next);
}
tb.append(tem);
++i;
}
$('#example').append(tb);
$('#example').show();
}
function gettopchannelsplot() {
//$("#bubbling").show();
//alert('gettopchannelsplot');
var arrListMain = new Array();
var arrList = new Array();
var linkName = 'View Chatter';
var result = ExecuteSynchronously('../SocialMedia.asmx', 'GetTopchannels', { startDate: StartDate, endDate: EndDate });
//tbl_example.empty();
$('#example thead').append("<tr>"
+"<td class='normalBold' align='left'>info</td>"
+ "<td class='normalBold' align='left'>share of voice</td>"
+ "<td class='normalBold' align='left'>total chatter</td>"
+ "<td class='normalBold' align='left'>sentiments</td>"
+ "<td class='normalBold' align='left'>exposure</td>"
+ "<td class='normalBold' align='left'>most popular with</td>"
+ "<td class='normalBold' align='left'>most popular on</td>"
+ "<td class='normalBold' align='left'>link</td>"
+ "</tr>");
var value = new Array();
if (result.d != "" && result.d != null) {
arrListMain = result.d.split('#');
for (var i = 0; i < arrListMain.length; i++) {
var tmp = "<tr>"
+ "<td class='border' width='12%'><a href='../Scorecard.aspx?1'><image src='" + "../" + arrListMain[i].split('^')[7] + "'/></a></td>"
+ " <td class='border' width='12%' align='center'>" + arrListMain[i].split('^')[2] + "%</td>"
+ " <td class='border' width='12%' align='center'> " + arrListMain[i].split('^')[3] + "</td>"
//// + " <td class='border' width='12%' align='center'><label id=label" + i + " >" + Number(arrListMain[i].split('^')[3]).toLocaleString() + "</label></td>"
+ " <td class='border' width='12%' align='center'><image src='" + "../" + arrListMain[i].split('^')[10] + "'/></td>"
+ " <td class='border' width='13%' align='center'>" + arrListMain[i].split('^')[5] + "</td>"
+ " <td class='border' width='13%' align='center'><image src='" + "../" + arrListMain[i].split('^')[8] + "'/></td>"
+ " <td class='border' width='13%' align='center'><image src='" + "../" + arrListMain[i].split('^')[9] + "'/></td>"
+ " <td class='border' width='13%' align='center'><a href='../ChatterAdvanced2.aspx?filter=channel&value=" + arrListMain[i].split('^')[0] + "'>chatter</a></td>"
+ "</tr>";
//alert(tmp);
$('#example tbody').append(tmp);
}
}
$("#bubbling").hide();
}
</script>
<script type="text/javascript">
function ExecuteSynchronously(url, method, args) {
var executor = new Sys.Net.XMLHttpSyncExecutor(); // Instantiate a WebRequest.
var request = new Sys.Net.WebRequest(); // Set the request URL.
request.set_url(url + '/' + method); // Set the request verb.
request.set_httpVerb('POST'); // Set request header.
request.get_headers()['Content-Type'] = 'application/json; charset=utf-8'; // Set the executor.
request.set_executor(executor); // Serialize argumente into a JSON string.
request.set_body(Sys.Serialization.JavaScriptSerializer.serialize(args)); // Execute the request.
request.invoke();
if (executor.get_responseAvailable()) {
return (executor.get_object());
}
return (false);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<AjaxToolkit:ToolkitScriptManager runat="server" ID="ASD">
<Scripts>
<asp:ScriptReference Path="~/js/XMLHttpSyncExecutor.js" ScriptMode="Release" />
<asp:ScriptReference Path="~/App_Code/SocialMedia.cs" />
</Scripts>
</AjaxToolkit:ToolkitScriptManager>
<div>
<div class="bubblingG" id="bubbling">
<span id="bubblingG_1"></span>
<span id="bubblingG_2"></span>
<span id="bubblingG_3"></span>
</div>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
</form>
</body>
</html>
Please excuse my HTML markup formatting.
You need both the "plugin" and set the proper sType according to that plugin. The plugins are really just some very simple functions, that you easily can produce yourself for your own needs and place into your code. Consider this "plugin" that sort percents with commas :
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
"normalize": function(n) {
return parseFloat(n.toString().replace(',','.'));
},
"percent-asc": function(a, b) {
a=this.normalize(a);
b=this.normalize(b);
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"percent-desc": function(a, b) {
a=this.normalize(a);
b=this.normalize(b);
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
});
The above is pretty failsafe. To initialize :
var dataTable = $('#example').dataTable({
aoColumns: [
null,
null,
null,
{ sType: "percent" },
null
],
//...
});
see this working fiddle demonstrating the code above -> http://jsfiddle.net/xK7Ud/
I'm trying to set a listview like that:
http://jquerymobile.com/demos/1.2.0/docs/lists/lists-thumbnails.html
I dinamicly generate my code
$('#calendarPage').live('pagebeforeshow', function(event) {
$('#calendarPage').live('pageshow', function(event) {
application.prev = 'menu.html';
//get the actu
application.readFile('calendar.json',function(data){
data = JSON.parse(data);
var listview = '<ul data-role="listview" class="ui-listview" id="calendarList" >';
for(elem in data){
var date = new Date(data[elem].date);
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getYear();
var hours = date.getHours();
var min = date.getMinutes();
var s = date.getSeconds();
listview += '<li>';
listview += '<img src="'+application.api+data[elem].img+'" /><a href="actuOne.html?id='+elem+'" ><h3>'+data[elem].title+'</h3><p>'+day+'/'+month+'/'+year+' '+hours+':'+min+':'+s+'</p></a>';
listview += '</li>';
}
listview += '</ul>';
$('#calendarPage .content').html(listview);
$('#calendarList').listview();
});
});
});
Yhe listview is created but the images are not resized
I try adding class="ui-li-thumb" but it works poorly
Thanks
There's an error in your example, img tag must be inside a a tag, only then it will be resized.
Take a look at this example: http://jsfiddle.net/Gajotres/w5bcS/
<ul data-role="listview">
<li><a href="index.html">
<img src="http://www.warrenphotographic.co.uk/photography/bigs/05852-Retriever-puppy-yawning-white-background.jpg" title="sample"/>
<h3>Sample image</h3>
<p>Sample</p>
</a></li>
<li><a href="index.html">
<img src="http://www.warrenphotographic.co.uk/photography/bigs/05852-Retriever-puppy-yawning-white-background.jpg" title="sample"/>
<h3>Sample image</h3>
<p>Sample 2</p>
</a></li>
</ul>