Code Monkey home page Code Monkey logo

Comments (12)

atd-schubert avatar atd-schubert commented on August 24, 2024 2

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

milas991 avatar milas991 commented on August 24, 2024 2

Yeah, brstillwell your way works for me, thanks!

from leaflet-sidebar.

mejackreed avatar mejackreed commented on August 24, 2024

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.

Abdou00 avatar Abdou00 commented on August 24, 2024

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>

from leaflet-sidebar.

Turbo87 avatar Turbo87 commented on August 24, 2024

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.

Abdou00 avatar Abdou00 commented on August 24, 2024

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.

Turbo87 avatar Turbo87 commented on August 24, 2024

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.

Abdou00 avatar Abdou00 commented on August 24, 2024

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.

Turbo87 avatar Turbo87 commented on August 24, 2024

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.

petervojtek avatar petervojtek commented on August 24, 2024

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.

zedd45 avatar zedd45 commented on August 24, 2024

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.

brstillwell avatar brstillwell commented on August 24, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.