Can't find variable: L

7 posts / 0 new
Last post
sam452
Can't find variable: L

Trying out mapquest.js for customer. Started with mapquest.js found in /documentation/mapquest-js/v1.3/ and inserted the first JS and CSS. However, customer needs text to go with the markers. OK, I try out the docs for L.mapquest.textMarker(['mylattitude', 'mylongitude', { .. }) and find that L.mapquest.textMarker is not a function.

OK, let's try the next level and loaded up mapquest-core.js and find new errors:

Can't find variable: L
L.latLng is not a function. (In 'L.latLng(75.4021625984244,-175.375)',

Hmm, maybe I misread the docs about Leaflet. Anyway I download 1.3 and load it and its CSS as well. Still the same errors.

L.mapquest.key = 'mystringhere';
var map = L.mapquest.map('mapquest', {
center: [36.079976, -86.724918],
layers: L.mapquest.tileLayer('map'),
zoom: 12
});

L.mapquest.textMarker([36.079976,-86.724918], {
text: 'my customer text here',
position: 'right',
type: 'marker',
icon: {
primaryColor: '#a8333d',
secondaryColor: '#333333',
size: 'sm'
},
draggable: true
}).addTo(map);

So what do i need to do to make this work? Searching here did not reveal clues, sam


MQBrianCoakley
Are you able to get a basic
Are you able to get a basic map successfully?   Do you get error messages about the js/css file downloads before creating the map?

sam452
Basic ok, mapquest-core.js OK

Yes, the basic maps when I hardcoded the script as presented into my HEAD did present a basic map, not unlike the static map presents. 
I can confirm that mapquest-core.js is loaded. Also to be safe, I've added leaflet.js to see if this dependency is required. To manage these as libraries, I downloaded from the URLs presented so that Drupal 8 can manage them.

I'm working on the theory that these libraries must be in the HEAD and not the Footer, as basic when I hard-coded as a test seemed to work.


MQBrianCoakley
The only things you should
The only things you should need to load are the api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.[js/css] files. It shouldn't matter where they are placed as long as they aren't used until after they've loaded.

sam452
L.mapquest.textMarker is not a

OK, are you saying that the errors I got trying to use L.mapquest.textMarker are not due to mapquest.js? Are these methods available in mapquest.js? What does the mapquest-core.js serve? thx, sam


sam452
mapquest.js needs to be loaded in HEAD

I can say that when mapquest.js in Drupal 8 loads with other JS libraries in the footer that the error occurs. In console, I can see that L.mapquest.key returns the correct value. When I force the load in HEAD I can see most parts of the map which is an improvement. Now, I'm struggling with the original problem of textMarker. I will post in another forum. THX


Thomas.Horacek
Make sure you if you are

Make sure you if you are using mapquest-core that you import leaflet js and css files first. Your code works for me below

<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="map" style="width:100%; height:1600px;"></div>
</div>
</div>
</div>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"
integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
crossorigin=""></script>
<script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest-core.js"></script>
<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest-core.css"/>
<script type="text/javascript">
window.onload = function () {
console.log(L);

L.mapquest.key = 'KEY';

var map = L.mapquest.map('map', {
center: [36.079976, -86.724918],
layers: L.mapquest.tileLayer('map'),
zoom: 12
});
L.mapquest.textMarker([36.079976,-86.724918], {
text: 'my customer text here',
position: 'right',
type: 'marker',
icon: {
primaryColor: '#a8333d',
secondaryColor: '#333333',
size: 'sm'
},
draggable: true
}).addTo(map);
}
</script>