We Keep Coding

Error in Angular: earthquake_GeoJSONP.js:1 Uncaught ReferenceError: eqfeed_callback is not defined at earthquake_GeoJSONP.js:1:1

I'm trying to replicate the Importing Data into Maps (Importing Data into Maps) example to my angular project but I get the following error in console:
earthquake_GeoJSONP.js:1 Uncaught ReferenceError: eqfeed_callback is not defined
at earthquake_GeoJSONP.js:1:1
app.component.ts
import { Component, OnInit } from '#angular/core';
import { Loader } from "#googlemaps/js-api-loader"
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
title = 'map';
ngOnInit() {
let map: google.maps.Map;
const loader = new Loader({
apiKey: "YOUR_API_KEY"
});
loader.load().then(() => {
const map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
zoom: 2,
center: new google.maps.LatLng(2.8, -187.3),
mapTypeId: "terrain",
});
// map.data.loadGeoJson('data.json');
// Create a <script> tag and set the USGS URL as the source.
const script = document.createElement("script");
// This example uses a local copy of the GeoJSON stored at
// http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
script.src =
"https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js";
document.getElementsByTagName("head")[0].appendChild(script);
const eqfeed_callback = function (results: any) {
for (let i = 0; i < results.features.length; i++) {
const coords = results.features[i].geometry.coordinates;
const latLng = new google.maps.LatLng(coords[1], coords[0]);
let marker = new google.maps.Marker({
position: latLng,
map: map,
});
// place marker in map
marker.setMap(map)
}
};
});
}
}
app.component.html
<div id="map"></div>
app.component.css
#map {
height: 500px;
width: 100%;
}
Installed Packages
This is the googlemaps package that I installed in my project.
npm install #googlemaps/js-api-loader
npm i -D #types/google.maps
My Angular version
Angular CLI: 13.3.7
Node: 16.14.2
Package Manager: npm 8.5.0
OS: win32 x64
What my code shows
Just appear the map but without markers.
What I hope will appear
According to the Google Maps documentation at the following link: Importing Data into Maps
Thanks for your time and support!

I confirmed that your map appears but the markers don't.
Just like you said, what you want to happen is for the markers to show.
What I did is I tried to replicate your code in codesandbox and found out two main errors:
'map' is defined but never used. (#typescript-eslint/no-unused-vars)
'eqfeed_callback' is assigned a value but never used. (#typescript-eslint/no-unused-vars)
Solutions:
Error #1: app.component.ts had an unused variable of map and it looks like this in your code:
ngOnInit() {
let map: google.maps.Map;
const loader = new Loader({
apiKey: "YOUR_API_KEY"
});
loader.load().then(() => {
const map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
zoom: 2,
center: new google.maps.LatLng(2.8, -187.3),
mapTypeId: "terrain",
});
the map variable inside the loader.load().then is the one you used and the one on top is the unused which caused error #1. I just removed it and it removed the error on the console.
Error #2: your code had a variable eqfeed_callback that stored a function but was not called. I compared your code to the sample you gave here and confirmed that there was a callback on the code there.
As I am not very familiar to typescript and angular I tried experimenting on the code and made it work by making the end part of your code look like this:
const eqfeed_callback = function (results: any) {
for (let i = 0; i < results.features.length; i++) {
const coords = results.features[i].geometry.coordinates;
const latLng = new google.maps.LatLng(coords[1], coords[0]);
let marker = new google.maps.Marker({
position: latLng,
map: map
});
// place marker in map
marker.setMap(map);
}
};
window.eqfeed_callback = eqfeed_callback;
});
}
}
I just inserted window.eqfeed_callback = eqfeed_callback and it made the error disappear and at the same time show the markers on the map.
Here's the sandbox link: https://codesandbox.io/s/holy-sound-p8qtrc
Just use your own API key.
I hope this helps.

make leaflet offline map (use local map tiles) but nothing shows up

it's work on leaflet online map like this
<script>
import L from 'leaflet';
export default {
mounted() {
var map = L.map('map').setView([25.042474, 121.513729], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 13,
minZoom:2
}).addTo(map);
},
};
</script>
when i try to make map tiles locally then nothing show up on html
( using MobileAtlasCreator make map tiles)
<script>
import L from 'leaflet';
export default {
mounted() {
var map = L.map('map').setView([25.042474, 121.513729], 13);
L.tileLayer('./img/mapTiles/{z}/{x}/{y}.png', {
maxZoom: 13,
minZoom:2
}).addTo(map);
},
};
</script>
this is my reference below
HTML offline map with local tiles via Leaflet
https://www.youtube.com/watch?v=oP4bCLtXIeY
thanks a lot

