Leaflet routing machine error: Geocoder is undefined

up vote
0
down vote

favorite

Having a problem with leaflet routing machine. The very basic code

var routingtest = L.Routing.control({

        waypoints: [

            L.latLng(57.74, 11.94),

            L.latLng(57.6792, 11.949)

        ]

}).addTo(mymap);

does run fine.

But as soon as I add more code like described at http://www.liedman.net/leaflet-routing-machine/tutorials/ I get errors.
For example this does not work:

var routingtest = L.Routing.control({

    waypoints: [

        L.latLng(57.74, 11.94),

        L.latLng(57.6792, 11.949)

    ],

    routeWhileDragging: true,

    geocoder: L.Control.Geocoder.nominatim()

}).addTo(mymap);

It throws back TypeError: L.Control.Geocoder is undefined.
I just redownloaded the plugin to make sure nothing has been accidentially modified, but still.
My index.html looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>My Map</title>



<link type="text/css" rel="stylesheet" href="leaflet/leaflet.css" />

<link type="text/css" rel="stylesheet" href="plugins/Leaflet.fullscreen-gh-pages/dist/leaflet.fullscreen.css" />

<link type="text/css" rel="stylesheet" href="plugins/leaflet-routing-machine-3.2.7/dist/leaflet-routing-machine.css" />

<link type="text/css" rel="stylesheet" href="css/mycss.css" />



<script type="text/javascript" src="leaflet/leaflet.js"></script>

<script type="text/javascript" src="plugins/jquery/jquery-3.3.1.min.js"></script>

<script type="text/javascript" src="plugins/Leaflet.fullscreen-gh-pages/dist/Leaflet.fullscreen.js"></script>

<script type="text/javascript" src="plugins/leaflet-routing-machine-3.2.7/dist/leaflet-routing-machine.js"></script>

<script type="text/javascript" src="plugins/leaflet-routing-machine-3.2.7/dist/L.Routing.OpenRouteService.js"></script>

</head>

<body>

<!-- mapbox -->

<div id="map" class="map"></div>

<!-- custom script containing routing machine and other stuff (which works all fine)!-->

<script type="text/javascript" src="javascript/myscript.js"></script>

</body>

</html>

Paths to .js and .css files are all fine.

My leaflet map var with one of the basemaps looks like this:

var mymap = L.map('map', {

    center: [57.89, 12.02],

    zoom: 13.5,

    fullscreenControl: true

});



var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',

{ attribution: '&copy; <a href="http://osm.org/copyright" target = "_blank">OpenStreetMap</a>'

}).addTo(mymap);

What could cause the TypeError: L.Control.Geocoder is undefined error and how to fix it?

asked Nov 9 at 22:01

MrXsquared

1124

add a comment |

up vote
0
down vote

favorite

Having a problem with leaflet routing machine. The very basic code

var routingtest = L.Routing.control({

        waypoints: [

            L.latLng(57.74, 11.94),

            L.latLng(57.6792, 11.949)

        ]

}).addTo(mymap);

does run fine.

But as soon as I add more code like described at http://www.liedman.net/leaflet-routing-machine/tutorials/ I get errors.
For example this does not work:

var routingtest = L.Routing.control({

    waypoints: [

        L.latLng(57.74, 11.94),

        L.latLng(57.6792, 11.949)

    ],

    routeWhileDragging: true,

    geocoder: L.Control.Geocoder.nominatim()

}).addTo(mymap);

It throws back TypeError: L.Control.Geocoder is undefined.
I just redownloaded the plugin to make sure nothing has been accidentially modified, but still.
My index.html looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>My Map</title>



<link type="text/css" rel="stylesheet" href="leaflet/leaflet.css" />

<link type="text/css" rel="stylesheet" href="plugins/Leaflet.fullscreen-gh-pages/dist/leaflet.fullscreen.css" />

<link type="text/css" rel="stylesheet" href="plugins/leaflet-routing-machine-3.2.7/dist/leaflet-routing-machine.css" />

<link type="text/css" rel="stylesheet" href="css/mycss.css" />



<script type="text/javascript" src="leaflet/leaflet.js"></script>

