Using Leaflet JS to implement multiple waypoints on a map

I am trying to create a route with multiple waypoints without hardcoding any data. My waypoints array should dynamically include latitude and longitude values. How can I achieve this?

    var data = [

    {
        "title": 'Chennai',
        "lat": '13.0827',
        "lng": '80.2707',
        "description": '',
        "flag":'1'
    }
  ,
  {
    "title": 'Ramapuram',
    "lat": '13.0317',
    "lng": '80.1817',
    "description": ''

  }
  ,
    {
        "title": 'Kanchipuram',
        "lat": '12.8342',
        "lng": '79.7036',
        "description": '',
        "flag":'1'
    },

  ];
var map = L.map('map');

  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 routeControl = L.Routing.control({

}).addTo(map);
routeControl.setWaypoints(data);

I have included an image of the output, and my goal is to remove the center marker and set markers at specific locations as needed. https://i.stack.imgur.com/4AYVV.png

Can someone assist me in achieving this? I have updated my code to set waypoints dynamically, but now I want to remove the markers.

Answer №1

It seems like you're looking to create a route with specific waypoints while displaying markers only at the start and end points. You also want to restrict users from adding new waypoints. You can achieve this by implementing a custom control as shown below:

L.Routing.control({
  waypoints: yourWaypoints,
  plan: L.Routing.plan(yourWaypoints, {
    createMarker: function(i, wp, n) {
      if (i == 0 || i == n - 1) {
        return L.marker(wp.latlng, {
          draggable: false // prevent users from changing waypoint position
        });
      } else {
        return false;
      }
    }
  },
  addWaypoints: false // prevent users from adding new waypoints
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Securing JSON-based RESTful services

I am in the process of developing a web application, where I have established a clear separation between my "frontend" server using Lighttpd to serve index.html and javascript. My frontend, powered by Backbone.js, is connected to my Node.js backend webser ...

Unable to render a rectangle with React's canvas context.fillRect

Could anyone help me with drawing a rectangle using React? I'm having trouble getting it to work. I'm confused as to why the code below isn't showing a rectangle on the screen. class DrawingView{ constructor(props) { this.canva ...

Utilizing Azure SDK to send an email

In my Node.js project, I am currently utilizing azure-graph: const MsRest = require('ms-rest-azure'); const credentials = await MsRest.loginWithServicePrincipalSecret(keys.appId, keys.pass, keys.tenantId, { tokenAudience: 'graph' } ...

Ways to resolve the issue with the information window on Google Maps

I have a problem with displaying infowindows in Google Maps; currently, it only shows the information for the last marker added. let myLatlng = new window.google.maps.LatLng(-33.890542, 151.274856 ); let mapOptions = { zoom: 13, cent ...

Harnessing the Power: Ajax Combined with JQuery

I am facing an issue with my function where I make an ajax request, wait for a response, and return a value but the returned value is coming out as undefined. What could be causing this problem? function RetrieveDataFromURL(url){ return $.ajax({ ...

Loading a chunked polyfill file in webpack only when needed - a step-by-step guide

In order to prevent unnecessary loading of polyfills, it is recommended to add some logic in the <head> section (https://webpack.js.org/guides/shimming/) <script> var modernBrowser = ( 'fetch' in window && ...

The npm package for @azure/storage-blob doesn't seem to play nice with the Azure Blob storage modules for IoT Edge

Currently, I am developing an edge module using Node.js to interact with Azure Blob storage modules on IoT Edge platform. To achieve this, I am following the documentation available at https://www.npmjs.com/package/@azure/storage-blob. The npm package ut ...

What's the best way to place the text or operator from a button into an input field?

Hello, I am currently working on developing a calculator. However, I have encountered an issue where clicking on operator buttons such as +, -, /, *, and the dot button does not add them to my input field. Additionally, when these buttons are clicked, the ...

Conceal the option to "show more" when there are no additional posts to display

Is there a way to dynamically hide the load button when no more posts are available? I've included my code below: function.php function load_more_posts_ajax(){ $offset = $_POST["offset"]; $ppp = $_POST["ppp"]; header("Content-Type: tex ...

Picture is not showing up on my MVC software

Within a table containing multiple other tds, I am having an image tag. <table class="MyClass"> <tr> <td> @Html.LabelFor(m => m.ShopName) </td> <td> @Html.TextBoxFor(mode ...

Looking to $post the text strings within select boxes, rather than just their values

Looking to extract the text of select boxes, rather than just their values. HTML : <select name="one" id="one"> <option value="0">Select *</option> <option value="3000">Plan A</option> <option value="6000"> ...

Identify the page search function to reveal hidden content in a collapsible section

Our team has implemented an expandable box feature on our wiki (in Confluence) to condense information, using the standard display:none/block method. However, I am looking for a way to make this work seamlessly with the browser's find functionality. S ...

What steps need to be taken to implement a structured autocomplete feature?

Let me break down the workflow for you: The user inputs something in a text field. Upon keypress, the frontend communicates with our backend script to retrieve and select a specific value. Once the value is selected, on leaving the input field, we query ...

Tips for maintaining the active state of an item within a component that loops through a dataset

I am working with an array of objects (specifically, posts represented as strings) and I am looking to be able to edit each one individually. However, I am encountering an issue where clicking on the edit button triggers editing for all posts at once: co ...

Ways to refresh my $scope once new data is inserted into the SQL database

As I implement the angularjs/SQL technique to fetch data from a database, the code snippet below demonstrates how it is done: $http.get("retrieveData.php").then(function(response){ $scope.tasks = response.data.tasks; }) In addition, there is a functi ...

Display a YouTube video on a webpage using the URL provided by the server

Dealing with a frustrating issue where I can't seem to embed a YouTube video using the URL provided from the database. I've already whitelisted YouTube in my app configuration by app.config(function($sceDelegateProvider) { $sceDelegateProvi ...

Top tips for writing JavaScript that incorporates an AJAX call to determine whether the default action should be blocked

Utilizing JavaScript and jQuery, I am developing a handler for form submission that will either allow or prevent the form from being submitted based on certain conditions. Although this task is fairly straightforward, it becomes more complex due to the ne ...

activating a jQuery function and sending a parameter

Looking for some help with JavaScript - I'm having trouble getting this code to work. I need to trigger a predefined function from one script within my AJAX script. Specifically, I want to activate the qtip functionality on the content of a div that i ...

Leveraging AJAX to send a form filled with dynamic content to multiple destinations

I have a hidden form that needs to be submitted to two different locations. The form is automatically filled using the .val method in jQuery. How can I write the ajax script to submit this form to two different locations? Is it possible to do this without ...

Activate SVG graphics upon entering the window (scroll)

Can anyone assist me with a challenging issue? I have numerous SVG graphics on certain pages of my website that start playing when the page loads. However, since many of them are located below the fold, I would like them to only begin playing (and play onc ...