Mapbox GL JS : Popup onclick with external JSON - geojson

I am trying to display a popup onclick in Mapbox GL JS when the user clicks a polygon (It's a weather warning box during a Flash Flood Warning).
I have been using this example from Mapbox as a base, and -
This is my JSON file that I am trying to pull data from.
When I click the polygon, there is no popup. When I mouseover it, the cursor changes - so I know the basic possible issues like filename and directory structure are right.
My code below was modified from the example. I am trying to load the "description" of each polygon : (My map is called "topleftmapbox" and the JSON id is "FFWWarning")
// When a click event occurs on a feature in the places layer, open a popup at the
// location of the feature, with description HTML from its properties.
topleftmapbox.on('click', 'FFWWarning', function (e) {
var coordinates = e.features[0].geometry.coordinates.slice();
var description = e.features[0].description;
// Ensure that if the map is zoomed out such that multiple
// copies of the feature are visible, the popup appears
// over the copy being pointed to.
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(description)
.addTo(topleftmapbox);
});
// The following code below runs correctly and changes the cursor on mouseover.
topleftmapbox.on('mouseenter', 'FFWWarning', function () {
topleftmapbox.getCanvas().style.cursor = 'pointer';
});
// Change it back to a pointer when it leaves.
topleftmapbox.on('mouseleave', 'FFWWarning', function () {
topleftmapbox.getCanvas().style.cursor = '';
});
I have a feeling that my issue is somewhere in this part of the code :
var coordinates = e.features[0].geometry.coordinates.slice();
var description = e.features[0].description;
I am still new with Mapbox and I have tried looking through here and various sources online to fix this. I am hoping the issue is just that I have the description variable set wrong and that I am missing something simple.

I debugged the code that you provided and found that variable coordinates was containing an object having array of lat-lng.
Modifying that part should fix the issue.
var coordinates = e.features[0].geometry.coordinates[0][0].slice();
In coordinates[0][0], second index determines the position of popup.
Here is the working code. https://jsbin.com/suzapug/1/edit?html,output

Related

autodesk-forge add hyperlink to object in a360 viewer

Need to find way to add hyperlinks to components of an assembly in the a360 viewer such that, when clicked or touched with mobile device, will navigate to a web page for more information. Realize it requires Forge API but can't find any specific examples of such a solution. I think this can be done from a properties table but I want direct navigation from touching/clicking the object.
You could just subscribe to the object selection event and react to it by e.g. opening a given URL:
viewer.addEventListener(
Autodesk.Viewing.SELECTION_CHANGED_EVENT,
function (event) {
// Get id of first selected item
var dbId = event.dbIdArray[0];
if (dbId) {
// Maybe get the properties of the selected object
viewer.getProperties(dbId, function (props) {
// Depending on the properties you could open a website
// Just printing to the console the external id of
// the selected component as an example
console.log(props.externalId);
});
}
}
);
If you search for "Autodesk.Viewing.SELECTION_CHANGED_EVENT" you can find some articles and samples also using this event, e.g. https://forge.autodesk.com/blog/selection-override

Get the string from selected text/ highlighted text using JXA

I'm supper new here, either Javascript and JXA, so pardon me if I make some stupid questions. But I'm trying to figure out a way to get the string from the highlighted text using JXA - JavaScript for Automation, for Javascript can be recognized in Automator since Yosemite, I thought I can make something work with these:
window.getSelection in:
function getSelectedText() {
if (window.getSelection) {
txt = window.getSelection();
} else if (window.document.getSelection) {
txt =window.document.getSelection();
} else if (window.document.selection) {
txt = window.document.selection.createRange().text;
}
return txt;
}
This code is not mine, somebody posted this. But I've found out that I can't use window or document here in Automator to make change to Mac OS, so can someone show me how to convert this Javascript code into JXA which Automator can understand?
Thanks a lot!
In general, you can use the System Events app to copy and paste with any app.
'use strict';
//--- GET A REF TO CURRENT APP WITH STD ADDITONS ---
var app = Application.currentApplication()
app.includeStandardAdditions = true
var seApp = Application('System Events')
//--- Set the Clipboard so we can test for no selection ---
app.setTheClipboardTo("[NONE]")
//--- Activate the App to COPY the Selection ---
var safariApp = Application("Safari")
safariApp.activate()
delay(0.2) // adjust the delay as needed
//--- Issue the COPY Command ---
seApp.keystroke('c', { using: 'command down' }) // Press ⌘C
delay(0.2) // adjust the delay as needed
//--- Get the Text on the Clipboard ---
var clipStr = app.theClipboard()
console.log(clipStr)
//--- Display Alert if NO Selection was Made ---
if (clipStr === "[NONE]") {
var msgStr = "NO Selection was made"
console.log(msgStr)
app.activate()
app.displayAlert(msgStr)
}
For more info see:
Sending Keystrokes in JXA
JXA Resources
You need to mix JXA and Safari’s javaScript…
var Safari = Application("Safari") // get Safari
selection = Safari.doJavaScript("document.getSelection().toString()",{
in: Safari.windows[0].tabs[0] // assume frontmost window and tab
})
The script is in JXA, but the document.getSelection().toString() is Safari’s javaScript.
Of course you will need to enable apple events in Safari… http://osxdaily.com/2011/11/03/enable-the-develop-menu-in-safari/
If you want the selected text from another application, the code might be very different.
Don't do that, it's only applicable to JavaScript embedded inside a web browser. JXA is a standalone JS interpreter that has absolutely no understanding of web pages or DOM (and frankly doesn't have much clue about Mac application scripting either, btw).
Instead, use Automator to create an OS X Service as services can manipulate selected text in almost any OS X app; no application scripting required.

Getting the current page's window with the low level api of the Firefox SDK

I'm creating a Firefox extension for adding some functionality to certain Web pages. I need to check that some elements do exist and highlight them, so I'm using xpath to check and locate them. I know about manipulating tabs and the content through tabs and ports, but I really need to use the low level API and do it without ports. The thing is, I don't know how to get the current opened tab window (I can also open the tab, but I'm not getting the window). I already tryed to open a tab and :
tabs.open({
url: url,
onOpen: function onOpen(tab) {
// get the XUL tab that corresponds to this high-level tab
var lowLevelTab = viewFor(tab);
var browser = tab_utils.getBrowserForTab(lowLevelTab);
var doc = browser.contentDocument;
console.log(doc); //THIS IS AN EMPTY DOC
// get the most recent window. This give me a XUL window, and I can't sucessfully execute eval on that...
var win = utils.getMostRecentBrowserWindow();
}})
I sawa lot of methods for retrieving different kinds of windows, but I'm not finding the explanation about the differences. E.g. Chroe window, XUL window, NSI window, base window...I just need the current Web page's document window.
Any clarification is welcome.
Thanks in advance,
I just needed to listen for another tab event:
onReady: function onOpen(tab) {
var content = utils.getMostRecentBrowserWindow().content;
var domInstances = content.document.evaluate(me.getTemplateXpath(), content.document, null, 4, null);
var res = domInstances.iterateNext();
while (res) {
console.log(res);
res.style["background-color"] = "orange";
res = domInstances.iterateNext();
}
callback();
}

Is it possible to add buttons and control its event to toolbar of inappbrowser using javascript...?

I am developing a Hybrid App for iOS and Android using PhoneGap.Is it possible to add buttons and control its event to toolbar of inappbrowser using javascript.I know how to add it through ios native side but i cant use that process.I need to control the button event through a javascript method.
You have two options to do that.
The first option is, obviously, to patch the native plugin code, and that's it. Here you can find an example made for iOS, you will have to do the same to your Android Java code and for every other platform you want to support.
Another option is to hide the native toolbar and inject HTML and CSS to create a new one when the page is loaded.
Something like this:
// starting inappbrowser...
inAppWindow = window.open(URL_TO_LOAD, '_blank', 'location=no');
// Listen to the events, we need to know when the page is completely loaded
inAppWindow.addEventListener('loadstop', function () {
code = CustomHeader.html();
// Inject your JS code!
inAppWindow.executeScript({
code: code
}, function () {
console.log("injected (callback).");
});
// Inject CSS!
inAppWindow.insertCSS({
code: CustomHeader.css
}, function () {
console.log("CSS inserted!");
});
And you will have obviously to define the CustomHeader object, something like this:
var CustomHeader = {
css: '#customheader { your css here }',
html: function() {
var code = 'var div = document.createElement("div");\
div.id = "customheader";\
// Insert it just after the body tag
if (document.body.firstChild){ document.body.insertBefore(div, document.body.firstChild); } \
else { document.body.appendChild(div); }';
return code;
}
};
I had experience with this problem.
For my case, the second option was enough, not a critical task. Sometimes it takes a lot for the loadstop event to fire, and so you don't see the injected bar for >= 5 seconds.
And you have to pay attention even on the CSS of the loaded page, because obviously you can affect the original CSS, or the original CSS can affect the style of your toolbar.

Scripty2 : how to close dialog

I am looking for a way to close a scripty2 dialog like this :
http://mir.aculo.us/stuff/scripty2-ui/test/functional/controls_dialog.html
From outside of the dialog (i.e. with firebug command line) but my javascript mojo is a bit limited and after 30 min of going around the DOM I cannot find a way. Any hints ?
NB : scripty2 is a rewrite of script.aculo.us which uses bits of Jquery UI.
Scripty2 UI bits are really based on Prototype classes, not extensions to DOM elements, so you can't use $$() to fetch an existing dialog and close it like you might think. It must be stored in a javascript variable.
var dialog = new S2.UI.Dialog({ // The class must be saved in a
variable
content: "Consulting the server. Please wait."
});
dialog.open(); // We open
new Ajax.Request('/answers', {
onComplete: function(){
alert("Done!");
dialog.close(); // And close.
}
});
Try pasting these into Firebug:
var dialog = new S2.UI.Dialog({content: "Hello World"});
dialog.open();
dialog.close();
This is the documentation for the dialog box :
http://scripty2.com/doc/scripty2%20ui/s2/ui/dialog.html
To close all the dialogs (elements with class div.ui-dialog) on the page with no ids code would be something like this (untested):
$$('div.ui-dialog').each(function() {this.close();});

Resources