Leaflet routing machine error: Geocoder is undefined - javascript

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: '© OpenStreetMap'
}).addTo(mymap);
What could cause the TypeError: L.Control.Geocoder is undefined error and how to fix it?

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

Related

Leaflet map not showing despite following quick-start guide

The problem I am having is that the map is not showing up at all, there is a blank spot where the map is meant to be. I have followed Leaflet's quick-start guide and I still have yet to determine why my map does not show.
Below is the code I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="mapid">
</div>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin="">
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, Imagery © Mapbox',
maxZoom: 18,
id: 'mapbox.streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
}).addTo(mymap);
</script>
</body>
</html>
You import the Leaflet JavaScript file and have your page code within the same HTML <script> tag. In such case, browsers are supposed to ignore (not execute) the content between the script tags, i.e. your page code is not executed.
Simply separate in 2 different script tag pairs:
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
// etc.
</script>

leaflet error: this.callInitHooks is not a function error?

I'm using leaflet v1.5.1.
The error from Chrome is:
leaflet.js:5 Uncaught TypeError: this.callInitHooks is not a function
at Object.i [as Marker] (leaflet.js:5)
at map1Rose2.php:77
Below is the minimal code that will reproduce the issue in Chrome. I do NOT see an issue with the function. The error appears at the first 'var' (line 77) in the .
I've prodded and poked at this thing to exhaustion does anyone have an idea?
<!DOCTYPE html>
<html lang="en">
<head>
<title>NCM Map of Station Locations</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon-32x32.png" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- ******************************** Load LEAFLET from CDN *********************************** -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<!-- ********************************* End Load LEAFLET **************************************** -->
<!-- ******************************** Load ESRI LEAFLET from CDN ******************************* -->
<script src="https://unpkg.com/esri-leaflet#2.2.4/dist/esri-leaflet.js"
integrity="sha512-tyPum7h2h36X52O2gz+Pe8z/3l+Y9S1yEUscbVs5r5aEY5dFmP1WWRY/WLLElnFHa+k1JBQZSCDGwEAnm2IxAQ=="
crossorigin=""></script>
<!-- Load Esri Leaflet Geocoder from CDN -->
<link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder#2.2.14/dist/esri-leaflet-geocoder.css"
integrity="sha512-v5YmWLm8KqAAmg5808pETiccEohtt8rPVMGQ1jA6jqkWVydV5Cuz3nJ9fQ7ittSxvuqsvI9RSGfVoKPaAJZ/AQ=="
crossorigin="">
<script src="https://unpkg.com/esri-leaflet-geocoder#2.2.14/dist/esri-leaflet-geocoder.js"
integrity="sha512-uK5jVwR81KVTGe8KpJa1QIN4n60TsSV8+DPbL5wWlYQvb0/nYNgSOg9dZG6ViQhwx/gaMszuWllTemL+K+IXjg=="
crossorigin=""></script>
<!-- ******************************** End ESRI LEAFLET ***************************************** -->
<!-- ******************************** Added Functionality *************************************** -->
<link rel="stylesheet" href="css/leaflet_numbered_markers.css" />
<link rel="stylesheet" href="css/L.Grid.css" />
<link rel="stylesheet" href="css/L.Control.MousePosition.css" />
<link rel="stylesheet" href="css/control.w3w.css" />
<link rel="stylesheet" href="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.css" />
<link rel="stylesheet" type="text/css" href="css/maps.css">
<link rel="stylesheet" type="text/css" href="css/leaflet/leaflet.contextmenu.min.css">
<script src="js/leaflet_numbered_markers.js"></script>
<script src="js/L.Grid.js"></script> <!-- https://github.com/jieter/Leaflet.Grid -->
<script src="js/L.Control.MousePosition.js"></script> <!-- https://github.com/ardhi/Leaflet.MousePosition -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier-Leaflet/0.2.6/oms.min.js"></script>
<script src="js/control.w3w.js"></script>
<script src="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.js"></script>
<script src="js/leaflet/leaflet.contextmenu.min.js"></script>
<script src="https://unpkg.com/leaflet.maidenhead#1.0.0/src/maidenhead.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-geometryutil#0.9.1/src/leaflet.geometryutil.min.js"></script>
<!-- https://github.com/Turfjs/turf -->
<script src="https://cdn.jsdelivr.net/npm/#turf/turf#5/turf.min.js"></script>
<style>
</style>
</head>
<body>
<!-- the map div holds the map -->
<div id="map"></div>
<script>
var WA0TJT = L.Marker(new L.LatLng(39.202911,-94.602887),{
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [{ text: 'Click here to add mileage circles', callback: circleKoords}],
icon: new L.NumberedDivIcon({number: '1' }),
title:"marker_1" }).addTo(fg).bindPopup("1<br><b>ID: #0013</b><br>WA0TJT<br>Keith Kaiser<br>Platte Co., MO Dist: A<br>39.202911, -94.602887<br>EM29QE").openPopup();
var KA0OTL = L.Marker(new L.LatLng(39.233702,-94.635126),{
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [{ text: 'Click here to add mileage circles', callback: circleKoords}],
icon: new L.NumberedGreenDivIcon({number: '2' }),
title:"marker_2" }).addTo(fg).bindPopup("2<br><b>ID: #0025</b><br>KA0OTL<br>Jeff Libby<br>Platte Co., MO Dist: A<br>39.233702, -94.635126<br>EM29qf").openPopup();
/*
var map = L.map('map', {
center: [39.73, -104.99],
zoom: 10,
layers: [base, pois]
});
*/
var fg = new L.featureGroup();
function circleKoords(e) { };
</script>
</body>
</html>
You have to call new L.Marker() or L.marker()
To fix your second error (in the comments) you have to define first your featureGroup and then create the markers.
var fg = new L.featureGroup();
var WA0TJT = L.Marker(new L.LatLng(39.202911,-94.602887),{
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [{ text: 'Click here to add mileage circles', callback: circleKoords}],
icon: new L.NumberedDivIcon({number: '1' }),
title:"marker_1" }).addTo(fg).bindPopup("1<br><b>ID: #0013</b><br>WA0TJT<br>Keith Kaiser<br>Platte Co., MO Dist: A<br>39.202911, -94.602887<br>EM29QE").openPopup();
also you will nothing see on the map, because you are not added your featuregroup to the map. And you need a map instance.
var map = L.map('map', {
...
});
fg.addTo(map);

