i have a little (maybe) stupid problem. I want to put a Leaflet map on a page, so i downloaded the .css file and the .js file, load it and nothing happens, it just put a gray div with + and - controls but no map, can someone help me?, thanks for your help.
my code is this:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Demo</title>
<link rel="stylesheet" href="styles.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk
/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet.js"></script>
<style type="text/css">
#map { height: 180px; }
</style>
</head>
<body>
<div id="map"></div>
</body>
<script type="text/javascript">
var map = L.map('map').setView([51.505, -0.09], 13);
</script>
</html>
And this is the console output:
Consider using 'dppx' units instead of 'dpi', as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (min-resolution: 144dpi) leaflet.js:6
Consider using 'dppx' units instead of 'dpi', as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (min-resolution: 144dpi)
Please double check you are setting everything correctly. Check out this getting started page. Looks like maybe you aren't referencing your tiles?
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([51.505, -0.09], 13);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
Related
I have a heck of a time getting plugins to load in leaflet. Not sure what I'm doing wrong. The files are on my local machine and are included in the html file but I still receive these two errors.
Loading failed for the with source
“.../Plugins/cluster/leaflet.markercluster-src.js”.
TypeError: L.markerClusterGroup is not a function index.js:15:17
Im assuming the type error is from the plugin not loading...
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Template</title>
<meta charset="utf-8" />
<!--LOADS leaflet.js FROM CDN-->
<script
src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin="">
</script>
<!--LOADS leaflet.css FROM CDN-->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<!--LOADS style_blank.css FOR LEAFLET-->
<link href="style_blank.css" type="text/css" rel="stylesheet">
<!--LOADS jquery-3.4.1.js FROM CDN-->
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous">
</script>
<!--LOADS markercluster css-->
<link href="Plugins/cluster/MarkerCluster.css" type="text/css" rel="stylesheet">
<link href="Plugins/cluster/MarkerCluster.Default.css" type="text/css" rel="stylesheet">
<!--LOADS markercluster plugin-->
<script src="Plugins/cluster/leaflet.markercluster-src.js"></script>
</head>
<body>
<div id="map"></div>
<!--CONTAINS GEOJSON DATA-->
<script src="Data/activeShops.js"></script>
<!--LOADS LEAFLET MAP DATA/CUSTIMIZATION-->
<script src="index.js"></script>
</body>
</html>
Javascript:
// starting location
var map = L.map('map',{
center: [41.05, -77.5],
zoom: 8,
minZoom: 2,
maxZoom: 18,
});
// tile layer
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: ""
}).addTo(map);
// markercluster plugin
var markers = L.markerClusterGroup();
var activeShops = L.geoJSON(activeShops);
markers.addLayer(activeShops);
map.addLayer(markers);
Are there any problems with my HTML or Javascript file that would prevent this plugin from loading? I have both .css files and javascript src file indluded in HTML as per the directions on github. Thank you.
I have the same problem..
the reason is that you load the leafletjs files from the leatflet repo, and this sends Content-Type: text/html for this files.
And this server sends a X-Content-Type-Options: nosniff header too.
The result is that your browser discovers that you try to load JavaScript and Css, but the content-type of the files behind the Url is not matching what makes your browser blocking this files from loading.
#see Mozilla developer docs - X-Content-Type-Options
The problem is, you must be on the server side of the loaded files to change the output headers.
The only "hack" to handle this behavoir I found in the question css-file-blocked-mime-type-mismatch-x-content-type-options-nosniff
But removing the rel attribute is a very dirty trick and there is no garanty that this will work in the future.
The only "clean" solution would be to download leaflet.js and leaflet.css and host them on your own webspace.
Plugins/cluster/leaflet.markercluster-src.js
Is this file exist in your project?
I know that I can add OpenStreetMap or Google Maps as basemaps in a web page. However, I am looking for a basemap that enhances the oceans. Is it possible to add an Esri ocean basemap to my html and javascript code? If so, where could I find the code?
EDIT: I have worked up some code. The map doesn't show up when I open it. What is wrong with my code?
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css" />
<script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>
<!-- Load Esri Leaflet from CDN -->
<script src="//cdn.jsdelivr.net/leaflet.esri/1.0.0/esri-leaflet.js"></script>
</head>
<body>
<div id="map" style="width: 1330px; height: 630px"></div>
<script>
var map = L.map('map').setView([54.296500, -2.209221], 5);
L.esri.basemapLayer('Oceans').addTo(map);
var popup = L.popup();
</script>
</body>
</html>
You would do it very similarly to your (HTML + JS) map that would have used OSM or Google Maps.
The idea is to use Leaflet mapping library, then load the correct tile source (ESRI Oceans in your case).
You can follow the example directly on ESRI-Leaflet plugin: http://esri.github.io/esri-leaflet/examples/showing-a-basemap.html
The list of available ESRI basemaps is there: http://esri.github.io/esri-leaflet/api-reference/layers/basemap-layer.html
Note that there are Terms of Use for using ESRI basemaps: https://github.com//Esri/esri-leaflet/wiki/FAQ#what-are-the-terms-of-use-for-esri-map-tiles
I have this page that uses Google Maps Javascript API (extPage.php):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var cord = new google.maps.LatLng(28.545078,-81.377196);
var mapOptions = {
zoom: 15,
center: cord,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"style="width:600px; height:500px"></div>
</body>
</html>
That page loads fine as is but I am trying to load into a div on another page. I am doing it like this (test.php):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#LoadBut").click(function() {
$("#extDiv").load('extPage.php');
});
});
</script>
</head>
<body>
<input type="button" id="LoadBut" value="Load">
<div id="extDiv"></div>
</body>
</html>
When I run it just like this I get an error ReferenceError: google is not defined. I've tried moving the <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> to the test.php page. The error message goes away but the map does not load.
I've never been to sure about the best way to handle Javascript on a page inside of a div like this.
Any help with this would be great.
Thanks!
From what I understand of your requirements, you can use the
Google Static Maps API, whcih does not require any JavaScript.
You just place an img tag with a reference to a static map url into your page with the appropriate parameters. For your example:
<div id="extDiv">
<img src="https://maps.googleapis.com/maps/api/staticmap?center=28.545078,-81.377196&zoom=15&size=600x500&maptype=roadmap&sensor=false" />
</div>
See the note at the top of the documentation to see if the inclusion of API keys are applicable to your project.
I am running Mac OSX Lion and Xcode 4.1.1. I created a new Phonegap project and in the index.html, I added the following code.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js">
</script>
<!-- Tried setting sensor=true, didn't work too -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript" charset="utf-8" >
function display(position){
var initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var myOptions = {
zoom: 12,
center: initialLocation,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function error()
{
alert('Not working');
}
function init()
{
navigator.geolocation.getCurrentPosition(display,error);
}
</script>
</head>
<body onload="init()">
<div id="map_canvas"></div>
</body>
</html>
The code however, refuses to work. I even enabled the key "EnableLocation" in my Phonegap.plist. I don't get any sort of warning saying "Testapp would like to know your location, Allow?". All I get is this error on the console
navigator.geolocation.setError({ 'code': 1, 'message': 'Location Services Not Enabled' });
Can someone please help me out?
I wish I knew what to tell you, but I hope this helps. I think your code is fine. I just ran it on the iOS 4.3 simulator from Dreamweaver on Snow Leopard and it worked fine. However, I had to make some adjustments because the DIV was completely collapsed. The map was in there, but it was not showing.
Just to prove it to yourself, try adding this to your map_canvas div
style="height: 400px"
When I did that, I could see the map fine.
I am not CSS expert, so I do not know how to make the stupid div expand to the size of the map. Maybe you'll have to do it with CSS. Height 100% didn't work. Sometimes CSS really blows.
Hope someone can help me out. I found this nice jQuery plugin to display vector maps in our intranet but I'm not able to create the HTML code to make it work.
http://jvectormap.owl-hollow.net/
I would appreciate your assistance or guidance.
Thank you,
Tony
Probably you forgot to set size of container inside of which you want to place the map. This should work:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="jquery.vector-map.css" type="text/css" media="screen" />
<script src="jquery-1.6.min.js"></script>
<script src="jquery.vector-map.js"></script>
<script src="world-en.js"></script>
<script>
$(function(){
$('#map').vectorMap();
});
</script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
</body>
</html>
I will add width and height parameters in the next version
You must set your map. which name is on top of map.js. Probably you forgot
$('#map').vectorMap({map: 'europe_en'});