Encountering a Runtime Exception while utilizing MapQuest's direction routing feature on Ionic 3

I have successfully generated a map using the Ionic 3 framework, but I encountered a runtime error when attempting to use the L.mapquest.directions().route() function.

Here are the imports:

<link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a767f7b7c767f6e5a2b342d342b">[email protected]</a>/dist/leaflet.css"

  integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="

  crossorigin=""/>

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f9959c989f959c8db9c8d7ced7c8">[email protected]</a>/dist/leaflet.js"

  integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="

  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"/>

Here is the code snippet causing the issue:

L.mapquest.key = MapQuestKey;
      this.map = L.mapquest.map('map', {
        center: [lat, lng],
        layers: L.mapquest.tileLayer('map'),
        zoom: 13
      });
L.mapquest.directions().route({

        start: '350 5th Ave, New York, NY 10118',

        end: 'One Liberty Plaza, New York, NY 10006',

});

The error message I received is as follows:

ERROR Error: Uncaught (in promise): 
TypeError: this._rawPxBounds is undefined _updateBounds@https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfa3aaaea9a3aabb8ffee1f8e1fe">[email protected]</a>/dist/leaflet.js:5:79584 
setStyle@https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="08646d696e646d7c4839263f2639">[email protected]</a>/dist/leaflet.js:5:75174 
setPathStyle@https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest-core.js:6:161888
updateRibbonWidth@https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest-core.js:6:163063

As a newcomer to Mapquest, I am unsure about the cause of this issue. Any suggestions or solutions would be greatly appreciated.

typescriptionic-frameworkleafletmapquest

Answer №1

I removed the unnecessary imports from [email protected] and [email protected] and now only importing [email protected]. This has resolved the issue and the functionality is back to normal.

<script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>

<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Facing problem with Angular 7 when making a GET request for non-JSON data

Currently, I am retrieving JSON data from a URL using the following method: this.http.get('http://localhost:3200/mydata').subscribe(data => { console.log(data); }); The response is in JSON format, and everything seems to be working fine. ...

javascriptangulartypescript

What is the correct way to extract a value from a keyvalue pair?

When dealing with an object that returns boolean "issues", I specify it as a string. If the value is true, I aim to show a checkmark; if false, I want to display a cross. <ul *ngFor="let filtered of reposFiltered | keyvalue"> <li *ngIf=& ...

angulartypescriptobjectwebfrontend

Getting the Final Character from a TypeScript String Constant

Can we extract the final character from a string without using the entire alphabet as an enum? Right now, I'm focusing on numeric digits. I'm somewhat puzzled about why my current approach isn't yielding the correct results. type Digit = &a ...

typescript

Modify the behavior of the Android back button when a Popup is displayed in Ionic

I'm attempting to accomplish the following: Scenario 1 User presses the back button. A popup appears asking if the user wants to exit * User presses the back button. The app exits * and Scenario 2 User presses the back button. A popup ...

angularjsionic-framework

Error Message: The Query<DocumentData> type cannot be assigned to the DocumentReference<DocumentData> parameter

Currently, I am attempting to execute a query against Firestore data. Here is my code snippet: import { collection, getDoc, query, where } from "firebase/firestore"; import { db } from "../../utils/firebaseConfig"; const getQuery = a ...

reactjstypescriptfirebasegoogle-cloud-firestore

What's the best way to group rows in an angular mat-table?

I am working on a detailed mat-table with expanded rows and trying to group the rows based on Execution Date. While looking at this Stackblitz example where the data is grouped alphabetically, I am struggling to understand where to place the group header c ...

javascripthtmlangulartypescriptangular-material

Android's clean white backdrop as the keyboard disappears

Can someone help me with an issue I'm having regarding the background image on my app? Click here to see the image The background image is set up like this : .pane { background-image: url("../img/inner-banner-bg.jpg"); background-repeat: rep ...

androidangularjsionic-framework

Guide to setting up .env Variables on a DigitalOcean Ubuntu droplet

