How to change the points name of the routing plugin

4 posts / 0 new
Last post
jack.h
How to change the points name of the routing plugin

Hello everybody,

I´m using the routing plugin for leaflet and I would like to customize my POI.

I need to change the colors of many of the POI on the route, is it possible? The documentation (route customization) shows only how to change to all POI on the route.

Another thing is to change the name of the POI. They use the letters of the alphabet, and I would like to use numbers. Is it possible?

Best regards,

Jack


MQBrianCoakley
I replace the origin and
I replace the origin and destination marker customizers in that sample with this one.                       createStopMarker: function (location, stopNumber) {                         var custom_icon;                         var marker;                         custom_icon = L.icon({                             iconUrl: 'https://www.mapquestapi.com/staticmap/geticon?uri=poi-green-' + stopNumber + '.png',                             iconSize: [20, 29],                             iconAnchor: [10, 29],                             popupAnchor: [0, -29]                         });                         marker = L.marker(location.latLng, {icon: custom_icon}).addTo(map);                         return marker;                     }  

jack.h
Hello BrianCoakley,

Hello BrianCoakley,

Thanks for your aswer, it help me a lot. If someone need to plot numbers instead of letters in the leaflet routing plugin, the code bellow do that perfectly. In adition, note that this code creates a route that starts and ends in the same place, so, I used the endMarker to plot the start/end place always as 1.

I hope this code could help others developers.

<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />

        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
        <script src="https://www.mapquestapi.com/sdk/leaflet/v2.2/mq-map.js?key=lYrP4vF3Uk5zg..."></script>
        <script src="https://www.mapquestapi.com/sdk/leaflet/v2.2/mq-routing.js?key=lYrP4vF3U..."></script>

        <script type="text/javascript">
            window.onload = function() {

                var map,
                    dir;

                map = L.map('map', {
                    layers: MQ.mapLayer(),
                    center: [ 40.758757, -73.984944 ],
                    zoom: 9
                });

                dir = MQ.routing.directions();

                dir.route({
                    locations: [                       
                          'ithaca ny',
                          'springfield ma',
                          'hartford ct',
                          'danbury ct',
                          'scranton pa',
                          'elmira ny',
                          'ithaca ny',
                    ]
                });
              
                CustomRouteLayer = MQ.Routing.RouteLayer.extend({
                  
                    createStopMarker: function (location, stopNumber) {
                        var custom_icon;
                        var marker;
                        custom_icon = L.icon({
                            iconUrl: 'https://www.mapquestapi.com/staticmap/geticon?uri=poi-blue_4-' + stopNumber + '.png',
                            iconSize: [20, 29],
                            iconAnchor: [10, 29],
                            popupAnchor: [0, -29]
                        });
                        marker = L.marker(location.latLng, {icon: custom_icon}).addTo(map);
                        return marker;
                    },
                  
                    createEndMarker: function (location, stopNumber) {
                        var custom_icon;
                        var marker;

                        custom_icon = L.icon({
                            iconUrl: 'https://www.mapquestapi.com/staticmap/geticon?uri=poi-blue_4-1.png',
                            iconSize: [20, 29],
                            iconAnchor: [10, 29],
                            popupAnchor: [0, -29]
                        });

                        marker = L.marker(location.latLng, {icon: custom_icon}).addTo(map);
                        return marker;
                    }
                });
              
               map.addLayer(new CustomRouteLayer({
                    directions: dir,
                    fitBounds: true
                }));
            }
        </script>
    </head>

    <body style='border:0; margin: 0'>
        <div id='map' style='width: 100%; height:530px;'></div>
    </body>
</html>


MQBrianCoakley
Nice. Thanks for sharing. You
Nice. Thanks for sharing. You may want to remove your key though.