logo
down
shadow

How to draw a polyline with initial point in Leaflet


How to draw a polyline with initial point in Leaflet

Content Index :

How to draw a polyline with initial point in Leaflet
Tag : development , By : user160048
Date : November 26 2020, 03:01 PM

it should still fix some issue Using addVertex on your drawer object does let you add a starting point to your line :
var polylineDrawer = new L.Draw.Polyline(map, {})
polylineDrawer.enable();

var latlng = L.latLng(48.8583736, 2.2922926);
polylineDrawer.addVertex(latlng);
var style = {
    stroke: true,
    color: 'red',
    weight: 4,
    opacity: 0.5
};
var map = L.map(document.getElementById('map')).setView([48.8583736, 2.2922926], 15);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var drawnItems = new L.geoJson(null, {style: style}).addTo(map);

map.on(L.Draw.Event.CREATED, function (event) {
    var layer = event.layer;
    drawnItems.addLayer(layer);
});

var polylineDrawer = new L.Draw.Polyline(map, {})
polylineDrawer.enable();

var latlng = L.latLng(48.8583736, 2.2922926);
polylineDrawer.addVertex(latlng);
html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 100%;
  height: 100%;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.12/leaflet.draw.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.12/leaflet.draw.js"></script>

<div id='map'></div>

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

Leaflet.js - Draw polyline to nearest point from a location


Tag : javascript , By : Grace Jones
Date : March 29 2020, 07:55 AM
This might help you Here's a working jsfiddle that answers the line problem. There is a method attached to the LatLng object called wrap that is supposed to help. I had to experiment a bit to get it work. I settled on
if (Math.abs(loc1.lng - loc2.lng) > 180) {
  latlongs = [loc1.wrap(179, -179), loc2];
}

Leaflet - draw polyline vertices only


Tag : development , By : James
Date : March 29 2020, 07:55 AM
Hope this helps What you could do here is every time the polyline gets rendered, get the segments of it's SVG path, use those points to add SVG rectangle elements to the polyline's container:
var polyline = L.Polyline([]).addTo(map),
    list = polyline._path.pathSegList

// Iterate segments
for (var i = 0; i < list.length; i++) {

    // Create SVG rectangle element
    rectangle = document.createElementNS('http://www.w3.org/2000/svg', 'rect')

    // Set rectangle size attributes
    rectangle.setAttributeNS(null, 'height', 4)
    rectangle.setAttributeNS(null, 'width', 4)

    // Set position attributes, compensate for size
    rectangle.setAttributeNS(null, 'x', list[i].x - 2)
    rectangle.setAttributeNS(null, 'y', list[i].y - 2)

    // Set rectangle color
    rectangle.setAttributeNS(null, 'fill', 'red')

    // Append rectangle to polyline container
    polyline._container.appendChild(rectangle)
  }

How to draw polyline perpendicular to another polyline using Leaflet


Tag : development , By : Thomas Plunkett
Date : March 29 2020, 07:55 AM
Does that help No, Leaflet has no equivalent.
You'll have to resort to a geodetic utility library for this kind of calculations. See cheap-ruler, geographiclib and Turf.js.

How to draw a polyline using the mouse and leaflet.js


Tag : development , By : Pradeep Gowda
Date : March 29 2020, 07:55 AM
it helps some times As Julien V and IvanSanchez said, you can implement some of the draw-like plugins
In example below:
// center of the map
var center = [46.165164, 15.750443];

// Create the map
var map = L.map('map').setView(center,15);

// Set up the OSM layer
L.tileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Data © <a href="http://osm.org/copyright">OpenStreetMap</a>',
    maxZoom: 18
  }).addTo(map);



// Initialise the FeatureGroup to store editable layers
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);

var options = {
  position: 'topleft',
  draw: {
    polygon: {
      allowIntersection: false, // Restricts shapes to simple polygons
      drawError: {
        color: '#e1e100', // Color the shape will turn when intersects
        message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
      },
      shapeOptions: {
        color: '#97009c'
      }
    },
    polyline: {
    	shapeOptions: {
        color: '#f357a1',
        weight: 10
          }
    },
    // disable toolbar item by setting it to false
    polyline: true,
    circle: true, // Turns off this drawing tool
    polygon: true,
    marker: true,
    rectangle: true,
  },
  edit: {
    featureGroup: editableLayers, //REQUIRED!!
    remove: true
  }
};

