13
Take the L.marker([ln, lt], {icon: marker}).addTo(map); line and move it into the callback function for map.on('load') (one line directly above where you add the L.geoJson object). This will prevent the code trying to add the marker to the map before the style is initialized.
9
Simply trigger a "click" event on the "Draw a polygon" toolbar button (it has a specific class "leaflet-draw-draw-polygon"):
document.querySelector(".leaflet-draw-draw-polygon").click();
Demo: http://playground-leaflet.rhcloud.com/zaze/1/edit?html,output
6
Did you find a solution?
I've created a function which does this for me.
function mapToPosition(position){
lon = position.coords.longitude;
lat = position.coords.latitude;
var marker = new L.Marker([lat,lon],{title: "Not at the right spot? Drag me!"}).addTo(map);
marker.dragging.enable();
marker.on('dragend', function(e){
var ...
5
There are public methods in L.Control.Layers control to add base layers and overlays dinamically (see full reference):
addBaseLayer(layer, name) to add new base layer
addOverlay(layer, name) to add new overlay
So, when user clicks on a button, you create new layer and just add it to a control:
$('#newLayer').click(function addNewLayer() {
//create new ...
5
Just add the Layergroup to your map with the addTo-method.
layerGroup.addTo(map);
In your code-example this could be done here:
// New layergroup, note it's not added to the map yet
var layerGroup = new L.LayerGroup(),
imageOverlayUrl = firstImage,
// New imageoverlay added to the layergroup
imageOverlay = new L....
4
Leaflet draws a circle using SVG. For example:
new L.Circle([3,-60], 1000000).addTo(map)
Results in the following html:
<path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="#0033ff" stroke-opacity="0.5" stroke-width="5" fill="#0033ff" fill-opacity="0.2" class="leaflet-clickable" d="M823,-88A205,205,0,1,1,822.9,-88 z"></...
3
Yes. You have to send your data from the client to the server and let server-code handle the database-insert.
You should look into HTTP POST through jQuery or other libraries as a way to asynchronously send your data from the client to the server.
3
As for populating the GeoJSON output by drawnItems.toGeoJSON(), you have to explicitly add data to your layers as type and within properties.
See SO post: update properties of geojson to use it with leaflet
In short:
map.on('draw:created', function (event) {
var layer = event.layer,
feature = layer.feature = layer.feature || {}; // Intialize ...
3
If my understanding is correct, the root cause of the issue resides in the fact that the layers you want to make editable through Leaflet.draw plugin are nested within a Layer Group (e.g. if they are built through L.geoJSon() factory, which outputs a Feature Group).
But Leaflet.draw does not like nested groups in the drawnItems Feature Group, so you have to ...
3
Thanks to the help of @user1919 who pointed me to the solution proposed in Stackoverflow, I could edit the existing layer with the plugin Leaflet.draw without customizing it ( at least not it's code ).
The edits now are made on the onEachFeature function in the L.geoJSON call like this:
var selectedFeature = null;
function handleJson(data) {
...
3
In short, Yes you can. You can find some good examples of tutorials as well as reading up on "Leaflet for R" using RStudio here, offering the following features:
Interactive panning/zooming
Compose maps using arbitrary combinations of:
Map tiles
Markers
Polygons
Lines
Popups
GeoJSON
Create maps right from the R console or RStudio
...
3
My understanding of Leaflet is that it is built to cover about 90% of use cases and for simplicity and compactness. Unfortunately I don't think your usecase is covered in that 90%. This is the API for the upcoming Leaflet 1.0 for Paths (Polyline is a subclass) and there are just simple options for colour, width, dashes etc.
The following plugins may be of ...
3
I never actually was able to use L.mapbox.featureLayer for this. I ended up having to use Leaflet's L.geoJson, adding featureLayer to map instead of the featureGroup, and adding the layer to the featureGroup at onEachFeature. Here's what my final code looked like:
var featureGroup = L.featureGroup().addTo(map);
if (oldData) {
var featureLayer = L....
3
For Leaflet 1.0, you have to use Leaflet.draw leaflet-master branch, as mentioned on the repo home page:
Support for Leaflet 1.0 is in development at the leaflet-master branch.
Unfortunately, even with that version, the Tooltip issue is a known bug (Leaflet/Leaflet#4760) that is not resolved yet.
3
Finally, I solved it. So I think it's fair if I share it:
map.on("draw:created", function (e) {
var layer = e.layer;
drawControlFull.remove();
drawControlEditOnly.addTo(map);
var popupContent = 'blaa!';
drawnItems.addLayer(layer);
if (layer instanceof L.Marker) {
var popupCoords = e.layer.getLatLng();
var popup = L....
3
You need to research this better, this question has been asked before. You have two issues, when someone visits your site the data is downloaded to your browser, any edits would be client side and not on the server. If you could write to a file and post it to the server, you would have issues of multiple people editing at once and not being in sync. Just ...
3
Since there seems to be no official hook to implement this, one has to resort to hack.
L.Draw.Marker class has internal _onClick method which is called when user clicks with mouse to create marker. This method can be replace with our own hacked method by modifying L.Draw.Marker class. We can check here if clicked point is within polygon and allow creation ...
2
So looks like one solution is just to remove the controller and and recreate it. So when I initialize it outside of my Leaflet.draw event handler, declare it as a variable.
controller = L.control.layers(baseMaps, overlayData, {position:"bottomright"}).addTo(map);
and then within my function
controller.removeFrom(map);
//Add the new data to overlayData,...
2
drawControl = new L.Control.Draw({
draw : {
position : 'topleft',
polyline : false,
rectangle : false,
circle : false,
polygon: {
// polygon draw options here
},
marker: {
// marker options here
}
},
edit : false
});
map.addControl(drawControl);
see here ...
2
I don't see any api methods that allow multiple buttons for the same feature type on one draw control. If you need multiple buttons on the same control, then I expect you'll have to modify the source code.
A shortcut would be to add two draw controls to the map. The following works if you paste it into the console of the example
var drawControl2 = new L....
2
You need to add event for draw:created. In this event, get the added layer, its type and read the geometry according to the layer type, type is marker in your case. Here is the basic code:
map.on('draw:created', function (e) {
layer = e.layer;
var lat = layer.getLatLng().lat;
var lng = layer.getLatLng().lng;
...
2
A very simple way of getting the bounds of any GeoJSON compliant data with Leaflet is to transform it into an L.GeoJSON layer group and to use the getBounds() method.
This returns an L.LatLngBounds object from which you can read the corners coordinates, or even convert it into a string:
var geoJsonLayer = L.geoJson(geoJsonData);
console.log("Bounding Box: ...
2
That particular json is already a box - so the bounding box will be identical - but here is a general approach
this assumes you have a leaflet map object named 'map' - although not necessary to get the bounding box, allows you to visualize what is going on:
var json = {"type":"Feature","properties":{},"geometry": {"type":"Polygon","coordinates":[[[-73....
2
In this example it appears that they are using two techniques:
the heatmap polygon layer is used to show the crime risk
they are overlaying clustered points to show the instances of crime
So to emulate this effect, you would create a background layer/raster showing one variable from your dataset, and a point layer showing another variable, then cluster the ...
2
You can grab the marker's coordinates from the draw:created event like this: e.layer._latlng
You can then pass these coordinates to your Turf.js function like this:
map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
//Grab Coordinates As Array
var lnglat = [e.layer._latlng.lng, e....
2
You can start here: Leaflet.Pancontrol. Check the code repository and download code to your plugins folder inside leaflet folder. Then in code just reference to the js file/files.
2
The Ionic touch-event-to-mouse-event hacks conflict with Leaflet's touch-event-to-mouse-event hacks. See https://stackoverflow.com/questions/25675208/ionic-angular-leaflet-directive-zoom-in-out-buttons-do-not-work
2
Firstly, Leaflet.FileLayer does not upload data. It reads it from a local file, client side, and renders it locally. Uploading to a remote database is a separate operation.
Using your code, when you add a local layer, it will emit a 'data:loaded' event (see documentation). On this event, initialize a draw control (or tweak an existing one) setting the '...
2
your feedback has been so useful. The problem it was simple,
I thought that the script line in the index.html file
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.js"></script>
Should to be positioned inside the body tag, like my leaflet script, but it must be placed in the head tag. Once the change has ...
2
I'm not really sure about the array of bounding box coordinates in the example - the second and fourth points are identical, meaning this will never make a box.
In any case, have you looked at L.Rectangle?
// starting with the coordinate array you posted,
// but arbitrarily changed the last point to 52 from 51
var box = [-2.362060546875, 51....
Only top voted, non community-wiki answers of a minimum length are eligible
