How do we use OpenLayers (Open Street Maps) examples with JavaScript (ECMAScript 6)?
I've downloaded the examples and saved them locally into a directory called "./ol/" and the ol.css and ol.js files are not listed because of some new "mapping" and "imports" used by JavaScript (ECMAScript 6)?
The https://openlayers.org/en/latest/doc/quickstart.html example works locally on my computer because it doesn't use the imports JavaScript (ECMAScript 6)? Is it required to use the files from "v6.1.1-dist.zip" or how do we use the "v6.1.1.zip"?
https://openlayers.org/download/
I'm testing the OpenLayers (Open Street Maps) examples locally on my computer and having some difficulty getting the imports working correctly.
The example I'm using is the following.
https://openlayers.org/en/latest/examples/full-screen-source.html
NOTE: I didn't want to use the hosted OL.CSS/OL.JS files
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.1.1/build/ol.js"></script>
<link rel="stylesheet"
href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.1.1/css/ol.css">
the HTML code: "index.html"
<!DOCTYPE html>
<html lang="en">
<head>
<title>Full Screen Control with extended source element</title>
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<style>
.map {
width: 100%;
height:400px;
}
.fullscreen:-webkit-full-screen {
height: 100%;
margin: 0;
}
.fullscreen:-ms-fullscreen {
height: 100%;
}
.fullscreen:fullscreen {
height: 100%;
}
.fullscreen {
margin-bottom: 10px;
width: 100%;
height: 400px;
}
.ol-rotate {
top: 3em;
}
.map {
width: 80%;
height: 100%;
float: left;
}
.sidepanel {
background: #1F6B75;
width: 20%;
height: 100%;
float: left;
}
.sidepanel-title {
width: 100%;
font-size: 3em;
color: #ffffff;
display: block;
text-align: center;
}
</style>
</head>
<body>
<div id="fullscreen" class="fullscreen">
<div id="map" class="map"></div>
<div class="sidepanel">
<span class="sidepanel-title">Side Panel</span>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
the JavaScript code: "index.js"
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import {defaults as defaultControls, FullScreen} from 'ol/control';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
var view = new View({
center: [-9101767, 2822912],
zoom: 14
});
var map = new Map({
controls: defaultControls().extend([
new FullScreen({
source: 'fullscreen'
})
]),
layers: [
new TileLayer({
source: new OSM()
})
],
target: 'map',
view: view
});
I'm not sure what this "package.json" file is used for but I placed it in the local "./" directory??? Is that correct?
Here is what the error looks like after I load the .js/.css:
What exactly is a
[Error] SyntaxError: Unexpected string literal 'ol/ol.css'. import
call expects exactly one argument.
(anonymous function) (index.js:1)
This error has something to do with the JavaScript (ECMAScript 6)
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import {defaults as defaultControls, FullScreen} from 'ol/control';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
I placed the "v6.1.1-dist.zip" and "v6.1.1.zip"? from https://openlayers.org/download/ in my local project directory with my "index.html" and "index.js" directory.
Let me know if you have some help or ideas!
Thanks!
you can still use the software the way you described, however, the import statements will not work. Instead of importing the modules you can use everything from ol by giving a path, for instance instead of
import Map from 'ol/Map';
var map = new Map({
//something
});
you can do this:
var map = ol.Map({
//something
});
If you do this, you need to make sure you have openLayers as an src in your html file. Here is an example how that could look like. You can either use the link from the example, or use relative links if you have it locally in your folder (obviously, after unzipping the zips)
If you look at the Docs, at the very top of each Class there is an import statement. If you use node, you can just copy-paste it, otherwise you can use the path and change all the slashes to points. So in order to use a vectorSource, instead of doing import VectorSource from 'ol/source/Vector'; you can say new ol.VectorSource .
As Rainb already stated, there are many reasons why everyone uses node modules and bundlers nowadays, but for getting started or for very small projects the 'old school' way still works perfectly fine.
Your code is not working because it's not code made for the browser, this is code made for NodeJS.
Since 2010, webdevs have started to package code this way for various reasons, easier to manage, and you can use features that browsers don't support yet, and transpile them into things that browsers do support.
If we take a look at the OpenLayers repository on NPM, we can see that they offer you the possiblity of using browserify/webpack, that is just transpiling nodejs JavaScript into JavaScript that the browser can use.
https://github.com/openlayers/ol-browserify
Since this code is made for NodeJS, you do need to install nodejs in order to get the browserified version even if you don't want to use NodeJS.
On this repository, you will find instructions on how to do this, see which files are what you need and then you're free to use the OpenLayers library to do as you please.
Related
I'm having a problem trying to load a graph form json using JointJS. I know the theory (https://resources.jointjs.com/tutorial/serialization), however, I still do not know how to show a graph.
This is my html file:
<!-- JointJS libraries omitted for space -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script type="text/javascript">
function read_json() {
$.getJSON("/jointsjdemo/demo.json", function(data) {
var graph = new joint.dia.Graph;
graph.fromJSON(data);
var paper = new joint.dia.Paper({
el: document.getElementById('myholder'),
model: graph,
width: 600,
height: 100,
gridSize: 1
});
});
}
read_json();
</script>
And this is my json file:
{"cells":[{"type":"standard.Rectangle","position":{"x":100,"y":30},"size":{"width":100,"height":40},"angle":0,"id":"42a7f123-1f0d-4d06-b49e-8cbcbbb17e23","z":1,"attrs":{"body":{"fill":"blue"},"label":{"fill":"white","text":"Hello"}}},{"type":"standard.Rectangle","position":{"x":400,"y":30},"size":{"width":100,"height":40},"angle":0,"id":"6ecac186-b9c1-4755-97db-704cd9b9156f","z":1,"attrs":{"body":{"fill":"blue"},"label":{"fill":"white","text":"World!"}}},{"type":"standard.Link","source":{"id":"42a7f123-1f0d-4d06-b49e-8cbcbbb17e23"},"target":{"id":"6ecac186-b9c1-4755-97db-704cd9b9156f"},"id":"fa23e165-3c9f-46f8-9fe9-e6660d4086ca","z":2,"attrs":{}}]}
When a load the web page, it shows nothing on screen. I'm deployed my app in Apache Tomcat. Using Chrome Developer Tools, no errors are shown in Console.
I dont know what I'm missing.
Any help please? The json file was generated through toJSON command.
P.D. I think it should be better to hire someone, but I'm still trying to do this.
this might be a pretty common question but what I found on google does not help me.
I have a emberJs Project with all assets(images, etc) in
my-ember-project/public/assets/images/
everything works fine when i load the assets from homepage which is the root URL "/" or localhost:4200
for example in my homepage
I have a component with img tag which looks like this
<img src="assets/images/articles/article-1.jpg"/>
on another page with url localhost:4200**/articles/** I also load the same image with the same tag
but from what I've seen it tried to load the image from localhost:4200/articles/assets/images/articles/article-1.jpg and not from the correct path localhost:4200/assets/images/articles/article-1.jpg
adding "/" before "assets/images/" works for me if I'm trying to host my project on root folder
but when I need to host my project on subdirectory so my url (www.mydomain.com/ember-project-here/)
how do I load my assets from absolute path or relative to my settings of rootURL
adding {{rootURL}} seems to do nothing to me
It seems, {{rootURL}} does not work in hbs files (long time ago I used to think it does).
{{env 'rootURL'}} should work, where env is a helper defined like this:
import { get } from '#ember/object';
import { helper } from '#ember/component/helper';
import ENV from 'project-name/config/environment';
export default helper(function([path]) {
return get(ENV, path);
});
you can add a path helper:
import { helper } from '#ember/component/helper';
import ENV from 'project-name/config/environment';
export default helper(function([path]) {
return path.replace(/^~\//, ENV.rootURL);
});
The you can do:
<img src={{path "~/assets/images/articles/article-1.jpg"}} />
This is nice because you can also use variables:
<img src={{path this.myPath}} />
and myPath:
get myPath() {
return `~/assets/images/${this.args.iconName}.jpg`;
}
You've done a good research on this front. Yes, rootURL is the one you want to add to your project since you are deploying your application to a subfolder.
rootURL can be added to any Ember app using the config/environment.js file.
// config/environment.js
module.exports = function(environment) {
var ENV = {
// other configs...
rootURL: '/ember-project-here/',
};
}
The official guide can give you some additional info!
What kind of magic is polymer-serve doing that I don't get with a simple, static web server?
I just started with a simple "hello world" project. When I run polymer serve I'm able to browse to the page at http://localhost:8000/example.html and it works great. If I use static-server and browse to the same page, I get an error message in Chrome.
Uncaught TypeError: Failed to resolve module specifier "#polymer/lit-element". Relative references must start with either "/", "./", or "../".
Here's example.html, which was copied right out of the README.
<script src="node_modules/#webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
<script type="module">
import { LitElement, html } from "#polymer/lit-element";
class MyElement extends LitElement {
static get properties() {
return {
mood: { type: String }
};
}
constructor() {
super();
this.mood = "happy";
}
render() {
return html`
<style>
.mood {
color: green;
}
</style>
Web Components are <span class="mood">${this.mood}</span>!
`;
}
}
customElements.define("my-element", MyElement);
</script>
<my-element mood="happy"></my-element>
Modules are imported by name instead of by path
check for instance this reference
From it
This change brings Polymer in line with standard npm practice, and
makes it easier to integrate Polymer with other tools and projects.
However, because browsers don't yet support importing modules by name,
it means you'll need a transform step to run Polymer modules natively
in the browser. The Polymer CLI and related tools are being updated to
do this transformation automatically.
running polymer build should create converted files (referenced by path)
Using WebStorm's 'File Watchers' feature and pug-cli, I'm creating a pug template which is automatically built into an HTML file when the pug template is modified. For exogenous reasons, I need to embed the CSS within my HTML files so I can use it within a third-party ecommerce platform. Here is my current attempt at embedding the CSS within a PUG template which doesn't work because pug doesn't support 'require':
template.pug
- var jstscss = require('jstransformer')(require('jstransformer-scss'))
- var scss = `
#import "../a-file-I-need-imported"
$bgcolor = #fff;
body {
background-color: $bgcolor;
}
`
script.
!{jstscss.render(scss)}
This would ideally be built into:
template.html
<script>
body {
background-color: #fff; }
// a-file-I-need-imported's CSS, that was imported. (i.e. Mixins, other variables, etc.)
</script>
package.json
"build:pug": "pug --pretty --basedir ./ --out ./dist/ ./src"
How can I accomplish this feat while still using pug-cli? (Which is what WebStorm's File Watcher is using along with my package.json's build script.)
Edit: I assume it will be related to re-coding the render function in pug-cli and injecting the jstransformer, but I'm unfamiliar with node, javascript, pug so I'm not sure how I would go about doing that without directly editing the node_module, which would get overridden if I ever update it. Is there anything like a Wordpress Child Theme for node modules? lol.
Just call a new script, like node build.js and use the pug module since pug-cli does not support passing anything beyond JSON objects or files to locals
build.js
const pug = require('pug')
const jstscss = require('jstransformer')(require('jstransformer-scss'))
let locals = {jstscss};
const html = pug.renderFile('./template.pug',locals);
console.log(html); // instead, output your file using this function.
template.pug
- var scss = `#import "./import"; $bgcolor : #fff; body {background-color: $bgcolor;}`
style.
!{jstscss.render(scss).body}
import.scss
body{
font-size:12px;
}
output in this case
<style>body {
font-size: 12px; }
body {
background-color: #fff; }
</style>
https://repl.it/#CodyGeisler/PugRendersScss
I've been banging my head against to wall for weeks to put together the minimal HTML for an IronPython Silverlight application that uses Gestalt, as pioneered by Jimmy Schementi here: http://www.silverlight.net/learn/advanced-techniques/dynamic-languages/dynamic-languages-in-silverlight and here: http://ironpython.net/browser/gettingstarted.html
But I'm having a hard time loading an application that does anything. Every time I put into the examples any script of my own, the Silverlight application either fails to load, or shows nothing in its object. I want to have the HTML foundation so that I can begin accessing the Silverlight libraries and start coding/testing graphics for my app. (But I can't get there yet.)
Taking from his examples, I've put together the following HTML, which calls my visual.py - a python file that should be able to do everything that a XAML file does by accessing the Silverlight libraries.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
html, body { height: 100%; overflow: auto; }
body { padding: 0; margin: 0; }
#silverlightControlHost { height: 90%; text-align: center; }
</style>
<script type="text/javascript">
window.DLR = {settings: {windowless: 'true'}}
</script>
<script type="text/javascript" src="http://gestalt.ironpython.net/dlr-latest.js"></script>
<title>webcam-mic</title>
</head>
<body>
<script type="application/python" src="visual.py" id="python" width="100%" height="100%""></script>
</body>
</html>
But this doesn't work. The .py file it calls has: (also taken from working IronPython examples from elsewhere)
from System.Windows import Application, Thickness
from System.Windows.Controls import (
Button, Orientation, TextBlock,
StackPanel, TextBox
)
from System.Windows.Input import Key
root = StackPanel(Width=500,Height=500)
textblock = TextBlock()
textblock.Margin = Thickness(20)
textblock.FontSize = 18
textblock.Text = 'Stuff goes here'
root.Children.Add(textblock)
panel = StackPanel()
panel.Margin = Thickness(20)
panel.Orientation = Orientation.Horizontal
button = Button()
button.Content = 'Push Me'
button.FontSize = 18
button.Margin = Thickness(10)
textbox = TextBox()
textbox.Text = "Type stuff here..."
textbox.FontSize = 18
textbox.Margin = Thickness(10)
textbox.Width = 200
#textbox.Watermark = 'Type Something Here'
def onClick(s, e):
textblock.Text = textbox.Text
textbox.Text = ""
def onKeyDown(sender, e):
if e.Key == Key.Enter:
e.Handled = True
onClick(None, None)
button.Click += onClick
textbox.KeyDown += onKeyDown
panel.Children.Add(button)
panel.Children.Add(textbox)
root.Children.Add(panel)
Application.Current.RootVisual = root
What additional components do I need? (Is the problem with the version of dlr.js? My script tags? Version of Silverlight?) All I need is the necessary code to produce a full screen Silverlight app that takes all of its controls and graphics from a python file. So far, nothing I've put together has worked. I'm running Firefox with Silverlight 4.0.
Thanks to Lukas Cenovsky's suggestion and the tips from here: , I used the sdl-sdk to create a template much like the template in IronPython-2.7\Silverlight\script and created a .xap file with Chiron and Mono. I thought that Gestalt would obviate the need for using Chiron to create a .xap, but whatever works. Thanks, all!
For future reference, the Terminal command to create a .xap is something like: mono /path/to/Chiron.exe /d:directory_with_pyfile /z:name.xap
How are you serving the HTML file? Any HTML file with references must be served from a web-server, not the file-system, so no file:// URLs.
You can also use Chiron to produce your own .xap file. Then the XAP file can be served from any web-server you want, but if you want any reasonable dev experience you'll have to use "Chiron.exe /w" as your web-server.