Is there a way to display a map for a given area completely offline using HTML and JavaScript? I am looking for a mobile-friendly (read Cordova-enabled) solution.
There is an elegant solution for this problem in this blog post. I have compiled a full code example from it. Here are the steps:
1. Create map tiles
download Mobile Atlas Creator
create a new atlas with OSMdroid ZIP format
make map and zoom selection, add your selection to the atlas
click "Create atlas"
unzip the atlas file
your tiles have this format: {atlas_name}/{z}/{x}/{y}.png ({z} stands for "zoom")
2. Set up HTML and JavaScript
copy your atlas folder to your HTML root
download leaflet.js and leaflet.css and copy them to html root
create index.html with the code below
adjust starting coordinates and zoom on the line where var mymap is defined
change atlasName to your folder name, set your desired maxZoom
3. You are all set! Enjoy!
run index.html in your browser
<!DOCTYPE html>
<html>
<head>
<title>Leaflet offline map</title>
<link rel="stylesheet" charset="utf-8" href="leaflet.css" />
<script type="text/javascript" charset="utf-8" src="leaflet.js"></script>
<script>
function onLoad() {
var mymap = L.map('mapid').setView([50.08748, 14.42132], 16);
L.tileLayer('atlasName/{z}/{x}/{y}.png',
{ maxZoom: 16 }).addTo(mymap);
}
</script>
</head>
<body onload="onLoad();">
<div id="mapid" style="height: 500px;"></div>
</body>
</html>
you should do these steps one by one
Download the mbtiles file of the specific area from https://openmaptiles.org/
establish the Map Server by Docker
implement the web pages by Leaflet.js and use the map server IP address in your codes.
Related
I have an issue with the path definition of the libraries and models that are used in an HTML file using WebGL. The HTML file can be found here, which is an example code for a WebGL2 book.
The HTML file itself is sitting locally in the following directory in my computer.
C:\Users\bob\Desktop\Book\ch01\ch01_04_showroom.html
The libraries and other sources are located in
C:\Users\bob\Desktop\Book
├───ch01
| └───ch01_04_showroom.html
├───ch02
└───common
├───images
│ └───cubemap
├───js
├───lib
└───models
├───audi-r8
├───bmw-i8
├───ford-mustang
├───geometries
├───lamborghini-gallardo
└───nissan-gtr
The parts of the code that I have issues with are in the following
ch01_04_showroom.html
<html>
<head>
<title>Real-Time 3D Graphics with WebGL2</title>
<link rel="shortcut icon" type="image/png" href="/common/images/favicon.png" />
<!-- libraries -->
<link rel="stylesheet" href="/common/lib/normalize.css">
<script type="text/javascript" src="/common/lib/dat.gui.js"></script>
<script type="text/javascript" src="/common/lib/gl-matrix.js"></script>
<!-- modules -->
<script type="text/javascript" src="/common/js/utils.js"></script>
<script type="text/javascript" src="/common/js/EventEmitter.js"></script>
<script type="text/javascript" src="/common/js/Camera.js"></script>
...
<script type="text/javascript">
'use strict';
// ...
function configure() {
carModelData = {
// This is the number of parts to load for this particular model
partsCount: 178,
// The path to the model (which I have issue with on my computer)
path: '/common/models/nissan-gtr/part'
};
}
...
I have issue defining the path for hrefs and srcs. Also the one in the javascript function:
path: '/common/models/nissan-gtr/part'
If I use the code as it is posted in here nothing will be displayed in my Google Chrome, just an empty page.
So, I have changed paths from
/common
to relative paths:
./../common
but still, I am not able to load the HTML correctly. I see the gridded floor with an incomplete menu but the car is not displayed yet as in the following snapshot.
It's a security, Chrome doesn't let you load local files through file:///... for security reasons.
The purpose of this security is to prevent external resources from gaining access to your system, which could allow them to modify or steal files
Solutions
The best solution is to run a little http server locally since you can follow the steps from this SO answer or this one.
Or, maybe others will bring it up so I'll mention it, you can also launching Google Chrome from the command line with the flag: --allow-file-access-from-files, but this isn't recommended since Chrome doesn't allow this behaviour to protect you.
So I am working on a project for my rPi which collects network speed information and logs it in a webserver locally. The Script is working all fine, but for some reason the JQuery code runs differently in Windows (where it read a file and displayed correctly) as in my rpi. Let me explain: The file is modified every so often to change what is displayed in the webserver so it is up-to-date. For some reason, without modifying anything, the JQuery code reads the file incorrectly (old data after changing the file, even after restarting the whole program). I have even tried to move the file out of the dir it was in, to verify that there wasn't any other duplicate file, and there wasn't another.
This is the HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src='jquery-3.6.0.min.js'></script>
<script>
$.get('./assets/current.txt', function(data) {
var items = data.split(',');
$('#date').html(items[0]);
$('#ping').html(items[1]);
$('#download').html(items[2]);
$('#upload').html(items[3]);
})
</script>
<p>Date: <span id="date"></span></p>
<p>ping: <span id="ping"></span> ms</p>
<p>dowload: <span id="download"></span> MB/s</p>
<p>upload: <span id="upload"></span> MB/s</p>
</body>
</html>
This behaviour is possible if browser is caching the file. In order to force the file from server all the time extend the url as $.get('./assets/current.txt?_u='+Date.now(), function (){...})
I am following the introduction to Leaflet from https://maptimeboston.github.io/leaflet-intro/. At the first Rat Map, my code failed to show the rodent objects/locations on the map. I c/v the tutorial code directly and still failed to get objects on my map. All of the necessary files are in the same directory (and are appropriately named) as the html file being used.
I'm new to HTML, GeoJSON, and have been unsuccessful in finding a method that I could use to troubleshoot. The data files are complete and have all of the values/objects expected. I'm used to Python/R/VBA, so not having an error message is new to me as well.
I am running the HTML file through a Chrome browser. The HTML files are being written in Sublime Text
//make sure you have the jQuery and rodent GeoJSON files in HTML directory
<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="jquery-2.1.1.min.js"></script>
<style>
#map{ height: 100% }
</style>
</head>
<body>
<div id="map"></div>
<script>
// initialize the map
var map = L.map('map').setView([42.35, -71.08], 13);
// load a tile layer
L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
{
attribution: 'Tiles by MAPC, Data by MassGIS',
maxZoom: 17,
minZoom: 9
}).addTo(map);
// load GeoJSON from an external file
$.getJSON("F://FinanceServer//HTML//rodents.geojson",function(data){
// add GeoJSON layer to the map once the file is loaded
L.geoJson(data).addTo(map);
});
</script>
</body>
</html>
I was expecting to see something resembling the third map from the aforementioned tutorial site.
The URL to your local file should never work, especially as an absolute path.
Browsers prevent you from accessing the client file system, for well known security reasons.
Even if you open your HTML page directly from file system (with file:// protocol), Chrome browser prevents you from making AJAX requests to other local files. Last time I tried it works in other browsers, though.
Even if you use another browser, your URL should be relative, or specify the protocol / start with double slash to make it absolute.
To avoid most of these limitations, the standard practice in web development is to serve files with a small local server.
So I have this project, and to actually start it I need to make a processing.js canvas using an HTML file. When I load my file in Chrome, the page says there is a canvas but it will not load the code.
The file is located as follows: E:\Final Project\COLS-1100
The HTML file is called index.html and is located directly in this folder. Also here are folders called lib and pjs. Pjs holds game.pde, the processing file. Lib holds the processing.js library, called processing.js.
The html code looks like this:
<!--COLS PROJECT-->
<!DOCTYPE html>
<html>
<head>
<title>-----------</title>
<script src="H:\Final Project\COLS-1100\lib\processing.js"></script>
</head>
<body>
<canvas id="gameCanvas" data-processing-sources="\Final Project\COLS-1100\pjs\game.pde"></canvas>
</body>
</html>
The game.pde code looks like this so far:
void setup() {
size(400, 400);
background(100);
};
void loop() {
};
I have the suspicion that my issue is simply that I have written my directories wrong.
I am trying to create a website to upload a file to Google Drive from my website, but I have had a lot of trouble.
I have used this code:
<!DOCTYPE html>
<html>
<head>
<title>Save to Drive Demo: Explicit Render</title>
<link rel="canonical" href="http://samrobbins.125mb.com/googledrive.html">
<script src="https://apis.google.com/js/platform.js">
{parsetags: 'explicit'}
</script>
</head>
<body>
Render the Save to Drive button
<div id="savetodrive-div"></div>
<script>
function renderSaveToDrive() {
gapi.savetodrive.render('savetodrive-div', {
src: 'http://samrobbins.125mb.com/knowledgebase.py',
filename: 'Cat.py',
sitename: 'The electronic cat database'
});
}
document.getElementById('render-link').addEventListener('click', renderSaveToDrive);
</script>
</body>
</html>
But when I load it, it says there is Failed Upload HTTP error (6)
Is there any way to stop this?
http error 6 is could not resolve host name. Your server may be down or the data-src server may be down. Try later.
You are sharing from a google drive. the default visibility of a google drive doc is private. You should change this to public.
Check the box next to a file/folder and click the Share button at the top of your file list