Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Can't add markers programatically

Abierto
  • ¿Algo no está bien?
#75 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
angular, typescript
Área
mobile

Línea de trabajo

Comienza con MapService.generateMap, siguiendo la construcción de MapboxView, setConfig(settings) y la asignación a ContentView. Compara el array de markers configurado con el ejemplo de addMarkers y determina cómo se debe referenciar la instancia de MapboxView. Se considera completado cuando se muestra el marcador configurado y el recorrido del marcador programático está claro.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

I am trying add markers dynamically/programatically after map is renderer but nothing is happening. Please see my code below

Service Code:


import { Injectable } from '@angular/core';
import { MapboxMarker, MapboxView, Mapbox } from "@nativescript-community/ui-mapbox";
import { registerElement } from '@nativescript/angular';
import { isIOS } from "@nativescript/core/platform";

@Injectable({
  providedIn: 'root'
})
export class MapService {
  mapboxView: MapboxView;
  mapbox: Mapbox;
  /**
   * Creates an instance of Mapbox.
   * @param config
   * @memberof Mapbox
   */
  constructor() {
    registerElement("Mapbox", () => require("@nativescript-community/ui-mapbox").MapboxView);
  }

  generateMap(view: any) {
    const settings = {
      container: view,
      accessToken: 'pk.eyJ1IjoiaGV5aXR6c3llZCIsImEiOiJjbDA5aTZlb3gwMGxsM2puejdyeTQyZnNjIn0.aJUDueGHXwKea-kN8lxn2g',
      style: 'traffic_day',
      margins: {
        left: 18,
        right: 18,
        top: isIOS ? 390 : 454,
        bottom: isIOS ? 50 : 8
      },
      center: {
        lat: 52.3702160,
        lng: 4.8951680
      },
      zoomLevel: 18, // 0 (most of the world) to 20, default 0
      showUserLocation: false, // default false
      hideAttribution: false, // default false
      hideLogo: false, // default false
      hideCompass: false, // default false
      disableRotation: false, // default false
      disableScroll: false, // default false
      disableZoom: false, // default false
      disableTilt: false, // default false
      markers: [
        {
          id: 1,
          lat: 52.3732160,
          lng: 4.8941680,
          title: 'Nice location',
          subtitle: 'Really really nice location',
          selected: true,
          iconPath: '~/assets/Img/map.png',
          onTap: () => console.log("'Nice location' marker tapped"),
          onCalloutTap: () => console.log("'Nice location' marker callout tapped")
        }
      ]
    };


    const mapView = new MapboxView();
    mapView.setConfig(settings);
    view.content = mapView;
  }

}

Component.ts code:

import { Component, OnInit } from '@angular/core';
import { MapService } from 'map/map.service';
import { Page } from "@nativescript/core/ui/page";
import { ContentView } from "@nativescript/core/ui/content-view";

@Component({
  selector: 'app-map-service-demo',
  templateUrl: './map-service-demo.component.html',
  styleUrls: ['./map-service-demo.component.css']
})
export class MapServiceDemoComponent implements OnInit {

  constructor(public map: MapService, public page: Page) { }

  ngOnInit(): void {
    const contentView : ContentView = <ContentView>this.page.getViewById( 'mapContainer' );
    this.map.generateMap(contentView);
  }

}

Component.html code:

<StackLayout>
    <ContentView height="100%" width="100%" id="mapContainer">
    </ContentView>
</StackLayout>

The above implementation is not displaying markers by default even there is markers: [{}] property available in the settings.

Moreover, In the below code, from where we can refer mapbox

mapbox.addMarkers([
    firstMarker,
    {
      // more markers..
    }
  ])

Please guide me on adding markers programatically.

Lenguaje dominante
TypeScript
Estrellas
38
Forks
26
Sin PR fusionados en 30 d

Preparar el entorno

Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de nativescript-community/ui-mapbox

Todos los issues de nativescript-community/ui-mapbox

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.