I am using Leaflet in a LitElelement webcomponent.
Leaflet itself works great.
But when I want to include a plugin I get the error "L is not defined" from the plugin.
I installed Leaflet and the plugin (markercluster) via npm and use it in a Typescript module.
So far I include it like this:
import * as L from 'leaflet/dist/leaflet-src.esm.js';
import 'leaflet.markercluster';
And get the following error:
MarkerClusterGroup.js:5 Uncaught ReferenceError: L is not defined
at MarkerClusterGroup.js:5
at leaflet.markercluster-src.js:10
at leaflet.markercluster-src.js:11*
How do I have to include plugins to make this work?
Leaflet plugins doesn't support ESM/ES6 imports well.
According to this comment you should be able to get leaflet.markercluster to work.
import { Map, Marker, } from "leaflet";
import { MarkerClusterGroup } from "leaflet.markercluster/src";
...
let mcluster = new MarkerClusterGroup({ chunkedLoading: true });
Related
Here is my code and the result is none.
import React, {Component} from 'react';
import ReactMapBox from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
class MapExample1 extends Component {
state = {
viewport: {
width: "100vw",
height: "100vh",
latitude: 42.430472,
longitude: -123.334102,
zoom: 16
}
};
render() {
console.log("Entering console.log in MapExample1.js ");
return (
<ReactMapBox
{...this.state.viewport}
onViewportChange={(viewport => this.setState(viewport))}
mapboxApiAccessToken=
'pk.eyJ1Ijoicm95Y2VtYXJ0aW4iLCJhIjoiY2wzODk0bmp3MDc4YjNpbnphNzRzODR1YSJ9.peCCwkWoX_RHseUf2WI1Xw'
/>
);
}
}
export default MapExample1;
But the resulted error is [Error: A valid map box access token is required to use map box GL JS.] in console inspect.
It looks like versions earlier that 7.0 used: mapboxApiAccessToken=YOUR_ACCESS_TOKEN. to set the API key.
v7.0 uses: mapboxAccessToken=YOUR_ACCESS_TOKEN.
As described here[https://github.com/visgl/react-map-gl/blob/29aa2098febf1e6b8bbfd2caecb3745b3d4d82a9/docs/upgrade-guide.md]
That change fixed it for me.
Sadly, Mapbox decided that some of their libraries need to use Mapbox access token for all map views.
This is the case for the famous Mapbox GL JS.
More info could be found at the 2.0.0 release page: https://github.com/mapbox/mapbox-gl-js/releases/tag/v2.0.0
The concrete paragraph where this is stated is this one:
Beginning with v2.0.0, a billable map load occurs whenever a Map
object is initialized. Before updating an existing implementation from
v1.x.x to v2.x.x, please review the pricing documentation to estimate
expected costs.
And I believe, based on what I read on react-map-gl GIT page, is the same for that other library, which I think is the one you're using.
The related paragraph on react-map-gl GIT page:
About Mapbox Tokens
To show maps from a service such as Mapbox you will need to register
on their website in order to retrieve an access token required by the
map component, which will be used to identify you and start serving up
map tiles. The service will be free until a certain level of traffic
is exceeded.
I'm trying to make a luxon example in stackblitz, but the imports are not working.
The luxon library and its types are added, and it is imported at the beginning of the file:
However I get the message that it is undefined!
I tried to find other examples of stackblitz (google: "luxon stackblitz") however none of them seem to work or use and old version, which is imported via CDN
Do I somehow have to add the whole luxon library to the project?
Code (super simple)
// Import stylesheets
import './style.css';
import { DateTime } from 'luxon';
// Write TypeScript code!
const appDiv: HTMLElement = document.getElementById('app');
appDiv.innerHTML = `luxon sample -->"${DateTime.now()}"<--`;
Since the JSX plugin is deprecated I've been struggling to have Babel handle my jsx files. I finally managed to convince SystemJS to load my app with:
System.import('scripts/app.jsx!babel')
But this doesn't import any imported jsx files like:
import Login from './components/Login' // File is Login.jsx
With the old plugin this worked but now I am not sure how to get it working now.
One step in the right direction would be adding this to your config:
"packages": {
"components": { // Packages could of course be replaced with what you want
// to affect. Even "." is valid.
meta: {
'*.jsx': {
loader: 'babel'
}
}
}
}
This allows you to load files as such: import .. from './components/Login.jsx'.
You could take this one step further by adding "defaultExtension": "jsx" under "components". I'd only use this if the folder/modules was jsx-only though. That would allow you to import as import .. from './components/Login' as you wanted to.
my code is like:
import Render from './AppeRender';
import { Component } from 'react';
export default class appDB extends Component {
render () {
return Render.call(this, this.props, this.state);
}
}
and what i'm getting is:
Module parse failed: /home/projects/node_modules/DB/Db.js Line 5: Unexpected token
You may need an appropriate loader to handle this file type.
Note: Error only comes in web setup, it's working fine in android and in IOS i haven't tried yet.
Does anyone have any idea regarding this.
I think what is wrong here is that you using import twice (and the second one is a destructure.
Try this instead:
import { Component } from 'react';
import Render from './AppeRender';
You can bind Component in one import.
The second import could have been changed to a straight destructure:
const { Component } = React;
But, there is no reason to do this if you are only using Component.
Using import on an Object is not really correct (however, it might work with some implementations), I assume that is why the error was occurring.
I am trying out the new Angular 2 Forms. My import statements are as follows:
import {bootstrap, onChange, NgIf, Component, Directive, View, Ancestor} from 'angular2/angular2';
import {formDirectives, NgControl, Validators, NgForm} from 'angular2/forms';
import {RegExpWrapper, print, isPresent} from 'angular2/src/facade/lang';
import {reflector} from 'angular2/src/reflection/reflection';
import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
The 'angular2/angular2' resolves fine, but none of the other "from" locations resolve. The error is:
Cannot find module 'angular2/forms'.
All of these components are currently in my node_modules directory. If I put in the full path:
import {formDirectives, ControlDirective, Validators, TemplateDrivenFormDirective} from 'C:/Users/Deb/node_modules/angular2/forms';
then it works. However, I should not need to use the full path. Am I missing something when I set up the tsconfig or is there something else wrong?
Problem was that the example application did not match with the version of Angular 2 currently available for download.
If anyone is interested, I now have a working example of Angular2 forms with TypeScript and Visual Studio Code here:
https://github.com/DeborahK/AngularU2015-Angular2Forms
Hope this helps anyone else standing on the "bleeding edge".