Conceal location labels in maps provided by tilehosting.com

I am currently in the initial stages of developing a maps web application and I want to incorporate maps from tilehosting.com along with the leaflet library (leafletjs.com).

Overall, it seems to be working fine, but I'm struggling with hiding the default country and city labels. Despite extensive searching on Google, I haven't been able to find a solution that works for me. It appears to be a simple task, yet I seem to be missing something.

Does anyone know how to accomplish this? Could someone provide a sample code snippet?

You can view an example of the code here: 


    <html>
  <head>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

    <link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e323b3f38323b2a1e6f706d706f">[email protected]</a>/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
    <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ef2fbfff8f2fbeadeafb0adb0af">[email protected]</a>/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>

    <script src="https://cdn.klokantech.com/mapbox-gl-js/v0.43.0/mapbox-gl.js"></script>
    <script src="https://www.dxmaps.com/js/leaflet-mapbox-gl.js"></script>


    <link rel="stylesheet" href="https://cdn.klokantech.com/mapbox-gl-js/v0.43.0/mapbox-gl.css" />
    <style>
      #map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
    </style>
  </head>
  <body>
    <div id="map"></div>
    <p><a href="http://www.openmaptiles.org/" target="_blank">© OpenMapTiles</a> <a href="http://www.openstreetmap.org/about/" target="_blank">© OpenStreetMap contributors</a></p>
    <script>
var map = L.map('map').setView([47.3739, 8.5456], 2);
var gl = L.mapboxGL({
    attribution: '<a href="http://www.openmaptiles.org/" target="_blank">© OpenMapTiles</a> © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    accessToken: 'not-needed',
    style: 'https://free.tilehosting.com/styles/basic/style.json?key=XXXXXXSAMPLEXXXXXXXX'
}).addTo(map);

    </script>
  </body>
</html>
javascriptleafletmapboxopenmaptiles

Answer №1

It's apparent that there is a JSON-style file available at the following link: 

'https://free.tilehosting.com/styles/basic/style.json?key=XXXXXXSAMPLEXXXXXXXX'
. This file allows for extensive customization options. As an example, here is a configuration where everything is hidden:

