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?
Related
so I made a map using leaflet and want to add it into a Wikipage on my Mediawiki. Via the "MediaWiki:Common.js"-File I can load the HTML of my map into the page, as explained here.
But Leaflet requires me to add there css-File and there Javascript in the header like so:
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
Is there a way to load them through the Common.js?
I have an index.ejs file that I am using with Express for a localhost web server and I am getting 4 errors of 2 types:
Errors
Here is my code:
<html>
<head>
<title>Home</title>
<!-- <link rel="stylesheet" type="text/css" href="styles/main.css"> -->
<link rel="stylesheet" type="text/css" href="styles/mobile.css">
<link rel="icon" href="public/styles/images/icon.png">
</head>
<style type="text/css">
#import url("styles/main.css");
</style>
<body>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
<script type="text/javascript" src="scripts/javascript/main.js"></script>
<script type="text/javascript" src="scripts/javascript/mobile.js"></script>
</body>
I tried making test CSS and JavaScript files in the same directory as the index.ejs file but I got errors for those as well. When I change the file type to index.html, there are no errors which was interesting. If someone could tell me why that is that would help a lot. Thanks!
I've never seen the #import url("styles/main.css"); method, so I can't say it won't work.
Typically you get that error when you have an error in your css/js path, or your didn't properly configure your public folder on your app.js.
Make sure you have app.use(express.static('public'));, and that you have a folder called public, which has the following folders: css, js, images. Put all of your js/css/images in these folders.
Then on your index.ejs change the following:
//to reference a css file:
<link rel="stylesheet" src="/css/yourFile.css">
//to reference a js file:
<script href="/js/yourFile.js"></script>
//to reference an image:
<link rel="icon" src="/images/yourImage.png">
Kind of stuck here. I am adding a very simple google map to my webpage, and using the basic javascript API to do so. Everything works fine in chrome, but with internet explorer it works occasionally. The error that comes up is:
SCRIPT5022: InvalidValueError: initMap is not a function js, line 102
character 390
the error refers to the call to google maps API, not in my js.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Under Construction</title>
<link rel="shortcut icon" href="images/betterlogo.ico" type="image/x-icon">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/thumbnails.css">
<link rel="stylesheet" href="css/main.css">
<!-- JS -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script src='js/device.min.js'></script>
</head>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="container-fluid">
<div id="map-canvas"></div>
</div>
</div>
<--some more code filler that nobody needs to see,-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.ui.accordion.min.js"></script>
<script src="js/wow.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDFmJX1o4ocAPluAPlDWlh-VX_35iwc23o&libraries=places&callback=initMap" async defer></script>
<script src="js/main.js"></script>
and my javascript:
function initMap() {
var myLatLng = {lat:40.4917507, lng:-74.2971267};
var map = new google.maps.Map(document.getElementById('map-canvas'),{
center: myLatLng,
zoom: 15
});
var marker = new google.maps.Marker({
position: myLatLng,
map:map,
title:"abc"
});
google.maps.event.addDomListener(window, "resize", function(){
var center=map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
})
}
So I moved my main.js file above the call to the googlemaps API and it fixed the problem. I am assuming that the the call was being made before all my javascript loaded, hence the callback to the mapsInit didn't exist yet. Would love some feedback if my thinking is correct/incorrect. Thanks
<script src="js/main.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDFmJX1o4ocAPluAPlDWlh-VX_35iwc23o&libraries=places&callback=initMap" async defer></script>
I was getting the same error as above, but the marked answer didn't help. If anyone is getting the initMap error only on Internet explorer it could be because you are using JavaScript that is too modern for Internet Explorer including 'template literals' and 'arrow functions'. I went through my code and replaced them with older code which removed this error. Hopefully that will save someone the hours of debugging I went through...
I'm having trouble figuring out how to use the gmaps plugin. I've followed the example given and even looked at the page source and copied it, yet I still have no progress.
This is my chunk of html with js files included.
<!DOCTYPE html>
<html>
<head>
<title>testss</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/javascripts/maps.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link href='//fonts.googleapis.com/css?family=Convergence|Bitter|Droid+Sans|Ubuntu+Mono' rel='stylesheet' type='text/css' />
<script>
$(document).ready(function(){
var map = new GMaps({
div: '#map', lat: -12, lng: -77
});
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
I'm getting these errors:
Uncaught Google Maps API is required. Please register the following JavaScript library
http://maps.google.com/maps/api/js?sensor=true. maps.js:22
Uncaught ReferenceError: GMaps is not defined
Not sure why this issue is appearing since I've included the file. Any ideas are much appreciated!
If this helps, I'm using node.js and express on localhost.
That's a dependency error. Include http://maps.google.com/maps/api/js before your call to /javascript/gmaps.js
The error is in the registration url of google maps api. Please use https instead of http.
Include this url:
https://maps.google.com/maps/api/js?sensor=true
I'm not sure, who was using the wrong documentation your or I, but this seems to be working quite fine:
<!DOCTYPE html>
<html>
<head>
<title>testss</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/javascripts/maps.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<link href='//fonts.googleapis.com/css?family=Convergence|Bitter|Droid+Sans|Ubuntu+Mono' rel='stylesheet' type='text/css' />
<script>
$(document).ready(function(){
var map = new google.maps.Map(
document.getElementById('map'),
{
zoom: 15,
center: new google.maps.LatLng(-12, -77)
}
);
});
</script>
</head>
<body>
<div id="map" style="height: 20em;"></div>
</body>
</html>
edit: I just realized you were trying to use gmaps.js - but in that case you're missing the gmaps.js file unless that is what your maps.js was for.
You can download the current version at: https://raw.githubusercontent.com/HPNeo/gmaps/master/gmaps.js
When looking at various web pages, I sometimes see statements like the following in the source. These examples are taken from a few different sites.
<script type="text/javascript" src="js/jquery.min.js?v=1.5.1"></script>
<script type="text/javascript" src="js/jquery-ui.custom.min.js?v=1.8.13"></script>
<script type="text/javascript" src="/js/skin/core.js?ver=5212"></script>
<script type="text/javascript" src="/js/skin/plugins.js?ver=5212"></script>
<script type="text/javascript" src="/js/skin/mainpage.js?ver=5212"></script>
<link rel="stylesheet" href="/css/site.css?ver=5212" media="screen" />
<link rel="stylesheet" href="/css/global.css?v=04.23.2012.01" type="text/css" />
<script type="text/javascript" src="/stuff/lib/site.js?v=04.20.2012.00"></script>
<link rel="stylesheet" type="text/css" href="http://css.nyt.com/css/0.1/screen/build/homepage/styles.css?v=20120119">
Can someone explain what these are for and what script is being used for it? Is this so different versions of CSS/JS can be kept and sent based on the version number?
This is for cache-busting; changing the parameter ?whatever forces the browser to download the file again instead of fetching it from the cache.
It's there so browsers that have cached a previous version of those files will request a new copy. By adding the version numbers or dates they are essentially creating a new name for the file thus bypassing caching.