I want to display a map with markers. When I click on a marker, I want to display a popup. In the popup there should also be a link to an external website.
This all works fine so far.
But when I click on the first marker (-> the popup is displayed) and directly afterwards on the second marker, then a popup is displayed only shortly on the second marker and then disappears!
I think it has something to do with the "animation" setting of the popover. But when I set "animation: false", then I can not use the links anymore (I can click on them, but they do not open the requested website).
Here comes my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Popup</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.5.0/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.5.0/build/ol.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<div id="popup"></div>
<script>
var place_0 = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([1.1, 50])),
name: 'placename 1<br><a target="_blank" href="http://www.fairtragen.de">link1</a>'
});
var place_1 = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([1.2, 50])),
name: 'placename 2<br><a target="_blank" href="http://www.fairtragen.de">link2</a>'
});
var vectorSource = new ol.source.Vector({
features: [place_0, place_1]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var rasterLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [rasterLayer, vectorLayer],
target: document.getElementById('map'),
view: new ol.View({
center: ol.proj.fromLonLat([1.1, 50]),
zoom: 10
})
});
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
stopEvent: false
});
map.addOverlay(popup);
// display popup on click
map.on('click', function (evt) {
$(element).popover('destroy');
var feature = map.forEachFeatureAtPixel(evt.pixel,
function (feature) {
return feature;
});
if (feature) {
var iname = feature.get('name');
var coordinates = feature.getGeometry().getCoordinates();
popup.setPosition(coordinates);
$(element).popover({
'animation': true,
'html': true,
//'delay': 1000,
'content': iname
});
$(element).popover('show');
} else {
$(element).popover('destroy');
}
});
</script>
</body>
</html>
the problem is click event works for the overlay and map together. events pass through every element on the map with Openlayers. You can prevent this with stopEvent option on Overlay.
https://openlayers.org/en/latest/apidoc/module-ol_Overlay-Overlay.html
var popup = new ol.Overlay({
element: element,
stopEvent: true
});
Related
I have added the Web component Polyfill.
npm install #webcomponents/webcomponentsjs
I have added them in my index.html file:
<script src="./webcomponents/custom-elements-es5-adapter.js"></script>
<script src="./webcomponents/webcomponents-bundle.js"></script>
<script src="./webcomponents/webcomponents-loader.js"></script>
<script src="./webcomponents/webcomponents-bundle.js.map"></script>
Also Script for no suppport.
<script>
if (!window.customElements){document.write('Web components not supported'); alert('hi');
console.log('No web component');
}
I get the data Web components not supported in IE 11.
I tried the same using Vanilla JS and HTMl
My Html code
<html>
<style>
<head>
<script src="https://unpkg.com/#webcomponents/webcomponentsjs#2.5.0/webcomponents-
loader.js">
<script>
if (!window.customElements){document.write('Web components not supported');
alert('hi');
console.log('No web component');
}else{
alert('Web componnets is supported');
}
</script>
</head>
<body>
**<my-shadow></my-shadow>**
<script src="C:\Users\rgo7cob\Desktop\shadow.js"></script>
<h3> Hello. It is in Red </h3>
</body>
</html>
I have loaded the script from https://unpkg.com/#webcomponents/webcomponentsjs#2.5.0/webcomponents-loader.js.
I get the error in IE 11 console at Line number 2 in Js file
const template =document.createElement('template');
**template.innerHTML=`**
<style>
h3{
color : blue;
}
</style>
<h3> This is data from the Template and it is blue</h3>
Browser is not able to identify the template object even after using webcomponents-loader.js.
My Web component element must look like this.
When you reference webcomponents-loader.js in the page, IE will actually be compatible with the template element. Your problem is that you need to add the template element to the body after you create it, and if you need to add html elements to the body, you need to wait for it to load, so you need to execute these codes in window.onload().
A simple example:
window.onload = function() {
const template = document.createElement('template');
template.innerHTML = "<h3>This is a template.</h3>";
document.body.appendChild(template);
}
function show() {
var shadowEle = document.getElementById('shadow1');
var shadow = shadowEle.attachShadow({
mode: 'open'
});
//add style
const styles = document.createElement("style");
styles.textContent = 'h3{ color:blue; }';
shadow.appendChild(styles);
//add h3 title
const title = document.createElement("h3");
var temp = document.getElementsByTagName("template")[0];
var clon = temp.content.cloneNode(true);
title.textContent = clon.childNodes[0].textContent;
shadow.appendChild(title);
}
if (!window.customElements) {
document.write('Web components not supported');
alert('hi');
console.log('No web component');
} else {
alert('Web componnets is supported');
}
<script src="https://unpkg.com/#webcomponents/webcomponentsjs#2.5.0/webcomponents-loader.js"></script>
<input type="button" name="show" id="show" value="show template" onclick="show()" />
<br />
<my-shadow id="shadow1">
</my-shadow>
Result in IE:
I have problems with rendering a datagrid in my custom widget.
I was able to pinpoint the problem to this: datagrids that are not a direct child of the body do do not render correctly.
Showcase:
<!DOCTYPE html>
<html>
<head>
<title>Problems with datagrid</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css" media="screen">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojox/grid/resources/Grid.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojox/grid/resources/claroGrid.css">
</head>
<body class="claro">
<div id="outer"> </div>
<div><div id="inner"> </div></div>
<script>
dojoConfig = {
isDebug: true,
async: true,
has: {
"dojo-firebug": true,
"dojo-debug-messages": true
}
};
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js" data-dojo-config="async: true"></script>
<script>
require([
"dojo/parser",
"dojo/ready",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojox/grid/DataGrid"
], function(parser, ready, Memory, ObjectStore, DataGrid){
createOuterGrid = function(){
var data = [{id:12,name:'outer'},{id:13,name:'blabla'}];
var dataStore = new ObjectStore({ objectStore:new Memory({ data:data }) });
var grid = new DataGrid({
store:dataStore,
items:data,
structure:[
{name:"ID", field:"id", width:"20%"},
{name:"Name", field:"name", width:"80%"}
]
}, "outer");
grid.startup();
};
createInnerGrid = function(){
var data = [{id:12,name:'inner'},{id:13,name:'blabla'}];
var dataStore = new ObjectStore({ objectStore:new Memory({ data:data }) });
var grid = new DataGrid({
store:dataStore,
items:data,
structure:[
{name:"ID", field:"id", width:"20%"},
{name:"Name", field:"name", width:"80%"}
]
}, "inner");
grid.startup();
};
parser.parse();
ready(function(){
createOuterGrid();
createInnerGrid();
});
});
</script>
</body>
</html>
Is there a way to make this work? Should I log it somewhere ?
I originally posted my question here:
dojo stackcontainer contains custom widget that uses datagrid, but dategrid not showing up
but then I didn't know that it was caused by the fact that a datagrid should be a direct child of the body.
Grid need a parent height. Is documented somewhere.
Set a height for inner Div parent will do the magic.
This is just so happen the parent for outter div is body.
For some reason when using the Google Earth Plugin with EXTJS it just gives me a white map.
Wish I could post an image although my reputation needs some work.
I include the following files when loading my app.
https://www.google.com/jsapi
/location_of_file/googleearth/Ext.ux.GEarthPanel-1.3.js
/location_of_file/googleearth/Ext.ux.GEarthPanel-1.3.css
/location_of_file/GoogleEarthStartup.js
The startup file contains.
google.load("earth", "1");
google.load("maps", "2.xx");
Do I need a key with the jsapi?
Please advice.
All browsers are giving me same issue.
We have GE plugin loading in an ExtJs container. HTML looks like:
<script type="text/javascript" src="scripts/globe/Globe.js"></script>
<script type="text/javascript" src="scripts/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("earth", "1");
</script>
<script type="text/javascript">
Ext.onReady(function() {
Globe.initGlobe();
});
</script>
...
<body><!--Globe Panel is inserted here from Globe.js by Ext--></body>
The javascript class sets up a container with a div that we can target:
this.globeContainingPanel = Ext.create('Ext.container.Container', {
...
renderTo: Ext.getBody(),
items: [{
{
xtype: 'panel',
region: 'center',
html: '<div id="map3d"></div>'
}
}]
});
Then have the GE render to the div panel:
window.google.loader.ApiKey = 'ABCDEFGHIJKLMNOPgoogle.earth.ex.key';
window.google.loader.KeyVerified = true;
window.google.earth.allowUsageLogging = false;
google.earth.createInstance('map3d', this.initCallback, this.failureCallback);
Also, make sure you have the Google Earth plugin installed in your browser.
Ello!
I have an app bar icon and on the click event - I added a function which has the following code:
function homePage() {
WinJS.Navigation.navigate("/home/homePage.html");
}
Now I have two files - homePage.html which is inside /home/ and the js file for the same.
There's a simple button on html of id NextPage.
While in the homePage.js file, I have:
function () {
"use strict";
WinJS.UI.Pages.define("/home/homePage.html", {
ready: function (element, options) {
var button = document.getElementById("NextPage");
button.addEventListener("click", GoToNextPage);
}
});
function GoToNextPage() {
WinJS.Navigation.navigate("/default.html");
}
})();
But when I click the app bar icon - nothing happens :(
So what I plan to accomplish is that when someone clicks an appbar icon on default.html - the user switches to homePage.html (and then when I click the homePage button - it goes back) - but not even the initial page transfer is taking place.
This is embarrassing to ask but I can't just fold my hands and wait for something magical to happen. I have been working on this for an hour - read videos and samples but it's not working at all.
Would appreciate help - I can't figure out what's going wrong. Thanks!
The WinJS.Navigation namespace provides state and history management, but it doesn't actually do the navigation itself. To move from one page to another, you need to define a handler function for one of the events in the WinJS.Navigation namespace - this lets you respond to call to the WinJS.Navigation.navigate method in a way which makes sense for your app.
As a demonstration, here is a homePage.html file which has a NavBar containing a command that will be the trigger for the navigation.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>NavProject</title>
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/homePage.js"></script>
</head>
<body>
<div id="contentTarget">
<h1>Select a page from the NavBar</h1>
</div>
<div id="navbar" data-win-control="WinJS.UI.AppBar"
data-win-options="{placement:'top'}">
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'NextPage', label:'Next Page',
icon:'\u0031', section:'selection'}">
</button>
</div>
</body>
</html>
Along with the NavBar, I have defined the div element whose id is contentTarget. This is the place in my content where the new file will be loaded when the user clicks the NavBar command.
CLARIFICATION: All of the content that you want replaced needs to go into the contentTarget element. Otherwise you'll get a mix of old and new content displayed.
And here is the JavaScript file which wires it up (this is the homePage.js file which I added a script element for in the HTML file above):
(function () {
"use strict";
WinJS.Navigation.addEventListener("navigating", function (e) {
var elem = document.getElementById("contentTarget");
WinJS.UI.Animation.exitPage(elem.children).then(function () {
WinJS.Utilities.empty(elem);
WinJS.UI.Pages.render(e.detail.location, elem)
.then(function () {
return WinJS.UI.Animation.enterPage(elem.children)
});
});
});
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
app.onactivated = function (args) {
args.setPromise(WinJS.UI.processAll());
navbar.addEventListener("click", function (e) {
if (e.target.id == "NextPage") {
WinJS.Navigation.navigate("/nextPage.html");
}
}, true);
};
app.start();
})();
Notice how I have added a handler function for the WinJS.Navigation.navigating event. This event is triggered by a call to WinJS.Navigation.navigate and details of the navigation target are contained in the detail.location property of the event object.
In this example, I clear out any content in my target element and replace it with the contents of the target file and animate the transition from one to the other.
You only have to define one handler for the event. This means that if I have elements in nextPage.html that will lead to navigation, I just need to call WinJS.Navigation.navigate without needing to create a new event handler, like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
WinJS.UI.Pages.define("/nextPage.html", {
ready: function () {
back.addEventListener("click", function () {
WinJS.Navigation.navigate("/homePage.html");
});
}
});
</script>
</head>
<body>
This is next page.
<button id="back">Back</button>
</body>
</html>
The dojo api doesn't seem to load on my system (IE 8, Windows 7 with IIS 7.5). I try to test these examples by linking to the dojo api like this
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.Tree");
</script>
I also downloaded the library to link to it directly like this.
<script type="text/javascript" src="dojo.js">/*_*/</script>
<script type="text/javascript">
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.Tree");
</script>
But got the same result. The library scripts don't load the treeview. Are there issues with IE8, Windows 7 or IIS 7.5 for the dojo libary 1.6.1?
Do you know of a treeview with this functionality: MySQL database support, context menu, add/delete node, hyperlink in tree support?
Thanks.
Complete HTML file where the dojo api doesn't load.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
<!-- load Dojo -->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.addOnLoad() {
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.Tree");
}
</script>
<script type="text/javascript">
var treeDat = {
treeNodes: [
{ title:"World" },
{ title:"Business",
children:[
{ title:"News",
children:[
{ title:"Main"},
{ title:"Company News" },
{ title:"Economy" }
]
},
{ title:"Markets" },
{ title:"Technology" },
{ title:"Jobs and Economy" }
]
},
{ title:"Sports" }
]
};
</script>
<script type="text/javascript">
var TreeBuilder = {
buildTreeNodes:function (dataObjs, treeParentNode){
for(var i=0; i<dataObjs.length;i++){
var node = dojo.widget.createWidget("TreeNode",{
title:dataObjs[i].title,
expandLevel:99,
widgetId:(((treeParentNode)?treeParentNode.widgetId:"root_")+"_"+i)
});
treeParentNode.addChild(node);
treeParentNode.registerChild(node,i);
if(dataObjs[i].children){
this.buildTreeNodes(dataObjs[i].children, node);
}
}
},
buildTree:function (){
var myTreeWidget = dojo.widget.createWidget("Tree",{
widgetId:"myTreeWidget",
DNDMode:"between",
DNDAcceptTypes:["myTreeWidget"]
});
this.buildTreeNodes(treeDat.treeNodes,myTreeWidget);
var treeContainer = document.getElementById("myWidgetContainer");
var placeHolder = document.getElementById("treePlaceHolder");
treeContainer.replaceChild(myTreeWidget.domNode,placeHolder);
}
}
function addTreeContextMenu(){
var djWdgt = dojo.widget;
var ctxMenu = djWdgt.createWidget("TreeContextMenu",{});
ctxMenu.addChild(djWdgt.createWidget(
"TreeMenuItem",{caption:"Add Child Menu Item"}));
ctxMenu.addChild(djWdgt.createWidget(
"TreeMenuItem",{caption:"Delete This Menu Item"}));
document.body.appendChild(ctxMenu.domNode);
var myTree = dojo.widget.manager.getWidgetById("myTreeWidget");
/* Bind the context menu to the tree */
ctxMenu.listenTree(myTree);
}
dojo.addOnLoad(function(){
TreeBuilder.buildTree();
addTreeContextMenu();
});
</script>
</head>
<body>
<h1>Programmatic Dojo Tree Demo</h1>
<hr />
<div id="myWidgetContainer"
style="width: 17em; border: solid #888 1px; height:300px;">
<span id="treePlaceHolder"
style="background-color:#F00; color:#FFF;">
Loading tree widget...
</span>
</div>
</body>
</html>
You need to wrap the dojo.require calls in the dojo.addOnLoad function. This is required when using Dojo cross-domain build.
See more at http://dojotoolkit.org/reference-guide/quickstart/cross-domain.html
dojo.addOnLoad(function() {
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.Tree");
});