What are the steps for creating a custom map with leaflet?

I'm looking to develop an Android map for indoor positioning, complete with multiple building floors and the ability for users to track their position within the building. My main question revolves around the implementation of this map.

My current plan involves utilizing Leaflet, a JavaScript library designed for map manipulation. I intend to integrate Leaflet into the Android app using webview.

In my research, I came across the Leaflet-Indoor plugin on GitHub. However, as my goal is to have the app function offline, I encountered difficulties in creating a simple building map. Some suggestions from Stack Overflow recommend using Mapbox Studio or QGIS. While Mapbox Studio comes at a price, I decided to try working with QGIS - although it proved challenging.

Therefore, my questions are...

1. Is my current approach viable, or do you recommend a different method?

2. What is the most effective way to create a building map that can be used with Leaflet?

javascriptandroidleaflet

Answer №1

In a similar scenario, I opted to utilize Leaflet in conjunction with overlay image maps. Creating PNG images from AutoCAD or PDF files is straightforward (images with dimensions of 4000x4000 bits; approximately 500Kb per floor). It is essential to implement L.CRS.Simple as the coordinate reference system in Leaflet and incorporate imageoverlay (http://leafletjs.com/examples/crs-simple/crs-simple.html).

The plugins available for Leaflet proved to be quite beneficial (e.g., Draw, etc.).

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

How can I use Angular to dynamically open a video that corresponds to a clicked image?

I need assistance with a functionality where clicking on an image opens a corresponding video on the next page. The issue is that all images have the same ID, making it difficult to link each image to its respective video. Below is the data I am working ...

javascriptangulartypescript

Using destructuring repeatedly for a single object property

At times, I engage in nested destructuring, where I go more than one level deep. It can be risky, but I always make sure the property exists to avoid encountering an error of undefined. Recently, I came across this scenario: const { match: { ...

javascriptreactjsecmascript-6

Dynamically arranging data rows in a table using dates with Vue

In my Vue application, I am currently processing data for employees, including their hours and swipes, and multiplying this data for each employee every day. This process is generating new rows of data so that I have a complete set of information for each ...

javascriptvue.jsvuejs2

The updated values in an Angular application may not always be accurately represented by interpolated values

The values of the elements in the dropzone1 array only show the initial top and left values, not the latest ones. Within the draw() function, I add the top and left values to the topLeft array and then push it to the dropzone1 array inside the move() func ...

javascripthtmlangulartypescript

Error: Unexpected token '<' encountered in Ajax request with status code 200

While attempting to run an ajax request, I keep encountering the error message 'Syntax Error: unexpected token <' along with a xhr.status of 200. Strangely, I am able to successfully email the variable passed from the JavaScript file to the PH ...

javascriptphpjqueryajaxjson

Transforming Form Input into Request Payload for an AJAX Call

I'm facing a challenge in submitting my form data through a POST AJAX request and haven't been able to come across any solutions so far. Due to the dynamic creation of the form based on database content, I can't simply fetch the values usin ...

javascriptphpajaxpostrequest

Attempting to implement firebase configuration within my Vue component

Edit: I made an error here ^^ !https://i.sstatic.net/0QGRx.png firebase.js?5b23:11 Uncaught TypeError: app.database is not a function at eval (firebase.js?5b23:11) at Object../src/components/firebase/firebase.js (app.js:3496) at __webpack_require__ (app.j ...

javascriptfirebasevue.js

Integrating an API with a Discord bot using an embedded link in Discord.js

I am currently in the process of creating a bot that can generate and embed links to display manga titles, tags, and other information based on user-input digits. I have been exploring an API called this and I am eager to learn the most effective method ...

javascriptnode.jsnpmdiscorddiscord.js

Unforeseen SyntaxError: Unexpected symbol detected

Encountering an issue while attempting to send raw data as parameters in express. Specifically, there is an error occurring at the 'fields' variable... function getWithQuery(req,res){ console.log(req.params); var query = {name: new RegEx ...

javascriptexpress

The Android action bar always remains intact on a 5.1" screen, never splitting

When developing a sample app, I added multiple items to the action bar, each set with android:showAsAction="always". Additionally, I enabled android:uiOptions="splitActionBarWhenNarrow" in the manifest file. Surprisingly, on a 3.7" virtual device, the act ...

androidandroid-actionbar

Prevent the remote's back button from showing the keyboard on Android TV's Leanback interface

I've encountered an issue where I want to hide the keyboard when the back button is pressed, but instead, it goes back to the previous menu. My setup includes a straightforward activity with SupportSearchFragment. public class SearchActivity extends L ...

androidandroid-tvleanback

Spin the sphere texture in Three.js

Currently, I am working on rendering a sphere through three.js. While applying a texture to the sphere works well, I am having some difficulties rotating the texture to align it with marker positions. The issue arises when trying to place markers over Kag ...

javascriptthree.js

"An error has occurred stating that the function Factory.function() in AngularJS

I'm a beginner with AngularJS and could use some assistance! My issue involves retrieving JSON data from a URL in a factory function and returning it to the controller. However, I keep getting an error stating that the function doesn't exist. Wh ...

javascriptjsonangularjs

Stop Bootstrap accordion from collapsing on postback in an ASP.NET application

I am working on a Bootstrap accordion and trying to reopen the last opened pane after a postback, such as when someone clicks a save button. I came across this solution: Retain Twitter Bootstrap Collapse state on Page refresh/Navigation Unfortunately, I a ...

javascriptjquerytwitter-bootstrap

Error encountered while attempting to fetch webpack-dev-server from the npm registry. The connection was refused on 127.0.0.1:8000

Hey everyone! I'm facing some issues while trying to install reactjs using npm on my PC, which is in a proxy-free environment. Every time I run the npm install command, I encounter the following error. I've tried looking for solutions online, but ...

javascriptnode.jsreactjsnpmwebpack

Tips for leveraging JavaScript functions repeatedly

Need help with using the Mul() function in a second table row. I am struggling to call it more than once while running my code that requires creating and calling a function multiple times. Can someone please assist me? Thank you. function Mul() { var ...

javascripthtml

Is it possible to obtain a Google Auth Token on Android without requiring the user's authorization?

I am seeking a way to retrieve the GoogleAuthToken of a user without requiring their explicit permission. The current method I am using involves an AsyncTask called RetrieveTokenTask: @Override protected String doInBackground(String... params) { ...

androidgoogle-authentication

When retrieving items from an object store in HTML, the result displayed is often [object Object]

Currently, I am in the process of iterating through all objects within the object store named "tasksStore". However, when attempting to display these objects in my HTML, only [object Object] is returned. Even if I try to specify a specific part of the obje ...

javascriptarraysobjectecmascript-6indexeddb

Disappearing act: The vanishing act of the Bootstrap 4 Smart Scroll Mobile

Utilizing the Smart Scroll feature from in Bootstrap has been successful on desktop, but issues arise on mobile devices. When scrolling down and returning to the top, the navbar experiences glitches by hiding again. Attempting solutions from Bootstrap 4 S ...

javascripthtmljquerycsstwitter-bootstrap

How can I stop the softkeyboard from appearing in popups with an EditText field?

Is there a way to prevent the soft keyboard from popping up when displaying a pop-up that contains an edit text field? Whenever the pop-up appears, it moves up immediately. I tried using getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_S ...

javaandroid