fairly new person to Javascript here.
I have tried to get a toggle to work for busline stops coordinators from Google Fusion Table on my Google Maps but I can seem to fix it. Tried several solutions that I found here on stackoverflow.
Anyone that can shed some light on this?
var map;
var busLine3;
var busLine3Id = "1kc0F0rZl17KNJZCyrvFrDbPVyTtbWZm14nxABgBR";
function initialize() {
var map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
center: new google.maps.LatLng(59.327677777000000, 18.062950644241347),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var busLine3 = new google.maps.FusionTablesLayer({
map: map,
heatmap: { enabled: false },
query: {
select: "col2",
from: busLine3Id,
},
options: {
styleId: 2,
templateId: 2
}
});
busLine3.setMap(map);
}
// Toggle the layer to hide/show
function changeLayer(tableidselections) {
if (tableidselections == busLine3Id){
if (document.getElementById("show_hide_layer1").checked == true) {
if(busLine3.getMap() == null) { busLine3.setMap(map); }
}
if (document.getElementById("show_hide_layer1").checked == false) {
busLine3.setMap(null); /*layersetoff*/
}
}
My index.html:
<head>
<style type="text/css">
html, body, #googft-mapCanvas {
height: 600px;
margin: 0;
padding: 0;
width: 800px;
}
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&v=3"></script>
<script type="text/javascript" src="mapScript.js"></script>
</head>
<body onload="initialize()";>
<h2>Enabled with Google Maps API (HTML and Javascript)</h2>
<input type="checkbox" id="show_hide_layer1" onclick="changeLayer(this.value);" checked="checked">Bus Line 3</input>
<input type="checkbox" id="show_hide_layer2" onclick="changeLayer(this.value);" checked="checked">Locations</input>
<div id="googft-mapCanvas"></div>
<br/>
Your problem is this line:
if (tableidselections == busLine3Id)
tableidselections is "on"; busLine3Id is "1kc0F0rZl17KNJZCyrvFrDbPVyTtbWZm14nxABgBR"
Once I fix that (change busLine3Id to "on", I get Uncaught TypeError: Cannot read property 'setMap' of undefined because busLine3 is local to your initialize function (you declare it in the global scope, var buseLin3, but then re-declare it locally in initalize.
Same issue with your map variable.
Working code snippet:
var map;
var busLine3;
var busLine3Id = "1kc0F0rZl17KNJZCyrvFrDbPVyTtbWZm14nxABgBR";
function initialize() {
map = new google.maps.Map(document.getElementById('googft-mapCanvas'), {
center: new google.maps.LatLng(59.327677777000000, 18.062950644241347),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
busLine3 = new google.maps.FusionTablesLayer({
map: map,
heatmap: {
enabled: false
},
query: {
select: "col2",
from: busLine3Id
},
options: {
styleId: 2,
templateId: 2
}
});
busLine3.setMap(map);
}
// Toggle the layer to hide/show
function changeLayer(tableidselections) {
if (tableidselections == "on") {
if (document.getElementById("show_hide_layer1").checked == true) {
if (busLine3.getMap() == null) {
busLine3.setMap(map);
}
}
if (document.getElementById("show_hide_layer1").checked == false) {
busLine3.setMap(null); /*layersetoff*/
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#googft-mapCanvas {
height: 600px;
margin: 0;
padding: 0;
width: 800px;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&ext=.js"></script>
<h2>Enabled with Google Maps API (HTML and Javascript)</h2>
<input type="checkbox" id="show_hide_layer1" onclick="changeLayer(this.value);" checked="checked">Bus Line 3</input>
<input type="checkbox" id="show_hide_layer2" onclick="changeLayer(this.value);" checked="checked">Locations</input>
<div id="googft-mapCanvas"></div>
<br/>
working fiddle
Related
I have a map with a layer control that has overlays specified in the baselayer parameter:
var overlays = {
'Layer 1': mylayer1,
'Layer 2': mylayer2
};
L.control.layers( overlays, null, { collapsed: false } ).addTo( map );
I specify my layers as follows:
var mylayer1 = L.esri.featureLayer({
url: 'https://.../MapServer/5'
}).on( 'load', function ( e ) {
...
}).on( 'loading', function ( e ) {
...
}).bindPopup( function ( layer ) {
return L.Util.template( '<p>{_score}</p>', layer.feature.properties );
});
The issue is that when I change layers in the control the bindPopup event no longer gets called.
It's almost like the layer z-index is not updated. Would appreciate any insight on how I can address this.
See: https://codepen.io/jvanulde/pen/LYyOWZo
I see no one has given an answer.
A little around, but it works.
You add the id: x to each layer. Later in the loop you check which layer is active, and all the rest of the layers you add the style display: none.
window.addEventListener('DOMContentLoaded', () => {
let tiles = L.tileLayer('//{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors, Points © 2012 LINZ'
});
let l1 = L.esri.featureLayer({
url: 'https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/nhsl_en/MapServer/1',
id: 0, // required
simplifyFactor: 0.25,
precision: 5,
fields: ['OBJECTID'],
renderer: L.canvas()
}).bindPopup(function(layer) {
return L.Util.template('<p>Layer 1: <strong>{OBJECTID}</strong></p>', layer.feature.properties);
});
let l2 = L.esri.featureLayer({
url: 'https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/nhsl_en/MapServer/2',
id: 1, // required
simplifyFactor: 0.25,
precision: 5,
fields: ['OBJECTID'],
renderer: L.canvas()
}).bindPopup(function(layer) {
return L.Util.template('<p>Layer 2: <strong>{OBJECTID}</strong></p>', layer.feature.properties);
});
let map = L.map('map', {
center: [49.2827, -123.1207],
zoom: 12,
layers: [tiles]
});
let overlays = {
'Layer 1': l1,
'Layer 2': l2
};
L.control.layers(overlays, null, {
collapsed: false
}).addTo(map);
l1.addTo(map);
map.on('baselayerchange', function(e) {
const layersCanvas = document.querySelectorAll('.leaflet-overlay-pane > canvas');
layersCanvas.forEach((layer, index) => {
layer.style.display = '';
if (index !== e.layer.options.id) {
layer.style.display = 'none';
}
});
});
});
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100vh;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/esri-leaflet#3.0.2/dist/esri-leaflet.js"></script>
<div id="map"></div>
I have some boolean fields inside my ag-grid. In addition to be possible to navigate with the keyboard, I would also like to be possible to check/uncheck these checkboxes with the keyboard. I mean let the user move inside the grid with cursor keys, then when the current cell is a checkbox simply use the Space of Enter keys to check/uncheck.
I ended with the solution showed below but I am curious if there is a better/nicer solution for that ?
The trick I used is to catch keyboard events on the grid and change values (true/false) if focused cell is a checkbox.
Example: Plunker demo here
var columnDefs = [
{headerName: "Athlete", field: "athlete", width: 150, editable: true},
{headerName: "Age", field: "age", width: 60, editable: true},
{headerName: "Country", field: "country", width: 120, editable: true},
{headerName: "Boo1", field: "boo1", width: 60, cellRenderer: boolRenderer},
{headerName: "Boo2", field: "boo2", width: 60, cellRenderer: boolRenderer}
];
function boolRenderer(params) {
return `<input type="checkbox" ${params.value ? 'checked' : ''} />`;
}
var gridOptions = {
columnDefs: columnDefs,
onCellKeyPress: cellKeyPress
};
function cellKeyPress(e) {
let ENTER_KEY = 13;
let SPACE_KEY = 32;
var event = e.event;
if (event.keyCode == SPACE_KEY || event.keyCode == ENTER_KEY)
{
var isCheckbox = $(event.target).find("input[type='checkbox']").length > 0;
if (isCheckbox)
{
var currentCell = gridOptions.api.getFocusedCell();
var rowIndex = currentCell.rowIndex;
var colId = currentCell.column.getId();
var rowNode = gridOptions.api.getDisplayedRowAtIndex(rowIndex);
var cellValue = gridOptions.api.getValue(colId, rowNode) || false;
rowNode.setDataValue(colId, !cellValue);
}
}
}
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
// do http request to get our sample data - not using any framework to keep the example self contained.
// you will probably use a framework like JQuery, Angular or something else to do your HTTP calls.
var httpRequest = new XMLHttpRequest();
httpRequest.open('GET', 'https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json');
httpRequest.send();
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState === 4 && httpRequest.status === 200) {
var httpResult = JSON.parse(httpRequest.responseText);
gridOptions.api.setRowData(httpResult);
}
};
});
.test-container {
height: 100%;
display: flex;
flex-direction: column;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script> var __basePath = ''; </script>
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
html {
position: absolute;
top: 0;
left: 0;
padding: 0;
overflow: auto;
}
body {
padding: 1rem;
overflow: auto;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/ag-grid-community#21.2.0/dist/ag-grid-community.min.js"></script> <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="test-container">
<div id="myGrid" class="ag-theme-balham" style="height: calc(100% - 30px);"></div>
</div>
<script src="main.js"></script>
</body>
</html>
if you asking about alternative way , this is my suggestion .
you can try agSelectCellEditor in the columnDefs , user will still be able to change it using keyboard by pressing enter and select true or false using arrow key.
this.columnDefs = [
{
headerName: 'ID',
field: 'id',
width: 50
},
headerName: 'IsCompleted',
field: 'isCompleted',
editable: true,
filter: true,
sortable: true,
cellEditor: "agSelectCellEditor",
cellEditorParams:
{
values: ["True", "False"]
},
width: 105}
]
And to save your changes on the server side:
(cellEditingStopped)="UpdateTrainingData()" //as an example your ag-grid html tag.
I am currently working with binding SharePoint list items using JQuery datatables and rest API with the following code from Microsoft samples. I want to extend the sample to include multiple selection of row items with check boxes so that I can then another method to update the selected items. Please let me if this is possible with any guidance
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<table id="requests" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Business unit</th>
<th>Category</th>
<th>Status</th>
<th>Due date</th>
<th>Assigned to</th>
</tr>
</thead>
</table>
<script>
// UMD
(function(factory) {
"use strict";
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], function ($) {
return factory( $, window, document );
});
}
else if (typeof exports === 'object') {
// CommonJS
module.exports = function (root, $) {
if (!root) {
root = window;
}
if (!$) {
$ = typeof window !== 'undefined' ?
require('jquery') :
require('jquery')( root );
}
return factory($, root, root.document);
};
}
else {
// Browser
factory(jQuery, window, document);
}
}
(function($, window, document) {
$.fn.dataTable.render.moment = function (from, to, locale) {
// Argument shifting
if (arguments.length === 1) {
locale = 'en';
to = from;
from = 'YYYY-MM-DD';
}
else if (arguments.length === 2) {
locale = 'en';
}
return function (d, type, row) {
var m = window.moment(d, from, locale, true);
// Order and type get a number value from Moment, everything else
// sees the rendered value
return m.format(type === 'sort' || type === 'type' ? 'x' : to);
};
};
}));
</script>
<script>
$(document).ready(function() {
$('#requests').DataTable({
'ajax': {
'url': "../_api/web/lists/getbytitle('IT Requests')/items?$select=ID,BusinessUnit,Category,Status,DueDate,AssignedTo/Title&$expand=AssignedTo/Title",
'headers': { 'Accept': 'application/json;odata=nometadata' },
'dataSrc': function(data) {
return data.value.map(function(item) {
return [
item.ID,
item.BusinessUnit,
item.Category,
item.Status,
new Date(item.DueDate),
item.AssignedTo.Title
];
});
}
},
columnDefs: [{
targets: 4,
render: $.fn.dataTable.render.moment('YYYY/MM/DD')
}]
});
});
</script>
Is it possible to show hidden characters (like Carriage Return character) in Codemirror Text Editor, but I've not found any configuration reference about it in its documentation. Is it possible do this?
This could be done with help of overlays and predefined styles with whitespace and EOL symbol this way:
cm.addOverlay({
name: 'invisibles',
token: function nextToken(stream) {
var ret,
spaces = 0,
peek = stream.peek() === ' ';
if (peek) {
while (peek && spaces < Maximum) {
++spaces;
stream.next();
peek = stream.peek() === ' ';
}
ret = 'whitespace whitespace-' + spaces;
} else {
while (!stream.eol() && !peek) {
stream.next();
peek = stream.peek() === ' ';
}
ret = 'cm-eol';
}
return ret;
}
});
You could use addon CodeMirror Show Invisibles for this purpose.
Carriage return is interpreted specially by CodeMirror (when on its own, it'll create a line break, when in front of a line feed, it'll be ignored), so in that case, no you can not.
But other non-printing characters (for example \b) will be visible as red dots by default, and you can adapt the relevant CSS class cm-invalidchar to customize their appearance.
Yes you can do with overlay.js, and with any mode language. Only you need to define the overlay for each mode you want, but is the same javascript code for all modes.
window.onload = function() {
CodeMirror.defineMode("javascript-hidden-chars", function(config, parserConfig) {
var alterList = ["alter1", "alter2"];
var spacesCount = 0;
var hiddenCharsOverlay = {
token: function(stream, state) {
if (stream.match(/(?= )/)) {
let alterSpace = spacesCount++ % alterList.length;
stream.eat(/ /);
return `space special-chars ${alterList[alterSpace]}`;
}
while (stream.next() != null && !stream.match(" ", false)) {}
return null;
}
};
return CodeMirror.overlayMode(
CodeMirror.getMode(
config,
parserConfig.backdrop || "javascript"
),
hiddenCharsOverlay
);
});
var editorSimple = CodeMirror(document.querySelector("#simple-parser"), {
lineNumbers: true,
lineWrapping: true,
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
mode: "javascript-hidden-chars",
value: `// Demo code (the actual new parser character stream implementation)
function StringStream(string) {
this.pos = 0;
this.string = string;
}
StringStream.prototype = {
done: function() {return this.pos >= this.string.length;},
peek: function() {return this.string.charAt(this.pos);},
next: function() {
if (this.pos < this.string.length)
return this.string.charAt(this.pos++);
},
eat: function(match) {
var ch = this.string.charAt(this.pos);
if (typeof match == "string") var ok = ch == match;
else var ok = ch && match.test ? match.test(ch) : match(ch);
if (ok) {this.pos++; return ch;}
},
eatWhile: function(match) {
var start = this.pos;
while (this.eat(match));
if (this.pos > start) return this.string.slice(start, this.pos);
},
backUp: function(n) {this.pos -= n;},
column: function() {return this.pos;},
eatSpace: function() {
var start = this.pos;
while (/\s/.test(this.string.charAt(this.pos))) this.pos++;
return this.pos - start;
},
match: function(pattern, consume, caseInsensitive) {
if (typeof pattern == "string") {
function cased(str) {return caseInsensitive ? str.toLowerCase() : str;}
if (cased(this.string).indexOf(cased(pattern), this.pos) == this.pos) {
if (consume !== false) this.pos += str.length;
return true;
}
}
else {
var match = this.string.slice(this.pos).match(pattern);
if (match && consume !== false) this.pos += match[0].length;
return match;
}
}
};
`
});
}
body {
background: #4CB8C4;
/* fallback for old browsers */
background: -webkit-linear-gradient(to right, #3CD3AD, #4CB8C4);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #3CD3AD, #4CB8C4);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.container-editor {
font-size: 15px;
}
.CodeMirror-code div:not(:last-child) .CodeMirror-line:after {
content: "↵";
text-align: center;
opacity: 0.5;
z-index: 1;
height: inherit;
position: absolute;
white-space: nowrap;
pointer-events: none;
}
.cm-special-chars,
.cm-tab {
position: relative;
opacity: 0.5;
}
.cm-special-chars:after,
.cm-tab:after {
opacity: 0.4;
text-align: center;
left: 0;
top: 0;
width: 100%;
position: absolute;
overflow: hidden;
white-space: nowrap;
pointer-events: none;
}
.cm-space {
white-space: break-spaces;
word-break: break-all;
}
.cm-space:after {
content: '·';
width: inherit;
}
.cm-tab {
white-space: pre-wrap;
}
.cm-tab:after {
content: '<---';
direction: rtl;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/codemirror.min.css" />
<link rel="stylesheet" href="https://codemirror.net/addon/fold/foldgutter.css" />
<div id="simple-parser" class="container-editor"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/codemirror.min.js"></script>
<script type="text/javascript" src="https://codemirror.net/mode/javascript/javascript.js"></script>
<script type="text/javascript" src="https://codemirror.net/addon/mode/overlay.js"></script>
<script type="text/javascript" src="https://codemirror.net/addon/fold/foldcode.js"></script>
<script type="text/javascript" src="https://codemirror.net/addon/fold/foldgutter.js"></script>
<script type="text/javascript" src="https://codemirror.net/addon/fold/comment-fold.js"></script>
<script type="text/javascript" src="https://codemirror.net/addon/fold/indent-fold.js"></script>
<script type="text/javascript" src="https://codemirror.net/addon/fold/brace-fold.js"></script>
I am using jqGrid 3.8.1. I want to change the pull-down values of a combobox based on the selected value of another combobox. That's why I am searching on how to change the editoptions:value of an edittype:"select".
Here's the sample jqGrid code:
<%# page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<script type="text/javascript" src="<c:url value="/js/jquery/grid.locale-ja.js" />" charset="UTF-8"></script>
<link type="text/css" rel="stylesheet" href="<c:url value="/css/jquery/ui.jqgrid.css" />"/>
<script src="<c:url value="/js/jquery/jquery.jqGrid.min.js" />" type="text/javascript"></script>
<table id="rowed5"></table>
<script type="text/javascript" charset="utf-8">
var lastsel2;
$("#rowed5").jqGrid({
datatype: "local",
height: 250,
colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'],
colModel:[
{name:'id',index:'id', width:90, sorttype:"int", editable: true},
{name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
{name:'stock',index:'stock', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"}},
{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX;AR1:ARAMEX123456789"}},
{name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}}
],
caption: "Input Types",
resizeStop: function (newwidth, index) {
var selectedRowId = $("#rowed5").getGridParam('selrow');
if(selectedRowId) {
//resize combobox proportionate to column size
var selectElement = $('[id="' + selectedRowId + '_ship"][role="select"]');
if(selectElement.length > 0){
$(selectElement).width(newwidth);
}
}
}
,
onSelectRow: function(id){
if(id && id!==lastsel2){
//$(this).saveRow(lastsel2, true);
$(this).restoreRow(lastsel2);
$(this).editRow(id,true);
lastsel2=id;
$(this).scroll();
//resize combobox proportionate to column size
var rowSelectElements = $('[id^="' + id + '_"][role="select"]');
if(rowSelectElements.length > 0) {
$(rowSelectElements).each(function(index, element){
var name = $(element).attr('name');
var columnElement = $('#rowed5_' + name);
if(columnElement.length > 0) {
var columnWidth = $(columnElement).width();
$(element).width(columnWidth);
}
});
}
}
}
});
var mydata2 = [
{id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx"},
{id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime"},
{id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT"},
{id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX123456789"},
{id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx"},
{id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx"},
{id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX"},
{id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT"},
{id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx"}
];
for(var i=0;i < mydata2.length;i++) {
$("#rowed5").jqGrid('addRowData',mydata2[i].id,mydata2[i]);
}
</script>
Scenario:
All ship will be displayed as initial load.
If the stock column changes to Yes, ship will display only FedEx, TNT.
If the stock column changes to No, ship will display only InTime, ARAMEX, ARAMEX123456789.
How can I change the options?
I solved it by trial and error. Want to share it, please refer to the below snippet. The changes are on onSelectRow function.
onSelectRow: function(id){
if(id && id!==lastsel2){
//$(this).saveRow(lastsel2, true);
$(this).restoreRow(lastsel2);
// get the selected stock column value before the editRow
var stockValue = $("#rowed5").jqGrid('getCell', id, 'stock');
if( stockValue == 'Yes') {
$("#rowed5").jqGrid('setColProp', 'ship', { editoptions: { value: 'FE:FedEx;TN:TNT'} });
} else if( stockValue == 'No') {
$("#rowed5").jqGrid('setColProp', 'ship', { editoptions: { value: 'IN:InTime;AR:ARAMEX;AR1:ARAMEX123456789'} });
}
$(this).editRow(id,true);
lastsel2=id;
$(this).scroll();
//resize combobox proportionate to column size
var rowSelectElements = $('[id^="' + id + '_"][role="select"]');
if(rowSelectElements.length > 0) {
$(rowSelectElements).each(function(index, element){
var name = $(element).attr('name');
var columnElement = $('#rowed5_' + name);
if(columnElement.length > 0) {
var columnWidth = $(columnElement).width();
$(element).width(columnWidth);
}
});
}
}
}