MapQuest : MQ is not defined

Question

I had to take over and android app working with phonegap - leaflet/MapQuest/openstreetmap

It broke because MapQuest stopped direct access to tiles and the map wouldn't show up anymore.

I then added the key and modified the code as suggested here : https://developer.mapquest.com/documentation/leaflet-plugins/maps/

I use this code :

<link rel="stylesheet" href="scripts/leaflet-0.7.7/leaflet.css" />
<script src="scripts/leaflet-0.7.7/leaflet.js"></script>
<script src="https://www.mapquestapi.com/sdk/leaflet/v2.s/mq-map.js?key=validKeyNumberThatIWontReveal"></script>

In the following structure :

And my JS :

var popup = L.popup();
                        var geolocationMap = L.map(b, {
                            layers: MQ.mapLayer(),
                            center: [40.731701, -73.993411],
                            zoom: 12
                        });

Which workout well when I try it on a browser.

But when I compile on my android phone with Android studio I get this error :

'MQ is not defined'

It used to work fine with scripts/vendor/leaflet-0.7.

My wild guess would be : it somehow doesn't reach the library scripts/leaflet-0.7.7 but I can't see why.

Answer 1

I ended up having 2 problems, one of my own and one that could help any reader :

• I wasn't declaring the leaflet script at the right place (the page I declared it in). For reference see : https://developer.mapquest.com/documentation/leaflet-plugins/open/

• Problem of URL described there : mapquest direct tile access discontinued

For the sake of easiness this is the answer

It's as simple as changing your tileUrl.

Replace this:

var tileUrl = 'http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png?x';

with this:

var tileUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';

Then use as before:

L.tileLayer(tileUrl, { }).addTo(map);

@Joel Harris