Angular map not showing Leaflet divIcon

I am attempting to include a divicon marker in angular leaflet.

component.css:

.leaflet-div-icon2
{
    background: #e5001a;
    border:5px solid rgba(255,255,255,0.5);
    color:blue;
    font-weight:bold;
    text-align:center;
    border-radius:50%;
    line-height:30px;
}

component.ts :

var map = L.map('map', {
        attributionControl: false,
        crs: L.CRS.Simple
});

var bounds = [[0,0], [1000,1000]];
var image = L.imageOverlay('cust_image.png', bounds).addTo(map);
var customMarkerIcon = L.divIcon({className: 'leaflet-div-icon2'});

var m3 = L.latLng([ 348,278.2]);
L.marker(m3, {icon: customMarkerIcon }).addTo(map);

I am not receiving any errors in the console but the marker is not showing up on the map.

This setup works fine on a basic HTML page with CSS and JS, but for some reason it's not working within Angular.

Is there something I am overlooking here?

angulartypescriptleafletmarkers

Answer №1

It seems like there might be an issue with the implementation on your end, but ensure that you place the code inside the ngOnInit lifecycle hook and apply the L.divIcon class selector style in the global styles.css file. To give you a better idea, here's an example similar to what you're attempting to do:

app.ts:

ngOnInit() {
    const map = L.map("map", {
      crs: L.CRS.Simple
    });

    const bounds = [[0, 0], [1000, 1000]];

    map.fitBounds(bounds);

    const image = L.imageOverlay(
      "https://leafletjs.com/examples/crs-simple/uqm_map_full.png",
      bounds
    ).addTo(map);
    const customMarkerIcon = L.divIcon({
      className: "leaflet-div-icon2"
    });

    const m3 = L.latLng([348, 278.2]);
    L.marker(m3, {
      icon: customMarkerIcon
    }).addTo(map);
}

styles.css:

.leaflet-div-icon2 {
  background: #e5001a;
  border: 5px solid rgba(255, 255, 255, 0.5);
  color: blue;
  font-weight: bold;
  text-align: center;
  border-radius: 50%;
  line-height: 30px;
}

Check out the Demo

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

Which is better for React development: TypeScript, Flow, or another option?

As I dive into learning React, one thing that has been on my mind is the tools developers use for static type checking when building robust React applications. I personally find TypeScript to be a great choice. It eases the process of developing JavaScrip ...

javascriptreactjstypescriptbabeljsflowtype

Problem with 'executeScript' function in InAppBrowser'

