1

How do I make the route and the two markers appear in Leaflet routing Machine?

Here is my code:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <link rel="stylesheet" href="css/leaflet.css"><link rel="stylesheet" href="css/L.Control.Locate.min.css">
        <link rel="stylesheet" href="css/qgis2web.css"><link rel="stylesheet" href="css/fontawesome-all.min.css">
        <link rel="stylesheet" href="css/leaflet-control-geocoder.Geocoder.css">
        <link rel="stylesheet" href="css/leaflet-measure.css">
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
        <link rel="stylesheet" href="leaflet-routing-machine.css" />
        <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
        <script src="leaflet-routing-machine.js"></script>
        <style>
        #map {
            width: 996px;
            height: 631px;
        }
        </style>
        <title>The Hospital App</title>
    </head>
    <body>
        <div>
            <h2>Nairobi's Nearest Hospital App</h2>
        </div>
        <div id="map">
        </div>
        <script src="js/qgis2web_expressions.js"></script>
        <script src="js/leaflet.js"></script><script src="js/L.Control.Locate.min.js"></script>
        <script src="js/leaflet.rotatedMarker.js"></script>
        <script src="js/leaflet.pattern.js"></script>
        <script src="js/leaflet-hash.js"></script>
        <script src="js/Autolinker.min.js"></script>
        <script src="js/rbush.min.js"></script>
        <script src="js/labelgun.min.js"></script>
        <script src="js/labels.js"></script>
        <script src="js/leaflet-control-geocoder.Geocoder.js"></script>
        <script src="js/leaflet-measure.js"></script>
        <script src="data/MAJOR_HOSPITALS_IN_NAIROBI_COUNTY_1.js"></script>
        <script>
        var highlightLayer;
        function highlightFeature(e) {
            highlightLayer = e.target;
            highlightLayer.openPopup();
        }
        var map = L.map('map', {
            zoomControl:true, maxZoom:28, minZoom:1
        })




        var hash = new L.Hash(map);
        map.attributionControl.setPrefix('<a href="https://github.com/tomchadwin/my qgis2web" target="_blank">Riri qgis2web</a> &middot; <a href="http://leafletjs.com" title="A JS library for interactive maps">Leaflet</a>');


        L.control.locate({locateOptions: {maxZoom: 19}}).addTo(map);

        var measureControl = new L.Control.Measure({
            position: 'topleft',
            primaryLengthUnit: 'meters',
            secondaryLengthUnit: 'kilometers',
            primaryAreaUnit: 'sqmeters',
            secondaryAreaUnit: 'hectares'
        });
        measureControl.addTo(map);
        document.getElementsByClassName('leaflet-control-measure-toggle')[0]
        .innerHTML = '';
        document.getElementsByClassName('leaflet-control-measure-toggle')[0]
        .className += ' fas fa-ruler';
        var bounds_group = new L.featureGroup([]);
        function setBounds() {
            if (bounds_group.getLayers().length) {
                map.fitBounds(bounds_group.getBounds());
            }
        }
        var layer_OSMStandard_0 = L.tileLayer('http://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            opacity: 1.0,
            attribution: '<a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors, CC-BY-SA</a>',
        });
        layer_OSMStandard_0;



        map.addLayer(layer_OSMStandard_0);
        function pop_MAJOR_HOSPITALS_IN_NAIROBI_COUNTY_1(feature, layer) {
            layer.on({
                mouseout: function(e) {
                    if (typeof layer.closePopup == 'function') {
                        layer.closePopup();
                    } else {
                        layer.eachLayer(function(feature){
                            feature.closePopup()
                        });
                    }
                },
                mouseover: highlightFeature,
            });
            var popupContent = '<table>\
                    <tr>\
                        <td colspan="2"><strong>F_NAME</strong><br />' + (feature.properties['F_NAME'] !== null ? Autolinker.link(String(feature.properties['F_NAME'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <td colspan="2">' + (feature.properties['Province'] !== null ? Autolinker.link(String(feature.properties['Province'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">Latitude</th>\
                        <td>' + (feature.properties['Latitude'] !== null ? Autolinker.link(String(feature.properties['Latitude'])) : '') + '</td>\
                    </tr>\
                    <tr>\
                        <th scope="row">Longitude</th>\
                        <td>' + (feature.properties['Longitude'] !== null ? Autolinker.link(String(feature.properties['Longitude'])) : '') + '</td>\
                    </tr>\
                </table>';
            layer.bindPopup(popupContent, {maxHeight: 400});
        }

        function style_MAJOR_HOSPITALS_IN_NAIROBI_COUNTY_1_0() {
            return {
                pane: 'pane_MAJOR_HOSPITALS_IN_NAIROBI_COUNTY_1',
        rotationAngle: 0.0,
        rotationOrigin: 'center center',
        icon: L.icon({
            iconUrl: 'markers/health_hospital.svg',
            iconSize: [30.4, 30.4]
        }),
            }
        }
        map.createPane('pane_MAJOR_HOSPITALS_IN_NAIROBI_COUNTY_1');
        map.getPane('pane_MAJOR_HOSPITALS_IN_NAIROBI_COUNTY_1').style.zIndex = 401;
        map.getPane('pane_MAJOR_HOSPITALS_IN_NAIROBI_COUNTY_1').style['mix-blend-mode'] = 'normal';
        var layer_MAJOR_HOSPITALS_IN_NAIROBI_COUNTY_1 = new L.geoJson(json_MAJOR_HOSPITALS_IN_NAIROBI_COUNTY_1, {
            attribution: '',
            pane: 'pane_MAJOR_HOSPITALS_IN_NAIROBI_COUNTY_1',
            onEachFeature: pop_MAJOR_HOSPITALS_IN_NAIROBI_COUNTY_1,
            pointToLayer: function (feature, latlng) {
                var context = {
                    feature: feature,
                    variables: {}
                };
                return L.marker(latlng, style_MAJOR_HOSPITALS_IN_NAIROBI_COUNTY_1_0(feature));
            },
        });
        bounds_group.addLayer(layer_MAJOR_HOSPITALS_IN_NAIROBI_COUNTY_1);
        map.addLayer(layer_MAJOR_HOSPITALS_IN_NAIROBI_COUNTY_1);
        var osmGeocoder = new L.Control.Geocoder({
            collapsed: true,
            position: 'topleft',
            text: 'Search',
            title: 'Testing'
        }).addTo(map);
        document.getElementsByClassName('leaflet-control-geocoder-icon')[0]
        .className += ' fa fa-search';
        document.getElementsByClassName('leaflet-control-geocoder-icon')[0]
        .title += 'Search for a place';




        var baseMaps = {};
        L.control.layers(baseMaps,{'<img src="legend/MAJOR_HOSPITALS_IN_NAIROBI_COUNTY_1.png" /> MAJOR_HOSPITALS_IN_NAIROBI_COUNTY': layer_MAJOR_HOSPITALS_IN_NAIROBI_COUNTY_1,"OSM Standard": layer_OSMStandard_0,}).addTo(map);
        setBounds();


          L.Routing.control({
        waypoints: [
            L.latLng(-1.2962761196418089,36.815185546875),
            L.latLng(-1.296382, 36.65432123)
        ],
        routeWhileDragging: true
    }).addTo(map);





        </script>
    </body>
</html>
  • Do you get any error in the console? – TomazicM Aug 7 at 16:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.