I'm using the French IGN Leaflet extension (which use Proj4Leaflet internally) to display maps with a different coordinates system (Lambert 93 and not WGS 84). I would like to know if there is a way to call setView, add a marker, ... using the same coordinates system that the one defined in the crs property (without to do the transformation manually) ?
Actually, I have the following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebApplication1</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="lib/leaflet/leaflet.css" />
<script type='text/javascript' src="lib/leaflet/leaflet.js"></script>
<link rel="stylesheet" href="lib/leaflet.geoportal/GpPluginLeaflet.css" />
<link rel="stylesheet" href="lib/leaflet.geoportal/GpPluginLeaflet-src.css" />
<link rel="stylesheet" href="lib/leaflet.geoportal/GpPluginLeaflet-map.css" />
<script type='text/javascript' src="lib/leaflet.geoportal/GpPluginLeaflet.js"></script>
<script type='text/javascript' src="lib/leaflet.geoportal/GpPluginLeaflet-src.js"></script>
<script type='text/javascript' src="lib/leaflet.geoportal/GpPluginLeaflet-map.js"></script>
</head>
<body>
<div id="map" style="padding:5px; width:100%;height:800px;"></div>
<script>
function go() {
var town1 = [48.845, 2.424];
var map = L.map('map', {
crs: L.geoportalCRS.EPSG2154,
}).setView(town1, 18);
var layer = L.geoportalLayer.WMTS({ layer: "ORTHOIMAGERY.ORTHOPHOTOS.BDORTHO.L93" });
layer.addTo(map);
map.addControl(L.geoportalControl.LayerSwitcher());
var town2= [46.7833300, 4.8500000];
#*var town2= [841126, 6633116];*#
var marker = L.marker(town2);
marker.addTo(map);
map.setView(town2, 18, L.geoportalCRS.EPSG2154);
}
Gp.Services.getConfig({ apiKey: "jhyvi0fgmnuxvfv0zjzorvdn", onSuccess: go });
</script>
</body>
</html>
But as you can see, the setView and the add of a marker is done using the WGS84 system coordinates. I would like to be able to do it using the same system that the one defined in crs.
I can transform the coordinates manually but I expected that Proj4Leaflet would do it automatically.
Could you tell me if there is a way to do it or not ?
Related
I have been using the chalkboard plugin for a reveal presentation. As it is written on the github page (https://github.com/rajgoel/reveal.js-plugins/tree/master/chalkboard), I saved the drawings in a json file by pressing d (as far as I can tell, the data was correctly stored in the json file) and then I added the line src: "prova/cb.json", to the initialization for chalkboard and loaded the presentation with ?print-pdf.
However, when I open the presentation, there is no trace of the drawings that should be loaded.
This is the html of a minimal (non) working example...
Does anyone know what's going on?
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Prova</title>
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/night.css" id="theme">
<link rel="stylesheet" href="plugin/highlight/monokai.css" id="highlight-theme">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section >
<h4>Prova</h4>
</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script src="plugin/zoom/zoom.js"></script>
<script src="plugin/math/math.js"></script>
<script src="plugin/chalkboard/plugin.js"></script>
<script>
Reveal.initialize({
hash: true,
controls: false,
transition: 'convex',
math: {
mathjax: 'http://cdn.mathjax.org/mathjax/latest/MathJax.js',
config: 'TeX-AMS-MML_HTMLorMML'
},
chalkboard: {
src: "prova/cb.json",
toggleChalkboardButton: { left: "80px" },
toggleNotesButton: { left: "130px" },
},
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, RevealZoom, RevealMath, RevealChalkboard ],
});
</script>
</body>
</html>
I use leaflet to display my geolocated picture on my website (you can see my test site here: http://test.vincentbourganel.fr/pages/map-osm/)
everthing goes fine exept one thing:
when I browse my website from an ios mobile device (ios 11.3.1), no markers are displayed.
I can't figure where is the matter.
I try to have a reduce test case (only html, outside zenphoto, used for my gallery) with only 2 markers but the issue remains the same.
You can see it here:
http://test.vincentbourganel.fr/test_osm_map.html
can you point me to the right direction to solve this issue?
thanks for your help!!
vincent
edit after comment:
there is the code of my page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<script type="text/javascript" src="/zp-core/js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet.css" />
<link rel="stylesheet" type="text/css" href="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/zp_openstreetmap.css" />
<script src="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet.js"></script>
<script src="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet-providers.js"></script>
<title>[VB] Photo US | Map OSM</title>
</head>
<body>
<h3>Map OSM</h3>
<div id="osm_map" style="width:100%; height:600px;"></div>
<script>
var map = L.map('osm_map', {
zoom: 4,
zoomControl: false,
minZoom: 2,
maxZoom: 18
});
L.tileLayer.provider('OpenTopoMap').addTo(map);
L.control.zoom({position: 'topleft'}).addTo(map);
L.marker([57.150,-6.100]).addTo(map);
L.marker([57.500,-6.450]).addTo(map);
map.fitBounds([
[57.150,-6.100], [57.500,-6.450]
]);
</script>
</body>
</html>
there is the code of my test case taht you can see here: http://test.vincentbourganel.fr/test_osm_map.html
I am unable to see the 2 markers on my ios mobile device.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<script type="text/javascript" src="/zp-core/js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet.css" />
<link rel="stylesheet" type="text/css" href="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/zp_openstreetmap.css" />
<script src="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet.js"></script>
<script src="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet-providers.js"></script>
<title>[VB] Photo US | Map OSM</title>
</head>
<body>
<h3>Map OSM</h3>
<div id="osm_map" style="width:100%; height:600px;"></div>
<script>
var map = L.map('osm_map', {
zoom: 4,
zoomControl: false,
minZoom: 2,
maxZoom: 18
});
L.tileLayer.provider('OpenTopoMap').addTo(map);
L.control.zoom({position: 'topleft'}).addTo(map);
L.marker([57.150,-6.100]).addTo(map);
L.marker([57.500,-6.450]).addTo(map);
map.fitBounds([
[57.150,-6.100], [57.500,-6.450]
]);
</script>
</body>
</html>
I'm following the basic tutorial for Leaflet-angular-directive. I am able to see the leaflet map component display in the browser, but the map is blank. The example:
<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 don't see where the API key or tile urls is passed, or is it not required?
Thanks!
You code is ok. It works form me with these dependencies ( Angular 1.4.9 ) :
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-mocks/angular-mocks.js"></script>
<script src="angularLealeft/angular-leaflet-directive.min.js"></script>
There is no need for API key.
I updated leaflet elevation example gpx just changing the gox name, working locally on win 7 or OS X and Safari or Chrome. Nothing shows up.
var map = new L.Map('map');
var url = 'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg',
attr ='Tiles Courtesy of MapQuest — Map data © OpenStreetMap contributors, CC-BY-SA',
service = new L.TileLayer(url, {subdomains:"1234",attribution: attr});
var el = L.control.elevation();
el.addTo(map);
var g=new L.GPX("./maggiore.gpx", {
async: true,
marker_options: {
startIconUrl: './lib/leaflet-gpx/pin-icon-start.png',
endIconUrl: './lib/leaflet-gpx/pin-icon-end.png',
shadowUrl: './lib/leaflet-gpx/pin-shadow.png'
}
});
g.on('loaded', function(e) {
map.fitBounds(e.target.getBounds());
});
g.on("addline",function(e){
el.addData(e.line);
});
g.addTo(map);
map.addLayer(service);
<link href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" rel="stylesheet"/>
<head>
<title>Leaflet.Elevation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style>
html, body, #map {
height:100%;
width:100%;
padding:0px;
margin:0px;
}
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.ie.css" /><![endif]-->
<link rel="stylesheet" href="../dist/Leaflet.Elevation-0.0.2.css" />
<script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script type="text/javascript" src="../dist/Leaflet.Elevation-0.0.2.min.js"></script
><script type="text/javascript" src="./lib/leaflet-gpx/gpx.js"></script>
</head>
<body>
<div id="map"></div>
All I get is a grey page with zoom control and an empty diagram
do you have the leaftlet.elevation dist files ?
looking at your example you have :
<link rel="stylesheet" href="../dist/Leaflet.Elevation-0.0.2.css" />
<script type="text/javascript" src="../dist/Leaflet.Elevation-0.0.2.min.js"></script
you may copy these files to the lib folder.
I have all the OG tags specified but Facebook still can't read my website. What's wrong?
Here is my HEAD section
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://www.mojadebica.pl/kryminalne/1392-akcja-trzezwy-poranek-na-podkarpaciu" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="Dębica, pizzerie, pizza, wyszukiwarka, jedzenie, na, wynos, dyżury, aptek, noclegi, reklama, strony www, portal, informacje, ogłoszenia, repertuar kin, oferty, pracy, forum, org, nasza" />
<meta name="og:image" content="http://www.mojadebica.pl/images/thumbs/poranek.jpg" />
<meta name="og:type" content="article" />
<meta name="title" content="Akcja 'Trzeźwy poranek' na Podkarpaciu" />
<meta name="og:title" content="Portal MojaDebica.pl" />
<meta name="og:url" content="http://www.mojadebica.pl/kryminalne/1392-akcja-trzezwy-poranek-na-podkarpaciu" />
<meta name="og:site_name" content="E-max" />
<meta name="og:description" content="Moja Dębica - najnowsze informacje i aktualności z Dębicy. Największa baza ofert pracy, ogłoszenia z dębicy i okolic oraz wyszukiwarka pizzy!" />
<meta name="description" content="Moja Dębica - najnowsze informacje i aktualności z Dębicy. Największa baza ofert pracy, ogłoszenia z dębicy i okolic oraz wyszukiwarka pizzy!" />
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
<title>Akcja "Trzeźwy poranek" na Podkarpaciu</title>
<link href="/templates/back-to-nature/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="/media/system/css/modal.css" type="text/css" />
<link rel="stylesheet" href="/components/com_k2/css/k2.css" type="text/css" />
<link rel="stylesheet" href="/components/com_jcomments/tpl/default/style.css?v=12" type="text/css" />
<script type="text/javascript" src="/media/system/js/mootools.js"></script>
<script type="text/javascript" src="/media/system/js/modal.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="/components/com_k2/js/k2.js"></script>
<script type="text/javascript" src="/components/com_jcomments/js/jcomments-v2.1.js?v=7"></script>
<script type="text/javascript" src="/components/com_jcomments/libraries/joomlatune/ajax.js?v=3"></script>
<script type="text/javascript" src="/media/system/js/caption.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
SqueezeBox.initialize({});
$$('a.modal').each(function(el) {
el.addEvent('click', function(e) {
new Event(e).stop();
SqueezeBox.fromElement(el);
});
});
});
var K2SitePath = '/';
</script>
<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/templates/mdnew/stylemd4.4.css" type="text/css" />
<link rel="shortcut icon" href="/templates/mdnew/favicon.ico" />
<!--[if lte IE 6]>
<link href="/templates/back-to-nature/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-15391002-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
And here is sample article:
http://www.mojadebica.pl/video/1388-sonda-gdzie-jest-najlepsze-jedzenie-w-debicy-video-hd
Missing Required Property: The 'og:url' property is required, but not present.
but it's specified here:
<meta name="og:url" content="http://www.mojadebica.pl/kryminalne/1392-akcja-trzezwy-poranek-na-podkarpaciu" />
Your problem is with your webserver configuration.
In your response headers, your server is sending Content-Encoding: none. This is not valid.
There may be additional rules in there that are sending the Facebook parser a 403: Forbidden reply.
If you host with an ISP, contact them about this problem. If you're rolling your own server, you'll need to dig into the LiteSpeed documentation.