{"version":8,"name":"Klokantech Basic","metadata":{"mapbox:autocomposite":false,"mapbox:type":"template","maputnik:renderer":"mbgljs","openmaptiles:version":"3.x","openmaptiles:mapbox:owner":"openmaptiles","openmaptiles:mapbox:source:url":"mapbox://openmaptiles.4qljc88t"},"center":[8.54806714892635,47.37180823552663],"zoom":12.241790506353492,"bearing":0,"pitch":0,"sources":{"openmaptiles":{"type":"vector","url":"https://free.tilehosting.com/data/v3.json?key=siggs34vqjoYsni0vRlZ"}},"sprite":"https://free.tilehosting.com/styles/basic/sprite","glyphs":"https://free.tilehosting.com/fonts/{fontstack}/{range}.pbf?key=siggs34vqjoYsni0vRlZ","layers":[{"id":"background","type":"background","paint":{"background-color":"hsl(47, 26%, 88%)"}},{"id":"landuse-residential","type":"fill","source":"openmaptiles","source-layer":"landuse","filter":["all",["==","$type","Polygon"],["==","class","residential"]],"layout":{"visibility":"none"},"paint":{"fill-color":"hsl(47, 13%, 86%)","fill-opacity":0.7}},{"id":"landcover_grass","type":"fill","source":"openmaptiles","source-layer":"landcover","filter:["==","class","grass"],"paint":{"fill-color":"hsl(82, 46%, 72%)","fill-opacity":0.45}},{"id":"park","type":"fill","source":"openmaptiles","source-layer":"park","paint":{"fill-color":"rgba(192, 216, 151, 0.53)","fill-opacity":1}},{"id":"landcover_wood","type":"fill","...

...

{id":"country_label","type":"symbol","source":"openmaptiles","source-layer":"place","maxzoom":12,"filter:["all",["==",$type","Point"],["==","class","country"],["has","iso_a2"]],"layout":{"text-field":"{name:latin}","text-font":["Noto Sans Bold"],"text-max-width":10,"text-size":{"stops":[[3,12],[8,22]]},"visibility":"none"},"paint":{"text-color":"hsl(0, 0%, 13%)","text-halo-color":"rgba(255,255,255,0.75)","text-halo-width":2,"text-halo-blur":0}}]}

To use this style, you will need to host it locally using a server like Apache.

You can utilize to view and edit your JSON data. Look for instances of "visibility":"visible" and adjust them as needed (e.g., setting to "none" where necessary).

If the key value is missing, you can manually add it to the JSON file.

https://i.sstatic.net/do05V.png

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

The test may detect a variable that was not initialized

I'm trying to understand why I get the error message "variable may not have been initialized" when testing (variable === "some text"), but I don't receive the same error when using (typeof passwordHashOrg !== 'undefined') The code that ...

javascriptnode.js

Tips on displaying a particular JSON attribute?

After starting with a JSON string, attempting to convert it into a JSON object and then trying to print a specific field (such as firstName), I am getting undefined. What could be the issue here? Thank you for your help! var string = '{"firstName ...

javascriptnode.jsjson

Turn off images using Selenium Python

In order to speed up the process, I believe that disabling images, CSS, and JavaScript can help since Webdriver waits for the entire page to load before moving on. from selenium import webdriver from selenium.webdriver.firefox.firefox_profile import Firef ...

javascriptpythoncssseleniumselenium-webdriver

Insert metadata tag into the head element of the parent iframe

I am looking to insert a meta tag element into the head element of an Iframe parent. I attempted window.parent.$('head').append('sometext'); This method worked when the source file and iframe file were in the same folder, however it d ...

javascriptjqueryhtmliframe

I need help figuring out how to get a horizontal scrollbar positioned at the top of a div to function properly once the content has been loaded using ajax

HTML CODE <div id="scrollidout" style="overflow: auto; overflow-y: hidden; "> <div id="scrollidin" style="padding-top: 1px; height: 20px; width: 1000px">&nbsp;</div> </div> <div class="resultcontent" style="overflow ...

javascriptjqueryhtmlcssajax

In order for the Facebook share button to appear, a page reload is required when using Angular

I've been working on integrating Facebook's share plugin, but I've encountered an issue where the share button only shows up after reloading the page. If I navigate to the page through a link or URL, the button doesn't appear until afte ...

javascriptangularjsfacebook

trigger the f:setPropertyActionListener function upon clicking the button following the onclick event

On a page with a datatable displaying all users, each row includes "edit" and "delete" buttons. The issue arises when trying to delete a user by clicking on the "delete" button. Upon clicking the button, a confirmation dialog is displayed using PrimeFaces ...

javascriptajaxjsf-2primefaces

Experiencing a 404 error after attempting to access an endpoint following a successful MSAL Azure AD

Incorporating the UserAgentApplication.loginPopup function to authenticate users on our Azure AD has been a challenge as we transition from an ASP.NET MVC application to a Vue.js front end and ASP.NET 'API' backend. The goal is to pass the access ...

javascriptasp.netvue.jsazure-ad-msal

Tips for sorting through existing data without resorting to a remote call - Material Table repository by mbrn (mbrn/material

Currently I am using the mbrn/material-table library which includes filtering on a column and remote data feature. However, when I apply a filter term, the table sends an API call to the server with the filter criteria in the query object. My desired outco ...

javascriptreactjsmaterial-uimaterial-table

Display all y-axis values in the tooltip using HighCharts

I utilized a chart example from http://www.highcharts.com/demo/column-stacked When you hover the mouse over a column, it displays the value of the y axis being hovered and the total value. I am interested in having the tooltip show the values of all 3 y ...

javascriptjqueryhighcharts

What could be the reason for XMLHttpRequest's readystate being something other than 4?

Currently delving into the realm of AJAX for the first time, and endeavoring to construct a basic application that computes the required grade on a final exam based on past assessment results. The user keys in their grades into the form, subsequent to whi ...

javascriptphpajax

Is it possible to render the v-for value dynamically?

I have a dynamic component and I'm trying to iterate through different objects from it. However, my current code isn't working as intended. Can someone please guide me on how to make the activeQuestion value in v-for dynamic? Thank you for your a ...

javascriptvue.js

Reformat a JSON file and save as a new file

I have a lengthy list of one-level JSON data similar to the example below: json-old.json [ {"stock": "abc", "volume": "45434", "price": "31", "date": "10/12/12"}, {"stock": "abc", "volume": "45435", "price": "30", "date": "10/13/12"}, {"stock": "xyz", "vo ...

javascriptjsonnode.js

The comparison between AJAX and JSON passing and PHP generating HTML versus returning it

Currently, my code looks like this: <li onclick = " function CBAppData( callerObj, data ) { var string = ''; for( a in data ) { debug.push( data[ ...

phpjavascripthtmlajax

Choosing the Angular5 model

I'm currently working with an Angular5 project that has a <select> element bound to an array of customers. Here's the code snippet: <select class="form-control" [ngModel]="record.customer_id" (ngModelChange)="setCustomer($event)" name=" ...

javascripthtmlangular

Using React.js - What is the process for submitting a form automatically when the page loads?

Upon loading the page, I have a form that needs to be displayed. Here is the code snippet: <form name="myform" method="POST" className={classes.root} target="mydiv" action="https://example.com/submit" onLoad= ...

javascriptreactjs

Jumbling a word by shuffling its letters into a random order

The objective of the program is to take the word you input into a box, split it into an array of letters, and then shuffle them. Following that, it should capitalize the first letter and lowercase the rest before displaying the result in the same box. I a ...

javascripthtmlarraysstring

Can SVN hooks be incorporated into NPM in a way that is comparable to git hooks?

I want to incorporate an npm script that performs linting and testing before executing an svn commit. If there are any failures during the linting or tests, I want the commit process to halt, similar to a git commit hook. Does anyone have any recommendat ...

javascriptnode.jssvnnpm

On the second attempt, Firefox is able to drag the div element smoothly by itself

I have created a slider resembling volume controls for players using jQuery. However, I am facing an issue ONLY IN FIREFOX. When I drag the slider for the second time, the browser itself drags the div as if dragging images. The problem disappears if I clic ...

javascriptjqueryhtmlcss

Tips for transferring data from a service to a method within a component

I have a service that successfully shares data between 2 components. However, I now need to trigger a method in component A when an event occurs on the service (and pass a value to that component). Can someone guide me on how to achieve this? I have seen ...

javascriptangulartypescript