Trying to run scripts in my app using the executeScript method of InAppBrowser. Running on Ionic Framework v2, here is my code: browser.executeScript({ code: ` $(".rodape.geral table tbody tr:nth-child(2) td:nth-child(1) div:nth- ...

cordovaangularionic-frameworkinappbrowser

Attempting to grasp the concept of Thennables within the VSCode API. Can these TypeScript code examples be considered equivalent?

I'm looking to perform a series of modifications on a document using the VSCode API. The key function in this process is Workspace.applyEdit, which gives back a Thennable. This is my first encounter with it, and the one returned from this function doe ...

javascripttypescriptasynchronouspromisevscode-extensions

When buttons are clicked within Angular Material's Card component, it automatically triggers the click event of the card itself

One of the challenges I'm facing is having a mat-card within a component template: <mat-card *ngFor="let p of products" (click)="viewProduct(p)"> <mat-card-actions> <button mat-stroked-button (click)="addProductToCart(p)"&g ...

htmlangulartypescriptangular-material

Encountering an issue with Angular 2's Angular Material: Uncaught TypeError - Cannot read property 'sdeptname' of undefined

I recently set up a basic table in Angular 2 using angular material. I have included two mat-tables where selected rows from the first table can be moved to the second table by clicking Move To Table 2, and vice versa by clicking Move To Table 1. However, ...

angularangular-material

Error with Typescript types when using Styled Components

After successfully setting up styled-components in react-native, I encountered an issue while trying to use it in a simple example with react-native-web: import * as React from 'react'; import styled from 'styled-components'; export d ...

reactjstypescriptreact-nativestyled-components

The Angular Component utilizes the ng-template provided by its child component

I am currently facing an issue that involves the following code snippet in my HTML file: <form-section> <p>Hello</p> <form-section> <ng-template test-template> TEST </ng-template> ...

angulartypescriptng-template

What is the reasoning behind leaving out wwwroot from tsconfig?

Currently, I am working on a TypeScript project using an ASP.NET 5 template in VS.NET 2015. In the scripts/tsconfig.json file that I added, there is a default exclude section which includes: "exclude": [ "node_modules", "wwwroot" ] However, a ...

asp.nettypescriptasp.net-core.net-4.6

struggling to locate name using typescript and deno

Here is the snippet of code I'm working with: /** * map.ts */ // @deno-types="./libs/@types/geojson/index.d.ts" // @deno-types="./libs/@types/mapbox-gl/index.d.ts" mapboxgl.accessToken = "toto"; var map = new mapbo ...

typescriptdeno

Guide to developing a private shared Node.js module using TypeScript

I have a unique idea for a nodejs server service, consisting of: a REST API, and various asynchronous workers. My vision is to separate these components into different subnets and git repositories while still enabling them to access the same database en ...

node.jstypescriptnpm

Is it recommended to include modules in the Imports section of SharedModule in Angular?

Welcome to my SharedModule! import { CommonModule } from "@angular/common"; import { NgModule } from "@angular/core"; import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { IconModule } from "@my-app/components/icon/icon.module"; impo ...

angulartypescriptangular-moduleshared-module

How can I set ion-option to be selected by tapping instead of having to click OK?

Currently, I am developing a mobile application and have encountered a scenario in which I utilized ion-option with ion-select, resulting in successful functionality. However, I am now aiming to remove the OK/CANCEL button so that users do not need to clic ...

angularionic2

Leveraging Angular 8's ngIf directive in combination with the async pipe to dynamically display or hide HTML elements

I've been attempting to dynamically show and hide HTML elements based on the result of a service call. I have tried using *ngIf="messageService.getData() | async", but it doesn't seem to be working as expected. With the async, the "Failure Messag ...

javascripthtmlangulartypescriptobservable

Exploring RouteReuseStrategy in Angular 2

I followed the RouteReuseStrategy advice provided here, but had to make some adjustments. Specifically, I had to modify the handling of routeConfig.path in the shouldAttach method as it was empty and causing issues with caching. My Angular router version i ...

angularroutes

When parent components reference child components, their values appear as null

I'm dealing with both a parent component and a child component in my project. The child component contains a form that should be saved if the user makes changes and then tries to navigate away by clicking on a link within the parent component. Parent ...

angulartypescript

What are the steps to utilize dismissableMask feature in PrimeNG?

Trying to hide a dialog by clicking outside of it seems tricky with PrimeNG's dismissableMask. Does anyone have a solution for this? HTML Code <button type="text" (click)="showDialog()" pButton icon="fa-external-link-square" label="Show"></ ...

angularprimengprimeng-dialog

Exploring Query Parameters in Angular 4

Is it possible to generate a custom URL in Angular 4? For instance: http://localhost:4200/#/page/page2/6/abc/1234 Currently, I am utilizing query parameters like this: this.router.navigate(['page/page2/' + row.id],{ queryParams: {'name&a ...

angularangular4-router

Tips for sending multiple commands in ngrx/effect (redux-observable)?

In my Angular 6 project, I am using ngrx/store to manage state. I have an effect that handles updating data and based on certain conditions, I need to dispatch different actions. What will be the impact of using switchMap instead of map in this scenario? ...

javascriptangulartypescriptngrxngrx-store

Challenges with handling click events in Angular Material's mat-sidenav-content

When I add a click event to the mat-sidenav-content element like this: <mat-sidenav-content (click)="isNavBarOpened=false">, the mat-slide-toggle inside it stops functioning. Check out the code example here ...

angularangular-materialmat-sidenavmat-slider

Retrieving the input value using ref in Vue 3 and TypeScript

It appears to be a straightforward issue, but I haven't been able to find consistent Vue 3 TypeScript documentation on accessing an input field and retrieving its value from within a function. <template> <Field type="text" ...

typescriptvue.js