After deploying my Node.js app on a DigitalOcean Ubuntu droplet, I encountered the need for variables from my .env file. How can I go about creating these variables within the DigitalOcean droplet? ...

node.jstypescriptdigital-oceandroplet

Leveraging TypeScript unions within functions to handle and throw errors

As a newcomer to TypeScript, I've encountered an odd error that I need help with. I have various objects sending data to the server and receiving fresh data back of the same object type. These objects use a shared method for sending the data, so I ap ...

typescripttypescript-typings

Error message "Cannot find children property on type IntrinsicAttributes & RefAttributes<unknown>" occurring in a React component due to a Typescript issue

Issue: The specified type '{ children: string; severity: string; sx: { width: string; }; }' is not compatible with the type 'IntrinsicAttributes & RefAttributes'. The property 'children' is missing in the type 'Intri ...

reactjstypescriptmaterial-ui

Implementing multer diskStorage with Typescript

I'm currently in the process of converting a node.js server to TypeScript. Here is what my function looks like in Node: const storage = multer.diskStorage({ destination: function (req, file, cb) { const dir = './uploads/'; ...

node.jstypescriptserverstoragemulter

Having trouble getting the installed datejs typings to work properly

As I delve into Typescript due to my interest in Angular 2, I have come across the datejs Javascript library. To incorporate it into my Angular 2 project, I went ahead and installed datejs via npm, ensuring that it is correctly listed in my package.json. A ...

angulartypescripttypescript-typings

Custom objects do not return true for Symbol.hasInstance

The TypeScript playground encounters an issue with the Symbol.hasInstance built-in symbol, while it functions properly for other symbols. Testing other symbol methods such as Symbol.match and Symbol.replace show no problems, but Symbol.hasInstance is not ...

arraystypescriptsymbols

Tips for sorting through the properties of the Record<K, T>:

Let's say we have the following data stored in a record: export const MenuData: Record<Header, HeaderInfo> = { val1: { message: 'xyz', buttonText: 'txt', buttonUrl: '/url-abc', }, val2: { messa ...

typescripttypescript-utility

I am interested in creating an input range slider using React and TypeScript

This code was used to create a slider functionality import { mainModule } from 'process'; import React, { useState } from 'react'; import styled from 'styled-components'; const DragScaleBar = () => { const [value, setV ...

javascripthtmlreactjstypescriptfrontend

Can you explain why it prints to the console twice every time I try to add an item?

This is a note-taking application created using Angular and Firebase. The primary functionalities include adding items and displaying them. I noticed a strange behavior where my ngOnInit() method is being called twice every time I add an item. As shown in ...

angulartypescriptfirebase

Navigating the complexities of integrating Rollup, ES modules, TypeScript, and JSX can be a challenging endeavor due to

Lately, I've been learning about the tools mentioned in the title. However, I've encountered some bumps along the way, so I'm turning to StackOverflow for help. My Requirements I need something like Rollup to pack my stuff For bare module ...

javascriptnode.jsreactjstypescriptrollupjs

Retrieving the data from a Material UI Slider control

I'm encountering an issue with retrieving the value property I assigned to a component. event.target.value is returning undefined. How can I successfully access the value of the component? My goal is for handlePlayersChange() to be able to handle dyn ...

javascriptreactjstypescriptmaterial-ui

Exploring the functionality of surveyjs in conjunction with react and typescript

Does anyone have any code samples showcasing how to integrate Surveyjs with React and TypeScript? I attempted to import it into my project and utilized the code provided in this resource. https://stackblitz.com/edit/surveyjs-react-stackoverflow45544026 H ...

reactjstypescriptsurveyjs

Can you use TypeScript to define generic React functional components?

I am looking to add annotations to a generic in a React functional component like the following: import React, {useEffect, useState} from "react"; interface PaginatedTableProps{ dataFetcher: (pageNumber: number) => Promise<any>, columnNames: ...

javascriptreactjstypescripttypescript-genericsreact-typescript