search

Wildhoney / Leaflet.FreeDraw

:earth_asia: FreeDraw allows the free-hand drawing of shapes on your Leaflet.js map layer – providing an intuitive and familiar UX for creating geospatial boundaries similar to Zoopla and others. Included out-of-the-box is the concaving of polygons, polygon merging and simplifying, as well as the ability to add edges and modify existing shapes.
https://freedraw.herokuapp.com/
MIT License
544 stars 103 forks source link

JSfiddle is not working with FreeDraw #124

Closed pawil006 closed 6 years ago

pawil006 commented 6 years ago

Hi,

I just tried to use Your plugin in Salesforce, so I used leaflet-freedraw.web.js as resource. But console throws me an error "FreeDraw()' is not defined.

So I checked JS fiddle to find how shall i use this, but then i found that fiddle also has the same error. Do i have to create webpack with leaflet and freedraw by myself? Why JSfiddle does not work now?

Thank You.

Wildhoney commented 6 years ago

FreeDraw works in this JSFiddle. The one in the README is missing Ramda which I'll update now 👍

pawil006 commented 6 years ago

Thank You,

I attached ramda to my resources, error has changed, but now I have following error.

aura_proddebug.js:36709 Uncaught TypeError: Cannot assign to read only property 'parseInt' of object '[object Object]' throws at https://deploypkrobiotic--deploy.lightning.force.com/resource/freedrawsrc:291:12 TypeError: Cannot assign to read only property 'parseInt' of object '[object Object]' at module.exports (freedrawsrc:291) at $export (freedrawsrc:99) at Object.eval (freedrawsrc:15444) at __webpack_require__ (freedrawsrc:20) at Object.b (freedrawsrc:18291) at __webpack_require__ (freedrawsrc:20) at Object.eval (freedrawsrc:13738) at Object.defineProperty.value (freedrawsrc:13764) at __webpack_require__ (freedrawsrc:20) at Object.eval (freedrawsrc:23376)

I only added freedraw to resource, not even initialise it. Shall I change something in freedraw dist js ?

Wildhoney commented 6 years ago

How does your initialisation code look? Is it something similar to the Getting Started snippet?

pawil006 commented 6 years ago

Here is my initialisation code:

({ jsLoaded: function(component, event, helper) { var map = L.map('map', {zoomControl: true, tap: false}) .setView([52.21807, 24.01568], 17); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' + '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', id: 'mapbox.streets' }).addTo(map); const freeDraw = new FreeDraw({ mode: FreeDraw.ALL }); map.addLayer(freeDraw); var marker = L.marker([52.21807, 24.01568]).addTo(map); marker.bindPopup("Test").openPopup(); component.set("v.map", map); } })

I found out that there is internal Saleforce bug with LockerService, but i used old api version and it worked. It didnt load node circles, but basic functionality works perfectly.

Thank You for Your help :)

Wildhoney commented 6 years ago

No problem 👍 Please open another ticket if you have any other issues.