Comments (12)
@Abdou00 you should take your choice if you want to import all your modules with browserify, or with single script tags. If you want to use browserify, you have to require all your used libraries into your index.js.
Something like this:
var $ = require('jquery');
var L = require('leaflet');
// The important additions!
require('leaflet-sidebar');
require('leaflet.markercluster');
L.Icon.Default.imagePath = 'node_modules/leaflet/dist/images/';
// ...
Note: You don't have to set the required module as a value on a variable
@petervojtek The reason is that browserify encapsulate everything into a self-executing function (this pattern has a name, but I can not remember at the moment) to prevent the pollution of the global scope and enhance the security of your preoject. This is the reason why you do not have any access on it within your "console", but other scripts also have no access to it. In @Abdou00 case the side-bar have no access to leaflet. You should be able to get access by adding it explicitly with a line in your JavaScript resource, something like:
var L = require('leaflet');
// export to global scope now!
window.L = L;
Note: It is not recommended to do this in production! But sometimes helpful during debugging...
from leaflet-sidebar.
Yeah, brstillwell your way works for me, thanks!
from leaflet-sidebar.
It might be useful to provide a code snippet or fiddle so that others can reproduce your problem. Without that it is hard to diagnose.
Thanks!
from leaflet-sidebar.
Hi and thank you for the answer, as for the code here is the file app.js:
var $ = require('jquery');
var L = require('leaflet');
L.Icon.Default.imagePath = 'node_modules/leaflet/dist/images/';
var map = L.map('map', { scrollWheelZoom: false });
map.setView([42.35, -71.08]);
var attribution = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>';
var tiles = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
var sidebar = L.Control.Sidebar('sidebar', { position: 'left' });
map.addControl(sidebar);
var layer = L.tileLayer(tiles, { maxZoom: 18, attribution: attribution });
Here my file package.json:
{
"name": "app2",
"version": "0.1.0",
"description": "introduction to using leaflet with browserify",
"main": "app.js",
"scripts": {
"start": "beefy app.js:bundle.js --live",
"bundle": "browserify app.js -o bundle.js"
},
"author": "",
"license": "UNLICENCED",
"dependencies": {
"leaflet-sidebar": "^0.1.9"
},
"devDependencies": {
"beefy": "^2.1.8",
"browserify": "^14.0.0"
}
}`
And my index.html file:
</head>
<link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css">
<link rel="stylesheet" href="node_modules/leaflet.markercluster/dist/MarkerCluster.css">
<link rel="stylesheet" href="node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css">
<link rel="stylesheet" href="node_modules/leaflet-sidebar/src/L.Control.Sidebar.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.ie.css">
<![endif]-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="map"></div>
<div id="sidebar">
<h1>leaflet-sidebar</h1>
<p>A responsive sidebar plugin for for <a href="http://leafletjs.com/">Leaflet</a>, a JS library for interactive maps.</p>
<p><b>Click on the marker to show the sidebar again when you've closed it.</b></p>
<p>Other examples:</p>
<ul>
<li><a href="listing-markers.html">listing-markers example</a></li>
<li><a href="two-sidebars.html">two-sidebars example</a></li>
</ul>
<p class="lorem">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div>Icons made by <a href="http://www.flaticon.com/authors/roundicons" title="Roundicons">Roundicons</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
<script src="bundle.js"></script>
<script src="node_modules/leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
<script src="node_modules/leaflet-sidebar/src/L.Control.Sidebar.js"></script>
from leaflet-sidebar.
I think the problem might be that you are using browserify and I'm not sure if this leaflet-plugin is actually compatible with that. It's probably trying to access the L
global which browserify is hiding and so it can't attach itself to leaflet.
from leaflet-sidebar.
Actually the sidebar variable was commented in my bundle.js file, but even after uncommenting the variable and launching bundle with npm the error is still present !?
from leaflet-sidebar.
you could try to move the <script src="node_modules/leaflet-sidebar/src/L.Control.Sidebar.js"></script>
line above the line that imports the bundle.js
file. maybe this is just an ordering issue...
from leaflet-sidebar.
No I have already tried, its return 2 error:
- Uncaught ReferenceError: L is not defined
- Uncaught TypeError: L.control.sidebar is not a function
Do you think I should try with a leaflet version lower than 1.0.0 ??
from leaflet-sidebar.
I don't think that will work either. As mentioned in #47 (comment) the problem is that you are using browserify and this leaflet plugin is not designed to work with browserify.
from leaflet-sidebar.
I have similar issue when using this package via npm with leaflet 1.0.3. I have access to L
variable in console (e.g. L.Control
is defined), but there is no L.Control.Sidebar
. not sure what may be the reason it is not included.
from leaflet-sidebar.
I got this to work with browserify a long time ago. I don't recall the specifics, but this might help WRT the externalized variables:
https://github.com/thlorenz/browserify-shim
Granted, I haven't used Browserify for a while, so this could have changed dramatically since I last used it.
I hope this helps!
from leaflet-sidebar.
I'm not sure if you have found the fix yet, but I was able to get this to work by calling this:
script(src='https://unpkg.com/leaflet-sidebar')
I put this inside my Jade template and was able to call the function that way.
from leaflet-sidebar.
Related Issues (20)
- show(), hide(), toggle() not working HOT 3
- Leaflet >=1.1.0 L.DomEvent.fakestop() HOT 2
- Sidebar appear from the side when zoom level changed on the browser HOT 2
- Changing sidebar position on-the-fly HOT 2
- Cannot read property 'prototype' of undefined HOT 4
- Fancybox not working in sidebar HOT 6
- Conflict with plugin twentytwenty HOT 3
- Using plugin in R Leaflet HOT 3
- Close button hidden due low z-index HOT 2
- Sidebar out map div HOT 2
- .
- Version 0.2.1 is not in NPM? HOT 4
- Deprecated include of L.Mixin.Events HOT 2
- Improve readme
- Examples not working HOT 2
- When get bounds center object to map look like is not center HOT 1
- Two sidebars are not working HOT 1
- [accessibility] Keyboard and screen reader support for the close button HOT 1
- How can i use this in react.js ?
- L.Mixin.Events is deprecated HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from leaflet-sidebar.