I´m trying to use leaftlet search but it doesnt find the markers.
The markers are populated on the map as it should be, but the search wont work.
I have a freg.js file where I have the information to create markers, and I want to search using propertie "maclora" for example:
var freg_palmela = {
"type": "FeatureCollection",
"name": "freg_palmela",
"crs": { "type": "name", "properties": { "name":
"urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "maclora":
"0004A30B00FB82F0", "serial_num": "2,02103E+14", "freguesias":
"Freguesia de PALMELA", "model": "OCTANS 40", "latitude":
"38.569244417", "longitude": "-8.88123655", "pt":
"PT1508D2052900", "instalation_date": "11/04/2022", "last_ul":
"21/06/2022 05:55", "last_jr": "20/06/2022 21:13", "last_ja":
"20/06/2022 21:13", "last_rssi": "-109", "last_snr": "5,8",
"jr_rssi": "-111,52", "jr_snr": "0,09", "Issue": "Ok" },
"geometry": { "type": "Point", "coordinates": [ -8.88123655,
38.569244417 ] } },
On the .html file the code I have there is
var fregData = L.geoJSON(freg_palmela, {
style: function (feature) {
return feature.properties.style;
},
onEachFeature: function (feature, layer) {
layer.bindPopup('<b>MacloRa: ' +
feature.properties.maclora +
'<br>Serial Number: ' +
'<small>' +
feature.properties.serial_num +
'<br>Model: ' +
feature.properties.model +
'<br>Last UL: ' +
+feature.properties.last_ul +
'<br>Last JR: ' +
feature.properties.last_jr +
'<br>Last JA ' +
feature.properties.last_ja
);
layer.on('mouseover',function(ev) {
ev.target.openPopup();
});
layer.on('mouseout',function(ev) {
ev.target.closePopup();
});
}
}).addTo(map);
var overlays = {
"Palmela":fregData
};
L.control.search({
layer: fregData,
initial: false,
propertyName: 'maclora',
buildTip: function(text, val) {
var type = val.layer.feature.properties.maclora;
return '<a href="#" class="'+type+'">'+text+'<b>'+type+'</b>
</a>';
}
})
.addTo(map);
I assumed you're using leaflet-search.
The problem is in the referenced layer option. It should point to the geojson variable. In short, layer: overlays, should be layer: fregData,.
For a working example - based on the provided code -, please see this fiddle.
Update: example with data in separate js file
What I did:
I put the two files below (data.js and index.html) in a folder (my-map).
Navigated to the folder on my commandline (cd my-map)
Ran a local webserver (e.g php -S localhost:3456).
What I see:
When I visit localhost:3456 in my browser, the page loads without errors. If I type '00' in the search widget, the feature with number '0004A30B00FB82F0' is found. On click the marker is highlighted with a red circle (as demonstrated in the fiddle above).
data.js file:
var freg_palmela = {
"type": "FeatureCollection",
"name": "freg_palmela",
"crs": {
"type": "name", "properties": {
"name":
"urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features": [
{
"type": "Feature", "properties": {
"maclora": "0004A30B00FB82F0", "serial_num": "2,02103E+14",
"freguesias": "Freguesia de PALMELA", "model": "OCTANS 40",
"latitude": "38.569244417", "longitude": "-8.88123655",
"pt": "PT1508D2052900", "instalation_date": "11/04/2022",
"last_ul": "21/06/2022 05:55", "last_jr": "20/06/2022 21:13",
"last_ja": "20/06/2022 21:13", "last_rssi": "-109",
"last_snr": "5,8", "jr_rssi": "-111,52",
"jr_snr": "0,09", "Issue": "Ok"
},
"geometry": {
"type": "Point", "coordinates": [-8.88123655, 38.569244417]
}
},
]
}
index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Map</title>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet#1.8.0/dist/leaflet.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/leaflet-search#3.0.2/dist/leaflet-search.min.css">
<style>
#map {
height: 280px;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
<script type="text/javascript" src="https://unpkg.com/leaflet#1.8.0/dist/leaflet.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/leaflet-search#3.0.2/dist/leaflet-search.src.min.js"></script>
<script type="text/javascript" src="data.js"></script>
<script>
var map = L.map('map').setView([38.6, -8.9], 10);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
var fregData = L.geoJSON(freg_palmela, {
onEachFeature: function (feature, layer) {
layer.bindPopup('<b>MacloRa: ' +
feature.properties.maclora +
'<br>Serial Number: ' +
'<small>' +
feature.properties.serial_num +
'<br>Model: ' +
feature.properties.model +
'<br>Last UL: ' +
+feature.properties.last_ul +
'<br>Last JR: ' +
feature.properties.last_jr +
'<br>Last JA ' +
feature.properties.last_ja
);
layer.on('mouseover',function(ev) {
ev.target.openPopup();
});
layer.on('mouseout',function(ev) {
ev.target.closePopup();
});
}
}).addTo(map);
L.control.search({
layer: fregData,
initial: false,
propertyName: 'maclora',
buildTip: function(text, val) {
var type = val.layer.feature.properties.maclora;
return '' + text + '<b>' + type + '</b>';
}
}).addTo(map);
</script>
</html>
Related
I am making a Chrome Extension in which I need to display some videos from YouTube.
The Chrome Extension works as follows. The action button starts a timer. When the timer completes, a new tab appears showing a random video from a list of YouTube videos.
To have control over these videos, and to be able to use the video player controls, I need to include the iFrame player API, but after trying several options I keep getting the same error:
Refused to load the script 'https://www.youtube.com/iframe_api'
because it violates the following Content Security Policy directive:
"script-src 'self'". Note that 'script-src-elem' was not explicitly
set, so 'script-src' is used as a fallback.
The relevant code is as follows:
event.js:
function openNCprojectVideo() {
chrome.tabs.create({url: "ncproject.html"});
}
This code activates when the timer ends.
ncproject.html:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NC Project Video</title>
<link rel="stylesheet" href="assets/templates/css/ncproject.css">
</head>
<body class="bg-gradient">
<!-- VIDEO PLAYER -->
<div id="player"></div>
<script src="assets/templates/js/ncproject.js"></script>
</body>
</html>
ncproject.js:
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: 'FfwtA2nS2ik',
playerVars: {
'playsinline': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
Manifest:
{
"name": "NC Project",
"description": "A chair yoga google chrome extension for everyone",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "event.js"
},
"action": {
"default_title": "NC Project",
"default_icon": "images/icon32.png"
},
"icons": {
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"permissions": [
"alarms",
"idle",
"notifications",
"tabs",
"storage"
],
"host_permissions": [
"<all_urls>"
],
"options_ui": {
"page": "options.html",
"open_in_tab": true
}
}
I have reviewed several posts related to this same issue, but in none of them I have found a satisfactory solution. Thanks in advance for your help.
I'm trying to create a custom function calling method from Excel.js API. I have followed the Excel custom function tutorial.
But I always obtained the error value #VALUE! on the worksheet, and this error on the debug:
Verbose Runtime [Console] [Log] Unexpected CustomFunctions [Execution] [End] [Failure] [ExceptionThrown] Function=EXTRACTFORM ReferenceError: 'Excel' is not defined {}
Unexpected CustomFunctions [Execution] [Async] [End] [Failure] Function=EXTRACTFORM, Workbook=Book1.xlsx
I'm using the following code:
For the description file:
{
"functions": [
{
"id": "EXTRACTFORM",
"name": "EXTRACTFORM",
"description": "Extract formData from relaunch button",
"result": {
"type": "string",
"dimensionality": "scalar"
},
"parameters": [
{
"name": "address",
"description": "",
"type": "string",
"dimensionality": "scalar"
}
]
}
]
}
js source:
function run(address) {
var context = new Excel.RequestContext();
var range = context.workbook.worksheets.getActiveWorksheet().getRange(address);
range.load();
return context.sync()
.then(function() {
return range.values[0][0];
});
}
CustomFunctions.associate("EXTRACTFORM", run);
And html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta http-equiv="Expires" content="0" />
<title>"Custom Functions Upgrade Test"</title>
<script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/custom-functions-runtime.js" type="text/javascript"></script>
<script src="./extractForm.js" type="text/javascript"></script>
</head>
<body>
<h1>"Custom function"</h1>
</body>
</html>
Thank you for your help !
In order to make custom function to call Excel.js API method, you need to configure your add-in to use shared runtime. And please note there are some limitations to call Office.js through a custom function.
I have an angular app running on angular 7 and i'm trying to turn it on PWA, i installed pwa 0.6.8 and everything is working (in localhost) except the add to home screen who doesn't show up when i am running it on galaxy S5 from the google dev tolls
When i run the audit it says that it is installable for the user :
Result of the audit
here is my index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BSJP</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.4.0/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>
<link rel="manifest" href="manifest.json">
<link rel="icon" type="image/png" sizes="144x144" href="assets/icons/icon-144x144.png">
<meta name="theme-color" content="#1976d2">
</head>
<body>
<app-root></app-root>
<script src="https://unpkg.com/leaflet#1.4.0/dist/leaflet.js"
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
crossorigin=""></script>
</body>
</html>
my manifest :
{
"name": "mvp-front",
"short_name": "BouffeSqueJtePrepare",
"theme_color": "#1976d2",
"background_color": "#fafafa",
"display": "standalone",
"scope": "/",
"start_url": "/index.html",
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "assets/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "assets/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
and ngsw.config.json
{
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/index.html",
"/*.css",
"/*.js"
]
}
}, {
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
]
}
}
]
}
what am i missing ?
Thank you
A web app can only be added to a homescreen when the site is visited at least twice, with at least five minutes between visits.
This guide tells you how you can simulate those events for development: https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps
Add to home screen will appear if your application fullfills following criteria
manifest.json
app hosted over https server : eg: you can use netlify
service worker with atleast one fetch event.
You can find the entire code for it at
https://github.com/rohan12patil/pwa/tree/A2HS
demo at
https://newpwa.netlify.com
The code is basic & you can easily understand & integrate in your angular app
I would suggest you to try to host the project in Firebase (you can also choose another provider).
It is free and it gives already HTTPS out of the box. You can create a project in Firebase and deploy the solution in less than 10 minutes. Then you can test for real with any mobile device whether you app prompts for a A2HS.
I started writing a series of articles about PWAs, if you are interested to learn more about it you can have a look. The second post covers exactly the A2HS topic: How to install a PWA on a user's device.
I'm testing this markup https://developers.google.com/gmail/markup/reference/invoice on https://script.google.com/, so I discard all the SPF problems.
This is the JS:
function testSchemas() {
var htmlBody = HtmlService.createHtmlOutputFromFile('mail_template').getContent();
MailApp.sendEmail({
to: Session.getActiveUser().getEmail(),
subject: 'Test Email markup - ' + new Date(),
htmlBody: htmlBody,
});
}
And this is the HTML
<html>
<head>
<script type='application/ld+json'>
{
"#context": "http://schema.org",
"#type": "Invoice",
"accountId": "123-456-789",
"minimumPaymentDue": {
"#type": "PriceSpecification",
"price": "$70.00"
},
"paymentDue": "2015-11-22T08:00:00+00:00",
"paymentStatus": "PaymentAutomaticallyApplied",
"provider": {
"#type": "Organization",
"name": "Mountain View Utilities"
},
"totalPaymentDue": {
"#type": "PriceSpecification",
"price": "$70.00"
}
}
</script>
</head>
<body>
<p>
This a test for a Go-To action in Gmail.
</p>
</body>
</html>
As you may see, the code should be fine. Ok, I execute the code and I receive this (please, add "h" at beggining, stackoverflow dont let me add more than 2 links):
https://i.stack.imgur.com/bg8S2.png
https://i.stack.imgur.com/ituM0.png
What I'm doing wrong? one-click actions on http://gmail-actions.appspot.com/ works fine, but I can't get working invoices.
The follwing code is an extended version of an example of a built in command in the Kendo documentation
<!DOCTYPE html5>
<html>
<head>
<title>Untitled Page</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ command: ["edit", "destroy"]} // displays the built-in "edit" and "destroy" commands
],
editable: "inline",
dataSource: new kendo.data.DataSource ({
data: [{ name: "Jane Doe" }, { name: "Joe Soap" }, { name: "Fred Blogs"}]
})
});
});
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
Clicking on any of the "Edit" buttons works fine. If you now click on another "Edit" button without cancelling the first, then the original edit row is cancelled but now all of the edit buttons fail to open a row in edit mode. This behaviour is not demonstrated when a remote datasource is used by the grid.
Do Kendo know about this problem?
Does anyone know a work-around?
This is a frequent problem when there is not id defined in the model (it is not actually a problem with Kendo UI, maybe a not a clearly documented behavior).
Use this grid definition instead:
$("#grid").kendoGrid({
columns : [
{ field: "name" },
{ command: ["edit", "destroy"]} // displays the built-in "edit" and "destroy" commands
],
editable : "inline",
dataSource: new kendo.data.DataSource({
data : [
{ id: 1, name: "Jane Doe" },
{ id: 1, name: "Joe Soap" },
{ id: 2, name: "Fred Blogs"}
],
schema: {
model: {
id: "id"
}
}
})
});
I've added and id field to each row and then I define that schema.model.id is id. See it running here