<script type="text/javascript" src="plugins/jquery/jquery-3.3.1.min.js"></script>

<script type="text/javascript" src="plugins/Leaflet.fullscreen-gh-pages/dist/Leaflet.fullscreen.js"></script>

<script type="text/javascript" src="plugins/leaflet-routing-machine-3.2.7/dist/leaflet-routing-machine.js"></script>

<script type="text/javascript" src="plugins/leaflet-routing-machine-3.2.7/dist/L.Routing.OpenRouteService.js"></script>

</head>

<body>

<!-- mapbox -->

<div id="map" class="map"></div>

<!-- custom script containing routing machine and other stuff (which works all fine)!-->

<script type="text/javascript" src="javascript/myscript.js"></script>

</body>

</html>

Paths to .js and .css files are all fine.

My leaflet map var with one of the basemaps looks like this:

var mymap = L.map('map', {

    center: [57.89, 12.02],

    zoom: 13.5,

    fullscreenControl: true

});



var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',

{ attribution: '&copy; <a href="http://osm.org/copyright" target = "_blank">OpenStreetMap</a>'

}).addTo(mymap);

What could cause the TypeError: L.Control.Geocoder is undefined error and how to fix it?

asked Nov 9 at 22:01

MrXsquared

1124

add a comment |

up vote
0
down vote

favorite

Having a problem with leaflet routing machine. The very basic code

var routingtest = L.Routing.control({

        waypoints: [

            L.latLng(57.74, 11.94),

            L.latLng(57.6792, 11.949)

        ]

}).addTo(mymap);

does run fine.

But as soon as I add more code like described at http://www.liedman.net/leaflet-routing-machine/tutorials/ I get errors.
For example this does not work:

var routingtest = L.Routing.control({

    waypoints: [

        L.latLng(57.74, 11.94),

        L.latLng(57.6792, 11.949)

    ],

    routeWhileDragging: true,

    geocoder: L.Control.Geocoder.nominatim()

}).addTo(mymap);

It throws back TypeError: L.Control.Geocoder is undefined.
I just redownloaded the plugin to make sure nothing has been accidentially modified, but still.
My index.html looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>My Map</title>



<link type="text/css" rel="stylesheet" href="leaflet/leaflet.css" />

<link type="text/css" rel="stylesheet" href="plugins/Leaflet.fullscreen-gh-pages/dist/leaflet.fullscreen.css" />

<link type="text/css" rel="stylesheet" href="plugins/leaflet-routing-machine-3.2.7/dist/leaflet-routing-machine.css" />

<link type="text/css" rel="stylesheet" href="css/mycss.css" />



<script type="text/javascript" src="leaflet/leaflet.js"></script>

<script type="text/javascript" src="plugins/jquery/jquery-3.3.1.min.js"></script>

<script type="text/javascript" src="plugins/Leaflet.fullscreen-gh-pages/dist/Leaflet.fullscreen.js"></script>

<script type="text/javascript" src="plugins/leaflet-routing-machine-3.2.7/dist/leaflet-routing-machine.js"></script>

<script type="text/javascript" src="plugins/leaflet-routing-machine-3.2.7/dist/L.Routing.OpenRouteService.js"></script>

</head>

<body>

<!-- mapbox -->

<div id="map" class="map"></div>

<!-- custom script containing routing machine and other stuff (which works all fine)!-->

<script type="text/javascript" src="javascript/myscript.js"></script>

</body>

</html>

Paths to .js and .css files are all fine.

My leaflet map var with one of the basemaps looks like this:

var mymap = L.map('map', {

    center: [57.89, 12.02],

    zoom: 13.5,

    fullscreenControl: true

});



var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',

{ attribution: '&copy; <a href="http://osm.org/copyright" target = "_blank">OpenStreetMap</a>'

}).addTo(mymap);

What could cause the TypeError: L.Control.Geocoder is undefined error and how to fix it?

asked Nov 9 at 22:01

MrXsquared

1124

Having a problem with leaflet routing machine. The very basic code

var routingtest = L.Routing.control({

        waypoints: [

            L.latLng(57.74, 11.94),

            L.latLng(57.6792, 11.949)

        ]

}).addTo(mymap);

