Tips for handling CSS loading delays with icons in OpenLayers markers

When using openlayers (v4.6.4) with font-awesome as marker icons, the icons do not display upon first load (even after clearing cache and hard reload). Instead, I see a rectangle resembling a broken character. It is only on the second load that they appear correctly.

https://i.stack.imgur.com/NrO5G.png

    var mapMarkerIcon = new ol.style.Style({
        text: new ol.style.Text({
            text: '\uf041 ', // <-- fa marker unicode
            font: 'Normal ' + 24 + 'px ' + 'FontAwesome',
            textBaseline: 'bottom',
            fill: new ol.style.Fill({
                color: green,
            })
        })
    });

It seems like openlayers tries to draw the unicode icon code before the fontawesome CSS has fully loaded. Only upon the second refresh when the CSS is cached does it work properly.

I cannot expect all users to manually refresh twice. Does anyone have suggestions on how to address this issue?

Is there a way to make JavaScript wait for the CSS to load?

I am considering loading just the specific needed icon (the map-marker) to speed up rendering, but even then, there's no guarantee that the CSS will be ready before the JS executes.

Could adding a small piece of javascript to redraw the icons after a short delay help?

javascriptcssfont-awesomeopenlayers-3

Answer №1

Perhaps you could consider incorporating a verification process similar to the one outlined in before initializing your map.

On another note, is there a specific rationale behind using an icon font? Have you contemplated utilizing an SVG icon instead?

Answer №2

One potential solution is to redraw the map by utilizing the setTimeout function.

setTimeout(function(){ map.render(); }, 1000);

However, it might be more effective to use a method that ensures everything is fully loaded before proceeding with drawing. Refer to the top answer in this thread for guidance on incorporating jQuery if needed Is it possible to wait until all javascript files are loaded before executing javascript code?

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

Tips on implementing .on() with querySelector in jquery?

Can you help me convert the jQuery code below into a querySelector method? <script type="text/javascript"> jQuery(function($){ $('#woocommerce-product-data').on('woocommerce_variations_loaded', function() { $ ...

javascriptjquerywordpresswoocommercejquery-selectors

Troubleshooting issues with NodeJS and Express authentication middleware functionality

I am currently working on implementing the isUserAuthenticated function to run on every server request. This function is required in the app.js file and utilized using app.use(authenticate.isUserAuthenticated). In my project, there is an /authenticate rou ...

javascriptnode.jsexpressauthenticationsaml

Height of Hover Background Color in WordPress Menu

Greetings! Welcome to my website I'm in the process of modifying the hover color for the top menu, and I've managed to change it successfully. However, I would like the hover effect to cover the entire height of the menu, as right now it's ...

htmlcsswordpress

Adding a .PHP File to Two Separate DIVs

I am using wordpress to create a custom theme. I'm interested in placing all the content from my slider.php file inside a div box on my index.php page. How would I go about doing this? SLIDER.PHP <div class="slider"> // All the image tags wit ...

javascriptphpjqueryhtmlcss

How can multiple functions be grouped and exported in a separate file in Node.js?

Is there a way to consolidate and export multiple functions in nodejs? I want to gather all my utility functions in utils.js: async function example1 () { return 'example 1' } async function example2 () { return 'example 2' } ...

javascriptnode.jsexpressecmascript-6koa2

Pattern for identifying JavaScript import declarations

My task involves using node to read the contents of a file. Specifically, I am looking to identify and extract a particular import statement within the file that includes the "foo-bar" package. The goal is to match only the line or lines that contain the ...

javascriptnode.jsregex

What is the best way to utilize variable fonts with Google Fonts?

Traditional fonts typically require a separate file for each weight variant, such as 300, 400, and 500. However, with variable fonts, all weight combinations can be accessed through a single compact font file. This is extremely advantageous for web design. ...

cssfontsgoogle-fontsvariable-fonts

The information from AngularJS is not appearing in the table

I am currently developing a web application that utilizes AngularJS for SQL connectivity. While working on my project, I encountered an issue where the data for the "Regional Partner Manager" user is not displaying properly in my table, whereas the data f ...

javascriptangularjshtml-tableasmx

Tips for submitting a jQuery star rating:

I recently installed and added a plugin to one of my pages that transforms radio buttons into stars. While the form control works perfectly, I am facing an issue with submitting the form. The radio buttons are grouped together as stars but they do not subm ...

javascriptjqueryrating-system

Generating charts using JSON data with the help of JavaScript

Hi there! I have a JSON file shown in the first image and I would like to create a chart similar to the one in the second image using JavaScript (using any library). Can anyone provide me with a simple example code on how to achieve this? ...

javascriptjsonchartsbar-chart

What could be causing the invalid hooks error to appear in the console?

I'm completely stumped as to why this error is popping up when I try to use mutations with React Query. Any insights or advice would be greatly appreciated. Note: I'm implementing this within a function component in React, so it's puzzling ...

javascriptreactjsreact-hooksreact-query

Vertical Alignment of Navigation Bar in Bootstrap 4

I am trying to align the center of my navigation bar using the "Cover" Bootstrap 4 template. Please find the current code provided below. <div class="cover-container d-flex h-100 p-3 mx-auto flex-column"> <header class="masthead mb-auto"> ...

htmlcssbootstrap-4navbarcenter

Is it possible to create a replicating text box in AngularJS that multiplies when entering input

I am experimenting with creating a sequence of text boxes that dynamically generate new empty text boxes as the user enters information into each one. Each text box is required to have an ng-model value associated with it, and they should all be generated ...

javascripthtmlangularjs

Tips for displaying a Rails action without a layout in html format using Ajax

Is it possible to render the new action without the application layout and without altering the current code structure? class FoobarController < ApplicationController def new @foobar = Foobar.new end # ... end When a user clicks on = link_ ...

javascriptjqueryruby-on-railsajax

What is the best way to eliminate the blue outline around an image map?

On the landing page, I have a static background image and I've set up a clickable area using an image map. The issue is that when users click on the area, a blue border appears (see image below). I've tried several methods to remove this border b ...

htmlcss

Using VML for background images in Outlook using HAML: A step-by-step guide

I am currently working on formatting an email digest using HAML and tables. My goal is to set a background-image to a table-cell in the email, but I've come to realize that Outlook requires VML in order to display a background-image correctly. After ...

cssemailoutlookhamlvml

Could there be an issue with the directory path for the file?

https://i.stack.imgur.com/m8F9y.pngThe background-url() function was utilized to set the background screen to PurpleCloud.png. Despite multiple attempts, the image is still not being displayed. What could be the issue? Even after understanding file path w ...

cssurl

Is there a way to clear a @font-face downloaded font from the browser cache?

Recently, I realized that I made an error in my webapp release by using a limited version of "Droid Sans" with @font-face for Latin characters. The font files are hosted on my server. To rectify this issue, I have now updated the font to the full version s ...

cssfont-face

Enhancing the performance of a node.js Falcor router connecting a traditional REST API data source with a Falcor client

In my current setup, I have a traditional REST API that provides data in the following format: List of Users - GET /users.json users: [ {id: 0, name: "John Smith"}, ... ] User Details by Id - GET /users/0.json user: { id: 0, name: "Joh ...

javascriptnode.jsrestfalcorfalcor-router

I am attempting to utilize diagram.highlightCollection in gojs to showcase nodes that do not meet a specific condition

I have a list of node IDs (keys) and I need to highlight those nodes. For empty nodes, the same condition works fine. For example: checkEmptyNodes() { const emptyNodes = []; const diagDetails = this.myserv.getDiagramData(); ...

javascriptgojs