I am scaffolding a simple prototype using google places and maps api using Vue.
In index.html, I added the script tag, libraries, and api key, I get 200 response in the network tab.
<script src="https://maps.googleapis.com/maps/api/js?key=My-api-key&libraries=places" async defer></script>
In App.vue, I added the following
<input ref="autocomplete" type="text" />
...
<script>
export default {
name: "App",
data() {
return {
autocomplete: "",
};
},
methods: {},
mounted() {
const center = { lat: 40.84498856765032, lng: -73.71060855293794 };
// Create a bounding box with sides ~10km away from the center point
const defaultBounds = {
north: center.lat + 0.1,
south: center.lat - 0.1,
east: center.lng + 0.1,
west: center.lng - 0.1,
};
const originAutoComplete = google.maps.places.AutoComplete(
this.$refs["autocomplete"],
{
bounds: defaultBounds,
}
);
originAutoComplete.addListener("place_changed", () => {
console.log(originAutoComplete.getPlace());
});
How do I resolve this error? Is there a way to initialize this in App.vue script tag? The example google developers youtube works great, but I'd like to implement this in a Vue context.
One other note, I tried adding window before the .google, no dice.
UPDATE 1
as per your advice, I installed googlemaps api loader and in App.vue:
<script>
import { Loader } from "#googlemaps/js-api-loader";
const loader = new Loader({
apiKey: "YOUR_API_KEY",
version: "weekly",
libraries: ["places"],
});
export default {
name: "App",
data() {
return {
autocomplete: "",
};
},
methods: {
printData() {
console.log(this.$refs["autocomplete"].value);
},
},
async mounted() {
let origin;
const center = { lat:40.84498856765032, lng:-73.71060855293794 };
// Create a bounding box with sides ~10km away from the center point
const defaultBounds = {
north: center.lat + 0.1,
south: center.lat - 0.1,
east: center.lng + 0.1,
west: center.lng - 0.1,
};
loader
.load()
.then((google) => {
origin = new google.maps.places.Autocomplete(
this.$refs["autocomplete"],
{
types: ["cities"],
defaultBounds,
fields: ["place_id", "geometry", "name"],
}
);
origin.addListener("place_changed", () => {
console.log(origin.getPlace());
});
})
.catch((e) => {
console.log(e);
// do something
});
Now this issue is the drop down of selections is not appearing.
The issue is that your Vue App JS is loading before the google maps JS. There are some options:
Block your app loading on Google Maps by removing the async and defer from the script. Make sure the script tag is above your Vue JS after removing the async/defer.
Incorporate a callback parameter or just check for existence of window.google in your vue component and allow vue to update when it is available.
Use #googlemaps/js-api-loader in the Vue component. See Is `async/await` available in Vue.js `mounted`? for ways to incorporate.
I recommend option 3.
Related
I'm currently working in a react web-app. We are using leaflet to render some buildings maps. The app is working good in desktop. But we found the maps images are not loaded properly when using mobile navigator.
The map started loading but seems cropped, until you switch to other app and return to the app/page again you can see the full image. In some pages the image seems cropped but when scroll or zoom-in, zoom-out the image loads well.
I have tried to use invalidateSize() function but seems not working.
useEffect(() => {
let mapAttributes = {
attributionControl: false,
minZoom: -4,
zoomDelta: 0.25,
zoomSnap: 0.25,
wheelPxPerZoomLevel: 150,
crs: L.CRS[coordinateSystem],
zoomControl: isShowZoomControl,
};
const map = L.map(mapRef.current, {
...mapAttributes,
});
L.imageOverlay(backgroundImageUrl, mapBounds).addTo(map);
const defaultMarkerPaneZIndex = 600;
map.createPane(mapPanes.markerNotifications);
map.getPane(mapPanes.markerNotifications).style.zIndex = defaultMarkerPaneZIndex + 1;
setMapObj(map);
return () => {
setMapObj(null);
map.off();
map.remove();
};
}, [
backgroundImageUrl,
buildingUuid,
controlBoundariesCallback,
coordinateSystem,
floorUuid,
isShowZoomControl,
mapBounds,
]);
useEffect(() => {
if (!mapObj) return;
mapObj.invalidateSize();
}, [mapObj);
Background
I am using deck.gl's PolygonLayer to render data that looks like this:
data.json:
{
"someKey": "someValue",
"spatialReference": {
"wkid": 23032,
},
"features": [
{
"attributes": {
"polygonName": "MY_POLYGON"
},
"geometry": {
"rings": [
[
[421334, 7240529], ...
],
[
[422656, 7250696], ...
]
]
}
}
]
}
Now, the problem is that decg.gl uses a latitude-longitude coordinate-system, which is different from what this polygon is expressed in.
Deck.GL documentation on rendering layers with different coordinate-systems
So, according to the documentation, deckGL renders each layer separately based on its coordinate system. Therefore, it was important to specify both coordinateOrigin and coordinateSystem props.
Understanding the coordinate system in data.json
So, as far as I understood, the spacialReference value in data.json represents an EPSG code. Using this website, I was able to find a value for the coordinateOrigin prop as [63.510617, 9.210989, 0]. As for the coordinateSystem prop, I used COORDINATE_SYSTEM.METER_OFFSETS. Here's the code:
PolygonLayer.tsx:
import React from "react";
import { COORDINATE_SYSTEM } from "#deck.gl/core/typed";
import { DeckLayer } from "#deck.gl/arcgis";
import { PolygonLayer } from "#deck.gl/layers/typed";
import MapView from "#arcgis/core/views/MapView";
import ArcGISMap from "#arcgis/core/Map";
import "#arcgis/core/assets/esri/themes/light/main.css";
export default function PolygonLayer({layerURL}) {
const mapRef = React.useState(null)
React.useEffect(() => {
fetch(layerURL)
.then(res => res.json())
.then(data => {
const blobURL = new Blob([JSON.stringify(data)], {type: "application/json",});
const url = URL.createObjectURL(blobURL); // this is needed for the layer
const layer = new PolygonLayer({
id: data["features"][0]["attributes"]["polygonName"], // correctly defined
data: url,
filled: true,
getLineWidth: 3,
getLineColor: [255, 255, 255, 0],
getFillColor: [234, 243, 221, 0],
coordinateOrigin: [63.510617, 9.210989, 0], // based on the explanation above
coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS,
getPolygon: (d) => {
console.log(d); // doesn't log anything
return d.features[0].geometry.rings;
},
});
const deckLayer = new DeckLayer({
"deck.layers": [layer],
});
const arcgisMap = new ArcGISMap({
basemap: "topo-vector",
layers: [deckLayer]
});
new MapView({
container: mapRef?.current,
map: arcgisMap,
center: data["features"][0]["geometry"]["rings"][0][0], // correctly defined
zoom: 9
});
})
.catch(err => console.log(err));
}, [layerURL]);
return <div ref={mapRef} style={{height: "90vh", width: "100%"}}></div>
}
The issue with this code
The problem with this code is that it doesn't render the layer (or the base map) and there's nothing logged in the console for the value of d; as mentioned in the code above.
Making sure the code works
Now, just a sanity check, I have used this url which returns polygons data in the standard LAT LONG format, without using coordinateOrigin or coordinateSystem props as in this example and it worked. So the code is ok rendering LAT LONG system, but breaks when using METERS_OFFSET as in the code provided.
Therefore
Have I figured out the coordinateOrigin correctly? And how can I use this (or another type of) layer to render this data correctly? Any help is appreciated and apologies for the long question!
I am trying get Isochrone contours when the user clicks on a Marker,
The official Mapbox Documentation uses the built in Mapbox JS methods but I can't make it work with Leaflet JS
Here's what I have
function markerOnClick(lon, lat) {
const urlBase = "https://api.mapbox.com/isochrone/v1/mapbox/";
const profile = "cycling"; // Set the default routing profile
const minutes = 10; // Set the default duration
// Create a function that sets up the Isochrone API query then makes an fetch call
async function getIso() {
const query = await fetch(
`${urlBase}${profile}/${lon},${lat}?contours_minutes=${minutes}&polygons=true&access_token=${accessToken}`,
{ method: "GET" }
);
const data = await query.json();
map.getSource("iso").setData(data);
}
// From the official documentation
map.addSource("iso", {
type: "geojson",
data: {
type: "FeatureCollection",
features: [],
},
});
// I have tried to use the Leaflet geoJSON method to add it to the map
L.geoJSON("iso", {
type: "geojson",
data: {
type: "FeatureCollection",
features: [],
},
}).addTo(map);
// Can't find the substitute for this method in Leaflet
map.addLayer(
{
id: "isoLayer",
type: "fill",
// Use "iso" as the data source for this layer
source: "iso",
layout: {},
paint: {
// The fill color for the layer is set to a light purple
"fill-color": "#5a3fc0",
"fill-opacity": 0.3,
},
},
"poi-label"
);
// Make the API call
getIso();
}
I have tried to use the Leaflet method of adding GeoJSON to the map i.e. L.geoJSON but to no avail the mapbox GL JS methods I am trying to replace are
map.addLayer
map.addSource
any advice would be appreciated
L.geoJSON() expects a GeoJSON data structure, not a string. Do read https://leafletjs.com/reference#geojson .
For your particular case you probably want to do something like
const query = await fetch(`${urlBase}${profile}/${lon},${lat}?contours_minutes=${minutes}&polygons=true&access_token=${accessToken}`,{ method: "GET" });
const data = await query.json();
L.geoJson(data).addTo(map);
I have a mapbox map, initialized with the outdoors-v9 style (tried other styles, same behavior). When I add a layer to the map - a marker or a geojson source and zoom the map, the style changes or breaks, I'm not sure which.
This is the map before the zoom
and after the zoom
here are the functions that init the map and add markers
mapboxgl.accessToken = "pk.*******";
buildMap: function() {
const _self = this;
_self.map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/outdoors-v9",
center: [-95.712891, 37.09024],
zoom: 3
});
_self.map.on('load', function() {
_self.map.addSource('route', {
'type': 'geojson',
'data': {
"type": "FeatureCollection",
"features": []
}
});
_self.map.addLayer({
'id': 'route',
'source': 'route',
'type': 'line',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#47576A',
'line-width': 3
}
});
});
}
...
const coords = [addressData.longitude, addressData.latitude];
const marker = new mapboxgl.Marker().setLngLat(coords).addTo(this.map);
I am using Vue.js to render the map. Mapbox version v0.45.0
Any help or leads are highly appreciated
Vue data() properties are reactive, they have getters and setters, so, when loading map object or adding vector tiles layer (geojson), Vue tries to add getters & setters to the map & map.layers which causes vue & vue-dev-tools to crash and mess up the map.
If you enable any raster layer, it would work successfully because raster tiles are loaded via the mapbox.css whereas vector tiles being geojson, are added to the map object.
Easiest solution would be to define a non-reactive variable in vue and then re-use it everywhere.
// edit: A correct/recommended way to set non-reactive data: GitHub link
Seems the issue was related with the fact that I'm pushing the marker instance to an observable (a vuejs data field). After pushing the marker instance to an array, the issue disappeared. This comment doesn't really answer why this happens, but hope it helps someone else that might face the same issue
I just faced this issue and realized that I didn't follow the documentation exactly as it was described (jumped right on to coding without reading properly). And the documentation says:
Storing Map object
Take note that it's generally bad idea to add to Vuex or component's
data anything but primitive types and plain objects. Vue adds getters
and setters to every property, so if you add Map object to Vuex store
or component data, it may lead to weird bugs. If you want to store map
object, store it as non-reactive property like in example below.
The problem was that I had also registered "map" inside the "data" object of my Vue component. But in the example code it's not declared in data, only in the "create" function.
https://soal.github.io/vue-mapbox/guide/basemap.html#map-loading
After hours spent on this problem, here is my working solution to access map instance from a store (thanks to https://github.com/vuejs/vue/issues/2637#issuecomment-331913620):
const state = reactive({
map: Object.freeze({ wrapper: /* PUT THE MAP INSTANCE HERE */ });
});
Here is an example with Vue Composition Api:
index.js
import { reactive, computed } from "#vue/composition-api";
export const state = reactive({
map: null
});
export const setMap = (map) => {
state.map = Object.freeze({ wrapper: map});
};
export const getMap = computed(() => state.map.wrapper);
export const initMap = (event) => {
setMap(event.map);
// now you can access to map instance from the "getMap" getter!
getMap.value.addSource("satellite-source", {
type: "raster",
url: "mapbox://mapbox.satellite",
});
getMap.value.addLayer({
id: "satellite-layer",
type: "raster",
source: "satellite-source"
});
};
App.vue
<template>
<MglMap :accessToken="..." :mapStyle="..." #load="onMapLoaded" />
</template>
<script>
import { defineComponent } from "#vue/composition-api";
import { MglMap } from "vue-mapbox";
import { initMap } from "./index.js";
export default defineComponent({
components: {
MglMap
},
setup() {
const onMapLoaded = (event) => {
initMap(event);
}
return { onMapLoaded };
}
});
</script>
I've got the same error.
This happens if you either put the map or the marker on an reactive vue.js instance.
Short and quick answer.
Explanation is similar to #mlb's answer. So you freeze the object to prevent the map from disorientated and for any actions done to the map, call back the data with an extra Object key which in case is 'wrapper'.
<template><MglMap :accessToken="..." :mapStyle="..." #load="onMapLoaded" /></template>
<script>
methods: {
onMapLoaded(event) {
this.mapboxEvent = Object.freeze({wrapper: event.map});
},
panMap(event) {
this.mapboxEvent.wrapper.panTo([lng, lat], {duration: 1000, zoom: 14});
}
}
</script>
Overview: This project I've been working on receives a message from an external source and updates a Bing Map based on the information received. However, when I let the page run for a long time, the page just ends up eating up all of the memory and crashing itself.
Specifics: This memory issue arose once I switched over to Bing Maps from Google Maps and I have not been able to resolve it no matter what I've tried. I've searched all over to try and either resolve this issue through Bing Maps best practices or at least find what's causing this issue, but I have been unable to find anything that actually fixed the issue.
I have a significant amount of detached DOMs and have tried to analyze them more closely using Google Chrome's console, but have been unsuccessful.
Attempted Fixes:
Moving everything to do with adding handlers into the map initialization function (as displayed below), but that did not seem to improve it by much.
Loading any Bing Maps modules from the map initialization function (as displayed below). This cleaned the code up quite a bit, but didn't seem to have much of an affect on the memory usage.
Loading the map synchronously. However, this seemed to break just about everything to do with Bing Maps on the site.
Stopped disposing of the Map upon receiving a message. This assisted in key usage, but did not help with the memory usage.
Relevant code:
Here is the map initialization function (run asynchronously by the Bing Maps call in the HTML):
function initialize () {
const CENTER = new Microsoft.Maps.Location(44.96375272262944, -93.2353971897461);
// Assigns the zoom depending on whether the device is a mobile device or not
if (isMobile()) {
zoom = 12;
} else {
zoom = 13;
}
// Initialize the map
map = new Microsoft.Maps.Map(document.getElementById('map-canvas'), {
credentials: API_KEY,
minZoom: zoom,
center: CENTER,
disableStreetside: true,
disableStreetsideAutoCoverage: true,
enableClickableLogo: false,
showLocateMeButton: false,
showMapTypeSelector: false
});
bus1 = {
assignment: null,
destination: null,
distance: null,
eta: null,
location: null,
mph: null,
name: null,
pin: new Microsoft.Maps.Pushpin(map.getCenter(), {
icon: 'img/bus1.png',
anchor: new Microsoft.Maps.Point(14, 44),
visible: false,
text: "",
title: ""
}),
polylineRender: null,
time: null,
timeout: null,
};
bus2 = {
assignment: null,
destination: null,
distance: null,
eta: null,
location: null,
mph: null,
name: null,
pin: new Microsoft.Maps.Pushpin(map.getCenter(), {
icon: 'img/bus2.png',
anchor: new Microsoft.Maps.Point(14, 44),
visible: false,
text: "",
title: ""
}),
polylineRender: null,
time: null,
timeout: null,
};
bus3 = {
assignment: null,
destination: null,
distance: null,
eta: null,
location: null,
mph: null,
name: null,
pin: new Microsoft.Maps.Pushpin(map.getCenter(), {
icon: 'img/bus3.png',
anchor: new Microsoft.Maps.Point(14, 44),
visible: false,
text: "",
title: ""
}),
polylineRender: null,
time: null,
timeout: null,
};
buses = [bus1, bus2, bus3];
// Add the traffic layer
Microsoft.Maps.loadModule('Microsoft.Maps.Traffic', function () {
trafficLayer = new Microsoft.Maps.Traffic.TrafficManager(map);
});
// Add the directions manager
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
bus1.polylineRender = new Microsoft.Maps.Directions.DirectionsManager(map);
bus2.polylineRender = new Microsoft.Maps.Directions.DirectionsManager(map);
bus3.polylineRender = new Microsoft.Maps.Directions.DirectionsManager(map);
Microsoft.Maps.Events.addHandler(bus1.polylineRender, 'directionsError', function (e) {
console.log("Error: " + e.message + "\r\nResponse Code: " + e.responseCode);
});
Microsoft.Maps.Events.addHandler(bus1.polylineRender, 'directionsUpdated', directionsUpdated);
Microsoft.Maps.Events.addHandler(bus2.polylineRender, 'directionsError', function (e) {
console.log("Error: " + e.message + "\r\nResponse Code: " + e.responseCode);
});
Microsoft.Maps.Events.addHandler(bus2.polylineRender, 'directionsUpdated', directionsUpdated);
Microsoft.Maps.Events.addHandler(bus3.polylineRender, 'directionsError', function (e) {
console.log("Error: " + e.message + "\r\nResponse Code: " + e.responseCode);
});
Microsoft.Maps.Events.addHandler(bus3.polylineRender, 'directionsUpdated', directionsUpdated);
});
// Defines the polygons surrounding each campus
polygonArrSTP = [
new Microsoft.Maps.Location(44.94619673931851, -93.19240808486938),
new Microsoft.Maps.Location(44.941321471037966, -93.19249391555786),
new Microsoft.Maps.Location(44.94130628263941, -93.19764375686646),
new Microsoft.Maps.Location(44.93790398010943, -93.1975257396698),
new Microsoft.Maps.Location(44.937926764055824, -93.1924831867218),
new Microsoft.Maps.Location(44.94164802063501, -93.19241881370544),
new Microsoft.Maps.Location(44.94164802063501, -93.18739771842957),
new Microsoft.Maps.Location(44.94618914576464, -93.18735480308533),
new Microsoft.Maps.Location(44.94618914576464, -93.1924295425415),
];
polygonArrMPLS = [
new Microsoft.Maps.Location(44.97380025938377, -93.2795798778534),
new Microsoft.Maps.Location(44.97295018417148, -93.27883958816528),
new Microsoft.Maps.Location(44.97264658282772, -93.27782034873962),
new Microsoft.Maps.Location(44.973595331690625, -93.27698349952698),
new Microsoft.Maps.Location(44.9745744240603, -93.27614665031433),
new Microsoft.Maps.Location(44.97501463068608, -93.27712297439575),
new Microsoft.Maps.Location(44.9747205274961, -93.27738046646118),
new Microsoft.Maps.Location(44.974339139822895, -93.27832460403442),
new Microsoft.Maps.Location(44.97380025938377, -93.2795798778534)
];
// Adds the campus polygons to the map
polygonMPLS = new Microsoft.Maps.Polygon(polygonArrMPLS, {
fillColor: "rgba(255, 0, 0, 0.4)",
strokeColor: '#FF0000',
strokeThickness: 2
});
polygonSTP = new Microsoft.Maps.Polygon(polygonArrSTP, {
fillColor: "rgba(255, 0, 0, 0.4)",
strokeColor: '#FF0000',
strokeThickness: 2
});
// Assign the polygons to the Map
map.entities.push(polygonMPLS);
map.entities.push(polygonSTP);
// Set the toggle for advanced mode
advancedModeEnabled = false;
generateBusStats();
subscribeToPubnub();
console.log("Initialization complete.");
}
Here is the function that runs upon receiving a message:
function redraw(payload) {
// If the user is does not have the page active, the payload is refused
if (!acceptingPayloads) {
return false;
}
let location = new Microsoft.Maps.Location(payload.message.lat, payload.message.lng);
let name = payload.message.name;
let dest = payload.message.dest;
let mph = payload.message.mph;
const STP = new Microsoft.Maps.Location(44.9416428, -93.1917952);
const MPLS = new Microsoft.Maps.Location(44.9747502, -93.2774464);
if (dest.toUpperCase() === "S") {
dest = {letter: "S", name: "St. Paul", coords: STP};
} else if (dest.toUpperCase() === "M") {
dest = {letter: "M", name: "Minneapolis", coords: MPLS};
} else {
dest = null;
}
console.log(name + ": " + location.latitude + ", " + location.longitude + " - " + dest.name + " - " + mph + " mph");
// Gets the bus object that the payload was sent from
currentBus = getCurrentBus(name);
// Removes the timeout for the current bus
if (currentBus.timeout !== null) {
clearTimeout(currentBus.timeout);
}
currentBus.location = location;
currentBus.destination = dest;
currentBus.mph = mph;
currentBus.time = Date.now();
currentBus.name = name;
// Restart the timeout for the current bus
beginTimeout();
// Calculate the distance between the current bus and its destination
calcDistToDest();
$("." + currentBus.assignment + "-item").css('display', 'block')
}
Finally, here is the function that I use to get the distance between points:
function calcDistToDest() {
// Clear all information from the Directions Manager
currentBus.polylineRender.clearAll();
// Set Route Mode to driving and the render options
currentBus.polylineRender.setRequestOptions({
routeMode: Microsoft.Maps.Directions.RouteMode.driving
});
currentBus.polylineRender.setRenderOptions({
autoUpdateMapView: false,
drivingPolylineOptions: {
visible: POLYLINE_VISIBILITY
},
waypointPushpinOptions: {
visible: false
},
firstWaypointPushpinOptions: {
anchor: currentBus.pin.getAnchor(),
icon: currentBus.pin.getIcon(),
title: currentBus.pin.getTitle(),
text: currentBus.pin.getText()
}
});
// Sets the waypoint of the bus's current position and destination
currentBus.polylineRender.addWaypoint( new Microsoft.Maps.Directions.Waypoint({
location: currentBus.location
}));
currentBus.polylineRender.addWaypoint( new Microsoft.Maps.Directions.Waypoint({
location: currentBus.destination.coords
}));
// Calculate the directions
currentBus.polylineRender.calculateDirections();
}
Basically what I'm looking for is a way to find out what is causing this issue, an actual resolution to the issue if it's simple and I'm just missing something obvious, or the best practices to avoid this issue in the first place.
Note: My apologies for posting so much code. It's hard to determine what code to post because I don't really know what section of the code is causing the issue. Let me know if this needs to be modified or if any other information is needed and I would be happy to oblige. I also left out a lot of seemingly irrelevant JS code from the same file, I'd be happy to add it if need be.
The memory leaks were primarily resolved via the implementation of the experimental branch of Bing Maps as suggested by rbrundritt.
Here is an example of how to import Bing Maps using the experimental branch:
<script src='https://www.bing.com/api/maps/mapcontrol?branch=experimental&callback=[Insert callback function]' async defer></script>
I was later able to switch back to the release branch as the fixes for the memory leaks were pushed to that branch. More information regarding the Bing Maps Map Control Branches can be found here.