How to use polylinedecorator plugins in leaflet?

i'm new in html and leaflet, i don't know how to use plugins in leaflet
right now i'm working with polyline decorator plugins but i don't know how to use it right
i'm trying following tutorial on internet, here my code
var arrow = L.polyline([[107.63576,-2.72322], [107.65699,-2.7366]], {}).addTo(map);
var arrowHead = L.polylineDecorator(arrow, {
patterns: [
{offset: '100%', repeat: 0, symbol: L.Symbol.arrowHead({pixelSize: 15, polygon: false, pathOptions: {stroke: true}})}
]
}).addTo(map);
and here my head section
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
<script src="polyline/dist/leaflet.polylineDecorator.js"></script>
<script src="polyline/src/L.polylineDecorator.js"></script>
</head>
You have the latitudes and longitudes swapped in the call to L.polyline. Try this line instead:
var arrow = L.polyline([[-2.72322, 107.63576], [-2.7366, 107.65699]], {}).addTo(mymap);

d3.geomap is undefined in Grails application

I am using d3.geomap in Grails to create a map of the US.
As said in https://d3-geomap.github.io/ my gsp look like:
<html>
<head>
<meta name="layout" content="main" charset="utf-8">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'd3.geomap.css')}" type="text/css">
<g:javascript src="d3.geomap.dependencies.min.js" />
<g:javascript src="d3.geomap.min.js" />
</head>
<body>
<script>
var map = d3.geomap.choropleth()
.geofile('/topojson/countries/USA.json')
.projection(d3.geo.albersUsa)
.column('2012')
.unitId('fips')
.scale(1000)
.legend(true);
d3.csv("mapusa", function(error, data) {
d3.select('#map')
.datum(data)
.call(map.draw, map);
});
</script>
<div id="map"></div>
</body>
</html>
The css file d3.geomap.css is under web-app/css.
The js files d3.geomap.dependencies.min.js and d3.geomap.min.js are under web-app/js.
Under grails-app/views/ I have the topojson folder.
When I run the page it gives me:
Uncaught TypeError: Cannot read property 'choropleth' of undefined
d3.geomap is undefined.
Any ideas?
Thanks in advance.
In my main.gsp I have:
<script src="http://d3js.org/d3.v3.min.js"></script>
When I remove this, then d3.geomap has value and show the US map. I am not sure why they enter in conflict.
Try this code below, you will get your desired output of world map. Similarly, you can do it for US maps.
<head>
<meta charset="utf-8">
<link href="https://d3-geomap.github.io//d3-geomap/css/d3.geomap.css" rel="stylesheet">
<script src="https://d3-geomap.github.io//d3-geomap/vendor/d3.geomap.dependencies.min.js"></script>
<script src="https://d3-geomap.github.io//d3-geomap/js/d3.geomap.min.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var map = d3.geomap().geofile('https://d3-geomap.github.io//d3-geomap/topojson/world/countries.json');
d3.select('#map')
.call(map.draw, map);
</script>

Adding a bingmap on a html webpage javascript error

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
function GetMap()
{
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
{credentials: "Your Bing Maps Key",
center: new Microsoft.Maps.Location(45.5, -122.5),
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 7});
}
</script>
</head>
<body onload="GetMap();">
<div id='mapDiv' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
I've tried even loading a simlple map but I get a js error on the Microsoft class undefined
Add the following line to the <head> section of your page, before the section that you've pasted above:
<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0" type="text/javascript"
charset="UTF-8"></script>
Have you included the include for the maps api?
<script type="text/javascript" src="bingmaps.js"></script>
Or are you using the rest service, in which case you need to specify the location of the service in an AJAX call...
http://www.earthware.co.uk/blog/index.php/2010/10/using-jquery-with-the-bing-maps-rest-api/

Categories