// Initialise the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw(options);
map.addControl(drawControl);

var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);

map.on('draw:created', function(e) {
  var type = e.layerType,
    layer = e.layer;

  if (type === 'polyline') {
    layer.bindPopup('A polyline!');
  } else if ( type === 'polygon') {
  	layer.bindPopup('A polygon!');
  } else if (type === 'marker') 
  {layer.bindPopup('marker!');}
  else if (type === 'circle') 
  {layer.bindPopup('A circle!');}
   else if (type === 'rectangle') 
  {layer.bindPopup('A rectangle!');}


  editableLayers.addLayer(layer);
});
html, body, #map { margin: 0; height: 100%; width: 100%; }
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css" rel="stylesheet" />
  <meta charset="utf-8">
  <title>TEST</title>

</head>
<body>
  <div id='map'></div>
</body>
</html>

How to complete a Polyline in Leaflet.Draw after clicking second point?


Tag : development , By : user186435
Date : March 29 2020, 07:55 AM
Related Posts Related QUESTIONS :
  • Vista or XP for Dev Machine
  • Where can I get the Windows Workflow "wca.exe" application?
  • How to learn ADO.NET
  • What is a good barebones CMS or framework?
  • What's the Developer Express equivalent of System.Windows.Forms.LinkButton?
  • Is it acceptable for invalid XHTML?
  • Anyone soloing using fogbugz?
  • Using MBUnit in TeamCity
  • How to setup a crontab to execute at specific time
  • Linking two Office documents
  • How can I detect if a browser is blocking a popup?
  • Apply filter to t-foreach
  • Lotus Notes convert formula to agent
  • Problem with configuration of odoo for working with pycharm
  • Unexpected number of arguments when calling EM_JS function
  • What does the function state_fidelity() do in Qiskit?
  • Azure function with IoT Hub trigger get send device
  • Cluster similar words using word2vec
  • Add elements into an array then find distinct,
  • Angular8 - error TS2304: Cannot find name
  • Manually polling streams in future implementation
  • How do you perform receipt validation for Android on Xamarin Forms
  • What is the rule behind instruction count in Intel PIN?
  • How to draw some text when click a button in wxWidgets?
  • Restrict entity types in Spacy NER
  • How to animate CN1 Slider progress on load
  • Issue with bwa mem process not running on all output files from previous process
  • Delete videos from playlist using YouTube API
  • How to restart the Hyperledger Composer Playground locally
  • How to configure email alerts in Zabbix Server?
  • Simulator is not working for smart home action with all configured session
  • How parse data using join on Objection.js
  • Assign an array to a property in a Chapel Class
  • Netlogo: How can I obtain the accumulate value in Netlogo?
  • How to populate datasource for listview using api response in react native?
  • Why does gmail API when using history.list method send message ids without the field what action has been preformed on t
  • How to run an append query in ms access vba as part of a transaction
  • Wrong dates shown in Jekyll-based blog
  • How to concatenate two document lists in a webMethods flow service?
  • How to properly set up a site map addition in a customization project
  • IBM Content Collector error calling external Web Service
  • Is (0*1*)* equal to (0 | 1)*?
  • How do I configure phpMyAdmin to start with a blank sql query from the SQL tab?
  • "Objects are not valid as a React child" Redux error when conditionally connecting a component?
  • Displacy results are not showing
  • Strapi / Graphql. What am i doing wrong?
  • How to add Search bar for django template?
  • lookup in presto using single column against a range in lookup table
  • How can you stop videos being stolen on website?
  • Can't code substitution happen in Hybrid Flow?
  • Removed widget remains on parent
  • setup saga middleware with redux-starter-kit's configureStore()
  • How to get cookies from response of scrapy splash
  • I need to do a firebase stream and not a Http Get
  • Unable to compile node-runtime
  • SQLSTATE[42S22]: Column not found: 1054 Unknown column '' in 'where clause'
  • How to extract only the number from a variable
  • disable linter in DAML studio
  • RxJS: How to set exhaustMap concurrent?
  • How to remove perforce (p4) on Ubuntu
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com