does run fine.

But as soon as I add more code like described at http://www.liedman.net/leaflet-routing-machine/tutorials/ I get errors.
For example this does not work:

var routingtest = L.Routing.control({

    waypoints: [

        L.latLng(57.74, 11.94),

        L.latLng(57.6792, 11.949)

    ],

    routeWhileDragging: true,

    geocoder: L.Control.Geocoder.nominatim()

}).addTo(mymap);

It throws back TypeError: L.Control.Geocoder is undefined.
I just redownloaded the plugin to make sure nothing has been accidentially modified, but still.
My index.html looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>My Map</title>



<link type="text/css" rel="stylesheet" href="leaflet/leaflet.css" />

<link type="text/css" rel="stylesheet" href="plugins/Leaflet.fullscreen-gh-pages/dist/leaflet.fullscreen.css" />

<link type="text/css" rel="stylesheet" href="plugins/leaflet-routing-machine-3.2.7/dist/leaflet-routing-machine.css" />

<link type="text/css" rel="stylesheet" href="css/mycss.css" />



<script type="text/javascript" src="leaflet/leaflet.js"></script>

<script type="text/javascript" src="plugins/jquery/jquery-3.3.1.min.js"></script>

<script type="text/javascript" src="plugins/Leaflet.fullscreen-gh-pages/dist/Leaflet.fullscreen.js"></script>

<script type="text/javascript" src="plugins/leaflet-routing-machine-3.2.7/dist/leaflet-routing-machine.js"></script>

<script type="text/javascript" src="plugins/leaflet-routing-machine-3.2.7/dist/L.Routing.OpenRouteService.js"></script>

</head>

<body>

<!-- mapbox -->

<div id="map" class="map"></div>

<!-- custom script containing routing machine and other stuff (which works all fine)!-->

<script type="text/javascript" src="javascript/myscript.js"></script>

</body>

</html>

Paths to .js and .css files are all fine.

My leaflet map var with one of the basemaps looks like this:

var mymap = L.map('map', {

    center: [57.89, 12.02],

    zoom: 13.5,

    fullscreenControl: true

});



var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',

{ attribution: '&copy; <a href="http://osm.org/copyright" target = "_blank">OpenStreetMap</a>'

}).addTo(mymap);

What could cause the TypeError: L.Control.Geocoder is undefined error and how to fix it?

javascript leaflet undefined

asked Nov 9 at 22:01

MrXsquared

1124

asked Nov 9 at 22:01

MrXsquared

1124

asked Nov 9 at 22:01

MrXsquared

1124

asked Nov 9 at 22:01

MrXsquared

1124

asked Nov 9 at 22:01

MrXsquared

1124

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

accepted

I installed https://github.com/perliedman/leaflet-control-geocoder plugin and now it works. Its stated nowhere that this is a prerequisiste though...

answered Nov 14 at 0:06

MrXsquared

1124

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53233801%2fleaflet-routing-machine-error-geocoder-is-undefined%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

accepted

I installed https://github.com/perliedman/leaflet-control-geocoder plugin and now it works. Its stated nowhere that this is a prerequisiste though...

answered Nov 14 at 0:06

MrXsquared

1124

add a comment |

up vote
0
down vote

accepted

I installed https://github.com/perliedman/leaflet-control-geocoder plugin and now it works. Its stated nowhere that this is a prerequisiste though...

answered Nov 14 at 0:06

MrXsquared

1124

add a comment |

up vote
0
down vote

accepted

I installed https://github.com/perliedman/leaflet-control-geocoder plugin and now it works. Its stated nowhere that this is a prerequisiste though...

answered Nov 14 at 0:06

MrXsquared

1124

I installed https://github.com/perliedman/leaflet-control-geocoder plugin and now it works. Its stated nowhere that this is a prerequisiste though...

answered Nov 14 at 0:06

MrXsquared

1124

answered Nov 14 at 0:06

MrXsquared

1124

answered Nov 14 at 0:06

MrXsquared

1124

answered Nov 14 at 0:06

MrXsquared

1124

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Xtykutl