How to create your own route and display basemap behind it

[Tfeinstein24]

I am new to leaflet and JS in general so forgive me. I'm trying to build a map where the user creates his own route and the elevation profile will subsequently display. When I use the documentation for leaflet.elevation I can't get anything to display beyond my basemap. Here is my code:

`//Require dependencies //var Grunt = require("Grunt");

var mymap = L.map('mapid').setView([29.7604, -95.3698], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox', maxZoom: 18, id: 'mapbox.streets', accessToken: 'pk.eyJ1IjoidGZlaW5zdGVpbjI0IiwiYSI6ImNqNDd5N2puaDBoYWUyd3FsbmUwMnkzemMifQ.zdzo2Yys4N0JUvp5vVyMWg' }).addTo(mymap);

// Add Marker to Map //var marker = L.marker([29.7604, -95.3698]).addTo(mymap);

// Add click event function onMapClick(e) { alert("You clicked the map at " + e.latlng); }

mymap.on('click', onMapClick); // //Add elevation profile // var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(mymap);

// function addData(e) { // var el = L.control.elevation(); // el.addData(e); // map.addControl(el); // }

// function onEachFeature(feature, layer) { // layer.on ('click', function(e) { // addData(feature) // }); // }

function addData(e) { //all used options are the default values var el = L.control.elevation({ position: "topright", theme: "steelblue-theme", //default: lime-theme width: 600, height: 125, margins: { top: 10, right: 20, bottom: 30, left: 50 }, useHeightIndicator: true, //if false a marker is drawn at map position interpolation: "linear", //see https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-area_interpolate hoverNumber: { decimalsX: 3, //decimals on distance (always in km) decimalsY: 0, //deciamls on hehttps://www.npmjs.com/package/leaflet.coordinatesight (always in m) formatter: undefined //custom formatter function may be injected }, xTicks: undefined, //number of ticks in x axis, calculated by default according to width yTicks: undefined, //number of ticks on y axis, calculated by default according to height collapsed: false, //collapsed mode, show chart on click or mouseover imperial: false //display imperial units instead of metric }); el.addTo(map); L.geoJson(geojson,{ onEachFeature: el.addData.bind(el) //working on a better solution }).addTo(map);

var el = L.control.elevation(); el.addTo(map); var g=new L.GPX("./mytrack.gpx", {async: true}); g.on("addline",function(e){ el.addData(e.line); }); g.addTo(map);

// reset data and display el.clear();

el.addData(e); map.addControl(el); };

addData(); `

The console error I keep getting is L.control.elevation is not a function

[tosolini]

stupid question, have you loaded d3.min.js before leaflet.js and of course, MrMufflon code after leaflet.js?

[Tfeinstein24]

Not a stupid question! I have the d3.min.js loaded before leaflet, yes. Would you mind providing an example code snippet so I can see how you have it loaded?

[tosolini]

The code of MrMufflon show exactly the way. https://github.com/MrMufflon/Leaflet.Elevation/blob/master/example/example_gpx.html btw i think there are errors (L.map declare is mymap at beginning, and later you try to put elevation to map on el.addTo(map) for example.) but not exaplain the missing function. Maybe function addData broken something.