Leaflet routing machine error: Geocoder is undefined
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: '© <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
1175
add a comment |
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: '© <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
1175
add a comment |
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: '© <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
1175
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: '© <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
javascript leaflet undefined
asked Nov 9 at 22:01
MrXsquared
1175
asked Nov 9 at 22:01
MrXsquared
1175
asked Nov 9 at 22:01
MrXsquared
1175
asked Nov 9 at 22:01
MrXsquared
1175
asked Nov 9 at 22:01
MrXsquared
1175
1175
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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
1175
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',
autoActivateHeartbeat: false,
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
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
1175
add a comment |
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
1175
add a comment |
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
1175
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
1175
answered Nov 14 at 0:06
MrXsquared
1175
answered Nov 14 at 0:06
MrXsquared
1175
answered Nov 14 at 0:06
MrXsquared
1175
1175
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