Since you are planning to work (or use it afterwards) in a local environment, I would take out the import snippet from the code. It's mounted, I get it; but just work locally, after you get those tiles downloaded.
Put them in a folder, and load them using the code you have.
Your code is fine!
Here is my example:
var m = {x: 41.892594, y: 12.484371};
var SELF_Map = L.tileLayer('empire/{z}/{x}/{y}.jpg', {
//attribution: 'none',
continuousWorld: false,
minZoom: 4,
maxZoom: 10,
tap: false
}).addTo(map);
map.setView({lat: m.x, lng: m.y}, 6);
It worked for me every time. I get the images from my favorite map provider, I download them, and store them in a folder, in this case, a folder called "empire".

Angular + Leaflet + Leaflet Extra Markers

I'm making SPA website based on net.core 3 and Angular 8 with Leaflet. I wanted to use Leaflet Extra Markers but can't get this thing to work.
I used NPM to install Extra Markers:
https://www.npmjs.com/package/leaflet-extra-markers
npm i leaflet-extra-markers
So far so good. I create component - map.component.ts and below is the code. As long as I use Leaflet only everything is working fine. But then I try to add marker using Extra Markers and getting
TypeError: Cannot read property 'icon' of undefined.
I guess I'm missing something super simple but can't figure it out. Looks like Extramarkers does not extend Leaflet class? I don't know why...
Any help will be much appreciated.
import { AfterViewInit, Component } from '#angular/core';
import * as L from 'leaflet';
import { IMapObject } from '../models/map.model';
#Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements AfterViewInit {
private map;
private mapObjects: IMapObject[] = [];
constructor() { }
ngAfterViewInit(): void {
this.initMap();
}
private initMap(): void {
this.map = L.map('map',
{
center: [52.246215, 21.223158],
zoom: 18
});
const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
maxZoom: 19,
attribution: '© OpenStreetMap'
});
tiles.addTo(this.map);
this.createDummyMapObjects();
this.mapObjects.map(o => {
L.marker(o.position.latlon, { title: o.name, icon: greenIcon }).addTo(this.map).bindPopup(o.description);
});
// This is not working. Getting ERROR TypeError: Cannot read property 'icon' of undefined
const redMarker = L.ExtraMarkers.icon({
icon: 'fa-coffee',
markerColor: 'red',
shape: 'square',
prefix: 'fa'
});
L.marker([51.941196, 4.512291], { icon: redMarker }).addTo(this.map);
}
private createDummyMapObjects(): void {
const obj1: IMapObject = {
id: 1,
name: 'Test',
category: 2,
description: 'Test',
position: {
latlon: new Array(52.241103, 21.190475)
}
}
const obj2: IMapObject = {
id: 1,
name: 'Test',
category: 2,
description: 'Test',
position: {
latlon: new Array(52.243149, 21.190883)
}
}
this.mapObjects.push(obj1, obj2);
}
}
EDIT: I followed advice and added script and json path to angular.json file. Now I'm getting:
Uncaught ReferenceError: L is not defined
at leaflet.extra-markers.js:16
at leaflet.extra-markers.js:13
at leaflet.extra-markers.js:14
Looks like issue with import?

According to the documentation you need to include bootstrap version 3.3.7 and font-awesome version 5.12.0 respectively in your index.html
<link
rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>
<!-- Font Awesome 5 SVG -->
<script
defer
src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"
></script>
Make sure you include these in your ts or the last 2 in your angular.json:
import "leaflet/dist/leaflet.css";
import * as L from "leaflet";
import "leaflet-extra-markers/dist/css/leaflet.extra-markers.min.css";
import "leaflet-extra-markers/dist/js/leaflet.extra-markers.js";
Demo

Did you include stylesheet and script in angular json?
"scripts": [
"node_modules\leaflet-extra-markers\dist\js\leaflet.extra-markers.js"
],
styles": [
"styles.css",
"node_modules\leaflet-extra-markers\dist\css\leaflet.extra-markers.min.css"
],

Mapbox style changes/breaks on zoom when a layer is added

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>

Button click inside Info window in google maps

I want to add a button in info window. How can I access my service's functions in angular 2?
Example:
import {Injectable} from 'angular2/core';
#Injectable()
export class MapService {
private map: any;
constructor() { }
initialize(): void {
this.map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(33.751222, 33.98131),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
addMarker(): void {
let marker = new google.maps.Marker({
position: new google.maps.LatLng(33.751222, 33.98131),
map: this.map
});
let infoWindow = new google.maps.InfoWindow({
content: `<h6>Content</h6><button onclick="foo()">Click me</button>`
});
google.maps.event.addListener(marker, 'click', () => {
infoWindow.open(this.map, marker);
});
}
foo() {
console.log('Clicked!');
}
}
This example, obviously, doesn't work: "ReferenceError: foo is not defined". How can I make this button work?
Thanks!

foo is searched on the window object.
I would use the approach explained in
How do expose angular 2 methods publicly?
to get a method of your service called.
If it were a component or directive instead of a service I would rather use this approach https://stackoverflow.com/a/36832108/217408
but you can also register an event handler imperatively like window.addEventHandler('my-custom-event', onMyCustomEvent) so the 2nd approach would also work with your service.