Could anybody give me an example please how to integrate the ol-ext-library in OL5?
So far I have downloaded the .css & .js-Files from here: https://github.com/Viglino/ol-ext/tree/master/dist
...to my openlayers/dist-directory.
I try to link it in my html-file with:
<!-- ol-ext -->
<link rel="stylesheet" href="openlayers/dist/ol-ext.css" />
<script type="text/javascript" src="openlayers/dist/ol-ext.js"></script>
...and then I try "npm run build"...but I get so many errors.
Has anybody included the ol-ext succesfully and could give me a hint?
In my application i just use same method as "ol" do, for example if you want to use "ol-ext" of "Imageline" then you just need to import
import Imageline from 'ol-ext/control/Imageline';
And you don't need to add anything in your HTML file nor change the way you use "ol" library in your code.
Hope it can help you
Thanks a lot, Mike, it works now.
In the index.html I needed:
<!DOCTYPE html>
<html>
<head>
<!--<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<!-- jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<link
rel="stylesheet"
href="https://viglino.github.io/ol-ext//dist/ol-ext.css"
/>
<meta charset="utf-8">
<title>k,ais test</title>
<style>
#image {
background-color: #eee;
padding: 1em;
clear: both;
display: inline-block;
margin: 1em 0;
}
</style>
....
......
In the index.js I use the file mentioned next:
import "ol/ol.css";
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {getCenter} from 'ol/extent.js';
import {transform} from 'ol/proj.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';
import WKT from 'ol/format/WKT.js';
import {defaults as defaultControls} from 'ol/control.js';
import ol_control_Print from 'ol-ext/control/Print'
import {ScaleLine} from 'ol/control.js';
import ImageLayer from 'ol/layer/Image.js';
import ImageWMS from 'ol/source/ImageWMS.js';
import TileWMS from 'ol/source/TileWMS.js';
import Static from 'ol/source/ImageStatic.js';
import proj4 from 'proj4';
import {register} from 'ol/proj/proj4.js';
import {get as getProjection} from 'ol/proj';
import BingMaps from 'ol/source/BingMaps.js';
import * as olProj from 'ol/proj';
import GeoJSON from 'ol/format/GeoJSON.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import {Circle as CircleStyle,Fill, Stroke, Style, Text} from 'ol/style.js';
proj4.defs('EPSG:25832', '+proj=utm +zone=32 +x_0=-32000000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
register(proj4);
var osm = new TileLayer({
source: new OSM()
});
var view = new View({
center: [rechtswert,hochwert],
zoom: mzoom,
projection: 'EPSG:25832'
});
var map = new Map({
layers: [osm,wmsLayer3,wmsLayer2],
target: 'map',
view: view
});
var printControl = new ol_control_Print();
map.addControl(printControl);
printControl.on('print', function(e) {
$('body').css('opacity', .1);
alert ("hello");
});
printControl.on(['print', 'error'], function(e) {
$('body').css('opacity', 1);
alert ("hello2");
});
Related
I'm trying to test a single component in my react app and getting the following error:
TypeError: Cannot read property 'clientWidth' of null
20 |
21 | resize = () => {
> 22 | const contentWidth = document.getElementById('root').clientWidth;
Here's the test:
import React from 'react'
import { MemoryRouter } from 'react-router-dom'
import { render, screen } from '#testing-library/react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import reducer from '../store/reducer';
import Navigation from '../App/layout/AdminLayout/Navigation'
const store = createStore(reducer);
describe('Menu', () => {
it('Estate Planning points to classic estate planning page', () => {
render(
<MemoryRouter>
<Provider store={store}>
<Navigation />
</Provider>
</MemoryRouter>
);
screen.debug()
})
})
I tried with defining the container render(..., { container: document.body}), but got the same error. I'm not sure what I'm missing.
You are getting this error because your document does not contain an element with id "root" when running a test with react-testing-library. This is likely because react-testing-library renders your component to a different container than ReactDOM (which is used to run your application).
The Problem
Let's look at a typical React application setup.
<!-- public/index.html -->
<html>
<body>
<div id="root"></div>
</body>
</html>
// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
ReactDOM.render(<App />, document.querySelector("#root"));
// src/components/App.js
import React from "react";
const App = () => <div>Hello World!</div>;
export default App;
As we can see, index.js looks for an HTML element with an id of "root" and renders our App component inside that element. We can confirm that is happening by inspecting the element in your browser's developer tools:
<html>
<body>
<div id="root">
<div>Hello World!</div>
</div>
</body>
</html>
Now, let's write a simple test, and see what the DOM looks like.
// src/components/App.test.js
import React from "react";
import { render, screen } from "#testing-library/react";
import App from "./App";
test("renders the component", () => {
render(<App />);
screen.debug();
});
screen.debug() prints the DOM for debugging purposes. We can see that it does not include an element with id "root":
<body>
<div>
<div>
Hello World!
</div>
</div>
</body>
So the DOM container is slightly different for your test vs. runtime.
The Solution
One way to fix this problem is to refactor your code not to be dependent on the "root" element. Another option is to tell react-testing-library to render your component in a custom container. Here is an example of what that might look like:
// src/components/App.test.js
import React from "react";
import { render, screen } from "#testing-library/react";
import App from "./App";
test("renders the component in a specific container", () => {
const container = document.createElement("div");
container.id = "root";
render(<App />, { container: document.body.appendChild(container) });
screen.debug();
});
Now, we can see an element with id of "root" in the DOM, so your component should be able to find that element.
<body>
<div id="root">
<div>
Hello World!
</div>
</div>
</body>
i'm developing web app using Next.js and I'd like to use jQuery in Next.js.
But I can't import jquery plugin.
please check my code and Help me.
import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';
export default class MyDocument extends Document {
static getInitialProps({ renderPage }) {
const sheet = new ServerStyleSheet();
const page = renderPage(App => props => sheet.collectStyles(<App {...props} />));
const styleTags = sheet.getStyleElement();
return { ...page, styleTags };
}
render() {
return (
<html lang="en">
<Head>{this.props.styleTags}
<link
href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.css"
rel="stylesheet"
/>
<script src="../static/js/jquery.main.js" async/>
</Head>
<body>
<Main />
<div id="modal" />
<NextScript />
</body>
</html>
);
}
}
One typical issue you will get into if you do jQuery is, After importing the jQuery plugins they will register for onClick events, and by that time you can't guarantee that the actual DOM Element is ready, elements may get created later and may get refreshed.
One way of solving the issues is call the jQuery code which does the initialization in componentDidMount() and also in componentDidUpdate() so that you can make sure the DOM elements are present before the jQuery plugin register them.
I am currently getting my feet whet by using rollup.js beyond the simple "helloworld" case. I have created a rollup project where I am using a combination of babel, eslint and leaflet. My rollup.config.js is given below:
// plugins
import babel from 'rollup-plugin-babel';
import eslint from 'rollup-plugin-eslint';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
export default{
entry: 'src/scripts/main.js',
dest: 'build/js/main.min.js',
format: 'iife',
sourcemap: 'inline',
plugins: [
resolve({
jsnext: true,
main: true,
browser: true,
}),
commonjs(),
eslint({
exclude: [
'src/styles/**',
]
}),
babel({exclude:'node_modules/**', })
]
};
Next my main.js is given by:
import L from 'leaflet';
var map = L.map('map').setView([54.217, -4.5373], 8);
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors, © CartoDB'
}).addTo(map);
And my index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1">
<style>
#map {
width:600px;
height:400px;
}
</style>
<link href="https://unpkg.com/leaflet#1.2.0/dist/leaflet.css" rel="stylesheet" type="text/css" />
<title>Learning Rollup</title>
</head>
<body>
<div id="map">
</div>
<!-- This is the bundle generated by rollup.js -->
<script src="js/main.min.js"></script>
</body>
</html>
When I execute rollup -c, I end up with a huge 1.4MB+ main.js.min file...If I remove sourcemap: 'inline' from my rollup.config.js, the size of the file drops to 390 kb. For what reason is the sourcemap exploding the size of the generated file? Isn't treeshacking supposed to further reduce the generated file?
The sourcemap will almost always be bigger than the code it's mapping. For that reason, sourcemap: 'inline' is not recommended — do sourcemap: true instead and it'll be written to an adjacent .map file, which will only be downloaded if someone has their devtools open with sourcemaps enabled.
This is unrelated to treeshaking.
I am having problems figuring out how to handle events when using Vue together with Electron. It may seem stupid, but I have spent time reading the docs, testing Vue instances and directives in the browser which works fine but the same principles won't work in my electron desktop app (this is so much different then Php OOP).
I use the electron-vue boilerplate, set it up, works like a charm. Created a template and a component (TopMenu), now I need to handle the click event of the menu buttons placed into my TopMenu component, but no matter how I try, I get:
[Vue warn]: Property or method "say" is not
defined on the instance but referenced during render. Make sure to
declare reactive data properties in the data option. (found in
component )
[Vue warn]: Handler for event "click" is undefined.
./LandingPageView/TopMenu.vue:
<template>
<div>
<button type="button" name="button" v-on:click="say">BUTTON</button>
</div>
</template>
main.js:
import Vue from 'vue'
import Electron from 'vue-electron'
import Resource from 'vue-resource'
import Router from 'vue-router'
import App from './App'
import routes from './routes'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
Vue.use(Electron)
Vue.use(Resource)
Vue.use(Router)
Vue.config.debug = true
const router = new Router({
scrollBehavior: () => ({ y: 0 }),
routes
})
/* eslint-disable no-new */
new Vue({
methods: {
say: function () {
alert()
}
},
router,
...App
}).$mount('#app')
App.vue:
<style>
#import url(https://fonts.googleapis.com/css?family=Lato:400,700);
* {
margin: 0;
padding: 0;
}
html,
body { height: 100%; }
body {
align-items: center;
background:
radial-gradient(
ellipse at center,
rgba(255, 255, 255, 1) 0%,
rgba(229, 229, 229, .85) 100%
);
background-position: center;
font-family: Lato, Helvetica, sans-serif;
}
</style>
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
import store from 'src/vuex/store'
export default {
store
}
</script>
index.ejs:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
<!-- webpack builds are automatically injected -->
</body>
</html>
Hello you need to put the methods in the same component that the template:
<template>
<div class="example" #click="say">say method</div>
</template>
<script>
export default {
methods: {
say () {
console.log('Hello world!')
}
}
}
</script>
Take a look in the vue documents: https://v2.vuejs.org/v2/guide/
I'm using JSBIN to test out some Ember stuff and I can't seem to display my model data.
Unfortunately on only error I get is "Script error (line 0)" which isn't very helpful.
JSBIn here:
http://jsbin.com/duqehebewu/3/edit?html,console,output
<script src="http://static.iamstef.net/ember-cli-jsbin/jquery/dist/jquery.js"></script>
<script src="http://static.iamstef.net/ember-cli-jsbin/loader.js/loader.js"></script>
<script src="http://static.iamstef.net/ember-cli-jsbin/handlebars/handlebars.js"></script>
<script src="http://static.iamstef.net/ember-cli-jsbin/ember/ember.js"></script>
<script src="http://static.iamstef.net/ember-cli-jsbin/ember-load-initializers/ember-load-initializers.js"></script>
<script src="http://static.iamstef.net/ember-cli-jsbin/ember-resolver/dist/ember-resolver.js"></script>
<script src="http://static.iamstef.net/ember-cli-jsbin/ember-cli-shims/app-shims.js"></script>
<script src="http://static.iamstef.net/ember-cli-jsbin/ember-cli.js"></script>
<meta name="ember-app" content="app" mode="auto-run">
<script type='text/x-esnext' id='app/app'>
import Ember from 'ember';
import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';
import config from './config/environment';
Ember.MODEL_FACTORY_INJECTIONS = true;
var App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
Resolver: Resolver
});
loadInitializers(App, config.modulePrefix);
export default App;
</script>
<script type='text/x-esnext' id='app/config/environment'>
export default { modulePrefix: 'app', locationType: 'hash'};
</script>
<script type='text/x-esnext' id='app/router'>
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType,
});
export default Router;
</script>
<script type='text/x-esnext' id='app/router/index'>
import Ember from 'ember';
import config from './config/environment';
var posts = [{
title: "Rails is omakase",
body: "There are lots of à la carte software environments in this world."
}, {
title: "Broken Promises",
body: "James Coglan wrote a lengthy article about Promises in node.js."
}];
var IndexRouter = Ember.Router.extend({
location: config.locationType,
model: function() {
return posts;
}
});
export default IndexRouter;
</script>
<script type='text/x-handlebars' id='app/templates/application'>
<h2 id='title'>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type='text/x-handlebars' id='app/templates/index'>
<h1>Index template</h1>
{{#each}}
{{body}}
{{/each}}
</script>
I'm not sure how to do Ember cli stuff in JSBin. Here's a not-cli version:
http://jsbin.com/zixaju/2/edit
Edit: Got it.
http://jsbin.com/qimeta/2/edit
Edit2: For real:
http://jsbin.com/qimeta/4/edit