I'm trying to make a simple example work on my local environment. I want to make a map on my website, but once I downloaded the necessary files I've got strange problems. First, I had to add for the example script link the 'type="module"' code, which is already made me crazy. Nobody tests these applications, or my environment is so special? Why are they even using the import tag, if it's not working in the most used browser like a charm?! After I extended the example code and changed the import links to be fine for my environment (ol/Map.js to /ol/Map.js), now I've got this error you can read in the title. Failed to resolve module specifier "rbush". What can I do? I have no idea. There must be a main point I have missed. The example (https://openlayers.org/en/latest/examples/simple.html) works fine online on openlayers.org, but If I follow the instructions It don't on my end. Why?
OpenLayers 5.1.3 is meant to be used with the npm package manager as described here:
https://openlayers.org/en/latest/doc/tutorials/bundle.html
To use it without including the dependencies and "building" it, see the quick start page in the documentation:
Put a map on a page
Below you'll find a complete working example. Create a new file, copy in the contents below, and open in a browser:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css" type="text/css">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
.map {
height: 100%;
}
</style>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
</body>
</html>
working example of the "simple" example
Related
In Official documentation there's a program in which they mentioned reference of Don McCurdy’s aframe-extras to get for Aframe 1.2.0. But when I am running the program using CDN of production link. It never works. And I receive the following error as well.
My code is :
<!
DOCTYPE html>
<html lang="en">
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras#v6.1.1/dist/aframe-extras.min.js"></script>
<title>Proyectos</title>
</head>
<body>
<a-scene physics>
<script>
AFRAME.registerPrimitive('a-ocean', {
// Attaches the `ocean` component by default.
// Defaults the ocean to be parallel to the ground.
defaultComponents: {
ocean: {},
rotation: {x: -90, y: 0, z: 0}
},
// Maps HTML attributes to the `ocean` component's properties.
mappings: {
width: 'ocean.width',
depth: 'ocean.depth',
density: 'ocean.density',
color: 'ocean.color',
opacity: 'ocean.opacity'
}
});
</script>
<a-ocean color="aqua" depth="100" width="100"></a-ocean>
</a-scene>
</body>
</html>
a-ocean is defined in a-frame extras, so there is no need for you to define it again, you should be able to just use it. That explains the first error ("a-ocean is already registered").
Unfortunately is written using the THREE.js Geometry component, which was deprecated in THREE.js r125.
That corresponds to A-Frame 1.2.0.
This explains the second error ("mergeVertices is not a function").
So (until someone updates a-ocean) you have to use A-Frame 1.1.0 or earlier if you want to use a-ocean.
This code will give you a basic ocean
<html lang="en">
<head>
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras#v6.1.1/dist/aframe-extras.min.js"></script>
<title>Proyectos</title>
</head>
<body>
<a-scene physics>
<a-ocean color="aqua" depth="100" width="100"></a-ocean>
</a-scene>
</body>
</html>
In terms of getting a-ocean fixed, it looks like there has been some work on this:
https://github.com/n5ro/aframe-extras/issues/362
That issue includes sample code for a fix, but nobody has made it into a PR yet...
I am wondering if is possible to perform this action:
I have a site (Wordpress built on Elementor). I will periodically add some content on the site, and once I add/change content on page can I force refresh somehow for all that users that are watching that page?
The question may not be for stackoverlow but looking for help as I wasn't able to find what I am looking for.
An answer to this question is in plugin called Force Refresh
https://wordpress.org/plugins/force-refresh/#installation
Posting an answer as it may help someone else.
Force reload is something your user can hate. I would like to suggest different approach: Create JavaScript/jQuery code to periodically check eg. if some file exists. Once you want to reload the page, just create the file.
The example should be extended of checking if user already reloaded the page to avoid showing the notice bar again, even the file still exists. You can use cookies for that purpose.
The code below is just to demonstrate the idea, it si not a complex solution.
jQuery(function($) {
//check on load - shloud be removed
checkFileExists();
//call function every 5 minutes
setInterval(function() {
checkFileExists();
}, 1000 * 60 * 5);
//check if a given file exists
function checkFileExists() {
var http = new XMLHttpRequest();
http.open('HEAD', "https://file-examples-com.github.io/uploads/2017/02/file_example_JSON_1kb.json", false);
http.send();
if (http.status === 200) {
$("#notice-bar").show();
//you can reload the page here, just uncomment the line below
//location.reload(true);
$("#notice-bar").show();
} else {
//File doesn't exists
$("#notice-bar").hide();
}
}
//reload page once the link is clicked
$('#reload').click(function() {
location.reload(true);
});
});
#notice-bar {
position: absolute;
display: none;
top: 0;
width: 100%;
height: auto;
text-align: center;
padding: 0.5em;
background-color: #FFDDA9;
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="notice-bar">
<p>New version available. Please reload the page.</p>
</div>
</body>
</html>
I have a simple html do display an animation i made in After Effects, but i can't display the animation when loading it locally (data.json). But if i upload the animation through LottieFiles and use the link generated in my html file, it works. Can someone please explain me why i am not being able to load the animation through my data.json instead from the generated link ?
Bellow i put the code i have so far:
<head>
<!-- Meta -->
<meta charset="UTF-8">
<title>Bodymovin Demo</title>
<style>
body {
text-align: center;
}
h1 {
margin-top: 2em;
}
#bm {
width: 1000px;
margin: 0 auto;
}
</style>
</head>
<body>
<h1>Test Animation</h1>
<div id="bm"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.js"></script>
<script>
var animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: true,
autoplay: true,
// this way works, but if i put 'data.json' which is on the same directory of this file it doesn't work
path: 'https://assets7.lottiefiles.com/packages/lf20_kxQ49M.json'
});
</script>
</body>
I also have a link to my 'data.json' file:
https://drive.google.com/file/d/1xsikpLLQY-7FMV1_S5VelmB2_85LD-oi/view?usp=sharing
Most likely you are getting a CORS error.
For security reasons browsers don't seem to allow you to load JSON files stored on your computer, it will work as long as the .json file is hosted online.
So through lottiefiles as you've done, or on your web hosting.
I'm trying to insert a map in a single post in Jekyll.
Here is the visible effort of my attempt to this: github link
Here is the link to the github's account itself: link
I took a default template, ie Hyde.
Then I added the Leaflet's CSS and JS files in the _includes/head.html
Then I created a post that relied on the _layouts/default.html (default draws from head.html)
As I said, I'm attempting to insert a single map in a single post. If you look at the first link, it shows the map all over the blog in a weird manner.
It doesn't show up in the single post itself.
How can I make this work?
I'm hoping to eventually have a series of posts each with their own map, if that's possible.
Here is the code in the solitary post that I have up so far:
---
layout: default
title: Trying to integrate map in jekyll
---
<div id="map">
</div>
<script>
var map = L.map('map').setView([34.00000, -118.260126], 14);
mapLink =
'OpenStreetMap'; L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © ' + mapLink, maxZoom: 18, }).addTo(map);
var marker = L.marker([34.063298, -118.260126]) .addTo(map).bindPopup("<b>Blah Blah Blah</b><br /><a href='http://www.cnn.com'>Additional Information</a><br />").openPopup();
</script>
I realize that this post relies a lot on links, and that's frowned up on here at SO. But I have no other way of explaining my problem.
Correct code in _includes/head.html is :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">
not
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"></script>
and
<style type="text/css">
#map {
width:400px;
height:550px;
background-color: red;
}
</style>
not
<style type="text/css">
#map {
width:400px%;
height:550px;
background-color: red;
}
</style>
I just posted this in the Google Visualization group, but I thought I would reach out to the Plone community as well for help.
I am using Plone 4.2.4 and wanted to integrate Google Charts with an Oracle back end via cx_Oracle. There is already a very nice package called EEA.Daviz. However, it was way more than I needed and I thought I could do it on my own, so I created some page templates and Python code that wraps the Javascript. On my laptop (Mac OS X) it all worked fine.
However, once I pushed it to my server (SLES 10), BarCharts stopped working. I have only tested Bar, Line and Motion charts. All I get is a red error box that says "e[0].K is undefined". After googling around, I found a very similar description of my problem that suggests it is a Google Visualization error and the fix is to change the width and height properties. However, changing the height or width did not fix it. What is very strange is that, if I copy the example JS from the BarChart page and copy it into a vanilla Zope Page Template, it works just fine. However, once I wrap it in the master template, I get the red error message again.
So I am confused. I have the same theme installed on my laptop and it did not give me any problems. I know I can display BarCharts on the server without the theme in a vanilla Page Template.
Can anyone point me in the right direction?
ZPT that Works:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['COUNTRY', ' COUNT'],
['Austria', 19],
['Belgium', 73],
['Bulgaria', 20]]
); var options = {
title: 'Test Bar Chart'}; var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 1000px;"></div>
</body>
</html>
ZPT that does NOT work:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
xmlns:tal="http://xml.zope.org/namespaces/tal"
xmlns:metal="http://xml.zope.org/namespaces/metal"
xmlns:i18n="http://xml.zope.org/namespaces/i18n"
lang="en"
metal:use-macro="context/main_template/macros/master"
i18n:domain="plone">
<metal:main fill-slot="javascript_head_slot">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['COUNTRY', ' COUNT'],
['Austria', 19],
['Belgium', 73],
['Bulgaria', 20]]
); var options = {
title: 'Test Bar Chart'}; var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);}
</script>
</metal:main>
<body>
<metal:main fill-slot="main">
<tal:main-macro metal:define-macro="main">
<div id="chart_div" style="width: 900px; height: 1000px;"></div>
</tal:main-macro>
</metal:main>
</body>
</html>
I've tested your second example and it seems to work as intended so maybe there is something wrong with your data coming from Oracle (format, missing values, etc). You'll have to do some JS debugging out there. Try adding a breakpoint to see what e[0] is and why it doesn't have the K attribute (or why e is an empty Array).
Also, EEA Daviz is a bundle that brings together multiple Visualization frameworks (Google Charts, Simile Exhibit and in the near future Highcharts) but you can always use one or more of its components without bringing in the entire plane Thus, you should also try EEA Google Charts. Don't forget that you'll need collective.js.jqueryui < 1.9 for Plone 4.2.x