I download a few tiles from OpenStreetMap (only for testing purpose).
Then i use the fantastical Leaflet javascript framework to view the interactive map, but when i open the browser i see the horizontal (Y) tiles images in inverted order.
What's the problem here ?? I'm doing something wrong ??
Here is my code (is simple enough):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="css/core.css" />
<link rel="stylesheet" href="css/leaflet.css" />
<script src="js/leaflet.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map').setView([-23.13, -82.38], 14);
L.tileLayer('tiles/{z}/{x}/{y}.png', {
minZoom: 12,
maxZoom: 16,
attribution: 'SampleMap',
tms: true
}).addTo(map);
</script>
</body>
</html>
And the resulting image is this (note that the rows are inverted). The expecting result is row 1,2,3 and are showed 3,2,1:
Any help appreciated.
The problem persist when i use http://tile.osm.org/{z}/{x}/{y}.png, so i'm storing the tiles in the right way.
I solve the problem only by quitting the tms: true line, i read a lot of tutorials using it to process off-line maps.
Expect that helps to someone else.
Related
I am driving crazy with this thing.
I am running a SPA in React, working fine on several hundreds of servers.
On a specific server of one of my customers (I mean: just one single server) there is a weird problem with svgs, let me explain.
The svg icons are in the DOM, but they don't show up. The svg tag is not even recognized by the browser DOM.
svg not recognized
I found that, if I try to edit HTML via inspector by adding a space after tag, the svg become magically appears.
adding a space after
...tadaaaa! magic
I am using iconify for React for rendering the svgs.
I tried also to run on the server this simple html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
</head>
<body>
<div id="app"></div>
</body>
<script>
const svg = `<svg xmlns="https://www.w3.org/2000/svg"
xmlns:xlink="https://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--dashicons"
width="18px"
height="18px"
preserveaspectratio="xMidYMid meet"
viewbox="0 0 20 20"
style="color: rgb(0, 113, 174);"
>
<path fill="currentColor" d="M6 15V2h10v13H6zm-1 1h8v2H3V5h2v11z"></path>
</svg>`;
document.getElementById('app').innerHTML = svg;
</script>
</html>
And this works fine.
Anyone can undestand what's the problem on this server?
Thanks in advance
M
What seems to be the official leafet.js uses this syntax
<!DOCTYPE html>
<html>
<head>
<title>Simple Leaflet Map</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="leaflet.css" />
</head>
<body>
<script src="leaflet.js"></script>
<div id="map" style="width: 600px; height: 400px"></div>
<script>
var map = L.map('map').setView([-41.2858, 174.78682], 14);
mapLink =
'OpenStreetMap';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
</script>
</body>
</html>
whereas the angular-leaflet-directive uses
<!DOCTYPE html>
<html ng-app="demoapp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
<script src="../dist/angular-leaflet-directive.min.js"></script>
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
<script>
var app = angular.module("demoapp", ['leaflet-directive']);
app.controller("BasicFirstController", [ "$scope", function($scope) {
// Nothing here!
}]);
</script>
</head>
<body ng-controller="BasicFirstController">
<leaflet width="100%" height="480px"></leaflet>
<h1>First steps, basic example</h1>
</body>
</html>
I realize that the angular-leaflet-directive probably extends the basic leaflet,js, but is there any compelling technical advantage to use one over the other?
I can get both to work, but I can't get either to work in a UI-Router` view, not even nested in another element (such as a table, for alignment).
I suspect that the directive probably offer more power and flexibility, so seek some canonical advice. Technical factors, especially simplicity, but with power, are important, of course, but so is support.
No opinion-based answers please.
I have started to use JSON editor library and angular wrapper from angular-tools/ng-jsoneditor.
The bug appears to be very annoying when switched to code view. Anyone had something similar?
Situation image
Situation image 2
Happens only when quotes appear on that line. Thats pretty every line for a JSON.
Using standart lib, nothing changed. I'm running out of ideas.
controller
$scope.obj = { data: null, options: { mode: 'code' } };
$scope.onLoad = function (instance) {
instance.expandAll();
};
view
<!DOCTYPE html>
<html ng-app="jsonapp" ng-controller="jsonController">
<head>
<meta charset="utf-8" />
<!-- when using the mode "code", it's important to specify charset utf-8 -->
<meta content="charset=utf-8">
<link href="jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
<script src="jsoneditor/dist/jsoneditor.min.js"></script>
</head>
<body>
<div ng-jsoneditor="onLoad" ng-model="obj.data" options="obj.options" style="height:800px"></div>
</body>
</html>
I had a similar problem, after a few hours of investigation finally I find that what causing it was the font-family style(I had global font for all app).
So I override it with ng-deep:: to font-family: monospace.
This was a solution in my case!
I want to use map tiles offline. The tiles are made with Maperitive. This is the HTML with leaflet JS:
<!DOCTYPE HTML>
<html>
<head>
<title>map - test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- leafletjs -->
<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>
<style>
body {
margin: 0;
padding: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map">
<script>
var map = L.map('map', {
maxZoom: 18,
minZoom: 16,
maxBounds: [
//south west
[47.918760313911896, 9.25198432059355],
//north east
[47.929235549307315, 9.26072925925386]
],
}).setView([47.923997931609605, 9.2563567899237054], 17);
L.tileLayer('../img/tiles/{z}/{x}/{y}.png', {
tms: true // Do I need that?
}) .addTo(map);
L.marker([47.92458, 9.25630]) .addTo(map);
</script>
</div>
</body>
</html>
The code works offline on my computer but non online on my server. The folder with the tiles is stored on the server. The path to the tiles is correct.
What is my fault?
I found the reason.
It´s not the code. The tile-PNGs caused a 403 error. I rendered the tiles with Maperitive on a Windows 8 computer. Then I transferred them to a Mac. From there I put them on the server via ftp.
Now I transferred the tiles directly from the Windows to the server. And all is ok.
What happens between the Windows and the Mac that corruptes the PNGs?
I am still learning the tricks to jQuery mobile and have been having a problem with the zooming in and zooming out of a picture/image on a data-role="page." Is there a way to make the pinch/zoom work on an image on the iPhone using jquery mobile? Cant get it to work on the iOS Simulator. Here is my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Web App</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=2" name="viewport">
<link href="jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<!-- This reference to phonegap.js will allow for code hints as long as the current site has been configured as a mobile application.
To configure the site as a mobile application, go to Site -> Mobile Applications -> Configure Application Framework... -->
<script src="/phonegap.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content" style="padding:0;">
<img src="coffee.gif" width="320" height="480" alt="coffee">
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Thanks so much for your help. Much appreciated.
-bob
edit the "viewport" in meta tag with this
<meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=2, minimum-scale=0.5, width=device-width, height=device-height, target-densitydpi=device-dpi" />
It's the viewport metadata property that controls those settings.
Follow this to see how to enable pinch & zoom on JQM iOS (shouldn't really matter that you are using PhoneGap).
Hope this helps.
When jQuery Mobile renders a page, it adds the following meta tag to
the head of the document.
<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport">
It is the minimum-scale=1, maximum-scale=1 part of
the tag which disables the pinch zoom. What we need to do is modify
the $.mobile.metaViewportContent variable. We can do this using the
following code.
$(document).bind('mobileinit', function(){
$.mobile.metaViewportContent = 'width=device-width';
});
If we want to restrict the amount of zooming, we can use the following:
$(document).bind('mobileinit', function(){
$.mobile.metaViewportContent = 'width=device-width, minimum-scale=1, maximum-scale=2';
});