search

Turbo87 / leaflet-sidebar

A responsive sidebar for Leaflet maps
http://turbo87.github.io/leaflet-sidebar/examples/
MIT License
487 stars 157 forks source link

plugin don't work in my project #47

Closed Abdou00 closed 5 years ago

Abdou00 commented 7 years ago

Hi everyone, I created an app with leaflet (1.0.3) and I have integrated leaflet-sidebar but when I go to my browser I get an error message in the console that tells me: "Uncaught TypeError: L.Control.Sidebar is not a function ". Yet when I go to the source tab of the inspector the file L.Control.Sidebar.js is loaded. Does anyone have an idea of what shit ??

Thank you ;)

mejackreed commented 7 years ago

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!

Abdou00 commented 7 years ago

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 &copy; <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>
Turbo87 commented 7 years ago

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.

Abdou00 commented 7 years ago

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 !?

Turbo87 commented 7 years ago

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...

Abdou00 commented 7 years ago

No I have already tried, its return 2 error:

Do you think I should try with a leaflet version lower than 1.0.0 ??

Turbo87 commented 7 years ago

I don't think that will work either. As mentioned in https://github.com/Turbo87/leaflet-sidebar/issues/47#issuecomment-281650486 the problem is that you are using browserify and this leaflet plugin is not designed to work with browserify.

petervojtek commented 7 years ago

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.

atd-schubert commented 7 years ago

@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...

zedd45 commented 7 years ago

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!

brstillwell commented 6 years ago

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.

milas991 commented 5 years ago

Yeah, brstillwell your way works for me, thanks!