expected result:
My understanding of the below scripts is that I should be able to uncomment the //src="PAWSmap.js"; line in the scripts portion of the HTML page, refer to the JavaScript file that should define the map I desire.
This would mean the JavaScript file would deal with the map and future data while the HTML would simply refer to that file to display it.
result:
The map box however does not show up in the web browser when I follow the above logic.
It DOES show up when I run the HTML as is below, where the map set up and var creating is held within the HTML script.
This despite having followed two tutorials that would suggest that I should be able to achieve the "expected" method, having followed them closely.
const apiKey = 'pk.eyJ1IjoibWF4ZHVzbyIsImEiOiJja3p3Mzh3cHQ4M2VuMm5waGE3c3NpcGRoIn0.RCKfV5n8aOn2AUbXiS2qqA';
var map = L.map('map',{
center: [43.64701, -79.39425],
zoom: 15
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
<!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.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<title>Document</title>
<style>
#map{
height: 800px;
width: 800px;
margin: 5rem auto;
}
</style>
<h2>
Critiacally Listed Species in BC
</h2>
</head>
<body>
<div id="map"></div>
<script>
//src="PAWSmap.js";
var map = L.map('map',{
center: [54.259070, -124.943178],
zoom: 6
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
</script>
</body>
</html>
Question:
Why is the reference to the JavaScript map file not working whereas the creation of the mapbox within HTML does work?
The syntax to load an external JavaScript file from your HTML page is:
<script src="path/to/file.js"></script>
Note that the src attribute and its value are within the <script> tag angle brackets, not as a child (i.e. not in between the opening and closing tags).
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script for further details about the syntax and possible attributes.
Related
This question already has answers here:
"Cross origin requests are only supported for HTTP." error when loading a local file
(30 answers)
Closed 1 year ago.
I have a very simple example map that I would like to add a shapefile to. The shapefile is zipped and I've checked that it shows up here http://leaflet.calvinmetcalf.com/#3/32.69/10.55, however it does not show up on my example map. Any help with this would be greatly appreciated.
Code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
<script src="Plugins//shp.js"></script>
<script src="Plugins//leaflet.shpfile.js"></script>
<!--
Needed?
-->
<style>
#map {
position: relative;
margin: 0 0 0 0;
height: 650px;
width: 700px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map', {
minZoom: 1,
maxZoom: 9
});
map.setView([34.15, -112.0], 7)
map.setMaxBounds(map.getBounds());
Streets = L.tileLayer(
'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYXVzdGluY2FyZXkiLCJhIjoiY2thanlmdGU4MGFjeTJ5bGJqcHgzZTB3NiJ9.qkuctvbWSIpVLidV8ptKcg', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
}).addTo(map);
var shpfile = new L.Shapefile('TestShapefile.zip');
shpfile.addTo(map);
var overlayMaps = {
"TestShapefile": shpfile
};
L.control.layers(overlayMaps).addTo(map);
</script>
</body>
</html>
In the Plugins folder that I reference I have the following javascripts:
leaflet.shpfile.js and
shp.js
This can happen if you have included a url with a domain different than yours, then you would receive a CORS error. It is purely for controlling what a domain can request from another one. f.i
var shpfile = new L.Shapefile("https://someOtherDomain.com/congress.zip");
So try placing the file locally . F.i where you have also your .js files like this:
var shpfile = new L.Shapefile("./congress.zip");
Here is a demo
Note also that you have to run your index.html inside a web server and not via the file system by opening the html file on the browser. An alternative would be to run it via a module bundler like webpack or parcel etc. similar to the demo.
I used window.print() function and saved to a .pdf file.
Inside the page I've saved there is a <a href="www.example.com"> tag. When I'm downloading the file from Chrome the link works and it opens the right page. When downloading it from Edge it won't work and stays as a simple text.
Any solution?
I tested and reproduced the issue. I think we can only use some plugins to generate the pdf to get the href link working in Edge Legacy.
You could use jsPDF to generate the PDF. Use .textWithLink() to mimic standard HTML hyperlinks:
doc.textWithLink(text, x, y, { url: url });
Sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
</head>
<body>
<script>
var doc = new jsPDF('p', 'pt');
doc.textWithLink('link', 20, 30, { url: 'http://www.google.com' });
doc.save("info.pdf");
</script>
</body>
</html>
Leaflet is open source and free. However the examples on leaflet site use Mapbox to render map. Mapbox is more expensive than Google map (Mapbox pricing).
The question is: can anyone use Leaflet really free?
You can use the Leaflet library for free, only the tileprovider used in the examples, Mapbox, asks money for serving tiles. You just need a free tileprovider like OpenStreetMap for instance:
var map = new L.Map('leaflet', {
center: [0, 0],
zoom: 0,
layers: [
new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © OpenStreetMap contributors'
})
]
});
body {
margin: 0;
}
html, body, #leaflet {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Leaflet 1.0.3</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/leaflet#1.0.3/dist/leaflet.css" />
</head>
<body>
<div id="leaflet"></div>
<script type="application/javascript" src="//unpkg.com/leaflet#1.0.3/dist/leaflet.js"></script>
</body>
</html>
I'm using Google Maps API v3, and the map language is set according to user's browser locale.
Is there a way to change this setting and force map to load in US English?
There is this, but it changes the region language, i.e. street names etc., I also want to control the map buttons and the interface language.
Try This:
<!DOCTYPE html>
<html>
<head>
<title>Localizing the Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=en"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
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"></div>
</body>
</html>
And you can load map in any specific language by passing the value of language code parameter with in this
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&language=en"></script>
Some example language codes are given here:
pass en for load map into english similarly ja for Japanese and
fr for French
I hope this is what you are asking for.
for more info click here
Happy coding!!
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.9&sensor=true&language=sa"></script>
i am using languague of saudi arabia
i want to work with google maps offline for my mobile application
i used html 5 and google maps to development my app
but some user needs use app offline
so i want to use appcache manifest
but it works for normal page that contains just js+css but does not
work for google maps
because google maps included that file and this is dynamic file
https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false
what should i do?
i made appCache as a below
cache.appcache file
CACHE MANIFEST
/index.html
NETWORK:
http://maps.gstatic.com/
http://maps.google.com/
http://maps.googleapis.com/
http://mt0.googleapis.com/
http://mt1.googleapis.com/
http://mt2.googleapis.com/
http://mt3.googleapis.com/
http://khm0.googleapis.com/
http://khm1.googleapis.com/
http://cbk0.googleapis.com/
http://cbk1.googleapis.com/
http://www.google-analytics.com/
http://gg.google.com/
http://csi.gstatic.com/
https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false/
http://mt0.google.com/
http://mt1.google.com/
http://mt2.google.com/
http://mt3.google.com/
http://maps.google.com/
http://maps.gstatic.com/
And then i made a html page that shows google maps
as a below
index.Html
<!DOCTYPE html>
<html manifest="cache.appcache">
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
But it does not work offline
you can see demo URL here